Visual design, interaction design and design systems

Visual hierarchy

Guide the eye to what matters most using size, weight, colour, contrast, spacing and position. Squint at a screen: the most important thing should still stand out.

Layout and spacing

• Use a spacing scale (4 or 8-point grid: 4, 8, 12, 16, 24, 32, 48…) for consistent rhythm.
• Proximity: related things close together, unrelated things apart (Gestalt principles: proximity, similarity, alignment, closure, continuity).
• Align to a grid; consistent margins; generous white space.

Typography

• One or two typefaces; a type scale (e.g. 12, 14, 16, 20, 24, 32).
• Body text 16px on mobile; line height around 1.5; line length 45–75 characters.
• Use weight and size for hierarchy, not five different colours.

Colour

• A primary brand colour for actions, neutrals for most of the UI, semantic colours for success, warning and error.
• 60-30-10 balance (dominant neutral, secondary, accent).
• Contrast: WCAG AA requires 4.5:1 for normal text, 3:1 for large text and UI components. Never use colour alone to convey meaning.

Interaction design

• Every interactive element has states: default, hover, pressed, focused, disabled, loading, error, success.
• Feedback within 100 ms for taps; show progress for anything over a second.
• Touch targets at least 44–48 px.
• Microinteractions (a subtle check animation when saved) make products feel responsive.
• Forms: one column, labels above fields, input types that bring up the right keyboard, inline validation after the user leaves a field, helpful error text.

Design systems

A design system is the shared library of foundations (colour, type, spacing tokens), components (buttons, inputs, cards, modals), patterns (forms, empty states) and guidelines that keep products consistent and speed up design and development. Examples: Material Design, Apple Human Interface Guidelines, IBM Carbon, Atlassian.

Know atomic design (atoms → molecules → organisms → templates → pages) and design tokens (named values like color.primary, shared between Figma and code).

Accessibility

Design for everyone: sufficient contrast, scalable text, clear focus states, labels for icons, captions for video, logical reading order, no information conveyed only by colour or motion, and support for screen readers. It's a legal requirement in many markets and good design everywhere.

Check yourself

• List the states a primary button needs.
• What contrast ratio does body text need for WCAG AA?
• What's the benefit of design tokens?