Importance of Wireframes in Web Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Importance of Wireframes in Web Design

on

  • 6,654 views

 

Statistics

Views

Total Views
6,654
Views on SlideShare
6,615
Embed Views
39

Actions

Likes
6
Downloads
131
Comments
2

4 Embeds 39

https://blackboard.madisoncollege.edu 27
http://www.linkedin.com 9
http://dev.imarc.net 2
http://dschool.co 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Very good too much helpful information. Thanks
    Are you sure you want to
    Your message goes here
    Processing…
  • Very nice, Hitesh!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Importance of Wireframes in Web Design Presentation Transcript

  • 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
  • 4. sketch blueprint scribble drawing
  • 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.
  • 41. thank you hitesh mehta www.twitter.com/HiteshMehta