UI Designer Shares His Top 19 Bite-Sized Design Tips From Year’s Worth Of Advice
By Yoon Sann Wong, 15 Jun 2018
Some of you might already be familiar with UI designer Steve Schoger. Last month, DesignTAXI featured his free-to-download poster for web developers on HTTP status codes that is a godsend.
This self-proclaimed “designer of things” who “gives lots of stuff away for free” is also behind the YouTube series ‘Refactoring UI’, which recently received a brand new website. In ‘Refactoring UI’, Schoger fixes horrible websites and turns around terribly designed UI, all in aims of helping developers improve their knowledge and skills.
Now, after dishing design tips for more than a year, Schoger has roped in help from software developer Adam Wathan to consolidate his favorite bite-sized tweets for your viewing.
Check out his selected top 19 below and follow Schoger on Twitter via @steveschoger for regular updates.
🔥 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
🔥 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
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
🔥 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
🔥 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
🔥 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
🔥 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
🔥 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
🔥 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
🔥 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
🔥 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
🔥 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
🔥 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
🔥 Dropdowns can be more than just a boring list of links. They're just boxes, you can do anything you want with them!— Steve Schoger (@steveschoger) January 16, 2018
For example, this two-column layout is great when you want to add supporting text: pic.twitter.com/fh1CxDruSi
🔥 "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
🔥 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
🔥 Overlapping images is a great way to add depth to an interface and make it look more “designed”.— Steve Schoger (@steveschoger) April 4, 2018
Use a border that matches the background color to create distinction and keep things looking clean 👌 pic.twitter.com/G4Zs2wLUz0
🔥 Recently had the pleasure of designing the pricing section of @adamwathan’s Advanced Vue Component Design course.— Steve Schoger (@steveschoger) May 9, 2018
Here are a few visual design ideas I considered to give it some extra polish 💅 pic.twitter.com/6wMnUTVbJg
🔥 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.— Steve Schoger (@steveschoger) May 17, 2018
Here are a few ideas you can use to present "field: value" data in a more interesting way: pic.twitter.com/NoL3wMtjLV
[via steveschoger, main image via Shutterstock]
More related news