UI/UX & Graphics

Class 1 — The Designer's Eye

• What design actually is — problem solving, not decoration
• The 7 principles of design: contrast, alignment, repetition, proximity, balance, space, hierarchy
• Gestalt principles: how the human eye groups and reads visual information
• Sketching as a design tool — communicating ideas without software
• Deconstructing great design: what makes it work and why
• Setting up Figma: frames, layers, shapes, and the basics of the canvas

Class 2 — Typography

• Anatomy of a typeface: baseline, x-height, ascender, descender, serif vs. sans-serif
• Type classification: old-style, transitional, modern, slab, humanist
• Type hierarchy: headline, subheading, body, caption — and how size, weight, and spacing create order
• Font pairing: rules, ratios, and how to combine typefaces confidently
• Kerning, tracking, leading — the difference between amateur and professional text
• Typography in Figma: text styles, auto layout, and responsive type

Class 3 — Color Theory

• The color wheel: primary, secondary, tertiary colors
• Color harmonies: complementary, analogous, triadic, split-complementary
• Color psychology: how color creates emotion and communicates meaning
• HSL vs. RGB vs. HEX — how designers think about color values
• Building a color palette from scratch: primary, secondary, neutral, semantic colors
• Accessibility in color: contrast ratios and WCAG 2.1 AA compliance

Class 1 — Brand Identity Systems

• What a brand is — and what it is not
• Brand strategy: mission, values, personality, and voice
• The components of a visual identity: logo, color, typography, imagery, tone
• Brand guidelines: why consistency is a design decision
• Analysing real brand identities: what makes them work
• Moodboarding in Figma: gathering visual direction before designing

Class 2 — Logo Design

• Types of logos: wordmark, lettermark, symbol, combination, emblem
• The logo design process: brief → research → sketches → digital → refine
• Designing in black and white first — why color comes last
• Scalability: a logo must work at 16px and on a billboard
• Logomark construction in Figma: vectors, boolean operations, pen tool basics
• Presenting logo concepts professionally: mockups and rationale

Class 3 — Layout & Graphic Composition

• Grid systems: columns, gutters, margins, and baseline grids
• The rule of thirds and the golden ratio in visual composition
• Print vs. digital layout: resolution, bleed, safe zones
• Hierarchy in layout: directing the eye through a page or poster
• Designing social media graphics, event posters, and pitch deck slides
• Exporting assets correctly: PNG, JPG, SVG, PDF — when to use each

Class 1 — UX Research Methods

• What UX research is and why design without it is guesswork
• Research methods: user interviews, surveys, usability testing, contextual inquiry
• Qualitative vs. quantitative research — when to use each
• How to write an interview guide that reveals real problems
• Affinity mapping: organizing research findings into patterns
• How to present research insights to a team or client

Class 2 — User Personas & Journey Mapping

• What a user persona is — and the wrong way most designers make them
• Building a research-backed persona: demographics, goals, frustrations, behaviors
• Jobs-to-be-done framework: what the user is really trying to accomplish
• Customer journey maps: visualizing every touchpoint before and after your product
• Identifying pain points and opportunities on the journey
• Using personas and journey maps to make design decisions

Class 3 — Information Architecture & User Flows

• Information architecture: organizing content so users can find what they need
• Card sorting: letting real users tell you how they categorize things
• Sitemaps: mapping the structure of an app or website
• User flows: every screen a user touches to complete one task
• Task analysis: breaking down complex actions into individual steps
• Designing for error states: what happens when something goes wrong

Class 1 — Wireframing

• What wireframes are and why they save time
• Low-fidelity vs. mid-fidelity wireframes — when each is appropriate
• Wireframing conventions: placeholder images, lorem ipsum, grayscale
• Sketching wireframes on paper before opening Figma
• Translating user flows into screen-by-screen wireframes
• Getting feedback on wireframes before investing in visual design

Class 2 — UI Design Principles & Design Systems

• The 8pt grid system: why spacing works in multiples of 8
• Components and variants in Figma: building once, using everywhere
• Design tokens: color, typography, spacing, and radius as reusable variables
• Atomic design: atoms, molecules, organisms, templates, pages
• Material Design and Apple Human Interface Guidelines — what they teach
• Accessibility in UI: touch targets, contrast, focus states, readable text

Class 3 — High-Fidelity UI Design in Figma

• Auto layout: building responsive components that resize correctly
• Figma components: creating, nesting, and overriding variants
• Building a mini design system: button, input, card, navigation, modal
• Applying visual hierarchy, depth, and motion cues to flat interfaces
• Designing for both light and dark mode using variables
• Handoff-ready design: naming layers, organizing frames, adding annotations

Class 1 — Prototyping in Figma

• The difference between a static design and a prototype
• Figma prototyping: connections, triggers, transitions, and overlays
• Building a clickable prototype from your Week 4 UI
• Smart animate: creating fluid motion between screens
• Scroll behavior, fixed elements, and overlay interactions
• Sharing a prototype link for testing and stakeholder review

Class 2 — Interaction Design & Micro-interactions

• What interaction design is — designing behavior, not just appearance
• The four components of a micro-interaction: trigger, rules, feedback, loops
• Designing feedback states: hover, active, focus, loading, success, error
• Motion principles: timing, easing, duration — what feels natural vs. jarring
• Onboarding flows: helping users understand a product without instructions
• Designing empty states, loading states, and error states — the overlooked screens

Class 3 — Usability Testing

• What usability testing is and why it is not the same as asking "do you like it?"
• Writing a usability test script: tasks, scenarios, and open questions
• Running a moderated usability test: facilitating without leading
• The think-aloud protocol: getting users to narrate while they interact
• Identifying usability issues: severity ratings and prioritization
• Iterating on design based on test findings

Class 1 — Brief, Research & Strategy

• Writing your own design brief: problem, audience, constraints, success criteria
• Rapid research: getting meaningful insight in 48 hours
• Competitive analysis: what already exists and where the gaps are
• Defining the design direction before opening Figma
• Planning a design sprint for a one-week build

Class 2 — Design & Prototype

• End-to-end design: research → wireframe → UI → prototype in one project
• Presenting design decisions with rationale, not just aesthetics
• Building a case study narrative: problem → process → solution → outcome
• Designing a web and mobile version of the same product
• Preparing a portfolio-ready Figma file

Class 3 — Present & Publish

• Structuring a design portfolio: what to include and what to cut
• Writing a compelling case study for each project
• Publishing your portfolio on Behance, Dribbble, or a personal site
• Presenting design work to a non-design audience: lead with the problem
• Next steps: motion design, 3D design, design engineering, product management