Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Wireframing!
You have completed Introduction to Wireframing!
Preview
In this video, we will delve into why wireframes are a critically helpful step in the design process.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that you're familiar with wireframes,
I'll explain more about why they
0:00
are a critically helpful
step in the design process.
0:03
You already know the guiding
principle of wireframing is to
0:07
focus on the structure and
the functionality.
0:10
The next concept is iteration.
0:13
Imagine you want to
build a ridesharing app.
0:16
There are so many different
potential screens, a login page,
0:19
a map, account settings,
billing, support, and so on.
0:23
On top of that there are so many ways
these screens could look and interact.
0:28
It's overwhelming to think about
designing all those perfectly right away.
0:32
However, iterating on low fidelity
wireframes is less intimidating and
0:37
quickly generates the best ideas.
0:41
Wireframing is an iterative process.
0:45
The goal isn't to make one wireframe and
move on, the goal is to make so
0:47
many you can't even dream
of another scenario.
0:51
Then you go to sleep and wake up
the next day with a few more ideas.
0:55
And then you repeat it
again until you realize
0:59
the project deadline is approaching and
you need to make decisions.
1:02
There are a lot of ways
to design a screen, and
1:06
it's beneficial to try many options
to uncover the best solution.
1:08
Since wireframes are quick to produce,
1:13
we don't have to sacrifice precious
time to explore our options.
1:15
In addition, wireframing produces a
deliverable that enables your teammates to
1:20
give direction and feedback early on.
1:25
You and your team will have a lot of
ideas about the design of the experience.
1:28
Stakeholders from different departments
have their own business goals and
1:33
expertise, so it's important to design
with their goals and concerns in mind.
1:37
Product managers, marketers, sales people
and other business types will need
1:41
to verify that design aligns with
the product vision and customer needs.
1:46
Developers will need to confirm the design
is feasible from a technical standpoint
1:51
within the allotted timeline.
1:55
And they often have their own awesome
ideas for how to simplify the design and
1:57
make it more efficient.
2:01
Other designers will be able
to catch usability issues and
2:03
inconsistencies with interaction patterns
across the entire product ecosystem.
2:06
This is why wireframing is so powerful.
2:11
You can address all these concerns early,
before development starts.
2:14
It's much harder to fix them later.
2:18
Imagine a marketer on your
team is responsible for
2:21
increasing the subscription sign-up rates,
and
2:24
therefore wants prominent
promotion of a discount code.
2:26
Simultaneously, a product manager may
be motivated to increase early adoption
2:30
of a new product feature, and she wants
a product tour to show upon login.
2:35
As you can imagine,
these two priorities conflict,
2:40
because they're both competing for
the attention of the user.
2:43
Of course, creating a positive
user experience is paramount.
2:46
So, wireframing different scenarios and
2:50
pitching it to stakeholders
early allows for consensus.
2:53
Wireframing lets your team get
involved in the ideation phase,
2:57
helps them understand the goals,
and sets their expectations.
3:00
This prevents costly pivots later in
the process, such as in the mock-up or
3:04
prototyping phase.
3:09
The best way to sort through
ideas is to start brainstorming.
3:11
Wireframes are a visual artifact
of this brainstorming and
3:15
the goal is to make them
with minimal effort.
3:18
We want to encourage ideation and
3:21
to minimize unnecessary
exertion on a sub-par idea.
3:23
Wireframes allow you to
communicate your own ideas,
3:27
and feedback from your team allows you
to continuously refine those ideas,
3:30
until you come to a consensus
on the final solution.
3:34
Let's review,
here are the benefits of wireframing.
3:37
You can quickly brainstorm ideas before
polishing and refining the visual design.
3:42
You can get feedback on the concept,
without the visual design creating bias.
3:47
You can get feedback and stakeholder
approval early on, and it saves you time.
3:52
Instead of dedicating too much time taking
an idea through the pixel perfecting
3:57
stage, you find out sooner if
the idea isn't going to work.
4:02
Also, it's low pressure.
4:06
It communicates to stakeholders and
4:08
teammates that this is
very much wet paint, and
4:09
they can fee free to give feedback that
changes the direction of the project.
4:12
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up