Visual Design

Why Visual Design Matters

Visual design is not decoration—it's communication. Good visual design guides attention, establishes hierarchy, builds trust, and makes complex information understandable.

Example: Stripe's Visual Redesign (2019)

Before: Clean but generic, looked like every other SaaS product

After: Bold gradients, unique illustrations, confident typography

Impact: Brand recognition increased 40%, perceived as more innovative and trustworthy, conversion rate improved 15%

Lesson: Visual design directly impacts business metrics

Typography

Typography Fundamentals

  • Typeface: The design (Helvetica, Georgia)
  • Font: The file (Helvetica Bold 16px)
  • Hierarchy: Size, weight, color create importance
  • Readability: Easy to read individual characters
  • Legibility: Easy to read blocks of text

Type Scale Best Practices

  • Limit Sizes: 5-7 sizes maximum (H1, H2, H3, Body, Small, Tiny)
  • Consistent Ratio: Use scale like 1.25x or 1.5x between sizes
  • Line Height: 1.4-1.6 for body text, tighter for headings
  • Line Length: 50-75 characters per line for optimal reading
  • Contrast: Minimum 4.5:1 for body text (WCAG AA)

Example: Medium's Reading Experience

Typography Choices:

  • Typeface: Charter for body (designed for reading)
  • Size: 21px (larger than typical 16px)
  • Line Height: 1.58 (generous spacing)
  • Line Length: ~70 characters
  • Color: #292929 (not pure black, easier on eyes)

Result: Average reading time increased 30%, users finish articles more often

Font Pairing

Classic Combinations:

  • Serif + Sans-Serif: Georgia headings + Helvetica body
  • Contrast Weights: Montserrat Bold + Montserrat Light
  • Same Family: Different weights of same typeface

Example: Airbnb uses Cereal (custom font) across all weights for consistency while maintaining hierarchy through size and weight

Color Theory

Color Psychology

  • Blue: Trust, calm, professional (Facebook, LinkedIn, Twitter)
  • Red: Urgency, passion, energy (YouTube, Netflix, Pinterest)
  • Green: Growth, health, money (Spotify, WhatsApp, Mint)
  • Yellow: Optimism, attention, caution (Snapchat, McDonald's)
  • Purple: Creativity, luxury, wisdom (Twitch, Yahoo)
  • Orange: Friendly, confident, playful (SoundCloud, Fandango)

Example: Spotify's Green

Color: #1DB954 (bright green)

Why It Works:

  • Stands out in app stores (most apps use blue)
  • Associated with energy and freshness
  • High contrast with black background
  • Memorable and ownable

Usage: Sparingly—only for primary actions and branding, preventing visual fatigue

Building a Color Palette

  • Primary: Brand color, main actions (1 color)
  • Secondary: Supporting actions, accents (1-2 colors)
  • Neutrals: Text, backgrounds, borders (5-7 shades of gray)
  • Semantic: Success (green), warning (yellow), error (red), info (blue)
  • Shades: Each color needs 5-10 shades for different uses

60-30-10 Rule

60%: Dominant color (usually neutral background)

30%: Secondary color (content areas, cards)

10%: Accent color (CTAs, highlights)

Example: Apple.com uses 60% white, 30% light gray, 10% blue for links/buttons

Example: Slack's Color System

Challenge: Needed colors for channels, DMs, mentions, reactions

Solution: Created systematic color palette:

  • Aubergine: Primary brand color
  • Channel Colors: 10 distinct colors for visual differentiation
  • Mention Yellow: High-contrast for @mentions
  • Semantic Colors: Green (online), gray (away), red (notifications)

Result: Users can scan channels 40% faster using color cues

Layout & Spacing

The 8-Point Grid

Concept: All spacing and sizing in multiples of 8px

Why 8: Divisible by 2, 4, scales well across devices

Usage: Padding (8, 16, 24, 32), margins, component sizes

Example: Material Design uses 8dp grid, making designs consistent and scalable

Spacing Scale

  • 4px: Tight spacing (icon to label)
  • 8px: Related elements (form label to input)
  • 16px: Component padding
  • 24px: Between sections
  • 32px: Major sections
  • 48px+: Page margins

Example: Apple's Generous Whitespace

Approach: Lots of breathing room, minimal elements per screen

Benefits:

  • Focuses attention on key content
  • Feels premium and uncluttered
  • Easier to scan and process
  • Emphasizes product photography

Trade-off: Requires more scrolling, but increased engagement and conversion

F-Pattern & Z-Pattern

F-Pattern: Users scan text-heavy pages in F-shape (top, left side, horizontal sweeps)

Example: Google search results—title at top, URL on left, description scanned horizontally

Z-Pattern: Users scan visual-heavy pages in Z-shape (top-left to top-right, diagonal, bottom-left to bottom-right)

Example: Landing pages—logo top-left, CTA top-right, benefits diagonal, footer CTA bottom-right

Visual Hierarchy

Techniques for Creating Hierarchy

  • Size: Larger = more important
  • Weight: Bolder = more important
  • Color: High contrast = more important
  • Position: Top and left = seen first
  • Spacing: More space = more emphasis
  • Grouping: Related items together

Example: Airbnb Listing Cards

Hierarchy:

  1. Photo: Largest element, grabs attention
  2. Price: Bold, high contrast
  3. Title: Medium weight, clear
  4. Details: Smaller, lighter (beds, baths)
  5. Rating: Small but prominent with star icon

Why It Works: Eye naturally flows from photo → price → title, matching user priorities

Common Hierarchy Mistakes

  • Everything is Important: When everything is bold, nothing stands out
  • Poor Contrast: Light gray text on white background
  • Too Many Fonts: More than 2-3 typefaces creates chaos
  • Inconsistent Sizing: Random sizes without system

Imagery & Iconography

Types of Images

  • Photography: Real, authentic, emotional
  • Illustrations: Unique, branded, conceptual
  • Icons: Quick recognition, universal language
  • Data Visualization: Make numbers understandable

Example: Dropbox's Illustration System

2017 Rebrand: Moved from photography to custom illustrations

Style: Colorful, abstract, geometric, playful

Purpose: Differentiate from competitors, express creativity

System: Modular components that can be combined infinitely

Result: Unique brand identity, 25% increase in brand recognition

Icon Design Principles

  • Consistent Style: Same stroke width, corner radius, level of detail
  • Pixel Perfect: Align to pixel grid for sharpness
  • Optical Balance: Visual weight, not mathematical centering
  • Universal Symbols: Use familiar metaphors
  • Test at Size: Icons should work at 16px and 48px

Icon Examples

Material Icons: Filled and outlined versions, 2000+ icons, consistent 24x24 grid

SF Symbols (Apple): 3000+ icons, 9 weights, automatic alignment with text

Feather Icons: Minimalist, 2px stroke, open source

Contrast & Accessibility

WCAG Contrast Requirements

  • AA (Minimum): 4.5:1 for normal text, 3:1 for large text
  • AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text

Example: #767676 on white = 4.54:1 (passes AA)

Example: #959595 on white = 2.84:1 (fails, too light)

Example: GitHub's Dark Mode

Challenge: Maintain readability in dark theme

Solution:

  • Not pure black (#0d1117 instead of #000000)
  • Reduced white text to #c9d1d9 (less eye strain)
  • Adjusted all colors for dark background contrast
  • Tested with colorblind simulations

Result: 40% of users switched to dark mode, reduced eye strain complaints 60%

Don't Rely on Color Alone

  • Error States: Red color + icon + text explanation
  • Links: Color + underline (or other visual distinction)
  • Charts: Color + patterns + labels
  • Status: Color + icon + text

Responsive Design

Breakpoints

  • Mobile: 320px - 767px
  • Tablet: 768px - 1023px
  • Desktop: 1024px - 1439px
  • Large Desktop: 1440px+

Example: The Guardian's Responsive Redesign

Approach: Mobile-first design

Mobile: Single column, stacked content, hamburger menu

Tablet: Two columns, side-by-side articles

Desktop: Three columns, persistent navigation, larger images

Result: Mobile traffic increased 40%, engagement up 25%

Responsive Patterns

  • Fluid Grids: Columns adjust based on screen size
  • Flexible Images: Scale with container
  • Stacking: Side-by-side becomes vertical on mobile
  • Off-Canvas: Navigation slides in from side
  • Priority+: Show most important items, hide rest in menu

Visual Design Systems

Components of a Visual System

  • Color Palette: Primary, secondary, semantic, neutrals
  • Typography Scale: Sizes, weights, line heights
  • Spacing System: Consistent margins and padding
  • Elevation: Shadows and depth levels
  • Border Radius: Consistent corner rounding
  • Icon Library: Consistent style and sizes

Example: Atlassian Design System

Challenge: Jira, Confluence, Trello all looked different

Solution: Unified design system across products

  • Shared color palette
  • Common components (buttons, forms, modals)
  • Consistent spacing (8px grid)
  • Unified typography

Result: Design consistency increased 90%, development time reduced 30%

Visual Design Trends (Use Wisely)

Trends to Consider

  • Glassmorphism: Frosted glass effect (iOS, Windows 11)
  • Neumorphism: Soft shadows, subtle depth (overused, accessibility issues)
  • Dark Mode: Now expected, not optional
  • Bold Typography: Large, confident type
  • 3D Elements: Depth and dimension
  • Gradients: Back in style (Instagram, Stripe)

Warning: Trends fade. Focus on timeless principles first, add trendy elements sparingly

📅 Evolution of Visual Design

Pre-2000: Skeuomorphic & Print-Inspired

Example: Early Mac OS, Windows 98

  • Heavy use of gradients, shadows, and textures
  • Skeuomorphic design (digital mimics physical)
  • Limited by 256-color palettes and low resolution
  • Web-safe colors and table-based layouts
  • Print design principles applied to screens

Pre-2023: Flat & Minimalist

Example: iOS 7, Material Design, Airbnb

  • Flat design revolution (no shadows, gradients)
  • Minimalism and white space
  • Custom web fonts and high-resolution displays
  • Responsive design for multiple screen sizes
  • Design systems and component libraries

2023+: Expressive & AI-Generated

Example: Midjourney aesthetics, Glassmorphism, 3D

  • Return of depth (glassmorphism, neumorphism)
  • AI-generated imagery and illustrations
  • 3D elements and spatial design
  • Dark mode as standard, not afterthought
  • Variable fonts and advanced typography

Fun Fact

The color blue dominates tech brands (Facebook, Twitter, LinkedIn, Dropbox) because of an early design constraint! In the 1990s, blue was one of the few colors that displayed consistently across different monitors and browsers. Designers gravitated toward it for reliability. But there's also psychology: blue conveys trust and professionalism. Mark Zuckerberg is also red-green colorblind, so blue is the richest color he can see—which is why Facebook is blue!

⚠️ When Theory Meets Reality: The Contradiction

Theory Says: Follow established design principles (contrast, hierarchy, alignment, etc.)

Reality: Craigslist has terrible visual design but is worth billions and dominates its market.

Example: Craigslist's "Ugly" Success

  • Looks like it was designed in 1995 (because it was)
  • No images, minimal CSS, blue hyperlinks
  • Violates every modern design principle
  • Generates $1B+ in revenue annually
  • Users prefer it BECAUSE it's simple and fast

Lesson: Beautiful design doesn't always win. Sometimes utility, speed, and familiarity matter more than aesthetics. Know your audience—Craigslist users value function over form. Don't over-design when simple works.

📚 Resources & Further Reading

Books

  • Lupton, Ellen. Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students. 2nd ed., Princeton Architectural Press, 2010.
  • Müller-Brockmann, Josef. Grid Systems in Graphic Design. Niggli, 1996.
  • Weinschenk, Susan. 100 Things Every Designer Needs to Know About People. New Riders, 2011.

Articles & Papers

Tools

  • Figma - Collaborative design tool
  • Adobe Creative Suite - Industry standard design tools
  • Coolors.co - Color palette generator
← Previous: Interaction Design Next: Prototyping →