Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Importance of Wireframes in Web Design
Semelhante a Importance of Wireframes in Web Design (20)
Importance of Wireframes in Web Design
- 1. importance of wireframes in web design presentation by hitesh mehta September 2010
- 2. agenda 1. perspective 2. first 3. creator 4. process 5. tools 6. examples 7. practices 8. wrap up
- 3. perspective
- 5. fashion designers sketch A fashion designer initially sketches a concept, crafts the pattern, apply colors, works on combinations to present the idea.
- 6. architects blueprint Construction companies, interior designers, automobile compaines 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 masterpiece art.
- 9. first
- 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.
- 12. creator
- 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.
- 16. process
- 17. the development process Developing or making wireframes is a collaborative process between UX, Product & Technology teams.
- 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.
- 20. tools
- 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.
- 23. examples
- 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. 1. sketch / paper style
- 26. 2. low fidelity / reference zone
- 27. 3. high fidelity
- 28. 4. storyboard / sequence
- 29. 5. standalone
- 30. 6. specification
- 31. practices
- 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.
- 39. wrap up
- 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.