Build Wireframes and Low-Fidelity Prototypes from Coursera

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.

What's inside

Syllabus

Storyboarding and wireframing

Welcome to the world of wireframes! You'll start by learning how to use research findings to inform ideation during the design process. Next, you'll create two types of storyboards: big picture and close-up. Then, you'll draw your first wireframes, and you'll explore the benefits of wireframing. Keep in mind that at this point in the design process, you should have lots of ideas for designs that address real user needs. You want to refine those ideas, and wireframing can help you do that.

Creating paper and digital wireframes

This is an action-packed part of the course where you'll draw wireframes for a mobile app! First, you'll draw lots of wireframes on paper. Then, you'll transition to digital wireframes in the design tool Figma. You'll even learn directly from Figma about how to best use their tool. Finally, you'll apply Gestalt Principles, like similarity, proximity, and common region, to your wireframes.

Building low-fidelity prototypes

You've gone through the first three stages of the design process: empathize, define, and ideate. Now, you'll enter the fourth stage of the design process: prototype. First, you'll create a paper prototype of your mobile app. Then, you'll transition to a digital low-fidelity prototype in Figma. In addition, you'll explore ways to recognize potential bias in your designs and learn how to avoid deceptive patterns.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops skills needed for entry-level UX design roles

Provides hands-on activities that simulate real-world UX design scenarios

Taught by current UX designers and researchers at Google

Covers foundational UX design principles, including storyboarding, wireframing, and prototyping

Builds on previous courses in the certificate program, so prior knowledge is recommended

Reviews summary

Wireframing and prototyping in ux

learners say this is a largely positive course that teaches the basics of wireframing and prototyping through a series of hands-on assignments. The course is well-organized, the instructor is knowledgeable and engaging, and the assignments are challenging but doable.

The course can help learners advance their careers in UX design.

"The course can help learners advance their careers in UX design."

The course includes real-world examples of wireframes and prototypes.

"The course includes real-world examples of wireframes and prototypes."

Learners can receive feedback on their work from their peers.

"Learners can receive feedback on their work from their peers."

The course is designed for beginners, and no prior experience in wireframing or prototyping is required.

"The course is designed for beginners, and no prior experience in wireframing or prototyping is required."

The instructor is knowledgeable and engaging.

"The instructor is knowledgeable and engaging."

The course is well-organized and easy to follow.

"The course is well-organized and easy to follow."

The assignments are challenging but doable, and they provide learners with valuable feedback on their work.

"The assignments are challenging but doable, and they provide learners with valuable feedback on their work."

The course includes a series of hands-on assignments that allow learners to practice their skills.

"The course includes a series of hands-on assignments that allow learners to practice their skills."

This course teaches the basics of wireframing and prototyping, with a focus on using Figma, a free online design tool.

"This course teaches the basics of wireframing and prototyping, with a focus on using Figma, a free online design tool."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Build Wireframes and Low-Fidelity Prototypes with these activities:

Refresh Your Sketching Skills

Show steps

Practice sketching and drawing freehand to improve your ability to create wireframes and prototypes.

Browse courses on Sketching

Show steps

Gather some basic drawing supplies, such as a pencil, paper, and an eraser.
Find some simple objects around you and practice sketching them from different angles.
Try to capture the basic shapes and proportions of the objects you are sketching.

Review Information Architecture Principles

Show steps

Review the principles of information architecture to ensure you have a strong foundation for organizing and structuring mobile app content.

Browse courses on Information Architecture

Show steps

Revisit the course materials on information architecture.
Read articles or books on information architecture best practices.
Analyze the information architecture of existing mobile apps to identify effective and ineffective approaches.

Interactive Wireframing Exercises

Show steps

Complete interactive wireframing exercises on platforms like Figma or Adobe XD to explore wireframing concepts in more detail.

Browse courses on Wireframing

Show steps

Identify a user interface (UI) design challenge or problem that you would like to solve.
Sketch out your initial wireframes on paper or a digital whiteboard.
Use a wireframing tool like Figma or Adobe XD to create interactive prototypes of your wireframes.
Share your interactive wireframes with peers or instructors for feedback and critique.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Typography and Visual Hierarchies

Show steps

Practice identifying and applying principles of typography and visual hierarchy to improve the readability and usability of mobile app designs.

Browse courses on Typography

Show steps

Analyze the typography and visual hierarchy of existing mobile app designs that you admire.
Experiment with different font pairings, colors, and sizes to create effective typographic treatments.
Apply principles of visual hierarchy to organize and prioritize content in your mobile app designs.

User Interface (UI) Design Critique

Show steps

Collaborate with peers to exchange feedback and critique each other's mobile app designs.

Browse courses on UI Design

Show steps

Prepare a brief presentation of your mobile app design, including an overview of your design process and the rationale behind your design decisions.
Present your design to your peers and solicit their feedback on aspects such as usability, visual appeal, and adherence to design principles.
Actively listen to and engage with the feedback provided by your peers, asking clarifying questions and seeking insights.
Reflect on the feedback received and incorporate constructive suggestions into the refinement of your design.

Volunteer at a UX Research Lab

Show steps

Volunteer at a UX research lab to gain hands-on experience in conducting user research and testing prototypes.

Browse courses on UX Research

Show steps

Identify a UX research lab or organization that aligns with your interests.
Reach out to the lab or organization to inquire about volunteer opportunities.
Attend training sessions or workshops to learn about the lab's research methods and protocols.
Assist researchers with conducting user interviews, usability testing, or other research activities.

Record a Screencast Tutorial

Show steps

Create a screencast tutorial to demonstrate the process of creating wireframes and prototypes using Figma or a similar tool.

Show steps

Plan the structure and content of your tutorial, including the key steps and concepts you want to cover.
Set up your recording environment, including your screen capture software and microphone.
Record your screencast, narrating your actions and providing clear explanations as you go through the process of creating wireframes and prototypes.
Edit your screencast to remove any unnecessary footage or mistakes, and to add any additional elements such as annotations or music.
Publish your screencast tutorial on a platform like YouTube or Vimeo.

Mobile App Design Competition

Show steps

Participate in a mobile app design competition to showcase your skills and gain feedback from industry professionals.

Show steps

Identify a mobile app design competition that aligns with your interests and skill level.
Develop a compelling mobile app design concept that meets the competition requirements and addresses a real-world problem or need.
Create a polished and professional mobile app design submission, including wireframes, prototypes, and a design rationale.
Submit your design to the competition and eagerly await the results.

Career center

Learners who complete Build Wireframes and Low-Fidelity Prototypes will develop knowledge and skills that may be useful to these careers:

User Experience Designer

A UX designer is someone who conducts user research and uses their discoveries to design and evaluate user interfaces. A background in this course will help build a solid foundation for working as a UX designer. This course will help you develop essential skills including user research, prototyping, and creating wireframes. You need a comprehensive understanding of the principles of user interface design, which this course will provide.

See salaries and explore the career path for User Experience Designer

Product Designer

A product designer is a person who conceives, designs, and iterates a product. This course will help build a solid foundation for working as a product designer. This course will teach you the basics of user interface design, including how to create storyboards, wireframes, and prototypes.

See salaries and explore the career path for Product Designer

UI Designer

A UI Designer is a person who designs the user interfaces of products. Drawing upon your knowledge of wireframing from this course, you'll be able to help create the look and feel of a product, ensuring that it is both visually appealing and easy to use. UI designers need a strong understanding of the principles of design, which this course will provide.

See salaries and explore the career path for UI Designer

Front-End Developer

Front-end developers are responsible for the design and implementation of the user interface. With your skills in wireframing and prototyping, you'll understand how to transform designs into functional code, ensuring that the website or app is both visually appealing and easy to use.

See salaries and explore the career path for Front-End Developer

Web Designer

A web designer is responsible for the visual design of a website. A UX course can help build a solid foundation for working as a web designer. You'll learn how the principles of user experience are integrated into the web design process.

See salaries and explore the career path for Web Designer

Interaction Designer

Interaction designers create interactive experiences for websites, apps, and other digital products. They may work on the design of the user interface, the user experience, or both. This course may be useful for someone who wants to become an interaction designer, as it will teach you the basics of user interface design, including how to create storyboards, wireframes, and prototypes.

See salaries and explore the career path for Interaction Designer

Information Architect

Information architects design and organize the structure and content of websites, intranets, online communities, and software applications to help users find and access information efficiently and effectively. This course will help you develop the skills you need to become an information architect, including user research, prototyping, and creating wireframes.

See salaries and explore the career path for Information Architect

Data Analyst

Data analysts collect, clean, and analyze data to help businesses make informed decisions. This course may be useful for someone who wants to become a data analyst, as it will teach you the basics of user research and prototyping. These skills can be helpful for data analysts who want to understand the needs of users and design data analysis tools that are easy to use.

See salaries and explore the career path for Data Analyst

Technical Writer

Technical writers create documentation for software, hardware, and other technical products. This course may be useful for someone who wants to become a technical writer, as it will teach you the basics of user research and prototyping. These skills can be helpful for technical writers who want to understand the needs of users and design documentation that is easy to understand.

See salaries and explore the career path for Technical Writer

Usability Engineer

Usability engineers evaluate the usability of websites, software, and other products. This course may be useful for someone who wants to become a usability engineer, as it will teach you the basics of user research and prototyping. These skills can be helpful for usability engineers who want to understand the needs of users and design products that are easy to use.

See salaries and explore the career path for Usability Engineer

Graphic designer

Graphic designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers.

See salaries and explore the career path for Graphic designer

Software Developer

Software developers design, develop, and maintain computer programs. The skills you will learn will not directly translate to a role in this position.

See salaries and explore the career path for Software Developer

Project Manager

Project managers plan, organize, and coordinate resources to accomplish specific goals. The skills you will learn will not directly translate to a role in this position.

See salaries and explore the career path for Project Manager

Sales Manager

Sales managers plan, direct, and coordinate marketing, sales, and customer service activities.

See salaries and explore the career path for Sales Manager

Account Manager

Account managers maintain and grow relationships with existing clients, as well as seek out new clients.

See salaries and explore the career path for Account Manager