
- Design
- Beginner
About this Course
Wireframing is a useful part of the design process. Throughout a website or mobile app project, you will have a lot of ideas and the best way to sort through those ideas is to brainstorm. Wireframes are a visual artifact of brainstorming, and the goal is to make them with minimal effort, as to encourage ideation.
Whether you're a designer or not, wireframing is an important skill to have in your toolkit. It's beneficial for product managers, marketers, or anyone else with ideas for a website or mobile app. Wireframes are a valuable tool for visualizing user experiences, iterating on ideas, and sharing ideas with others.
What you'll learn
- Create hand drawn wireframes
- Create wireframes on a computer
- Iterate through ideas, visually
- Use wireframes to validate (or invalidate) assumptions and ideas
What Is Wireframing?
Welcome! In this workshop, you’ll learn how to visualize your ideas with wireframes.
5 stepsHow to Make Wireframes on Paper
First, I'll give an overview of how to draw wireframes on paper, and then we'll put these concepts into practice as you watch me draw wireframes for a mobile ridesharing app.
6 stepsHow to Make Wireframes in Balsamiq
Balsamiq is a tool built specifically for wireframing. It contains UI elements and devices which can easily be inserted as building blocks for your wireframe.
5 stepsHow to Make Wireframes in Figma
In this stage, we explore Figma, covering topics from wireframing and sharing designs to evaluating its latest features and professional tools. Learn about its benefits in real-time collaboration and extensive plugins, as well as limitations with large projects and offline use. Ideal for designers looking to assess Figma for their workflow.
9 steps-
Making Wireframes in Figma (UI2)
9:09
-
Making Wireframes in Figma (UI3)
8:03
-
Figma Community
2:37
-
FigJam & Figma Slides
3:52
-
Professional Plan Features (AI & Developer Mode)
6:41
-
Demonstrating Wireframes in Figma
17:45
-
Sharing Wireframes in Figma
2:59
-
Pros and Cons of Wireframing in Figma
1:36
-
How to Make Wireframes in Figma Quiz
5 questions
Teachers
-
Hope Armstrong
Hope is a Senior Product Designer. Since 2009, she has worked in education, tech, and non-profits. In her spare time, she advocates for sustainability and hangs out with her cats.
-
Daniel Montgomery
Daniel Montgomery is a content producer and video editor for Treehouse. He is passionate about design, user experience, and emerging trends in tech.