The 3 Biggies of

UI Design

Typography

The web is a typographic medium. 95% of information on the web is text — and text is user interface (UI). This means that when we optimize our text, we optimize our entire UI.

Typography is what we do with our text. It's the techniques we use to make our text easy to read, presentable, and persuasive.

Typography is the visual component of the written word

— Matthew Butterick

Keypoints:

  • Typeface / font choice
  • Font size
  • Line length
  • Line height

Learn how to apply the four typographic rules above, and you’ll be way ahead of most developers and designers when it comes content presentation.

Spacing

Spacing is the invisible space between and around things (also known as whitespace). Spacing is a powerful tool establishing rhythm, hiaerchy, and uniformity.

Whitespace is to be regarded as an active element, not a passive background

— Jan Tschichold

You can make your life easier by adhering to a spacing scale from the early stages of your project. A spacing scale will ensure that your product is consistent which is crucial for building trust with your audience.

Keypoints:

  • Dark layouts generally need a bit more space than light layouts.
  • The more space an element has around it, the more attention it draws.
  • The fewer spacing values you have, the easier it is to create a consistent user experience. (use a spacing scale!).

Color

Colors are used for many things, including drawing attention, and evoking emotions. Colors are important, but rarely the most important part of a project. More than anything, colors should (in general) be used as a tool for reinforcement.

Color does not add a pleasant quality to design—it reinforces it

— Pierre Bonnard

Different colors will evoke different emotional responses from the end-user. It’s also important to know that colors are perceived differently from culture to culture.

Keypoints:

  • Use high contrast colors. E.g. dark text on a light background, or light text on a dark background.
  • Start with black and white (grayscale) — focus on layout, sizing, and spacing first.
  • Culture dictates how colors are perceived.
  • Accesibility: 5% of people are color blind.