importance of wireframesin web designpresentation by hitesh mehta

September 2010

importance of wireframes

1. perspective2. first3. creator4. process5. tools6. examples7. practices8. wrap up

agendaagenda

perspective

perspective

sketchblueprintscribbledrawing

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

fashion designerssketch

architects blueprintConstruction companies, interior designers, automobile compaines works with blueprintand 3D drawings.

writers scribbleStory/Copy writers, poets, authors and people in to similar profession always scribbles to puttheir initial thoughts.

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

first

first of allWireframe 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 allFirst 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 createwireframeTechnically, a wireframe is created by an Information Architect (IA) or a User Experience Designer (UED/UX).

But this does not limit here.

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

who should createwireframeBusiness 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 processDeveloping or making wireframes is acollaborative process between UX, Product & Technology teams.

the development processStep 1 – Brainstorm sessionStep 2 – Creating WireframesStep 3 – Reviewing of Wireframe Step 4 – Getting started with designs

the development processWireframes works as a communication tool for the project between multipleteams in achieveing the goals.

The team connects better than before.

tools

tools you can work with

- Google Drawings- Gliffy.com- MS Visio- Balsamiq - Paper, Pen/Pencil

- MS Powerpoint- MS Excel- MS Word- Adobe Photoshop- Adobe Illustrator

tools you can work withNo 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

examples different levels &examples1. Sketch style or Paper WF2. Low fidelity or Reference Zone WF 3. High fidelity WF4. Storyboard / Sequence WF5. Standalone WF6. Specification WF

1. sketch / paper style

2. low fidelity / reference zone

3. high fidelity

4. storyboard / sequence

5. standalone

6. specification

practices

practices

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

best practicesTry and keep your wireframes in grayscale or with minimal colors. Overuse of colors can mislead and distract from theobjective.

best practicesWhen 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 duringbrainstorm.

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

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

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

best practicesFor 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 upWireframes are about ‘how a page should be built’.

Never expect the desired experience from wireframes. Wireframes throws you an overview of page PLAN.

thank youthank you

hitesh mehtawww.twitter.com/HiteshMehta