• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Importance of Wireframes in Web Design
 

Importance of Wireframes in Web Design

on

  • 6,353 views

 

Statistics

Views

Total Views
6,353
Views on SlideShare
6,324
Embed Views
29

Actions

Likes
6
Downloads
126
Comments
2

4 Embeds 29

https://blackboard.madisoncollege.edu 17
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

12 of 2 previous next

  • 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 Importance of Wireframes in Web Design Presentation Transcript

    • importance of wireframes in web design presentation by hitesh mehta September 2010
    • agenda 1. perspective 2. first 3. creator 4. process 5. tools 6. examples 7. practices 8. wrap up
    • perspective
    • sketch blueprint scribble drawing
    • fashion designers sketch A fashion designer initially sketches a concept, crafts the pattern, apply colors, works on combinations to present the idea.
    • architects blueprint Construction companies, interior designers, automobile compaines works with blueprint and 3D drawings.
    • writers scribble Story/Copy writers, poets, authors and people in to similar profession always scribbles to put their initial thoughts.
    • artists draw Artists you know or meet has the practice of drawing and that leads to a masterpiece art.
    • first
    • 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.
    • 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.
    • creator
    • 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.
    • 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.
    • 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.
    • process
    • the development process Developing or making wireframes is a collaborative process between UX, Product & Technology teams.
    • the development process Step 1 – Brainstorm session Step 2 – Creating Wireframes Step 3 – Reviewing of Wireframe Step 4 – Getting started with designs
    • 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.
    • tools
    • 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
    • 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.
    • examples
    • 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
    • 1. sketch / paper style
    • 2. low fidelity / reference zone
    • 3. high fidelity
    • 4. storyboard / sequence
    • 5. standalone
    • 6. specification
    • practices
    • best practices Keep it simple, to the point and accurate. Clarity of project is extremely important while working on the flow.
    • best practices Try and keep your wireframes in grayscale or with minimal colors. Overuse of colors can mislead and distract from the objective.
    • 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.
    • best practices Make sure all the key elements are communicated well, like, action buttons, media players, pagination, image placeholders, etc.
    • best practices Do not wireframe for every project. Any new website or a module in a existing site would require a wireframe.
    • best practices For stakeholders, limit your queries within the scope of the shared wireframes. This is to avoid confusion and complexity.
    • 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.
    • wrap up
    • 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.
    • thank you hitesh mehta www.twitter.com/HiteshMehta