🌱 Tim's Dev Wiki

Search IconIcon to open search

UI Design

Last updated September 26, 2022.

See https://tymz.notion.site/UI-UX-7fb9a728bfc946fcbe92ff640b371a2d.

See UI inspiration.

# Note for Developers

Design is not fundamentally about making things pretty. The prettiness of a thing you design is often a side effect of making it usable, accessible, learnable and delightful to use. This makes design problems engineering problems.

“Most people make the mistake of thinking design is what it looks like, people think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” — Steve Jobs.

Always prototype designs before you code. Never design from your code. Use a tool like Figma, Photoshop, Illustrator, or just pen and paper.

# Aesthetic-Usability Effect

The aesthetic-usability effect is a phenomenon where humans perceive more aesthetic designs as more intuitive/easier to use than those considered to be less aesthetically pleasing (even if it is not easier to use).

This is a well-studied phenomenon, not just a claim about human behaviour. If you focus on designing a product focusing heavily on usability, it will inevitably be seen as aesthetic. Conversely, if you polish your visuals, it will be seen as more usable and users will be more tolerant of poor usability.

This is related to the Halo effect.

# Gestalt Principles

Gestalt theory asserts that the human brain always seeks to group components and identify structures and patterns. Some useful practical principles from Gestalt theory:

# Spacing

Negative spacing is a useful weapon against visual noise. It helps the read scan for what they need. Consider using:

# Typography

Typography makes a huge difference. Invest time in picking one that best expresses your frontend’s ‘personality’.

Font pairing is a common practice where you pick two (or more) fonts that contrast with each other. For some reason, this looks better: Use generators online or handpicked font pairings rather than sticking to one font.

# Colour

Figma recommends to use black, white, one primary colour, one secondary and tones of each. Note that: