Twitter | Search | |

Steve Schoger design tips

@steveschoger has been dropping some great design tips lately so I started saving them. Really looking forward to his upcoming book with @adamwathan.
Steve Schoger 2 Nov 18
πŸ”₯ 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.
Reply Retweet Like
Steve Schoger 24 Oct 18
Replying to @steveschoger
Here's the article:
Reply Retweet Like
Steve Schoger 27 Sep 18
Replying to @steveschoger
☝️ If you found this tip helpful, our upcoming book Refactoring UI has an entire chapter dedicated to keeping beautiful designs accessible. We've been sharing updates and sample chapters with people who have signed up here:
Reply Retweet Like
Steve Schoger 27 Sep 18
πŸ”₯ 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 πŸ‘Œ
Reply Retweet Like
Steve Schoger 19 Sep 18
πŸ‘¨β€πŸŽ¨ Continuing work on the Refactoring UI component gallery this week. Here's sneak peak at some of the layout ideas for pricing pages πŸ‘€
Reply Retweet Like
Steve Schoger 5 Sep 18
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:
Reply Retweet Like
Steve Schoger 30 Aug 18
Replying to @ColinRubbert
Working on some documentation as we speak. Here are a few ideas:
Reply Retweet Like
Steve Schoger 16 Aug 18
πŸ”₯ 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:
Reply Retweet Like
Steve Schoger 1 Aug 18
πŸ”₯ 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:
Reply Retweet Like
Steve Schoger 20 Jul 18
Incorporating a β€œvisual gimmick” in to your brand/website is a great to create a consistent tone and establish a visual identity. Whether it’s a visual element taken from the logo or something simple like this example from Algolia:
Reply Retweet Like
Steve Schoger 27 Jun 18
πŸ”₯Β 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.
Reply Retweet Like
Steve Schoger 13 Jun 18
Here's a great πŸ”₯ tip from that I used on :
Reply Retweet Like
Steve Schoger 17 May 18
πŸ”₯ 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:
Reply Retweet Like
Steve Schoger 9 May 18
πŸ”₯ Recently had the pleasure of designing the pricing section of ’s Advanced Vue Component Design course. Here are a few visual design ideas I considered to give it some extra polish πŸ’…
Reply Retweet Like
Steve Schoger 4 Apr 18
πŸ”₯ 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 πŸ‘Œ
Reply Retweet Like
Steve Schoger 29 Mar 18
I love Stripe's visual design as much as everyone else. But every time I see a non-Stripe site with a skewed background I cringe a little bit (SadIy, I've been guilty of this too). BTW, incase you didn't notice, the skewed background mimics Stripe's logo:
Reply Retweet Like
Steve Schoger 28 Mar 18
πŸ”₯Β If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.
Reply Retweet Like
Steve Schoger 19 Mar 18
πŸ”₯ "Grey" doesn't have to mean Greyβ„’. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.
Reply Retweet Like
Steve Schoger 6 Mar 18
Here's another great (free) tool for generating duotone images by Thanks for sharing
Reply Retweet Like
Steve Schoger 6 Mar 18
πŸ”₯ Ever wonder how to produce this duotone color treatment to photos as seen in apps like Spotify? You can achieve this in Photoshop or Affinity Photo by using Gradient Maps. Looks great when applied to portraits 😍
Reply Retweet Like
Steve Schoger 27 Feb 18
πŸ”₯Β 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.
Reply Retweet Like
Steve Schoger 20 Feb 18
πŸŽ‰ Just published some new content! Our favorite tricks for improving your designs that don't require any artistic talent πŸ”₯
Reply Retweet Like
Steve Schoger 8 Feb 18
Thanks again for all the positive feedback from yesterdays talk. You can find all 251 slides here 😘
Reply Retweet Like
Adam Wathan 1 Feb 18
πŸ”₯ Ever run into annoying CSS layout bugs that are really hard to troubleshoot? (WHY IS THERE A HORIZONTAL SCROLLBAR WHERE IS THIS COMING FROM?!?) Throw this style into your dev tools to quickly see the boundaries of every element without affecting the layout:
Reply Retweet Like
Steve Schoger 24 Jan 18
Replying to @steveschoger
πŸ‘† This small, uppercase text treatment also works great for headings for link lists like this vertical navigation or footer site map
Reply Retweet Like
Steve Schoger 24 Jan 18
πŸ”₯ This β€œeyebrow” title treatment is not only great for clarifying your message, but it also makes a boring headline + body pattern look more interesting.
Reply Retweet Like
Steve Schoger 18 Jan 18
I always appreciate when a site styles the selection background and text color. I think it really shows that whoever developed it cares about the details πŸ‘Œ Here's a few examples from , and
Reply Retweet Like
Steve Schoger 17 Jan 18
Replying to @LaraconOnline
Here's another small example that I'll be using for my talk. Getting really excited about this. I've been working on this talk on and off, evenings/weekends for over 2 months.
Reply Retweet Like
Steve Schoger 16 Jan 18
πŸ”₯ 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:
Reply Retweet Like
Steve Schoger 9 Jan 18
Replying to @steveschoger
☝️ Also, containing photos in circles - Great way to make a bad photo look good πŸ‘Œ
Reply Retweet Like
Steve Schoger 9 Jan 18
πŸ”₯ Working with images that clash with each other? Try desaturating them to greyscale or colorizing them all with a single color to make them a little more cohesive.
Reply Retweet Like
Steve Schoger 5 Jan 18
This year at I will be talking about the "Little Details of UI Design". I'll be refactoring the design below, sharing *every* step along the way, with lots of hawt tips that you can apply to your own designs πŸ”₯ Tickets are available at
Reply Retweet Like
Steve Schoger 14 Dec 17
πŸ”₯ Styling content can be difficult. Here are a few ideas that can make a big difference:
Reply Retweet Like
Steve Schoger 28 Nov 17
Replying to @steveschoger
Here's a Twitter Moment with some older tips I've shared that you can consider when designing a landing page like this one:
Reply Retweet Like
Steve Schoger 28 Nov 17
πŸ”₯ Need to put together a quick landing page for a new idea? Here are some tips for making it look professional without hiring a designer:
Reply Retweet Like
Steve Schoger 16 Nov 17
πŸ”₯ Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.
Reply Retweet Like
Steve Schoger 23 Oct 17
πŸ”₯ Little details go a long way when styling UI components. Here are a few different ways to style buttons:
Reply Retweet Like
Steve Schoger 18 Oct 17
Replying to @CodePen
☝️Be sure to check the focus state on these πŸ‘
Reply Retweet Like
Steve Schoger 18 Oct 17
Replying to @CodePen
☝️Here's a with all of the example's above 😘 
Reply Retweet Like
Steve Schoger 18 Oct 17
πŸ”₯ Little details go a long way when styling UI components. Here are a few different ways to style inputs:
Reply Retweet Like
Steve Schoger 27 Sep 17
πŸ”₯ Designing nice tables can be tough, but here's a few ideas that can make a big difference:
Reply Retweet Like
Steve Schoger 19 Sep 17
πŸ”₯ Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead:
Reply Retweet Like
Steve Schoger 7 Sep 17
Replying to @steveschoger
On mobile, I would keep everything in one column and let size, contrast and space do the work to create hierarchy.
Reply Retweet Like
Steve Schoger 7 Sep 17
Replying to @steveschoger
☝️ This also provides a great space for inline helper text.
Reply Retweet Like
Steve Schoger 7 Sep 17
πŸ”₯ This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.
Reply Retweet Like
Steve Schoger 16 Aug 17
πŸ”₯ Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle:
Reply Retweet Like
Steve Schoger 11 Aug 17
Replying to @steveschoger
☝️ I also use this technique on secondary button outlines. Helps the button text stand out a little more:
Reply Retweet Like
Steve Schoger 10 Aug 17
πŸ”₯ My general "safe" rule for picking gradient colours is to pick 2 hues within a 100Β° of each other.
Reply Retweet Like
Steve Schoger 2 Aug 17
Replying to @rossSpeak
Sometimes you may want to use the "danger" colour for a primary action like if you're confirming the high severity action:
Reply Retweet Like
Steve Schoger 2 Aug 17
Replying to @rossSpeak
It's all about creating hierarchy. You want your primary button to stand out much more than your secondary/danger actions.
Reply Retweet Like
Steve Schoger 2 Aug 17
πŸ”₯ A subtle link for negative secondary actions often works better than a big bold button. (Just make sure you have a confirmation step!)
Reply Retweet Like
Steve Schoger 31 Jul 17
πŸ”₯ Overlapping elements on a page is a great way to create depth and encourage users to scroll
Reply Retweet Like
Steve Schoger 28 Jul 17
πŸ‘ˆ Great resource if you're looking for high quality photography without a budget.
Reply Retweet Like
Charlie Gleason 27 Jul 17
Reply Retweet Like
Steve Schoger 20 Jul 17
πŸ”₯ Desaturated photo + bold color + blend-mode: multiply. Great for hero banners and creating high contrast for text.
Reply Retweet Like
Steve Schoger 19 Jul 17
πŸ”₯ I just published a new post: "6 Tips that Will Improve Your Typography on Your UI"
Reply Retweet Like
Steve Schoger 13 Jul 17
πŸ”₯ Using multiples to define your spacing is a great way to achieve vertical rhythm and provides a formula to justify your choices
Reply Retweet Like
Steve Schoger 11 Jul 17
πŸ”₯ Facebook is a good example of how using a dark/desaturated, matching hue for text/components can make a site feel more β€œglued” together:
Reply Retweet Like
Steve Schoger 6 Jul 17
How to make a stylish map with no graphic design skills 😘
Reply Retweet Like
Steve Schoger 5 Jul 17
πŸ”₯ Keylines are not only great for dividing content but also making disconnected content feel more connected.
Reply Retweet Like
Steve Schoger 30 Jun 17
😍 Another nice inspiration site featuring websites with a more minimal aesthetic:
Reply Retweet Like
Steve Schoger 29 Jun 17
πŸ”₯ Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more.
Reply Retweet Like
Steve Schoger 26 Jun 17
Replying to @steveschoger
☝️ This technique is great for making buttons, charts and backgrounds β€œpop” more on the page.
Reply Retweet Like
Steve Schoger 26 Jun 17
πŸ”₯ Make your gradients appear more vibrant by adjusting the hue by a few degrees (10ΒΊ or 20ΒΊ max) in either direction.
Reply Retweet Like
Steve Schoger 23 Jun 17
Really love the hover state on Stripe's website. 1px shift up with the increased drop shadow spread. Details like this go a long way 😍
Reply Retweet Like
Steve Schoger 21 Jun 17
πŸ”₯ Here's an example of how much more "designed" something can look just by being thoughtful about font size, weight, contrast and spacing:
Reply Retweet Like
Steve Schoger 20 Jun 17
πŸ”₯ Giving your box shadows a slight, vertical offset helps to make them look more natural.
Reply Retweet Like
Steve Schoger 15 Jun 17
πŸ”₯ Aligning text is an easy way to clean up your design and make your content much more scannable.
Reply Retweet Like
Steve Schoger 13 Jun 17
Replying to @moealmaw
But be careful when doing it on complex backgrounds as it may give it a "ghost" effect πŸ˜‰
Reply Retweet Like
Steve Schoger 13 Jun 17
Replying to @moealmaw
πŸ‘† Alternatively, as mentioned, you can lower the opacity on the text for a similar effect.
Reply Retweet Like
Steve Schoger 12 Jun 17
πŸ”₯ 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.
Reply Retweet Like
Steve Schoger 8 Jun 17
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 πŸ‘ŒπŸΌ
Reply Retweet Like
Steve Schoger 8 Jun 17
If you need product land page inspiration, I go to both and on a daily basis πŸ€™πŸΌ
Reply Retweet Like
Steve Schoger 7 Jun 17
πŸ”₯ 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.
Reply Retweet Like
Steve Schoger 6 Jun 17
Replying to @steveschoger
This trick also works great on modals and, in some cases, panels. Using a 2 color gradient also adds a nice touch πŸ‘Œ
Reply Retweet Like
Steve Schoger 6 Jun 17
πŸ”₯ 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.
Reply Retweet Like
Steve Schoger 5 Jun 17
😜 A technique I've been using lately on panels to distinguish the titles instead of a keyline is using subtle contrast:
Reply Retweet Like
Steve Schoger 2 Jun 17
πŸ”₯ Along with size and weight, using color and contrast is a great way to create typographic hierarchy.
Reply Retweet Like
Steve Schoger 1 Jun 17
πŸ€™πŸΌ If in doubt, 16px font with 1.5 line height is pretty good safe for body copy.
Reply Retweet Like
Steve Schoger 31 May 17
😘 Quick tip: All-caps can sometimes be difficult to read. Consider using letter-spacing to give your text a little more room to breathe
Reply Retweet Like
Steve Schoger 28 Apr 17
Made a list of my go-to Google fonts.
Reply Retweet Like
Steve Schoger 6 Nov 18
πŸ‘€ It's getting a bit insane with the amount of fake app UI's I've designed just to help explain single concepts in the Refactoring UI book πŸ˜…
Reply Retweet Like
Steve Schoger 12 Nov 18
🎨 Continuing work on the color palettes that will be included with the Refactoring UI book/package. Each palette will include an example and description of how to apply the colors to your own UI. Here are a few ideas we've been exploring:
Reply Retweet Like
Steve Schoger 19 Nov 18
πŸ”₯Β 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.
Reply Retweet Like
Steve Schoger Nov 21
😍 Nothing more satisfying than staring at a set of carefully selected color swatches.
Reply Retweet Like