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 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 Sep 6
πŸŽ‰ Excited to announce Refactoring UI! A series of case studies on improving the design of user-submitted projects:
Reply Retweet Like
Geoff Davis 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