Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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