Create storyboards, paper wireframes, and digital low-fidelity prototypes using Figma. This course includes hands-on activities simulating real-world UX design scenarios. This is the third course in the Google UX Design Certificate, a series designed to prepare you for an entry-level UX designer role.

Syllabus

Storyboarding and wireframing

Introduction to Course 3: Build Wireframes and Low-Fidelity Prototypes
Welcome to Course 3
Optional - Read this if it's your first course in the certificate program
Changes to Figma's UI
Introduction to prototypes
Karen - My path to UX design
Introduction to user flows
Outline a user flow
Practice Quiz: Self-Reflection: Consider the user flow for an app
Review: Outline the user flow for projects
Introduction to storyboarding user flows
Understand the two types of storyboards
Learn more about creating storyboards
Practice Quiz: Test your knowledge of storyboards
Review: Create project storyboards
Introduction to wireframes
Practice Quiz: Test your knowledge of design fidelity
Start drawing
Draw your first wireframe
Understand the benefits of wireframing
Review: Create wireframes by drawing a favorite app
Wrap-up: Storyboarding and wireframing
Glossary terms from module 1
Graded Quiz: Module 1 Challenge

Creating paper and digital wireframes

Welcome to module 2
The basics of information architecture (IA)
Designing the information architecture of apps
Practice Quiz: Test your knowledge on information architecture
Create paper wireframes
Review: Create paper wireframes
Transition from paper to digital wireframes
Introduction to Figma
Create a Figma account
Create digital wireframes in Figma
Optional - Learn from Figma: Create wireframes for an app
Erika - Tools of the trade
Use Gestalt Principles when creating wireframes
Learn more about using Gestalt Principles in wireframes
Practice Quiz: Test your knowledge on Gestalt Principles
Wrap-up: Creating paper and digital wireframes
Glossary terms from module 2
Graded Quiz: Module 2 Challenge

Building low-fidelity prototypes

Welcome to module 3
Learn about low-fidelity prototypes
Practice Quiz: Test your knowledge of low-fidelity prototypes
Create a paper prototype
Creative ways to make paper prototypes
Marvel's Prototyping on paper tool
Introduction to building low-fidelity prototypes in Figma
Build low-fidelity prototypes in Figma
Learn from Figma - Prototype interactions and feedback
Learn more about lo-fi prototyping in Figma
Review: Create a low-fidelity prototype in Figma
Access Figma prototypes on mobile devices
Recognize implicit bias in design
Ayan - Bias in UX design work
Learn more about bias in UX design - and how to avoid it
Practice Quiz: Self-Reflection: Your own biases
Identify deceptive patterns in UX design
Avoid deceptive patterns
Explore the effects of designs that deceive
Understand the attention economy
Understand your impact as a UX designer
Learn more about ethical design
Priya - The importance of equitable design
Wrap-up: Building low-fidelity prototypes
Glossary terms from module 3
Graded Quiz: Module 3 Challenge
Portfolio project guide for creating lo-fi prototypes
Practice Quiz: Activity: Create storyboards for your portfolio project
Practice Quiz: Activity: Create digital wireframes for your portfolio project
Exemplars: Create digital wireframes for your portfolio project
Practice Quiz: Activity: Build a low-fidelity mobile prototype for your portfolio project
Exemplars: Build a low-fidelity mobile prototype for your portfolio project
Course 3 glossary
Congratulations on completing Course 3: Build Wireframes and Low-Fidelity Prototypes
Start the next course
Course 3 resources and citations