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
There are a few different ways to create wireframes, but let's start with the basics: pen and paper. It's simple, gets the job done, and avoids the trap of perfecting the wireframe
Resources
- Human Interface Guidelines: iOS Design Themes
- Human Interface Guidelines: Tab Bars
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
[MUSIC]
0:00
There are a few different
ways to create wireframes.
0:04
But let's start with the basics,
pen and paper.
0:07
It's simple, gets the job done and avoids
the trap of perfecting the wireframe.
0:11
The goal at this stage is to come up with
a solution that meets the project goals,
0:16
and provides the best user experience,
not the best visual design.
0:20
If you can draw basic shapes,
you can wireframe.
0:25
First, I'll give an overview of
how to draw wireframes on paper.
0:29
And then, we'll put the concepts into
practice as you watch me draw wireframes
0:32
for a mobile ridesharing app.
0:37
Wireframes use symbols to represent
different parts of the user interface.
0:39
You may come up with your own
variations of these symbols, but
0:44
it's best practice to stick with
symbols that others will recognize.
0:47
Here are the common symbols.
0:50
Every wireframe starts off with a rough
approximation of the device constraints.
0:54
Whether you're designing for
mobile, tablet, HD desktop etc.
0:58
it's safe to say you'll be designing for
a rectangle.
1:02
Primarily, in portrait view.
1:06
So start with that and don't concern
yourself with the scale at this point.
1:08
Also, don't be super concerned
with drawing straight lines.
1:13
It's okay if they're off.
1:16
This is handmade.
1:17
I do have a couple of tips
that make it easier though.
1:19
First, when you're drawing a line,
lock your wrist and
1:23
move your whole arm away from your body.
1:26
Your wrist naturally curves if
you draw towards your body.
1:29
So if your draw inward,
you'll be fighting your own anatomy.
1:32
Secondly, the faster you draw the line,
the more likely it'll be straight.
1:36
If you hesitate and slowly draw the line,
it's more likely to look wiggly.
1:41
The last tip is to not look
at the tip of your pen.
1:46
Instead, look at the point
where you want the line to end.
1:49
This takes hand to eye coordination.
1:53
But with some practice,
you'll get the hang of it.
1:55
Sections are represented by rectangles.
1:59
Images are represented
by rectangles with an X.
2:03
The rectangle is drawn at approximately
the intended size of the image.
2:07
If it's a circular image,
2:11
such as a profile image,
you can use a circle with an X.
2:13
Icons are represented by small circles.
2:17
Headlines are represented by a straight,
thick, horizontal line.
2:20
If you know the text you'll be using,
you can write it in.
2:24
But it's easier to draw a line
in this quick iteration phase.
2:28
Body copy is represented
in a few different ways.
2:34
Similar to headlines, you can write it in.
2:38
But it's easier to use placeholders.
2:40
You can draw a straight thin
horizontal line or multiple lines.
2:43
Alternatively, some people use a wavy
horizontal line to more clearly separate
2:47
it from headlines. Sometimes,
you'll wanna draw a section of the screen.
2:52
So, you wanna denote
that the page continues.
3:00
You can communicate this
by drawing a zigzag line
3:03
on the bottom of the section's rectangle.
3:05
There are symbols for communicating
interactions too, so if you're interested,
3:08
check out the teacher's notes.
3:12
This is all you need to know for
the basic shapes.
3:15
Now that you have an idea of the shapes
you'll be drawing, gather the supplies.
3:18
Let's start out with the basic
supplies you're likely to have sitting
3:23
around your home.
3:26
Grab some basic white copy
paper from a printer nearby, or
3:28
get any scrap paper you
can get your hands on.
3:32
Then, find a writing instrument.
3:36
Preferably, a pen or
marker with black ink.
3:38
If you have a pencil, that's okay too.
3:41
I have a preference for pen, because
I can get carried away with erasing,
3:43
and making the drawing perfect.
3:48
For you pencil lovers out there, I
encourage minimizing the use of an eraser,
3:50
and embracing the imperfections.
3:55
If a line is truly distracting,
feel free to erase it though.
3:57
Another tip is to draw lightly and
4:02
build up the darkness as you get more
confident and deliberate with the shapes.
4:04
That's it for the supplies,
it's as simple as that.
4:08
There are some extra tools you can
buy to make the drawing easier.
4:12
But let's stick to the basics for now and
I'll show you those goodies later.
4:15
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