Steve Schoger
@steveschoger
Followers
120K
Following
14K
Media
1K
Statuses
8K
🔥 Excited to announce that Refactoring UI is now available! . It's everything we know about designing for the web, packed into a single comprehensive resource. Get it during the launch for up to 40% off 👉🏻.
165
715
3K
🔥 Don't be afraid to "think outside the database" — your UI doesn't need to map one-to-one with your data's fields and values. Here are a few ideas you can use to present "field: value" data in a more interesting way:
114
3K
14K
🔥 When implementing dark mode, don’t throw away the visual cues in the light version by naively inverting the color scheme. Close elements should still be lighter and distant elements should still be darker – even in a dark UI.
70
2K
9K
🔥 When making a design responsive, don't stop at simply making things fit on smaller screens – look for ways to borrow usability patterns from native mobile apps, too. For example, anchoring modals to the bottom of the screen instead of the center, making them easier to reach.
64
1K
7K
🔥 Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle:
43
845
5K
🔥 If you're working with images that sometimes bleed into the background, try using a subtle inner shadow to create some distinction instead of a border. Borders will often clash with the image, while most people will barely realize the shadow is even there.
46
785
5K
🔥 One way to make a boring form look more interesting is to draw inspiration from how the output of the form is designed. Here are a few ways you can reuse your existing design decisions to make a form more exciting:
33
690
4K
🔥 Get creative with table design — table cells can contain more than simple unstyled text. Here are a few ways to make tables look more interesting:
42
746
4K
🔥 When designing a chart, using a variety of colors might seem like a good idea at first but it can make it a lot harder for people with color blindness to interpret the data. Instead, try using multiple shades of the same hue — it's more accessible and looks better too 🥳
70
862
4K
This is my son, Freddie, who we brought into the world early this morning 🥰
306
21
4K
🔥 Be conservative with how you use brand colors in your designs — you’d be surprised how little color you need to make your designs feel colorful.
28
380
4K
💡 Looking for mobile menu ideas for your next project?. Here's a simple visual reference that demonstrates some of my favorite patterns 👉
38
397
4K
When designing an app, I find it really helpful to have a few reference examples to help validate UI/UX pattern ideas. Here are a few of my favourites that I have bookmarked. Any other apps I should check out?
92
451
4K
🔥 Get creative with radio button interfaces — don’t be limited by the typical list-of-options approach. For example, using selectable cards gives you the freedom to present the options in a more exciting way:
27
519
3K
🔥 Blank states don't just have to be the empty version of the regular filled state. By thinking of them as a separate UI, you can design them in a way that is more exciting and more helpful to someone getting started.
21
581
3K
🔥 Achieving an accessible contrast ratio is very difficult when using white text on a colored background. Using dark colored text on a soft colored background is much easier to make accessible, and usually looks better to boot 👌
33
541
3K
🔥 One small design detail that new designers often overlook is letter-spacing. Tricks like making headlines slightly condensed or giving small uppercase text a bit more space can go a long way towards giving a design that final level of polish.
35
366
3K
🔥 Overlapping images is a great way to add depth to an interface and make it look more “designed”. Use a border that matches the background color to create distinction and keep things looking clean 👌
24
373
3K
Designing for dark mode as an afterthought can be really tricky. Here are a few things you can try that might help you be more successful 🧵
38
346
3K
🔥 Pure grey text always looks "off" on a colored background. A quick fix is to saturate your text with a bit of the background hue.
12
212
3K
🔥 Dropdowns can be more than just a boring list of links. They're just boxes, you can do anything you want with them!. For example, this two-column layout is great when you want to add supporting text:
21
377
3K
🔥 This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.
19
261
3K
🔥 If you're tired of using outline styles for secondary buttons, a soft solid background based on the text color can be a great alternative.
24
358
2K
🚀 Just open-sourced the icon set I've been working on for Tailwind UI. You can start using them on your projects today.
48
522
2K
🎉 Excited to announce Refactoring UI, the book! . Coming this fall 🤙.
84
355
2K
🔥 If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.
12
359
2K
🔥 Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.
14
261
2K
Does anyone have recommendations for nice agency websites?. Here are a few of my favourite so far:
204
141
2K
A lot of developers will tell me that you can learn to code but you can’t learn design. Learning design requires the same skill as learning to code: the ability to sit down and focus on learning it for many hours at a time.
55
312
2K
🔥 Designing nice tables can be tough, but here's a few ideas that can make a big difference:
25
247
2K
🔥 When things get closer they cover more of what’s behind them, which means they shouldn’t be perfectly aligned with things in the background. We can emulate this in UI design by slightly offsetting elevated elements so they extend beyond the edges of the elements they conceal.
21
205
2K
🔥 Using the same line-height for all text is a very subtle but common mistake. 1.5 may work great for body copy, but as text gets larger, your line-height should get tighter.
12
263
2K
🔥 Deeply nested sidebar navigation can quickly become complex and overwhelming. A great alternative is to split your layout into sections and give each section its own navigation.
33
334
2K
My favourite visual design trick at the moment: Reduced opacity on overlapping elements. It's subtle but it's a nice touch that looks great on marketing page sections like this testimonial 😍
20
130
2K
🔥 Labels for checkboxes and radio buttons can be more complex than just a simple string. Using techniques like color, weight, size, and position to emphasize what’s important can help create a pleasant visual hierarchy that looks 10x more polished.
12
196
2K
Working on a new design for Headless UI 👀 . Pretty happy with it 🤙
39
121
2K
👨🎨 Working on an inbox example for Tailwind UI. Pretty happy with it 🤙
55
100
2K
🔥 Giving your box shadows a slight, vertical offset helps to make them look more natural.
10
206
2K
🔥 Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead:
13
250
2K
🔥 Overlapping elements on a page is a great way to create depth and encourage users to scroll
8
160
2K
💡 When it comes to mobile table design, there's not a lot of dependable solutions that match up against the desktop experience. Here's a visual reference of a few patterns that may be a sensible compromise 👉🏻
36
139
2K
🔥 "Grey" doesn't have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.
14
209
2K
Been working on the Refactoring UI component gallery all week 🤘. There's going to be a *ton* of examples to browse through when looking for ideas. Here's a few examples of sign-in forms I put together today:
55
234
2K
🚀 We just launched a brand new website for Refactoring UI!. All of our tips, articles, and screencasts for helping developers get better at design — finally together in one place.
30
400
2K
Over the last few days I've been working on a big update for Heroicons that I hope to release early in the new year. Every icon will be redesigned from scratch and will be adding a bunch of new ones. Here's a peek 👉
72
106
2K
We just launched Heroicons v2.0! 🎉. 🤩 All new look! 260 icons redrawn from scratch.🤏 Thinner 1.5px stoke.✨ New 24px solid set. Available as first-party React and Vue libraries and official Figma components. Check 'em out 👉🏻.
68
274
2K
🔥 Styling content can be difficult. Here are a few ideas that can make a big difference:
15
195
2K
🔥 It can be really hard to keep user generated content looking clean and balanced if you aren’t careful about how you present it. Here are some tricks you can use to “normalize” content you don’t control into a really great looking design.
17
150
2K
🔥 Adding a hint of color (4 to 6px) to the top of your hero is a simple trick to bring more liveliness to your design.
6
64
1K
Making progress on the new Tailwind CSS homepage. Really diggin' these isometric styled icons 🤙🏻
35
47
2K
Thinking of tweaking the design of some of the current Heroicons to have a bit more depth. What do you think? Improvement?
101
31
1K
🎉 Excited to announce Refactoring UI!. A series of case studies on improving the design of user-submitted projects:.
33
301
1K
Been working on a new little landing page with @adamwathan that we're excited to deploy next week 👀
40
100
1K
👨🎨 Designed a few marketing page examples to showcase how Tailwind UI components can fit together 👀
31
110
1K
🔥 Using a generic icon like an arrow or a checkmark instead of the standard bullet is a great way to add visual interest to unordered lists.
7
69
1K
🚀 Thrilled to announce Heroicons v1.0 — over 450 beautiful SVG icons, first-party React and Vue libraries, and official Figma components. Check 'em out 👉.
31
197
1K
If I am using icons that have more weight than the text, I typically make the icons slightly lighter than the text for inactive states 👌🏼
8
80
1K
I love the Inter typeface family so much. Thank you @rsms for creating such a wonderful family and making it an open font license.
19
123
1K
🎉 Excited to officially announce Tailwind UI – a huge library of pre-built @tailwindcss component examples that I'm working on with @adamwathan!. Subscribe here for project updates and get notified when we launch it:.
34
228
1K
Refactoring UI was released 2 years ago today 🎉. It has since sold over 20,000 copies and is yet to have a single day without a sale 🤯. So grateful that so many people picked it up and learned from it. Thank you all 🙏.
36
25
1K
Here's another update on the icon set I've been working on. So far there are a 180 and counting. This will be the default icon set used on Tailwind UI but will be free for anyone to use 🤙
35
93
1K
✨ Working on a few new additions to the Heroicons family.
35
45
1K
✨ Exploring a bunch of "radio button group" ideas for Tailwind UI
25
61
1K
🏗️ Working on a few "notifications" for Tailwind UI this afternoon 👀
28
62
1K
Made some sexy gradients using only the new Tailwind 2.0 colors 🌈😍
24
62
1K
A few folks were asking how I would handle the progress steps I shared yesterday on mobile devices. I've found that in many cases they are just a "nice-to-have" and end up taking up a lot of vertical space on mobile so I would replace them with a simplified solution like this:
12
87
1K
💡 An experiment you can try on your next web/app project to get a more interesting color palette is color grading your design. 🧵
19
107
1K
More @tailwindui components coming soon 🎉. Working on a bunch of "detail screen" examples for the next update 👀
34
46
1K
First draft of @tailwindcss v2 colors 🌈. Now for the tedious task of testing these colors in real UI's and refining where necessary 🧐
19
68
1K
🤔 What's your favourite modern looking web app that few people have heard of?.
110
108
1K
🚀 Excited to introduce the official Heroicons web experience. Over 200 free icons available in both medium and small sizes. Check it out 👉.
26
161
1K
Tailwind docs are getting a major redesign for the release of v3.0 including every example on the site. Here's a sneak peek at the new look 👀
34
53
1K
👨🎨 Designed a bunch of pricing pages this week for the @tailwindcss component examples project @adamwathan and I are working on. Exploring all types of pricing pages including tiered pricing, tables, and variable pricing.
20
81
1K
One of the easiest and most overlooked ways to make a site look more “designed” is to use liberal spacing. Always start with more spacing than you think you'll need. Here are a few great examples of marketing sites that use generous spacing between feature sections.
14
120
1K
Spent about 8 hours with @adamwathan working on hover and focus styles for Tailwind UI. Pretty happy with where we're at now 👍
34
66
1K
I love a lot of the popular fonts available on Google fonts but they also tend to get overused. If you have a budget, using a high-quality commercial font will make a significant difference on your projects. Here are a bunch of commercial fonts that I've been diggin’ lately:
23
73
1K
Figma design systems. pfft. This is what my average Figma file looks like 😅
64
62
1K
I have never put so much thought into designing a set of buttons 🥵
45
62
1K
👀 Giving the Laravel error pages a makeover this week. I made these illustrations to go with each:
40
75
1K
I hate to toot my own horn but @tailwindcss's color palette is quite nice and I find it very easy to work with 😎
25
40
1K
Spent a lot of time recently fine-tuning our color palette for Tailwind UI to make colors super "swappable". Here every navbar has a 700 background, buttons are 600, etc. Find and replace "blue" for "teal" and you can re-theme your whole project 👍
23
69
1K
🔥 Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more.
9
78
1K
🏗️ Building a fictional HR recruiting app to showcase Tailwind UI components. Designing full applications has been way more productive than designing components in isolation. We've discovered a ton of new ideas and it's becoming much clearer how things can fit together.
22
78
1K
Just added 102 new icons to Heroicons. Check'em out 👉.
35
106
1K
👨🎨 Designed a bunch of marketing page components for Tailwind UI today. Lots of commonly used marketing page sections like heroes, features, testimonials and more. Think of them as stackable sections that should make it easy to put together a marketing page in a few minutes 🤙
19
85
1K
How to make a stylish map with no graphic design skills 😘
5
88
1K
Decided to base the "Designing with @tailwindcss" course around building a single application. Lots of cool little details in here that will make for great course content 🧐
20
91
1K
💅 I've been working on these for the past month and finally reached 100 icons. I'll be releasing these as part of a much bigger project in the near future 👀
33
79
1K
Lately I've been relying on opacity for borders instead of solid colors. Really useful on elements like inputs that have a subtle box shadow. I’ve found that having the shadow poke through the border gives you a much more crisp looking edge. ‘lil tip I picked up from @jamesm 🤌🏻
17
86
1K
I feel like my 2019 MacBook Pro that worked perfectly fine, started moving slower the moment that I learned that the M1 chip existed.
31
27
995
Here's where I landed on this Dashboard example that I started last week for Tailwind UI. What do you think?
46
48
1K
Even though Headless UI is completely unstyled, we still made sure all of the demo examples are beautiful to showcase what you can do with the library. Really excited to launch this site later this week 🚀
13
55
1K