Preview
Video Player
00:00
00:00
What Are Wireframes?
3:42Whether you're a designer or not, wireframing is an important skill to have in your toolkit. Wireframes are a valuable tool for visualizing user experiences, iterating on ideas, and sharing ideas with others.
[MUSIC]
0:00
Hi, I'm Hope.
0:09
Let's learn about wireframes.
0:11
Whether you're a designer or
0:13
not, wireframing is an important
skill to have in your toolset.
0:14
It's beneficial for product managers,
marketers or anyone else with ideas for
0:18
a website or mobile app.
0:23
Wireframes are a valuable tool for
0:25
visualizing user experiences, iterating
on ideas and sharing ideas with others.
0:27
A wireframe is a drawing which visualizes
the elements of a website or mobile app.
0:33
Wireframe fidelity ranges from rough
pencil sketches to polished renderings,
0:38
but all wireframes share a common goal.
0:42
They focus on the structure and
0:45
functionality of a web page
instead of the visual design.
0:46
This is what makes them particular
useful in the early stages of a project.
0:50
They allow you to focus on the concepts
and quickly iterate through your ideas.
0:54
Generating several rough ideas is
important because your first idea is
0:59
usually not your best idea.
1:03
And you want to get feedback before
sprinting in the wrong direction.
1:05
It's best to quickly generate low effort
wireframes, decide on a direction,
1:09
and then flesh out the chosen
wireframe into a polished mockup.
1:14
The first important concept to grasp with
wireframing is that the initial focus
1:18
should be on the core structure and
functionality.
1:23
When you start to imagine your design,
you may get carried with how it'll look.
1:25
Instead of focusing on the visual design,
1:30
this is the point where I encourage
you to sketch wireframes.
1:33
Let's imagine a scenario.
1:36
Imagine you're ready to
build your dream home.
1:38
Overflowing with enthusiasm, you construct
several vision boards filled with
1:41
fabric swatches, color chips, and
inspirational magazine clippings.
1:45
When you take this stack
of ideas to the builder,
1:49
they direct you to begin
the planning with an architect.
1:52
The architect initially disregards
her inspiration folder.
1:55
She begins planning the core structure of
the home, starting with the floor plan.
1:58
The floor plan is drawn and
shared with you for
2:03
feedback, in the form of a blueprint.
2:05
The blueprint can be changed and
2:07
finalized without first deciding on
the curtain fabric or the paint colors.
2:09
Think of wireframes as the blueprint
of your website or mobile app.
2:14
All the visual details,
all the stuff on your vision board
2:18
will come later once you
have a solid foundation.
2:21
Now that you have a general understanding
of wireframes, let's see how they look.
2:25
Here's a wireframe I created in Sketch
when I was working on a refresh of
2:30
the Treehouse home page.
2:33
A wireframe is essentially a drawing of
a user interface that's devoid of color,
2:35
graphics, and styling.
2:40
It communicates the major components
of a screen, such as sections,
2:42
buttons, text, videos,
and any custom modules.
2:47
It's predominantly comprised of
simple shapes, such as rectangles,
2:51
which represents sections of content and
serve as placeholders for images.
2:55
Rectangles can also
represent blocks of text.
2:59
Visualizing the major components
helps define the layout and
3:03
determine the available
functionalities on any given screen.
3:06
Seeing the layout in this way helps
clarify the hierarchy of content so
3:11
the users can navigate
the information easily.
3:15
Figuring out what functions will be
available to the user on each screen
3:18
is also helpful for
your team to define early on.
3:23
Here's a wireframe I drew on paper.
3:27
This drawing was for a landing page.
3:29
I was designing a widget that allows
exploration of the library content to
3:31
perspective students.
3:35
These are just a couple examples.
3:37
Later, you'll learn about other
types of wireframes, too.
3:39