5. fashion designers
sketch
A fashion designer initially
sketches a concept, crafts
the pattern, apply colors,
works on combinations to
present the idea.
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
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.
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.
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.
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.
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.
