Curated Resource ( ? )

16 little UI design rules that make a big impact

my notes ( ? )

User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder.

Luckily, UI design doesn’t have to be so hard. Over nearly 2 decades working as a product designer, I’ve realised that most of my visual and interaction design decisions are governed by a system of logical rules. Not artistic flair or magical intuition, just simple rules.

Having a system of logical rules helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty.

I love rules and logic, but design decisions are rarely black and white. Rather than strict rules that you must follow, think of the following advice as helpful guidelines that work well in most cases.

The quickest way to learn is by doing, so let’s get started.

Let’s fix the problems with the original design one at a time using the following logical rules or guidelines:

  1. Use space to group related elements
  2. Be consistent
  3. Ensure similar looking elements function similarly
  4. Create a clear visual hierarchy
  5. Remove unnecessary styles
  6. Use colour purposefully
  7. Ensure interface elements have a 3:1 contrast ratio
  8. Ensure text has a 4.5:1 contrast ratio
  9. Don’t rely on colour alone as an indicator
  10. Use a single sans serif typeface
  11. Use a typeface with taller lower case letters
  12. Limit the use of uppercase
  13. Use regular and bold font weights only
  14. Avoid pure black text
  15. Left align text
  16. Use at least 1.5 line height for body text

Recent articles

Read the Full Post

The above notes were curated from the full post www.adhamdannaway.com/blog/ui-design/16-ui-design-rules.

Related reading

More Stuff I Like

More Stuff tagged ui , user interface , user interface design

Cookies disclaimer

MyHub.ai saves very few cookies onto your device: we need some to monitor site traffic using Google Analytics, while another protects you from a cross-site request forgeries. Nevertheless, you can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings, you grant us permission to store that information on your device. More details in our Privacy Policy.