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 Jun 29
πŸ”₯ 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 Jun 26
πŸ”₯ 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 Jun 23
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 Jun 20
πŸ”₯ Giving your box shadows a slight, vertical offset helps to make them look more natural.
Reply Retweet Like
Steve Schoger Jun 15
πŸ”₯ Aligning text is an easy way to clean up your design and make your content much more scannable.
Reply Retweet Like
Steve Schoger Jun 12
πŸ”₯ 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 Jun 8
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 Jun 7
πŸ”₯ 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 Jun 6
πŸ”₯ 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 Jun 6
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 Jun 5
😜 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 Jun 2
πŸ”₯ Along with size and weight, using color and contrast is a great way to create typographic hierarchy.
Reply Retweet Like
Steve Schoger Jun 1
πŸ€™πŸΌ If in doubt, 16px font with 1.5 line height is pretty good safe for body copy.
Reply Retweet Like
Steve Schoger May 31
😘 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 May 30
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 Jul 6
How to make a stylish map with no graphic design skills 😘
Reply Retweet Like
Steve Schoger Jul 5
πŸ”₯ Keylines are not only great for dividing content but also making disconnected content feel more connected.
Reply Retweet Like
Steve Schoger Jul 13
πŸ”₯ 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 Jul 20
πŸ”₯ Desaturated photo + bold color + blend-mode: multiply. Great for hero banners and creating high contrast for text.
Reply Retweet Like
Steve Schoger Jul 31
πŸ”₯ Overlapping elements on a page is a great way to create depth and encourage users to scroll
Reply Retweet Like
Steve Schoger Aug 2
πŸ”₯ 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 Aug 2
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 Aug 2
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 Aug 11
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 Aug 16
πŸ”₯ 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 Sep 7
πŸ”₯ 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 Sep 19
πŸ”₯ 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 Sep 27
πŸ”₯ 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 7h
πŸ”₯ Little details go a long way when styling UI components. Here are a few different ways to style buttons:
Reply Retweet Like