Brandikaran | UI Designer Shares His Top 19 Bite-Sized Design Tips From Year’s Worth Of Advice
59106
post-template-default,single,single-post,postid-59106,single-format-standard,qode-core-1.2,ajax_fade,page_not_loaded,,brandikaran-ver-2.0, vertical_menu_with_scroll,smooth_scroll,fade_push_text_right,grid_1300,blog_installed,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

UI Designer Shares His Top 19 Bite-Sized Design Tips From Year’s Worth Of Advice

-

UI Designer Shares His Top 19 Bite-Sized Design Tips From Year’s Worth Of Advice

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.

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - 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.

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - Too many borders can make a design look really busy. Here’s a few ideas that are a bit more subtle:

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

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 👌🏼 -

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - 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.

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - 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.

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - Overlapping elements on a page is a great way to create depth and encourage users to scroll

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.

Twitter Ads info and privacy

 

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - Font size isn’t always the best way to emphasize or de-emphasize text, try using color and font weight instead:

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - 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.

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - Designing nice tables can be tough, but here’s a few ideas that can make a big difference:

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - Giving your box shadows a slight, vertical offset helps to make them look more natural.

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - Styling content can be difficult. Here are a few ideas that can make a big difference:

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - 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:

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - “Grey” doesn’t have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - 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 👌 -

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - Recently had the pleasure of designing the pricing section of @adamwathan’s Advanced Vue Component Design course.

Here are a few visual design ideas I considered to give it some extra polish 💅 -

Twitter Ads info and privacy

 

View image on Twitter
View image on Twitter -
-
Steve Schoger@steveschoger

🔥 - 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:

Twitter Ads info and privacy

[via steveschoger, main image via Shutterstock]

No Comments

Leave a Comment: