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 types of wireframes. In this video, we will discuss a set that ranges in fidelity. Fidelity, in this context, refers to the amount of detail in the wireframe. There are low-fidelity and high-fidelity wireframes.
New Terms:
- Low-fidelity wireframe: A low-fidelity wireframe is an early-stage, barebones drawing with minimal polish. It is typically more loosely drawn and hints at the specific elements on the page.
- High-fidelity wireframe: A high-fidelity wireframe is more polished and displays more specific or realistic renderings of content.
- Thumbnail wireframes: Thumbnail wireframes are small representations of a screen. They allow you to quickly try out different layout ideas and visualize the hierarchy of content without getting too involved in a larger, more detailed wireframe
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
There are a few different
types of wireframes.
0:00
First, I'll discuss a set
that ranges in fidelity.
0:02
Fidelity, in this context, refers to
the amount of detail in the wireframe.
0:06
There are low fidelity and
high fidelity wireframes.
0:11
A low fidelity wireframe is a bare-bones
drawing with minimal polish.
0:15
Its focus is on the layout and
hierarchy of content.
0:19
It's typically loosely drawn and hints
at the specific elements on the page.
0:23
For example, text may be represented
by grayscale colored boxes, and
0:27
inputs are roughly approximated.
0:32
Start with a low fidelity sketch and then
ease your way into a high fidelity sketch
0:35
as the drawing becomes more fleshed out.
0:40
Let's revisit the Treehouse homepage
wireframe I showed you earlier.
0:43
This is an example of
a low fidelity wireframe.
0:47
It's in grayscale and
uses placeholders for images and text.
0:50
At this point,
the content was still being defined,
0:54
and I was trying out different layouts.
0:56
It can also be hand-drawn.
1:00
Here's a set of wireframes I drew
on paper for an Android app design.
1:02
A high fidelity wireframe
is more polished and
1:06
displays more specific or
realistic renderings of content.
1:09
However, it continues to be in grayscale
as to not be confused with the mock-up.
1:13
If it were to be
a misinterpreted as a mock-up,
1:19
the feedback from stakeholders
would focus on the visual design
1:21
instead of general concepts, like page
layout, hierarchy, and functionality.
1:25
An example of more realistic content
is using actual copy instead of
1:30
placeholder text or
gray boxes to represent words.
1:35
This helps to see how the real content
works with the rest of the screen, and
1:38
also provides an opportunity to optimize
the text links and line breaks.
1:43
For example,
1:47
you wouldn't want a headline to have
a stray word on its own in a second line.
1:48
You'd want to either tighten
it to fit on one line, or
1:53
lengthen it to fit
intentionally on two lines.
1:56
Other type adjustments can be
done at this stage as well,
2:00
such as choosing specific fonts.
2:03
Create high fidelity wireframes whenever
you're more confident in your design and
2:05
wanna flesh out the details.
2:10
This also helps others see your
vision without it being critiqued for
2:12
its visual merits in a full-blown mock-up.
2:15
As an example, here's another wireframe
I made for the Treehouse homepage.
2:18
This is how the homepage wireframe looked
as it transformed into a high fidelity
2:23
wireframe.
2:27
As you can see, it's still in grayscale
and uses some placeholder content.
2:28
But it's more polished and
uses some actual copy and images.
2:33
Wireframes also ranged in size and scope.
2:37
The default type of wireframe
we'll be discussing in this course
2:40
will be full scale wireframes.
2:43
But it's important to know about
thumbnail wireframes as well.
2:46
To facilitate quick iteration early on,
you can start with thumbnail wireframes.
2:50
Smaller in scale,
thumbnail wireframes allow you to
2:56
create a little sketch of the page without
getting too involved with the details.
2:59
This would allow you to brainstorm
different ideas quickly.
3:04
Let me show you an example.
3:08
Here's a page of thumbnail wireframes.
3:10
In this example, I was iterating on just
the hero section of the marketing page.
3:13
Instead of fleshing out all the nuances
of the page, these are quick,
3:17
small-scale sketches.
3:21
Drawing at this scale allows you to see
the big picture, and get a feel for
3:23
the constant hierarchy and page layout.
3:27
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