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 combi...
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 init...
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, Fo...
first of all
First thing for a reviewer is to understand
the purpose of WF, do not expect the
desired ‘web-experience’ fro...
creator
who should create
wireframe
Technically, a wireframe is created by an
Information Architect (IA) or a
User Experience Desi...
who should create
wireframe
I believe a wireframe can be proposed by
anyone in the organization who has the
understanding ...
who should create
wireframe
Business head, project leader, product
manager or CEO can draft a wireframe in
any form (digit...
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 – ...
the development
process
Wireframes works as a communication
tool for the project between multiple
teams in achieveing the ...
tools
tools you can
work with
-   MS Powerpoint       -   Google Drawings
-   MS Excel            -   Gliffy.com
-   MS Word    ...
tools you can
work with
No matter which tools you prefer to work
with just consider that wireframes as
foundation to a fin...
examples
different levels &
examples
1. Sketch style or Paper WF
2. Low fidelity or Reference Zone WF
3. High fidelity WF
4. Storyb...
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 f...
best practices
Try and keep your wireframes in grayscale
or with minimal colors. Overuse of colors
can mislead and distrac...
best practices
When wireframes are sent to stakeholders
for review/approval make sure they are
complete and agreed up on b...
best practices
Make sure all the key elements are
communicated well, like, action buttons,
media players, pagination, imag...
best practices
Do not wireframe for every project. Any
new website or a module in a existing site
would require a wirefram...
best practices
For stakeholders, limit your queries within
the scope of the shared wireframes. This
is to avoid confusion ...
best practices
For stakeholders, before providing full list
of feedback I suggest you spend more
time on these wireframe, ...
wrap up
wrap up
Wireframes are about ‘how a page should
be built’.

Never expect the desired experience from
wireframes. Wireframe...
thank you



hitesh mehta
www.twitter.com/HiteshMehta
Upcoming SlideShare
Loading in...5
×

Importance of Wireframes in Web Design

6,355

Published on

1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,355
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
142
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Importance of Wireframes in Web Design"

  1. 1. importance of wireframes in web design presentation by hitesh mehta September 2010
  2. 2. agenda 1. perspective 2. first 3. creator 4. process 5. tools 6. examples 7. practices 8. wrap up
  3. 3. perspective
  4. 4. sketch blueprint scribble drawing
  5. 5. fashion designers sketch A fashion designer initially sketches a concept, crafts the pattern, apply colors, works on combinations to present the idea.
  6. 6. architects blueprint Construction companies, interior designers, automobile compaines works with blueprint and 3D drawings.
  7. 7. writers scribble Story/Copy writers, poets, authors and people in to similar profession always scribbles to put their initial thoughts.
  8. 8. artists draw Artists you know or meet has the practice of drawing and that leads to a masterpiece art.
  9. 9. first
  10. 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. 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. 12. creator
  13. 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. 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. 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. 16. process
  17. 17. the development process Developing or making wireframes is a collaborative process between UX, Product & Technology teams.
  18. 18. the development process Step 1 – Brainstorm session Step 2 – Creating Wireframes Step 3 – Reviewing of Wireframe Step 4 – Getting started with designs
  19. 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. 20. tools
  21. 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. 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. 23. examples
  24. 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. 25. 1. sketch / paper style
  26. 26. 2. low fidelity / reference zone
  27. 27. 3. high fidelity
  28. 28. 4. storyboard / sequence
  29. 29. 5. standalone
  30. 30. 6. specification
  31. 31. practices
  32. 32. best practices Keep it simple, to the point and accurate. Clarity of project is extremely important while working on the flow.
  33. 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. 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. 35. best practices Make sure all the key elements are communicated well, like, action buttons, media players, pagination, image placeholders, etc.
  36. 36. best practices Do not wireframe for every project. Any new website or a module in a existing site would require a wireframe.
  37. 37. best practices For stakeholders, limit your queries within the scope of the shared wireframes. This is to avoid confusion and complexity.
  38. 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. 39. wrap up
  40. 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. 41. thank you hitesh mehta www.twitter.com/HiteshMehta
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×