Career guide

Graphic Design → UI Design

Translate your visual expertise into digital interfaces with component thinking and responsive design

Explore the study outline

01 / About this guide

Skills to build.
Work to practice.

Graphic designers bring strong visual foundations — typography, color theory, composition, grid systems — that transfer directly to UI work. The gap is in thinking systematically: components instead of artboards, responsive layouts instead of fixed dimensions, multiple interaction states instead of a single finished composition. This path teaches you to apply your existing strengths to a medium that is interactive, stateful, and never truly finished.

Skills you’ll develop

  • UI Component Design
  • Responsive Layout
  • Design Tokens
  • Digital Typography
  • Color Systems
  • Accessibility (WCAG)
  • Design Handoff

What to work toward

  • Design responsive, component-based user interfaces across breakpoints
  • Work with design tokens and systematic color, type, and spacing scales
  • Meet WCAG 2.1 AA accessibility requirements in every design
  • Create designs with all interaction states documented for developer handoff
  • Build a UI design portfolio with 2-3 interface projects showing process

Before you begin

  • Professional graphic design experience (print, brand, or marketing)
  • Strong typography and color theory foundation
  • Basic familiarity with Figma or similar digital design tools
  • Interest in interactive, screen-based design

02 / Study outline

Choose a topic.
Put it to work.

These 7 modules outline the topics to study. Follow the suggested order or start with a gap in your current work. Linked exercises include instructions, deliverables, and review criteria.

  1. 01

    From Print to Screen

    2 weeks

    Understand the fundamental shifts: fixed to responsive, static to interactive, CMYK to RGB, DPI to resolution independence

    • Fixed Canvas vs. Fluid Viewport: Thinking in Relative Units (rem, em, vw)
    • CMYK to RGB/Hex/HSL: Additive Color and Screen Gamut
    • DPI to Resolution Independence: Vector-First (SVG) and srcset Strategies
    • State-Based Design: Every Element Has 5+ States (Default, Hover, Focus, Active, Disabled)
    • The Iterative Nature of Digital: Design → Test → Ship → Measure → Iterate
  2. 02

    Digital Typography

    3 weeks

    Apply your typographic instincts to screen-specific concerns: web fonts, type scales, variable fonts, and OpenType on the web

    • Web Fonts vs. Installed Fonts: Loading, FOUT/FOIT, font-display, and Licensing
    • Mathematical Type Scales: Major Third (1.25), Perfect Fourth (1.333), Golden Ratio
    • Line-Height for Screens (1.4-1.7x), Optimal Line Length (45-75ch), Paragraph Spacing
    • Variable Fonts: Weight, Width, Slant, Optical Size Axes in a Single File
    • OpenType Features in CSS: Ligatures, Tabular Numerals, Small Caps, Stylistic Sets
    • System Font Stacks as a Zero-Cost, Instant-Loading Alternative
  3. 03

    Color for Digital Interfaces

    2 weeks

    Translate your color expertise into systematic digital color with tokens, themes, and accessibility

    • Color Formats: Hex, RGB/RGBA, HSL/HSLA, OKLCH for Perceptual Uniformity
    • Three-Tier Token Architecture: Reference, Semantic, and Component Tokens
    • WCAG 2.x Contrast (4.5:1 AA) vs. APCA for WCAG 3.0 (Polarity-Aware, Size-Dependent)
    • Dark Mode: Surface Hierarchy, Reduced Saturation, Shadow Replacement
    • Theme Switching via CSS Custom Properties and prefers-color-scheme
  4. 04

    Component-Based Design

    3 weeks

    Shift from page-based compositions to Atomic Design: atoms, molecules, organisms, templates, pages

    • Atomic Design Methodology: Building Composable UI from Small Parts
    • Component Variants and State Documentation
    • Auto Layout and Responsive Constraints in Figma
    • Designing for Reuse: One Button Pattern Used in 200 Places
    • Naming Conventions and Component Organization

    Put this into practice

    Build a Component Library in Figma
  5. 05

    Layout, Grids & Responsive Design

    3 weeks

    Extend your grid knowledge to fluid, multi-breakpoint digital layouts

    • CSS Grid and Flexbox as Extensions of Print Grid Systems
    • Mobile-First Design: Start Small, Progressively Enhance
    • Common Breakpoints: 375px, 768px, 1024px, 1440px
    • Container Queries: Components Responding to Their Container, Not Viewport
    • Adaptive Patterns: Responsive Tables, Collapsible Navigation, Reflowing Forms

    Put this into practice

    Responsive Redesign
  6. 06

    Accessibility Foundations

    2 weeks

    Learn the accessibility requirements that are built-in to digital design, not separate editions

    • WCAG 2.1 AA: The Standard Compliance Target
    • Keyboard Navigation: Every Interactive Element Reachable Without a Mouse
    • Focus Indicators: Visible Focus States (Never Remove Without Replacement)
    • Touch Targets: Minimum 44x44px for Mobile Interfaces
    • Screen Reader Compatibility: Heading Hierarchy, Alt Text, ARIA Labels
    • prefers-reduced-motion for Animation-Sensitive Users
  7. 07

    Design Handoff & Portfolio

    2 weeks

    Learn developer handoff practices and reposition your graphic design experience for UI roles

    • Structured Design Handoff: Component Specs, Redlines, Responsive Documentation
    • Developer-Facing Tools: Figma Dev Mode, Zeplin, Storybook
    • Showcasing Visual Foundation in UI Context
    • Building UI Case Studies That Show State Thinking and Responsive Behavior

03 / Reading and exercises

Read. Try.
Make it your own.

Published articles, book recommendations, and practical projects that support this guide.

  • book

    Refactoring UI — Adam Wathan & Steve Schoger

    252 pages of actionable UI design advice with real examples. Ideal for visual designers wanting concrete techniques.

    Find the book

  • book

    Atomic Design — Brad Frost

    The foundational text on component-based design methodology. Free online at atomicdesign.bradfrost.com.

    Find the book

  • book

    Inclusive Design Patterns — Heydon Pickering

    Practical accessibility patterns for common UI components.

    Find the book

  • exercise

    Build a Component Library in Figma

    Create a systematic component library with variants, auto layout, and documented states.

    Try the exercise

  • exercise

    Responsive Redesign

    Take a print layout and redesign it for mobile, tablet, and desktop with proper breakpoints and token-based color.

    Try the exercise

Start with
one exercise.

Build a Component Library in Figma