Skip to content

Design — UI/UX Principles & Resources

Last reviewed: 2026-09-17

UI/UX design encompasses the visual and interactive aspects of digital products. Good design improves usability, accessibility, and user satisfaction — making it a critical skill for developers, not just dedicated designers.

Overview

This article covers design fundamentals: colour, typography and layout, interaction principles, design systems, accessibility, and the tooling landscape for producing clean, functional interfaces.

Topics Covered

  • Colour theory and accessible contrast
  • Typography: hierarchy, scale, measure, pairing
  • Layout and spacing systems
  • Interaction and feedback patterns
  • Design systems and component libraries
  • Accessibility standards and checks
  • Design and prototyping tools
  • Asset sources: icons, fonts, imagery

Core Design Principles

1. Colour

  • 60-30-10 rule — 60% dominant, 30% secondary, 10% accent
  • Contrast — WCAG AA (4.5:1 for text, 3:1 for large text)
  • Colour psychology — Blue (trust), Green (growth), Red (urgency)
  • Accessibility — Don't rely on colour alone (add icons/text)

2. Typography

  • Hierarchy — Headings > Subheadings > Body > Captions
  • Scale — Use a modular scale (1.25, 1.333, 1.5 ratio)
  • Line height — 1.5× for body text
  • Measure — 45–75 characters per line for readability
  • Font pairing — Serif + sans-serif, or one family with weights

3. Layout & Spacing

  • Grid systems — 8px / 4px grid foundation
  • White space — Breathing room between elements
  • Alignment — Consistent edges create visual order
  • Proximity — Related items close together
  • Responsive design — Mobile-first, breakpoints for desktop/tablet

4. Interaction

  • Feedback — Visual response to every action (hover, click, loading)
  • Consistency — Same patterns across the product
  • Affordance — Visual cues suggest how elements work (buttons look clickable)
  • Progressive disclosure — Show complex options only when needed
  • Error prevention — Constrain inputs and confirm destructive actions

Design Systems

System Creator Best For
Material Design 3 Google Android, web, cross-platform
Human Interface Guidelines Apple iOS, macOS, visionOS
Atlassian Design System Atlassian Enterprise tools
Polaris Shopify E-commerce
Carbon IBM Enterprise dashboards
Ant Design Ant Group Admin panels

A design system is more than a component library: it pairs tokens (colour, spacing, type), components, patterns and usage guidance with a governance process so teams converge instead of diverging.

Design Tokens

/* Example token layer consumed by components */
:root {
  --color-bg: #ffffff;
  --color-fg: #1a1a1a;
  --color-accent: #2563eb;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --radius-md: 8px;
  --font-body: 1rem/1.5 system-ui, sans-serif;
}

Accessibility Checklist

Check Minimum standard
Text contrast 4.5:1 body, 3:1 large text (WCAG AA)
Keyboard access Every interactive element reachable and operable
Focus visibility Visible focus indicator, never removed without a replacement
Labels Every input has a programmatic label
Alt text Meaningful for informative images, empty for decorative
Motion Respect prefers-reduced-motion
Target size At least 24×24 CSS px, ideally 44×44

Automated tools (Lighthouse, WAVE, axe) catch maybe a third of issues — keyboard and screen-reader passes are still required.

Tools

Tool Purpose Cost
Figma UI design, prototyping, collaboration Free tier + paid
Penpot Open-source Figma alternative Free
Sketch macOS UI design Paid
Adobe XD UI/UX design Creative Cloud
Framer Interaction design + web publishing Free tier
Spline 3D design for web Free tier

Asset Sources

  • Icons — Feather, Lucide, Heroicons, Font Awesome
  • Fonts — Google Fonts, Font Squirrel
  • Imagery — Unsplash, Pexels
  • UI inspiration — Dribbble, Behance, Awwwards
  • Colour palettes — Coolors, Adobe Color

Resources