Visual Design for Interfaces
Gestalt Principles of Perception
The Gestalt school identified how humans perceive visual elements as organized wholes rather than isolated parts. These principles are foundational to interface layout.
Proximity
Elements placed near each other are perceived as a group. Spatial relationships communicate logical relationships.
Grouped (perceived as 2 groups): Ungrouped (perceived as 8 items):
●● ●● ●● ●● ● ● ● ● ● ● ● ●
Form field + label pairing:
[First Name] [Last Name] <- proximity groups label with field
[____________] [____________]
Application: Group related form fields, separate unrelated controls with whitespace, cluster navigation items by category.
Similarity
Elements sharing visual properties (color, shape, size, orientation) are perceived as related.
● ● ■ ■ ● ● <- perceived as 3 groups by shape
○ ○ ● ● ○ ○ <- perceived as 3 groups by fill
Application: Consistent styling for interactive elements (all links blue, all buttons same style), different styling for different functions.
Closure
The mind completes incomplete shapes, filling in gaps to perceive whole forms.
Application: Icons can use simplified, open forms. Users infer complete boundaries from partial borders. Card designs do not need full outlines.
Continuity
Elements arranged along a line or curve are perceived as related, even if interrupted.
Application: Alignment creates implicit connections. Progress bars, timelines, and step indicators leverage continuity.
Figure-Ground
Perception separates elements into foreground (figure) and background (ground). Ambiguity causes confusion.
Application: Modal dialogs use dimmed backgrounds to establish figure-ground. Cards with shadows lift content above the surface. Ensure interactive elements are clearly "figure."
Common Fate
Elements moving in the same direction are perceived as a group.
Application: Animated transitions that move related elements together. Parallax scrolling layers.
Typography
Typeface Selection
| Category | Characteristics | Use Case | |----------|----------------|----------| | Sans-serif | Clean, modern, high screen legibility | UI text, body copy on screens | | Serif | Traditional, authoritative, reading rhythm | Long-form reading, editorial | | Monospace | Fixed-width, aligned columns | Code, tabular data | | Display | Decorative, attention-grabbing | Headlines only, sparingly |
Typographic Scale
Establish a consistent size hierarchy using a modular scale (e.g., major third ratio 1.25):
Base: 16px
h6: 16px * 1.25 = 20px
h5: 20px * 1.25 = 25px
h4: 25px * 1.25 = 31px
h3: 31px * 1.25 = 39px
h2: 39px * 1.25 = 49px
h1: 49px * 1.25 = 61px
Readability Guidelines
- Line length: 45-75 characters per line (optimal ~66)
- Line height: 1.4-1.6x font size for body text
- Paragraph spacing: 0.75-1.0x font size
- Contrast: Minimum 4.5:1 for normal text, 3:1 for large text (WCAG AA)
- Body text minimum: 16px on screens
Color Theory
Color Spaces
| Space | Description | Use | |-------|-------------|-----| | RGB | Additive (red, green, blue) | Screen display | | HSL | Hue, Saturation, Lightness | Intuitive color selection | | HSB/HSV | Hue, Saturation, Brightness | Design tools | | CMYK | Subtractive (cyan, magenta, yellow, key) | Print | | OKLCH | Perceptually uniform lightness, chroma, hue | Modern CSS, accessible palettes |
Building a Color Palette
Primary: Brand identity color (1-2 colors)
Secondary: Complementary accent (1-2 colors)
Neutral: Grays for text, borders, backgrounds (5-10 shades)
Semantic: Success (green), Warning (amber), Error (red), Info (blue)
Generate tint/shade scales:
50 ████ lightest tint
100 ████
200 ████
300 ████
400 ████
500 ████ base color
600 ████
700 ████
800 ████
900 ████ darkest shade
Color and Contrast
WCAG contrast ratios (foreground to background luminance):
| Level | Normal Text (<18pt) | Large Text (>=18pt / >=14pt bold) | |-------|--------------------|---------------------------------| | AA | 4.5:1 | 3:1 | | AAA | 7:1 | 4.5:1 |
Designing for Color Vision Deficiency
~8% of males and ~0.5% of females have some form of color vision deficiency.
- Never use color alone to convey information. Supplement with icons, patterns, labels, or position.
- Deuteranopia/Protanopia (red-green): Most common. Avoid red/green as the only differentiator.
- Tritanopia (blue-yellow): Rare. Avoid blue/yellow as sole differentiator.
BAD: Red dot = error, Green dot = success (indistinguishable for ~8% of males)
GOOD: Red dot + X icon = error, Green dot + checkmark = success
Layout and Composition
Visual Hierarchy
Order of visual weight that guides the eye:
- Size: Larger elements are seen first
- Color/Contrast: High-contrast and saturated colors draw attention
- Position: Top-left in LTR cultures has priority (F-pattern, Z-pattern)
- Whitespace: Isolated elements receive more attention
- Typography: Bold, uppercase, or larger type weight
- Imagery: Photos and illustrations attract the eye before text
Reading Patterns
- F-pattern: Content-heavy pages (articles, search results). Users scan the top, then left edge.
- Z-pattern: Simple pages with minimal text (landing pages, hero sections).
- Gutenberg diagram: Four quadrants --- primary optical area (top-left) to terminal area (bottom-right).
Whitespace
Whitespace (negative space) is not wasted space. It:
- Groups and separates elements (proximity)
- Improves readability and comprehension
- Creates visual breathing room and elegance
- Directs attention to content
Grid Systems
Grids provide structure, alignment, and consistency across layouts.
Anatomy of a Grid
|<-margin->|<-col->|<-gutter->|<-col->|<-gutter->|<-col->|<-margin->|
margin: outer spacing between grid and viewport edge
column: content container (typically 4, 8, or 12 columns)
gutter: spacing between columns
Common Grid Systems
| Grid | Use Case | |------|----------| | 12-column | Web layouts (divisible by 2, 3, 4, 6) | | 8-column | Tablet layouts | | 4-column | Mobile layouts | | Baseline grid | Vertical rhythm for typography (e.g., 4px or 8px base unit) |
The 8-Point Grid
Use multiples of 8px for all spacing and sizing:
- Margins, padding: 8, 16, 24, 32, 40, 48...
- Component heights: 32, 40, 48, 56...
- Icon sizes: 16, 24, 32, 48...
Benefits: Clean scaling across resolutions, consistent visual rhythm, simplified decision-making.
Responsive Design
Breakpoint Strategy
Mobile first approach (min-width breakpoints):
Small phone: 320px (base styles, no media query)
Large phone: 480px
Tablet: 768px
Desktop: 1024px
Large desktop: 1280px
Wide: 1440px+
Responsive Patterns
| Pattern | Behavior | |---------|----------| | Reflow | Columns stack vertically on smaller screens | | Resize | Elements scale proportionally | | Reposition | Elements move to different locations | | Reveal/Hide | Show or hide elements based on space | | Swap | Replace components with space-appropriate alternatives |
Fluid Typography
Scale font sizes smoothly between breakpoints using CSS clamp():
/* Font scales from 16px at 320px viewport to 20px at 1280px viewport */
font-size: clamp(1rem, 0.857rem + 0.417vw, 1.25rem);
Design Systems and Atomic Design
Atomic Design (Brad Frost)
A methodology for building design systems from smallest to largest units:
Atoms -> Molecules -> Organisms -> Templates -> Pages
(button, (search bar = (site header = (page (specific
label, input + logo + layout instance
input, button + nav + with with real
icon) label) search bar) placeholders) content)
Design System Components
A design system is a collection of reusable components, guided by clear standards, that can be assembled to build applications.
Contents of a design system:
- Design tokens: Named values for colors, spacing, typography, shadows, motion
- Component library: Buttons, inputs, cards, modals, tables, navigation
- Pattern library: Login flows, search patterns, data entry forms
- Documentation: Usage guidelines, dos and don'ts, accessibility notes
- Voice and tone: Writing guidelines for UI copy
Design Tokens
// Primitive tokens (raw values)
color-blue-500: #2563EB
spacing-4: 16px
// Semantic tokens (purpose-driven aliases)
color-primary: color-blue-500
color-error: color-red-500
spacing-component-gap: spacing-4
// Component tokens (scoped to components)
button-background: color-primary
button-padding-x: spacing-4
Tokens enable theme switching (light/dark mode), brand customization, and cross-platform consistency from a single source of truth.