importance
of
wireframes
in web design
presentation by hitesh mehta
September 2010

agenda
1. perspective
2. first
3. creator
4. process
5. tools
6. examples
7. practices
8. wrap up

perspective

sketch
blueprint
scribble
drawing

fashion designers
sketch
A fashion designer initially
sketches a concept, crafts
the pattern, apply colors,
works on combinations to
present the idea.

architects blueprint
Construction companies,
interior designers,
automobile compaines
works with blueprint
and 3D drawings.

writers scribble
Story/Copy writers, poets,
authors and people in to
similar profession always
scribbles to put
their initial thoughts.

artists draw
Artists you know or meet has
the practice of drawing and
that leads to a
masterpiece art.

first

first of all
Wireframe helps build the structure of a
website by displaying the basic elements
like Navigation, Header, Footer,
Ad-Inventories, Page Columns, sidebars
and more. Consider wireframes as QUICK
but a ‘thought through processes’ to
architect the page.

first of all
First thing for a reviewer is to understand
the purpose of WF, do not expect the
desired ‘web-experience’ from these
drawings. These are mere first level
communications crafted towards
achieving the desired user experience.

creator

who should create
wireframe
Technically, a wireframe is created by an
Information Architect (IA) or a
User Experience Designer (UED/UX).
But this does not limit here.

who should create
wireframe
I believe a wireframe can be proposed by
anyone in the organization who has the
understanding of websites and the
user-flow.

who should create
wireframe
Business head, project leader, product
manager or CEO can draft a wireframe in
any form (digital or paper) to present the
idea to the team and take it forward to
brainstorm.

process

the development
process
Developing or making wireframes is a
collaborative process between UX,
Product & Technology teams.

the development
process
Step 1 – Brainstorm session
Step 2 – Creating Wireframes
Step 3 – Reviewing of Wireframe
Step 4 – Getting started with designs

the development
process
Wireframes works as a communication
tool for the project between multiple
teams in achieveing the goals.
The team connects better than before.

tools

tools you can
work with
- MS Powerpoint - Google Drawings
- MS Excel - Gliffy.com
- MS Word - MS Visio
- Adobe Photoshop - Balsamiq
- Adobe Illustrator - Paper, Pen/Pencil

tools you can
work with
No matter which tools you prefer to work
with just consider that wireframes as
foundation to a final website design.
Avoid design details in wireframes.

examples

different levels &
examples
1. Sketch style or Paper WF
2. Low fidelity or Reference Zone WF
3. High fidelity WF
4. Storyboard / Sequence WF
5. Standalone WF
6. Specification WF

1. sketch / paper style

2. low fidelity / reference zone

3. high fidelity

4. storyboard / sequence

5. standalone

6. specification

practices

best practices
Keep it simple, to the point and accurate.
Clarity of project is extremely important
while working on the flow.

best practices
Try and keep your wireframes in grayscale
or with minimal colors. Overuse of colors
can mislead and distract from the
objective.

best practices
When wireframes are sent to stakeholders
for review/approval make sure they are
complete and agreed up on by all of them
who have contributed in the project during
brainstorm.

best practices
Make sure all the key elements are
communicated well, like, action buttons,
media players, pagination, image
placeholders, etc.

best practices
Do not wireframe for every project. Any
new website or a module in a existing site
would require a wireframe.

best practices
For stakeholders, limit your queries within
the scope of the shared wireframes. This
is to avoid confusion and complexity.

best practices
For stakeholders, before providing full list
of feedback I suggest you spend more
time on these wireframe, do a complete
analysis and check.

wrap up

wrap up
Wireframes are about ‘how a page should
be built’.
Never expect the desired experience from
wireframes. Wireframes throws you an
overview of page PLAN.

thank you
hitesh mehta
www.twitter.com/HiteshMehta