Explore

Build Wireframes and Low-Fidelity Prototypes

Approx. 20 hours to complete

Save Course

Go to Course

Course Summary

Learn how to create wireframes and low-fidelity prototypes for your design projects in this course. This course covers everything from sketching your ideas to presenting your prototypes to stakeholders.

Key Learning Points

Understand the importance of wireframes and low-fidelity prototypes in the design process
Learn how to sketch your ideas and turn them into digital wireframes
Discover how to create low-fidelity prototypes to test your designs
Explore best practices for presenting your prototypes to stakeholders

Learning Outcomes

Create wireframes and low-fidelity prototypes for your design projects
Test and refine your designs using low-fidelity prototypes
Effectively communicate your design ideas to stakeholders

Prerequisites or good to have knowledge before taking this course

Basic understanding of design principles
Access to design software such as Sketch or Figma

Course Difficulty Level

Intermediate

Course Format

Self-paced
Online

Similar Courses

UI Design: Wireframing
Prototyping and Design

Related Education Paths

Notable People in This Field

Jared Spool
Don Norman

Related Books

Description

Build Wireframes and Low-Fidelity Prototypes is the third course in a certificate program that will equip you with the skills you need to apply to entry-level jobs in user experience (UX) design. In this course, you’ll continue to design a mobile app for your professional UX portfolio. You’ll start by creating storyboards and getting familiar with the basics of drawing. Then, you'll create paper wireframes and digital wireframes using the design tool Figma. You’ll also create a paper prototype and a digital low-fidelity prototype in Figma.

Current UX designers and researchers at Google will serve as your instructors, and you will complete hands-on activities that simulate real-world UX design scenarios. Learners who complete the seven courses in this certificate program should be equipped to apply for entry-level jobs as UX designers. By the end of this course, you will be able to: - Develop a goal statement. - Create two types of storyboards: big picture and close-up. - Understand the difference between low-fidelity and high-fidelity design. - Apply the basics of drawing. - Apply the principles of information architecture to organize a mobile app. - Create paper wireframes for a mobile app design. - Develop digital wireframes in the design tool Figma. - Build a paper prototype to add interactivity to designs. - Design a low-fidelity prototype in Figma. - Recognize implicit bias and deceptive patterns in design. - Continue to design a mobile app to include in your professional portfolio. To be successful in this course, you should complete the previous two courses in this certificate program, or have an ability to conduct user research to inform the creation of empathy maps, personas, user stories, user journey maps, problem statements, and value propositions. You will also need paper and a pen or pencil.

Knowledge

Create storyboards to come up with ideas about solutions to user needs.
Create wireframes on paper and digitally in the design tool Figma.
Build paper prototypes to create interactive designs.
Design low-fidelity prototypes in Figma.

Outline

Storyboarding and wireframing
Introduction to Course 3: Build Wireframes and Low-Fidelity Prototypes
Karen - My path to UX design
Welcome to week 1
Use research to inform ideation
Craig - Research informs ideation in the real world
Create goal statements
Introduction to user flows
Introduction to storyboarding user flows
Understand the two types of storyboards
Introduction to wireframes
Start drawing
Draw your first wireframe
Understand the benefits of wireframing
Wrap-up: Storyboarding and wireframing
Welcome to Course 3
Optional - Read this if it’s your first course in the certificate program
Optional - Interpret your quiz results
Optional - Learn more about how research informs ideation
Revisit problem statements
Learn more about goal statements
Activity Exemplar: Build a goal statement for the CoffeeHouse project
Outline a user flow
Activity Exemplar: Outline the user flow for your portfolio project
Learn more about creating storyboards
Activity Exemplar: Practice creating storyboards for the CoffeeHouse project
Activity Exemplar: Draw a wireframe of a favorite app
Glossary
Optional - Test your knowledge of prior concepts
Optional - Submit your choice of portfolio project prompt
Activity: Build a goal statement for the CoffeeHouse project
Activity: Build a goal statement for your portfolio project
Self-Reflection: Consider the user flow for an app
Activity: Outline the user flow for your portfolio project
Test your knowledge of storyboards
Activity: Practice creating storyboards for the CoffeeHouse project
Test your knowledge of design fidelity
Activity: Draw a wireframe of a favorite app

Creating paper and digital wireframes
Welcome to week 2
The basics of information architecture (IA)
Create paper wireframes
Transition from paper to digital wireframes
Introduction to Figma
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
Wrap-up: Creating paper and digital wireframes
Designing the information architecture of apps
Activity Exemplar: Practice creating paper wireframes for the CoffeeHouse project
Activity Exemplar: Create paper wireframes for your portfolio project
Create a Figma account
Activity Exemplar: Practice creating digital wireframes in Figma for the CoffeeHouse project
Learn more about using Gestalt Principles in wireframes
Glossary
Test your knowledge on information architecture
Activity: Practice creating paper wireframes for the CoffeeHouse project
Activity: Create paper wireframes for your portfolio project
Activity: Practice creating digital wireframes in Figma for the CoffeeHouse project
Test your knowledge on Gestalt Principles

Building low-fidelity prototypes
Welcome to week 3
Learn about low-fidelity prototypes
Create a paper prototype
Introduction to building low-fidelity prototypes in Figma
Build low-fidelity prototypes in Figma
Optional - Learn from Figma: Create prototypes
Recognize implicit bias in design
Ayan - Bias in UX design work
Identify deceptive patterns in UX design
Explore the effects of designs that deceive
Priya - The importance of equitable design
Wrap-up: Building low-fidelity prototypes
Congratulations on completing Course 3: Build Wireframes and Low-Fidelity Prototypes
Creative ways to make paper prototypes
Marvel's Prototyping on paper tool
Activity Exemplar: Practice creating a low-fidelity prototype for the CoffeeHouse project
Learn more about lo-fi prototyping in Figma
Activity Exemplar: Practice creating a low-fidelity CoffeeHouse prototype in Figma
Access Figma prototypes on mobile devices
Optional - Learn more about bias in UX design
Avoid deceptive patterns
Understand the attention economy
Understand your impact as a UX designer
Optional - Learn more about ethical design
Glossary
Start the next course
Test your knowledge of low-fidelity prototypes
Activity: Practice creating a low-fidelity prototype for the CoffeeHouse project
Activity: Practice creating a low-fidelity CoffeeHouse prototype in Figma
Self-Reflection: Your own biases

Summary of User Reviews

Learn about wireframes and low-fidelity prototypes in this course on Coursera. Users have given positive feedback on the course overall, with many highlighting its practical approach to learning. However, some have noted a lack of depth in certain areas and technical issues with the platform.

Key Aspect Users Liked About This Course

Practical approach to learning

Pros from User Reviews

Clear and concise explanations
Hands-on assignments to reinforce learning
Good for beginners and those with little design experience

Cons from User Reviews

Limited depth in some topics
Technical issues with the platform
Could benefit from more real-world examples

Recommended for you

Web Design: Wireframes to Prototypes

This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes....

Save Course

UI UX Design & Prototyping using Adobe XD

Learn Adobe XD for UI/UX Design, User Interface, User Experience Design & Adobe XD Prototyping. This course was crafted to start your UI/UX design career with no experience....

Save Course

Conduct UX Research and Test Early Concepts

In this course, you will learn how to plan and conduct a usability study to gather feedback about designs. By the end of this course, you will be able to:...

Save Course

Design a User Experience for Social Good & Prepare for Jobs

In this course, you will design a dedicated mobile app and a responsive website focused on social good. You’ll learn how to interview for entry-level UX design positions....

Save Course