UXD104 · Visual Design and UI Systems

Categories: Digital Innovation
Wishlist Share

About Course

Turn wireframes into polished, accessible interfaces using visual hierarchy, typography and color principles, and build a reusable component-based UI system in Figma.

Build · 6 hours · 4 lessons, a lab, an assessed assignment and a portfolio piece

Who it is for

Learners who can create wireframes and now want to produce consistent, professional-looking screens and a small design system.

Prerequisites

UXD103, or working knowledge of wireframing in Figma.

What you will be able to do

  • Apply Gestalt principles, alignment and spacing to create clear visual hierarchy
  • Define a type scale and an accessible color palette that meets WCAG AA contrast
  • Build design tokens and reusable Figma components with variants and auto layout
  • Apply the UI kit to convert wireframes into consistent high-fidelity screens

Lessons

  • Lesson 1 · Visual hierarchy, layout and typography
  • Lesson 2 · Color, imagery and accessibility
  • Lesson 3 · Design tokens and component systems
  • Lesson 4 · Lab and assignment

Lab: Mini UI kit and high-fidelity screens

You create a small UI kit for a local business app, such as a coffee shop loyalty and ordering app. You define color, typography and spacing styles, build buttons, inputs, cards and a navigation bar as components with variants, then use them to turn four of your wireframes into high-fidelity mobile screens.

Free tools: Figma free plan, Google Fonts and a free contrast checker

Assessed assignment

Submit your Figma file link (view access) or PDF exports showing your style guide page, component page and four high-fidelity screens. The style guide must document color tokens with contrast ratios, a type scale with usage rules and a spacing scale. Components must include at least three button variants with default, pressed and disabled states, a text input with error state and a card. Add a one-page rationale explaining your visual choices and how they support the brand and accessibility.

Criterion Weight What excellent work looks like
Visual hierarchy and layout 25% Screens have a clear focal point, consistent alignment and spacing, and related elements are grouped logically.
Typography and color 25% The type scale is consistent and readable, the palette is purposeful and all text meets WCAG AA contrast.
Component system 30% Components use auto layout and variants, cover required states, are named consistently and are reused across all screens.
Rationale and documentation 20% The style guide is clear enough for another designer to use, and the rationale links choices to brand and accessibility goals.

Portfolio piece

A documented mini UI kit and four high-fidelity screens that demonstrate your visual design and systems skills.

Self-paced, 12-month access. Questions are answered in writing through the student panel. A completion record is issued when you finish the course.

Next step

Continue with UXD105 · Prototyping and Usability Testing · 8 hours · $56.00

Continue to the next course

Prefer the whole program? Program in UX/UI & AI-Assisted Product Design · $277.00 (10% less than buying the courses separately)

Show More

What Will You Learn?

  • Apply Gestalt principles, alignment and spacing to create clear visual hierarchy
  • Define a type scale and an accessible color palette that meets WCAG AA contrast
  • Build design tokens and reusable Figma components with variants and auto layout
  • Apply the UI kit to convert wireframes into consistent high-fidelity screens

Course Content

UXD104 · Visual Design and UI Systems (6 h)
Turn wireframes into polished, accessible interfaces using visual hierarchy, typography and color principles, and build a reusable component-based UI system in Figma.

  • Lesson 1 · Visual hierarchy, layout and typography
  • Lesson 2 · Color, imagery and accessibility
  • Lesson 3 · Design tokens and component systems
  • Lesson 4 · Lab and assignment
  • UXD104 Assessment · Visual Design and UI Systems
Scroll to Top