UI Design Principles Cheat Sheet

Quick reference guide to essential UI design principles and best practices

Design Principles at a Glance

This cheat sheet condenses the core principles of user interface design into a fast, scannable reference. Use it to check your work against established visual, layout, typography, color, accessibility, and usability standards. Each section lists concise rules you can apply directly while designing, reviewing, or handing off interfaces. The goal is consistency, clarity, and usability—interfaces that are easy to perceive, understand, and operate.

Jump to Principles UI Checklist
UI design wireframes and components

Core Visual Principles

The foundations of clear, organized interface composition

Visual Hierarchy

Guide the eye to what matters most first. Establish hierarchy with size, weight, color, position, and spacing so users instantly know where to look.

Quick Rules:

Make primary actions the most prominent element. Limit to one dominant focal point per view. Larger, bolder, higher-contrast = more important.

Contrast

Difference creates emphasis and separation. Use contrast in color, size, and weight to distinguish elements and direct attention.

Quick Rules:

Contrast must be intentional, not accidental. Ensure text meets WCAG contrast minimums. Avoid contrasting everything—if all stands out, nothing does.

Alignment

Aligned elements create order and a visual connection. Every element should align with something else on the page.

Quick Rules:

Prefer a strong left edge for text. Align to a shared grid. Avoid stray center-aligned blocks that break the structure.

Proximity (Gestalt)

Related items grouped close together are perceived as a unit. Proximity communicates relationships without borders or lines.

Quick Rules:

Keep a label closer to its field than to neighboring fields. Use whitespace to separate unrelated groups. Tighten spacing within a group.

Repetition & Consistency

Repeating styles, spacing, and patterns creates cohesion and a learnable system. Consistency reduces cognitive load.

Quick Rules:

Reuse the same button styles, icon set, and spacing scale throughout. Same action should always look and behave the same way.

Balance & White Space

Distribute visual weight evenly (symmetrical or asymmetrical) and use white space to give elements room to breathe.

Quick Rules:

White space is not wasted space—it improves comprehension and focus. Don't fear empty areas. Other relevant Gestalt principles: similarity, closure, continuity, common region, figure/ground.

Layout, Typography & Color

Quick-reference rules for the building blocks of any interface

Layout & Grid Systems

Structure content predictably with grids, consistent spacing, and responsive breakpoints.

Grids & Spacing

Foundational Every Screen
Grid Rules:
  • Use a column grid (commonly 12 columns) for flexible, alignable layouts.
  • Define consistent gutters and margins; keep content within a max line/container width.
  • Align components to the grid—don't place elements arbitrarily.
Spacing Scale (8pt grid):
  • Base spacing on multiples of 8px: 4, 8, 16, 24, 32, 48, 64 (4px allowed for fine adjustments).
  • A consistent scale makes spacing decisions fast and rhythm predictable.
  • Apply the same scale to padding, margins, and gaps.
Responsive Breakpoints (typical):

Mobile < 640px, Tablet 640–1024px, Desktop 1024–1440px, Large > 1440px. Design mobile-first, then enhance for larger screens. Treat breakpoints as content-driven, not device-specific.

Typography

Readable, well-scaled type is the backbone of most interfaces.

Type Rules

Readability High Impact
Scale & Hierarchy:
  • Use a modular type scale (e.g., ratios like 1.25 or 1.333) for harmonious sizes.
  • Limit to a few distinct sizes/weights; create hierarchy with size, weight, and color.
  • Body text is typically 16px on the web for comfortable reading.
Measure & Line Height:
  • Line length (measure): aim for ~45–75 characters per line for body text.
  • Line height: ~1.4–1.6 for body; tighter (~1.1–1.3) for large headings.
  • Left-align long-form text; avoid justified text that creates uneven spacing.
Pairing & Readability:

Limit to 1–2 typefaces (a heading + body pairing). Ensure clear contrast between paired fonts. Prefer legible fonts at small sizes; avoid all-caps for long passages and very thin weights on low-contrast backgrounds.

Color

Use color purposefully to communicate, organize, and remain accessible.

Color Rules

Intentional Accessibility-Critical
Basics & 60-30-10:
  • Color theory basics: hue, saturation, value/brightness; harmonies include complementary, analogous, and triadic.
  • 60-30-10 rule: ~60% dominant/neutral, ~30% secondary, ~10% accent for emphasis and CTAs.
  • Build a palette with neutrals plus a primary and a small set of supporting colors.
Semantic Colors:
  • Assign meaning consistently: success (green), warning (amber), error/danger (red), info (blue).
  • Reuse semantic tokens across components rather than ad-hoc hex values.
  • Never rely on color alone—pair with icons, text, or patterns.
Accessible Contrast (WCAG AA):

Normal text: minimum 4.5:1 contrast ratio. Large text (≥18.66px bold or ≥24px): minimum 3:1. UI components and graphical objects (borders, icons, focus indicators): minimum 3:1. Test every text/background combination.

Components, Interaction & Heuristics

Patterns and rules that make interfaces consistent and usable

1

Components & Consistency

Build interfaces from reusable, well-defined components governed by a design system. Consistency across components reduces friction and development cost.

Rules:

  • Maintain a design system: tokens (color, spacing, type), components, and usage guidelines.
  • Reuse components rather than recreating one-off variants.
  • Define all interactive states: default, hover, active/pressed, focus, disabled (and loading/selected where relevant).
  • Keep naming, spacing, and behavior consistent across the system.
2

Interaction & Feedback

Interfaces should signal what can be done and respond clearly to every action. Cover all the states a screen can be in.

Rules:

  • Affordances: make interactive elements look interactive (buttons look pressable, links look clickable).
  • Feedback: confirm every action immediately (visual change, toast, inline message).
  • Design the empty, loading, error, and success states—not just the ideal "full data" state.
  • Use microinteractions (subtle transitions, animations) to communicate change; keep them fast (~150–300ms) and purposeful.
  • Provide clear, specific, recoverable error messages.
3

Usability Heuristics (Nielsen's 10)

Jakob Nielsen's 10 general heuristics for interaction design—use them as a review checklist.

The 10 Heuristics:

  • 1. Visibility of system status — keep users informed with timely feedback.
  • 2. Match between system and the real world — use familiar words, concepts, and conventions.
  • 3. User control and freedom — provide undo, redo, and clear exits.
  • 4. Consistency and standards — follow platform and internal conventions.
  • 5. Error prevention — prevent problems before they occur.
  • 6. Recognition rather than recall — make options visible; minimize memory load.
  • 7. Flexibility and efficiency of use — offer shortcuts for experienced users.
  • 8. Aesthetic and minimalist design — show only relevant information.
  • 9. Help users recognize, diagnose, and recover from errors — plain-language messages with solutions.
  • 10. Help and documentation — provide accessible, searchable help when needed.
4

Accessibility Quick Rules

Accessible design is good design—build for the widest range of users from the start.

Rules:

  • Meet WCAG AA contrast: 4.5:1 for normal text, 3:1 for large text and UI components.
  • Provide visible focus states for all interactive elements (never remove focus outlines without a replacement).
  • Make touch targets at least ~44×44px (Apple) / ~48×48dp (Material).
  • Don't rely on color alone to convey information—add text, icons, or patterns.
  • Label every control; use proper semantic HTML and alt text for meaningful images.
  • Ensure full keyboard operability and a logical focus/tab order.
5

Forms Best Practices

Forms are where users do real work—reduce effort and prevent errors.

Rules:

  • Use clear, persistent labels above fields; avoid placeholder-only labels.
  • Ask only for what you need; keep forms as short as possible.
  • Group related fields; use a single column for linear flow.
  • Validate inline and show specific, helpful error messages near the field.
  • Match input type and keyboard to the data (email, number, tel, date).
  • Indicate required vs. optional clearly; keep the primary submit action prominent.
6

Mobile & Responsive Guidelines

Design for varied screens, inputs, and contexts—starting from the smallest.

Rules:

  • Design mobile-first; progressively enhance for larger viewports.
  • Use fluid layouts and flexible images; avoid fixed pixel widths.
  • Keep primary actions within thumb reach; place key controls near the bottom on mobile.
  • Maintain adequate touch target size and spacing to prevent mis-taps.
  • Test at real breakpoints and on real devices; consider orientation and reduced bandwidth.
  • Respect safe areas, notches, and on-screen keyboards.

Pre-Handoff UI Checklist

Run through this before handing designs to development

Visual & Layout

Check:

  • Clear visual hierarchy with one obvious primary action per screen.
  • Everything aligns to the grid; spacing follows the 8pt scale consistently.
  • Adequate white space; related elements grouped, unrelated ones separated.
  • Layout verified at all key breakpoints.

Typography & Color

Check:

  • Type uses the defined scale; body measure ~45–75 chars; comfortable line height.
  • Colors map to defined tokens; semantic colors used consistently.
  • All text meets WCAG AA contrast (4.5:1 / 3:1).
  • No information conveyed by color alone.

Components & States

Check:

  • Components reused from the design system; no unintended one-off variants.
  • All states designed: default, hover, active, focus, disabled, loading.
  • Empty, loading, error, and success screen states are specified.
  • Microinteractions and transitions defined where relevant.

Accessibility & Forms

Check:

  • Visible focus states; logical keyboard/tab order.
  • Touch targets ≥ ~44px; controls and images properly labeled.
  • Form fields have persistent labels, helpful errors, and correct input types.
  • Annotations, specs, and assets ready for developer handoff.

Related Resources

Continue learning with these related guides and references

UI/UX Design Course

Go deeper than the cheat sheet with a structured course covering UI and UX design fundamentals and process.

View Course

Git Commands Cheat Sheet

A companion quick-reference for the most common Git commands and workflows.

View Cheat Sheet

React Component Templates

Ready-to-use React component templates to turn these UI principles into real, reusable code.

View Templates

Accessibility in EdTech

Expand on the accessibility rules here with a fuller guide to inclusive, accessible design.

Read Guide

Frequently Asked Questions

Common questions about applying UI design principles