importance of wireframes in web design
DESCRIPTION
TRANSCRIPT
![Page 1: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/1.jpg)
importance of wireframesin web designpresentation by hitesh mehta
September 2010
importance of wireframes
![Page 2: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/2.jpg)
1. perspective2. first3. creator4. process5. tools6. examples7. practices8. wrap up
agendaagenda
![Page 3: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/3.jpg)
perspective
![Page 4: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/4.jpg)
perspective
sketchblueprintscribbledrawing
![Page 5: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/5.jpg)
A fashion designer initially sketches a concept, crafts the pattern, apply colors, works on combinations to present the idea.
fashion designerssketch
![Page 6: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/6.jpg)
architects blueprintConstruction companies, interior designers, automobile compaines works with blueprintand 3D drawings.
![Page 7: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/7.jpg)
writers scribbleStory/Copy writers, poets, authors and people in to similar profession always scribbles to puttheir initial thoughts.
![Page 8: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/8.jpg)
artists drawArtists you know or meet has the practice of drawing and that leads to a masterpiece art.
![Page 9: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/9.jpg)
first
![Page 10: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/10.jpg)
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.
![Page 11: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/11.jpg)
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.
![Page 12: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/12.jpg)
creator
![Page 13: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/13.jpg)
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.
![Page 14: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/14.jpg)
who should createwireframeI believe a wireframe can be proposed by anyone in the organization who has the understanding of websites and the user-flow.
![Page 15: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/15.jpg)
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.
![Page 16: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/16.jpg)
process
![Page 17: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/17.jpg)
the development processDeveloping or making wireframes is acollaborative process between UX, Product & Technology teams.
![Page 18: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/18.jpg)
the development processStep 1 – Brainstorm sessionStep 2 – Creating WireframesStep 3 – Reviewing of Wireframe Step 4 – Getting started with designs
![Page 19: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/19.jpg)
the development processWireframes works as a communication tool for the project between multipleteams in achieveing the goals.
The team connects better than before.
![Page 20: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/20.jpg)
tools
![Page 21: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/21.jpg)
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
![Page 22: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/22.jpg)
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.
![Page 23: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/23.jpg)
examples
![Page 24: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/24.jpg)
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
![Page 25: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/25.jpg)
1. sketch / paper style
![Page 26: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/26.jpg)
2. low fidelity / reference zone
![Page 27: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/27.jpg)
3. high fidelity
![Page 28: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/28.jpg)
4. storyboard / sequence
![Page 29: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/29.jpg)
5. standalone
![Page 30: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/30.jpg)
6. specification
![Page 31: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/31.jpg)
practices
![Page 32: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/32.jpg)
practices
best practicesKeep it simple, to the point and accurate. Clarity of project is extremely important while working on the flow.
![Page 33: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/33.jpg)
best practicesTry and keep your wireframes in grayscale or with minimal colors. Overuse of colors can mislead and distract from theobjective.
![Page 34: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/34.jpg)
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.
![Page 35: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/35.jpg)
best practicesMake sure all the key elements are communicated well, like, action buttons, media players, pagination, image placeholders, etc.
![Page 36: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/36.jpg)
best practicesDo not wireframe for every project. Any new website or a module in a existing site would require a wireframe.
![Page 37: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/37.jpg)
best practicesFor stakeholders, limit your queries within the scope of the shared wireframes. This is to avoid confusion and complexity.
![Page 38: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/38.jpg)
best practicesFor stakeholders, before providing full list of feedback I suggest you spend more time on these wireframe, do a complete analysis and check.
![Page 39: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/39.jpg)
wrap up
![Page 40: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/40.jpg)
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.
![Page 41: Importance of Wireframes in Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051613/54c78b934a795993188b456a/html5/thumbnails/41.jpg)
thank youthank you
hitesh mehtawww.twitter.com/HiteshMehta