Session 03:   User Consideration <ul><li>CE-9506:  Web Design - Structure, Function & Analysis </li></ul>
Why Consider Users? <ul><li>Duh! </li></ul><ul><li>What kind of users do we have to consider </li></ul><ul><li>User profil...
 
 
Where do we begin? <ul><li>Site Audits (studies of existing sites)  </li></ul><ul><li>navigation and flow maps </li></ul><...
Benefits of this method? <ul><li>It reduces excessive features </li></ul><ul><li>improves overall usability of the product...
What should we use for Wireframes? <ul><li>Graph Paper </li></ul><ul><li>Sketch Book </li></ul><ul><li>Illustrator </li></...
Setting up our grid. <ul><li>set up templates using guides </li></ul><ul><li>create “sprites” and “symbols” </li></ul><ul>...
Hacking the Grid <ul><li>compensate for margins and padding in the wireframes </li></ul><ul><li>know which elements need t...
Upcoming SlideShare
Loading in...5
×

CE-9506 - Session03: User Consideration

384
-1

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×