2. Wireframing
A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on
space allocation and prioritization of content, functionalities available, and intended behaviors.
For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes
also help establish relationships between a website’s various templates.
3. The Value of Wireframes
Wireframes serve multiple purposes by helping to:
Connect the site’s information architecture to its visual design by showing paths between pages
Clarify consistent ways for displaying particular types of information on the user interface
Determine intended functionality in the interface
Prioritize content through the determination of how much space to allocate to a given item and where
that item is located
4. Creating Wireframes
It’s important to keep in mind that wireframes are guides to where the major navigation and
content elements of your site are going to appear on the page. Since the goal of the illustrations
is not to depict visual design, keep it simple.
Do not use colors. If you would typically use color to distinguish items, instead rely on various gray
tones to communicate the differences.
Do not use images. Images distract from the task at hand. To indicate where you intend to place an
image and its size, you can instead use a rectangular box sized to dimension with an “x” through it.
Use only one generic font. Typography should not be a part of the wireframing discussion. Within the
wireframes, however, you may still resize the font to indicate various headers and changes in the
hierarchy of the text information on the page.
6. Why do wireframes look the way they do?
1. Wireframes make it clear that this is not the final design
No one could mistake a wireframe for the final look and feel of your website. Low-fidelity and few colors
force you to focus on structure over details. There will be lots of time for visual design once the
structure is finalized.
2. Wireframes convey that "this is all up for discussion"
3. Wireframes make it clear that no code has been written yet
If your customer or stakeholder received some screens that looked like screenshots of the final website,
instead of a wireframe, they might assume that all the code behind those screenshots had already
been written.
7. Logo
Search field
Breadcrumb
Headers, including page title as the H1 and subheads H2-Hx
Navigation systems, including global navigation and local navigation
Body content
Share buttons
Contact information
Footer
8. Types of Wireframes
Wireframes can vary both in their production, from paper sketches to computer-drawn images
and in the amount of detail that they convey. Low and high-fidelity are terms used to identify the
level of wireframe production or functionality.
Low-fidelity wireframes help facilitate project team communication and are relatively quick to develop.
They tend to be more abstract because they often use simple images to block off space and implement
mock content, or Latin (lorem ipsum) text as filler for content and labels.
High-fidelity wireframes are better for documentation because of their increased level of detail. These
wireframes often include information about each particular item on the page, including dimensions,
behavior, and/ or actions related to any interactive element.
