Twitter | Search | |

πŸ”₯ Design Tips

A collection of design tips that I've been working on with @adamwathan.
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 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 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 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
πŸ”₯ 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 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 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 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 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 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 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 20 Jun 17
πŸ”₯ Giving your box shadows a slight, vertical offset helps to make them look more natural.
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 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 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 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 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 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 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 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 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 Sep 27
πŸ”₯ 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 Nov 2
πŸ”₯ 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 Nov 19
πŸ”₯Β 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 Apr 1
πŸ”₯ 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 πŸ₯³
Reply Retweet Like
Steve Schoger Jul 16
πŸ”₯ 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.
Reply Retweet Like
Steve Schoger Sep 10
πŸ”₯ 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:
Reply Retweet Like
Steve Schoger Dec 11
πŸ”₯ 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 πŸ‘‰πŸ»
Reply Retweet Like