Steve Schoger is a multidisciplinary designer based in Kitchener, Ontario. When he finds time off from running his design and illustration studio, he curates ‘Little UI Details‘ – a Twitter collection of short, useful design tips for UI/UX designers.
Steve’s tweets cover different elements of UI design and also include before-after mockup images that make them all the more easy to understand. Check out a few good ones below.
1. Subtle call-to-action for negative links
🔥 A subtle link for negative secondary actions often works better than a big bold button.
(Just make sure you have a confirmation step!) pic.twitter.com/lqjBovKA1z
— Steve Schoger (@steveschoger) August 2, 2017
2. Less borders
🔥 Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle: pic.twitter.com/JEIrjAS5YL
— Steve Schoger (@steveschoger) August 16, 2017
3. Aligning text
🔥 Aligning text is an easy way to clean up your design and make your content much more scannable. pic.twitter.com/KhUT5l0kW1
— Steve Schoger (@steveschoger) June 15, 2017
4. Saturated text
🔥 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. pic.twitter.com/eKxW4jSSs8
— Steve Schoger (@steveschoger) June 12, 2017
5. Subtle shadows
🔥 Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more. pic.twitter.com/p9rudeFxvP
— Steve Schoger (@steveschoger) June 29, 2017
6. Styling icons
🔥 Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color. pic.twitter.com/BGknNtBzZ2
— Steve Schoger (@steveschoger) November 16, 2017
7. Saturate your greys
🔥 "Grey" doesn't have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel. pic.twitter.com/ToAMPLfDd1
— Steve Schoger (@steveschoger) March 19, 2018
8. Uniformity in text of different sizes
🔥 If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder. pic.twitter.com/kgGQJJh1EL
— Steve Schoger (@steveschoger) March 28, 2018
9. Hero banners
🔥 Desaturated photo + bold color + blend-mode: multiply. Great for hero banners and creating high contrast for text. pic.twitter.com/1BqHw5oyKL
— Steve Schoger (@steveschoger) July 20, 2017
10. Overlapping elements
🔥 Overlapping elements on a page is a great way to create depth and encourage users to scroll pic.twitter.com/kD9gGUDH5y
— Steve Schoger (@steveschoger) July 31, 2017
11. Box shadows
🔥 Giving your box shadows a slight, vertical offset helps to make them look more natural. pic.twitter.com/WcPsK8yFwu
— Steve Schoger (@steveschoger) June 20, 2017
12. Light icons
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 👌🏼 pic.twitter.com/nlqB3Q2uNg
— Steve Schoger (@steveschoger) June 8, 2017
13. Checkmarks vs. Bullets
🔥 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. pic.twitter.com/hE5BEKEpqh
— Steve Schoger (@steveschoger) June 7, 2017
14. Color on top
🔥 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. pic.twitter.com/cdwzjRh5NN
— Steve Schoger (@steveschoger) June 6, 2017
15. Contrast vs. keyline
😜 A technique I've been using lately on panels to distinguish the titles instead of a keyline is using subtle contrast: pic.twitter.com/RWOcPZR8Xh
— Steve Schoger (@steveschoger) June 5, 2017
16. Vibrant gradients
🔥 Make your gradients appear more vibrant by adjusting the hue by a few degrees (10º or 20º max) in either direction. pic.twitter.com/Op8Wrme3V4
— Steve Schoger (@steveschoger) June 26, 2017
17. 16px font, 1.5 line height
🤙🏼 If in doubt, 16px font with 1.5 line height is pretty good safe for body copy. pic.twitter.com/s2opWaBT0l
— Steve Schoger (@steveschoger) June 1, 2017
18. Letter-spacing in all-caps
😘 Quick tip: All-caps can sometimes be difficult to read. Consider using letter-spacing to give your text a little more room to breathe pic.twitter.com/FCQk0vrZE9
— Steve Schoger (@steveschoger) May 31, 2017
19. Input form styling
🔥 Little details go a long way when styling UI components. Here are a few different ways to style inputs: pic.twitter.com/1D2AYDwi1f
— Steve Schoger (@steveschoger) October 18, 2017
20. Make your own map
How to make a stylish map with no graphic design skills 😘 pic.twitter.com/CluMrSpSSX
— Steve Schoger (@steveschoger) July 6, 2017
21. Keylines to connect content
🔥 Keylines are not only great for dividing content but also making disconnected content feel more connected. pic.twitter.com/Hdx8gTJbJf
— Steve Schoger (@steveschoger) July 5, 2017
22. Multiples to define spacing
🔥 Using multiples to define your spacing is a great way to achieve vertical rhythm and provides a formula to justify your choices pic.twitter.com/0MCNFaZVrS
— Steve Schoger (@steveschoger) July 13, 2017
23. Two-colum form layout
🔥 This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields. pic.twitter.com/KbErS8hJHM
— Steve Schoger (@steveschoger) September 7, 2017
24. Use font color/weight for emphasis
🔥 Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead: pic.twitter.com/KCtZNrtfkd
— Steve Schoger (@steveschoger) September 19, 2017
25. Adjusting line-height
🔥 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. pic.twitter.com/v6GQczpoM8
— Steve Schoger (@steveschoger) February 27, 2018
26. Designing tables
🔥 Designing nice tables can be tough, but here's a few ideas that can make a big difference: pic.twitter.com/Q1qcF1hIG6
— Steve Schoger (@steveschoger) September 27, 2017
27. Styling content
🔥 Styling content can be difficult. Here are a few ideas that can make a big difference: pic.twitter.com/oiAH4foGJu
— Steve Schoger (@steveschoger) December 14, 2017
28. Dropdowns
🔥 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: pic.twitter.com/fh1CxDruSi
— Steve Schoger (@steveschoger) January 16, 2018
29. Overlapping images
🔥 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 👌 pic.twitter.com/G4Zs2wLUz0
— Steve Schoger (@steveschoger) April 4, 2018
30. Think outside the database
🔥 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: pic.twitter.com/NoL3wMtjLV
— Steve Schoger (@steveschoger) May 17, 2018
Share this post with a designer friend and add to this list in the comments below.
Don't Miss:
