in web design
presentation by hitesh mehta
8. wrap up
5. fashion designers
A fashion designer initially
sketches a concept, crafts
the pattern, apply colors,
works on combinations to
present the idea.
6. architects blueprint
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
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.
13. who should create
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
I believe a wireframe can be proposed by
anyone in the organization who has the
understanding of websites and the
15. who should create
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
17. the development
Developing or making wireframes is a
collaborative process between UX,
Product & Technology teams.
18. the development
Step 1 – Brainstorm session
Step 2 – Creating Wireframes
Step 3 – Reviewing of Wireframe
Step 4 – Getting started with designs
19. the development
Wireframes works as a communication
tool for the project between multiple
teams in achieveing the goals.
The team connects better than before.
21. tools you can
- MS Powerpoint - Google Drawings
- MS Excel - Gliffy.com
- MS Word - MS Visio
- Adobe Photoshop - Balsamiq
- Adobe Illustrator - Paper, Pen/Pencil
22. tools you can
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.
24. different levels &
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
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
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
35. best practices
Make sure all the key elements are
communicated well, like, action buttons,
media players, pagination, image
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
Never expect the desired experience from
wireframes. Wireframes throws you an
overview of page PLAN.
41. thank you