Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CE-9506 - Session03: User Consideration

511 views

Published on

This is the brief slide presentation given to my students at UArts.

It focus on the design for maximum usability of a web site and interface.

Published in: Education
  • Be the first to comment

  • Be the first to like this

CE-9506 - Session03: User Consideration

  1. 1. Session 03: User Consideration <ul><li>CE-9506: Web Design - Structure, Function & Analysis </li></ul>
  2. 2. Why Consider Users? <ul><li>Duh! </li></ul><ul><li>What kind of users do we have to consider </li></ul><ul><li>User profile is based on type of website </li></ul><ul><li>Consumer, Task Oriented, Info. Seekers </li></ul>
  3. 5. Where do we begin? <ul><li>Site Audits (studies of existing sites) </li></ul><ul><li>navigation and flow maps </li></ul><ul><li>Site maps and content inventory </li></ul><ul><li>wireframes </li></ul><ul><li>Graphic mock ups </li></ul><ul><li>working prototypes </li></ul>
  4. 6. Benefits of this method? <ul><li>It reduces excessive features </li></ul><ul><li>improves overall usability of the product </li></ul><ul><li>Expedites design and development </li></ul><ul><li>Incorporates marketing and business goals </li></ul><ul><li>Web Applications </li></ul><ul><li>enterprise e-magazine and news sites </li></ul>
  5. 7. What should we use for Wireframes? <ul><li>Graph Paper </li></ul><ul><li>Sketch Book </li></ul><ul><li>Illustrator </li></ul><ul><li>OmniGraffle </li></ul><ul><li>InkScape </li></ul><ul><li>Photoshop </li></ul>
  6. 8. Setting up our grid. <ul><li>set up templates using guides </li></ul><ul><li>create “sprites” and “symbols” </li></ul><ul><li>study similar grids </li></ul><ul><li>use a hierarchal method </li></ul><ul><li>should be used in every web interface </li></ul>
  7. 9. Hacking the Grid <ul><li>compensate for margins and padding in the wireframes </li></ul><ul><li>know which elements need to span multiple grids </li></ul><ul><li>make the grid “scaleable” </li></ul>

×