There are a few different types of wireframes.

First, I'll 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.

A low fidelity wireframe is a bare-bones drawing with minimal polish.

Its focus is on the layout and hierarchy of content.

It's typically loosely drawn and hints at the specific elements on the page.

For example, text may be represented by grayscale colored boxes, and

inputs are roughly approximated.

Start with a low fidelity sketch and then ease your way into a high fidelity sketch

as the drawing becomes more fleshed out.

Let's revisit the Treehouse homepage wireframe I showed you earlier.

This is an example of a low fidelity wireframe.

It's in grayscale and uses placeholders for images and text.

At this point, the content was still being defined,

and I was trying out different layouts.

It can also be hand-drawn.

Here's a set of wireframes I drew on paper for an Android app design.

A high fidelity wireframe is more polished and

displays more specific or realistic renderings of content.

However, it continues to be in grayscale as to not be confused with the mock-up.

If it were to be a misinterpreted as a mock-up,

the feedback from stakeholders would focus on the visual design

instead of general concepts, like page layout, hierarchy, and functionality.

An example of more realistic content is using actual copy instead of

placeholder text or gray boxes to represent words.

This helps to see how the real content works with the rest of the screen, and

also provides an opportunity to optimize the text links and line breaks.

For example,

you wouldn't want a headline to have a stray word on its own in a second line.

You'd want to either tighten it to fit on one line, or

lengthen it to fit intentionally on two lines.

Other type adjustments can be done at this stage as well,

such as choosing specific fonts.

Create high fidelity wireframes whenever you're more confident in your design and

wanna flesh out the details.

This also helps others see your vision without it being critiqued for

its visual merits in a full-blown mock-up.

As an example, here's another wireframe I made for the Treehouse homepage.

This is how the homepage wireframe looked as it transformed into a high fidelity

wireframe.

As you can see, it's still in grayscale and uses some placeholder content.

But it's more polished and uses some actual copy and images.

Wireframes also ranged in size and scope.

The default type of wireframe we'll be discussing in this course

will be full scale wireframes.

But it's important to know about thumbnail wireframes as well.

To facilitate quick iteration early on, you can start with thumbnail wireframes.

Smaller in scale, thumbnail wireframes allow you to

create a little sketch of the page without getting too involved with the details.

This would allow you to brainstorm different ideas quickly.

Let me show you an example.

Here's a page of thumbnail wireframes.

In this example, I was iterating on just the hero section of the marketing page.

Instead of fleshing out all the nuances of the page, these are quick,

small-scale sketches.

Drawing at this scale allows you to see the big picture, and get a feel for

the constant hierarchy and page layout.