This document discusses the importance and process of creating wireframes for web design. It begins by explaining what wireframes are and providing examples from other fields like fashion, architecture, and writing. It then covers how wireframes help structure a website, who can create them, and the typical development process. The document also lists different tools that can be used to create wireframes and provides examples of different wireframe types. It concludes by offering best practices for wireframes such as keeping them simple, using minimal colors, and ensuring stakeholder agreement before finalizing.

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

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

3. perspective

4. sketch
blueprint
scribble
drawing

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

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

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

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

9. first

10. 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.

11. 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.

12. creator

13. 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.

14. 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.

15. 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.

16. process

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

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

19. 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.

20. tools

21. 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

22. 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.

23. examples

24. 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

25. 1. sketch / paper style

26. 2. low fidelity / reference zone

27. 3. high fidelity

28. 4. storyboard / sequence

29. 5. standalone

30. 6. specification

31. practices

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

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

34. 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.

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

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

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

38. 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.

39. wrap up

40. 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.

41. thank you
hitesh mehta
www.twitter.com/HiteshMehta