Twitter | Search | |

Little UI Details

A collections of little tips from @steveschoger to improve your visual design skills with the little details that make a big difference πŸ‘
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
πŸ”₯ 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 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 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 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 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 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 30 May 17
I like when my rounded corners are pixel perfect so I usually draw circles on a grid and connect them rather than relying on Sketch's radius
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 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 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 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 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 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
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 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 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 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 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 Oct 18
πŸ”₯ Little details go a long way when styling UI components. Here are a few different ways to style inputs:
Reply Retweet Like
Steve Schoger Oct 23
πŸ”₯ Little details go a long way when styling UI components. Here are a few different ways to style buttons:
Reply Retweet Like
Steve Schoger Nov 16
πŸ”₯ 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 Nov 28
πŸ”₯ 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 Dec 14
πŸ”₯ Styling content can be difficult. Here are a few ideas that can make a big difference:
Reply Retweet Like
Steve Schoger 6 Sep 17
πŸŽ‰ Excited to announce Refactoring UI! A series of case studies on improving the design of user-submitted projects:
Reply Retweet Like
Geoff Dec 18
Shoutout to this great : tells you which third party account you used to sign in with previously. Great feature
Reply Retweet Like
Steve Schoger Jan 9
πŸ”₯ 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 Jan 9
Replying to @steveschoger
☝️ Also, containing photos in circles - Great way to make a bad photo look good πŸ‘Œ
Reply Retweet Like
Steve Schoger Jan 11
πŸ”₯ A trick designers often use to make things look a bit more interesting is to let images bleed out the edge of a container, ignoring any padding.
Reply Retweet Like
Adam Wathan Jan 11
πŸ’‘ Whenever I see a piece of beautiful UI I really love, I always ask myself: "What about this design would I have never thought to try?" I've picked up *so* many useful design tricks this way. Today it's this inverted color treatment on all of the dropdowns in Things 3 πŸ‘ŒπŸ»
Reply Retweet Like
Steve Schoger Jan 16
πŸ”₯ 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 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 Jan 24
πŸ”₯ 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 Jan 24
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 Feb 8
Thanks again for all the positive feedback from yesterdays talk. You can find all 251 slides here 😘
Reply Retweet Like
Steve Schoger Feb 27
πŸ”₯Β 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 Mar 19
πŸ”₯ "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 Mar 28
πŸ”₯Β 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 May 9
πŸ”₯ 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 Apr 4
πŸ”₯ 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 May 17
πŸ”₯ 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 Jun 27
πŸ”₯Β 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 Jul 20
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 Aug 16
πŸ”₯ 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 Aug 1
πŸ”₯ 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 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 Sep 27
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
alex moon 🌚 Oct 8
Clever design detail by Amazon: The navigation arrow on their website has two tones, black and white, to work everywhere on dark and light backgrounds.
Reply Retweet Like