RECOMMENDED

All Tips

Visually Separate Elements
Visually Separate Elements

Visually Separate Elements

visual effect
hierarchy
ui
ux
whitespace

Prefer to visually separate menu sections with whitespace. Whitespace makes the UI look cleaner and request less cognitive effort from the user.

In the example below:

  • A uses dividers for everything
  • B uses a divider between sections
  • C uses only whitespace

A is too complex and distracts the user, but both B & C can be used on real-life user interfaces.

B puts more attention on differentiating the sections. C makes the UI look cleaner.

←Previous Tip

Hack Visual Hierarchy

Hack visual hierarchy with these simple hacks: • Reduce the opacity of secondary info • Use bold font-weight to emphasize • Scale your title's size by a fixed ratio (eg x1.25) • Arrange elements to the left side (for LTR users) • Group together relevant elements

how
visual effect
hierarchy
ux
ui

Next Tip →

Social Login

Social login boosts conversion since users can easily join your platform. Then, it's a good practice to put your social login on top of the page and place the email password authentication below. Beware that privacy-oriented people prefer not to use social login then it's always good to have another option for them.

ux
login
auth

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

  • "

    I love these little tips. It’s like Dribbble but actually useful.

    Martin LeBlanc

    CEO of Iconfinder

  • "

    I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.

    Lisa Dziuba

    Head of Marketing at Abstract