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 review our wireframes and mark the components we like the most. You may like pieces of each wireframe, and for the next iteration, you maybe want to combine those concepts into one wireframe.
UI Stencils
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 have at least eight
small wire frames, review them.
0:00
Get out a different color pen or
highlighter and
0:04
mark the wire frames you like the most.
0:06
You may like pieces of each wire frame,
and for
0:09
the next iteration you want to combine
those concepts into one wire frame.
0:11
I like the top navigation
that doesn't include a bar.
0:17
It declutters the UI and opens up
the space more to show more of the map.
0:20
It's important for
users to be able to clearly see the map so
0:25
they can see the available cars nearby.
0:29
I like the prominence of the floating
destination search bar, but since future
0:31
screens in this user flow will have the
main actions at the bottom of the screen,
0:36
I think it makes sense to anchor the
search bar to the bottom of the screen.
0:40
Having this part of the UI at the bottom
makes it easy for users to type into.
0:45
What are your favorite parts?
0:51
Take some time to mark
up your own sketches, or
0:53
even mine from the project files.
0:55
Now that you have these concepts,
0:58
you can draw larger wire frames that
iterate on your favorite ideas.
1:00
When drawing these larger wire frames,
keep in mind that these are still
1:03
wire frames and do not need to be
perfect or get into the details.
1:08
The goal of this stage is to come up
a solution that meets the project goals,
1:12
provides the best user experience for
your users, not the best visual design.
1:16
Now that you know the basics I
wanna show you a few handy tools.
1:21
These are completely optional, and
not necessary to create great wire frames.
1:25
But I want you to know about them,
because you might find them to be helpful.
1:31
If you want help making straight lines,
you can use grid or dot paper.
1:36
You can find it online, at an art supply
store, or an office supply store.
1:40
Alternatively, you can use
a ruler to make straight lines.
1:45
Here are a few wire frames I drew on
dot paper for a previous project.
1:49
Another paper upgrade is
printable stencils of devices,
1:54
which visualize how the design
will look within the viewport.
1:58
This is helpful if you wanna draw
the elements with the proportions of
2:02
the device sizes in mind.
2:05
It'll help you visualize how the UI will
feel within the constraints of the screen.
2:08
If you're struggling with drawing icons or
2:13
if you simply want to speed up
the process, you can use a UI Stencil.
2:15
UI Stencils is an online store that sells
a variety of stencils with icons sized for
2:20
a variety of mediums, such as iPhones,
Android phones, and websites.
2:25
You can simply lay the stencil on the
paper and fill in the icons with your pen.
2:31
You can draw on the templates
you've printed,
2:36
or make the device outlines
yourself using the stencil.
2:39
I put links to these tools
in the teacher's notes, so
2:42
check that out if you're interested.
2:45
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