Visual Design Principles

Visual design is the layer of UX that users see and interact with directly. It encompasses colour, typography, layout, spacing, imagery, and iconography. Effective visual design does not just make a product look attractive — it guides attention, communicates hierarchy, and reinforces usability.

---

Why Visual Design Matters in UX

Visual design is not decoration — it is communication:

• Guides attention — directs users to the most important elements first
• Establishes hierarchy — shows what is primary, secondary, and tertiary
• Creates trust — polished, consistent design signals professionalism
• Reduces cognitive load — clear visual structure makes content easier to process
• Supports brand identity — colour, typography, and style reinforce brand recognition

Key Insight: Users form an opinion about a product's credibility within 50 milliseconds, primarily based on visual design.

---

Gestalt Principles

The Gestalt principles describe how humans perceive visual elements as organised patterns and groups:

Principle	Description	UX Application
Proximity	Elements close together are perceived as related	Group related form fields, separate distinct sections with space
Similarity	Similar elements are perceived as belonging together	Use consistent styling for clickable elements
Continuity	The eye follows smooth lines and curves	Align elements along a clear visual axis
Closure	The mind completes incomplete shapes	Use partial borders or implied containers
Figure-ground	Elements are perceived as either foreground or background	Use contrast to separate content from background
Common region	Elements within a boundary are perceived as a group	Use cards, containers, and bordered sections

---

Colour

Colour Theory Basics

Concept	Description
Hue	The colour itself (red, blue, green)
Saturation	The intensity or purity of the colour
Brightness/Value	How light or dark the colour is
Warm colours	Red, orange, yellow — convey energy, urgency
Cool colours	Blue, green, purple — convey calm, trust
Neutral colours	Grey, white, black — provide balance and contrast

Colour in UX Design

Use Case	Colour Strategy
Primary action	High-contrast, brand-coloured button (e.g., blue "Submit")
Destructive action	Red for delete, cancel, or irreversible actions
Success feedback	Green for confirmation and success messages
Warning	Amber/yellow for caution and non-critical alerts
Error	Red for validation errors and failures
Disabled state	Low-contrast grey for inactive elements

Colour Accessibility

• Maintain a contrast ratio of at least 4.5:1 for normal text (WCAG AA)
• Never rely on colour alone to convey information (add icons, labels, or patterns)
• Test with colour blindness simulators (approximately 8% of men have colour vision deficiency)
• Provide dark mode and high-contrast mode options

---

Typography

Type Hierarchy

Typography establishes visual hierarchy and readability:

Level	Purpose	Typical Style
H1	Page title	Large, bold, high contrast
H2	Section heading	Slightly smaller, bold
H3	Sub-section heading	Medium size, semi-bold
Body	Main content text	16px minimum, regular weight
Caption	Supporting text, labels	Smaller, lighter weight
Button text	Call-to-action labels	Medium, semi-bold or bold, uppercase optional

Typography Best Practices