Introduction to Wireframing Course (How To)
Offered By: Treehouse
Course Description
Overview
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
Syllabus
What Is Wireframing?
Welcome! In this workshop, you’ll learn how to visualize your ideas with wireframes.
Chevron 5 steps-
What Are Wireframes?
3:42
-
Benefits of Wireframing
4:16
-
Types of Wireframes
3:29
-
How Wireframes Are Used
4:22
-
What is wireframing review
5 questions
How 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.
Chevron 6 steps-
Hand-drawn Wireframes
4:19
-
Demonstration of Wireframing on Paper
11:25
-
Tips and Tools
2:47
-
Sharing and Getting Feedback
2:52
-
The Pros and Cons of Wireframing on Paper
1:54
-
How to Make Wireframes on Paper review
5 questions
How 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.
Chevron 5 steps-
Wireframing in Balsamiq
8:42
-
Demonstrating Wireframes in Balsamiq
18:46
-
Sharing and Getting Feedback in Balsamiq
2:17
-
Pros and Cons of Wireframing in Balsamiq
1:35
-
Review of How to Make Wireframes in Balsamiq
5 questions
How to Make Wireframes in Adobe XD
Adobe XD is a user experience design app that supports vector design, wireframing, and interactive prototyping.
Chevron 5 steps-
Making Wireframes in Adobe XD
3:13
-
Demonstrating Wireframes in Adobe XD
11:19
-
Sharing and Getting Feedback in Adobe XD
6:49
-
The Pros and Cons of Wireframing in Adobe XD
1:40
-
Review of How to Make Wireframes in Adobe XD
5 questions
Related Courses
مقدمة إلى برنامج أدوبي إكس ديCoursera Project Network via Coursera اِبدَأ مشروعًا في برنامج أدوبي إكس دي
Coursera Project Network via Coursera Use Adobe XD to Create a Presentation
Coursera Project Network via Coursera 3D Transforms in Adobe XD
Coursera Project Network via Coursera Build a High-Fidelity Prototype for a Mobile App in Adobe XD
Coursera Project Network via Coursera