"Room-Scale VR" was retired on August 1, 2018.
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 go over the process of creating a wireframe. The process will differ depending on your team's resources and the project timeline, but here's a best case scenario.
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 you may be wondering,
what's the process?
0:00
How does all this come together?
0:04
We'll be getting into the details
of how to draw a wireframe later on
0:06
in the course, as you join me in creating
wireframes for a mobile ride-sharing app.
0:09
For now, I'll go over the general process.
0:14
The process will differ depending on your
team resources and the project timeline.
0:17
But here's a best-case scenario.
0:22
Number 1, review the user research and
business goals.
0:25
First, consult any research
that may be available to you.
0:29
In a previous course, you may have
learned that designing a successful user
0:33
experience requires understanding
your users and the business goals.
0:36
So as you set off to wireframe, refer to
any available research as you sketch.
0:42
Two, iterate on low-fidelity wireframes.
0:48
Keep iterating until you can't
come up with any more ideas.
0:52
Three, get internal feedback.
0:56
Share the wireframes with your team and
stakeholders to get their feedback.
0:58
Four, Iterate on low-fidelity
wireframes again.
1:02
Often the feedback will inspire you
to come up with even more ideas, so
1:07
you'll want to do another
round of iterations.
1:11
Keep repeating until you feel like
you've solved any foreseen pain
1:14
points in the user experience, and
you've gotten stakeholder approval.
1:17
Five, polish the selected low-fidelity
wireframe into a high-fidelity wireframe.
1:22
Use actual copy, real images and
begin to add visual polish,
1:28
such as rounded corners,
gradients, fonts, etc.
1:33
It's okay if you still have
placeholders for illustrations or
1:38
other assets that haven't
been created yet.
1:41
Six, get internal feedback again.
1:43
Do another round of review at this stage,
1:48
as there will likely be changes needed
now that actual content is in place.
1:50
For instance, perhaps the text
is too long in a paragraph, so
1:54
the copywriter wants to shorten it so
it doesn't feel overwhelming.
1:57
Seven, get user feedback.
2:01
Once you have approval on
the last batch of wireframes,
2:05
you may decide you'd like to get feedback
from your product's customers or
2:08
prospective customers who
fit your target audience.
2:12
User testing is an entire topic
that we get into in other courses,
2:16
so I just want to touch on it here.
2:21
It's important to know you can test
your design on actual users early,
2:23
instead of waiting for
the design to be implemented in code.
2:28
It's preferable to meet with
the user in-person, but
2:31
you can conduct the user test
remotely via video call as well.
2:35
Framing is important here.
2:39
Tell the person you'll be showing them
an early exploration of an experience.
2:41
So they should disregard
the visual design.
2:45
Ask for feedback on their expectations of
what they can do with the website or app.
2:49
And have them talk through how
they interpret the content and
2:54
how they might navigate the screens.
2:57
This is valuable
information to get early on
3:00
to work out any pain points you may
have missed in the exploration phase.
3:03
Often, the outside perspective
from the user will be just what
3:07
you need to improve
the usability of the design.
3:11
Eight, continue along
in the design process.
3:15
The next step is up to you.
3:18
If your wireframes were validated
in the user testing and
3:21
your team wants to move
forward with implementation,
3:24
create a mockup and
start implementing it with code.
3:27
You may decide you need to go
a whole different direction and
3:31
need to start over on
a new set of wireframes.
3:34
That's totally okay!
3:37
And it's so
awesome that you figure that out now
3:38
versus having to pivot after investing
a lot of time on an ill-fated idea.
3:42
Now that you know the process,
you understand what wireframes are.
3:48
And you know why they are an important
part of the design process.
3:52
Let's start creating.
3:55
In the next phase, we'll get into the
practical application of these concepts.
3:57
And you'll watch as I create
wireframes using a few different tools.
4:01
Then you'll have the opportunity
to explore those tools yourself.
4:06
I'll explain the process as I go, and
I'll also show you some handy tips and
4:10
tools I use to make the process easier.
4:14
Rest assured,
4:17
you don't have to be a skilled
technical drawer to create wireframes.
4:18
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