Storyboarding and wireframing -Introduction to Course 3
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
Introduction to prototypes
Karen - My path to UX design
()
Storyboarding and wireframing -Outline user flows
Introduction to user flows
()
Outline a user flow
Review: Outline the user flow for projects
Storyboarding and wireframing -Create storyboards
Introduction to storyboarding user flows
()
Understand the two types of storyboards
()
Learn more about creating storyboards
Review: Create project storyboards
Storyboarding and wireframing -Get started with wireframes
Introduction to wireframes
()
Start drawing
()
Draw your first wireframe
()
Understand the benefits of wireframing
()
Review: Create wireframes by drawing a favorite app
Storyboarding and wireframing -Module 1 review
Wrap-up: Storyboarding and wireframing
()
Glossary terms from course 3, module 1
Creating paper and digital wireframes-Understand information architecture
Welcome to module 2
()
The basics of information architecture (IA)
()
Designing the information architecture of apps
Creating paper and digital wireframes-Create paper wireframes
Create paper wireframes
()
Review: Create paper wireframes
Creating paper and digital wireframes-Create digital 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
()
Creating paper and digital wireframes-Use Gestalt Principles in wireframes
Use Gestalt Principles when creating wireframes
()
Learn more about using Gestalt Principles in wireframes
Creating paper and digital wireframes-Module 2 review
Wrap-up: Creating paper and digital wireframes
()
Glossary terms from course 3, module 2
Exemplars: Create digital wireframes for your portfolio project
Building low-fidelity prototypes-Create low-fidelity prototypes on paper
Welcome to module 3
()
Learn about low-fidelity prototypes
()
Create a paper prototype
()
Creative ways to make paper prototypes
Marvel's Prototyping on paper tool
Building low-fidelity prototypes-Build low-fidelity prototypes digitally
Introduction to building low-fidelity prototypes in Figma
()
Build low-fidelity prototypes in Figma
()
Optional - Learn from Figma: Create prototypes
()
Learn more about lo-fi prototyping in Figma
Review: Create a low-fidelity prototype in Figma
Access Figma prototypes on mobile devices
Building low-fidelity prototypes-Understand ethical and inclusive design
Recognize implicit bias in design
()
Ayan - Bias in UX design work
()
Learn more about bias in UX design - and how to avoid it
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
()
Building low-fidelity prototypes-Module 3 review
Wrap-up: Building low-fidelity prototypes
()
Glossary terms from course 3, module 3
Exemplars: Build a low-fidelity mobile prototype for your portfolio project
Building low-fidelity prototypes-Course review
Course 3 glossary
Congratulations on completing Course 3: Build Wireframes and Low-Fidelity Prototypes
()
Start the next course