WEB DESIGN APPLICATIONS Ahsan uddin Shan School of Film & Media Studies Ngee Ann Polytechnic Week 5: Web Design – design
Objectives <ul><li>What this session will cover</li></ul><ul><li>designing  for the user </li></ul><ul><li>4 steps to user...
Design Phase <ul><li>Function </li></ul><ul><ul><li>What’s the logical way to organize information for the customer </li><...
Design Phase <ul><li>How will the site will look to the customer? </li></ul><ul><li>Define the style and organization of v...
designing for the user <ul><li>web sites must be used – not just viewed </li></ul><ul><li>you have to consider: </li></ul>...
designing for the user <ul><li>people have to understand what – almost immediately—what your site is, what they can do the...
<ul><li>4 steps to user-centered design: </li></ul><ul><ul><li>focus should be on the user and the user’s goal </li></ul><...
designing for the web conventions <ul><li>4 kinds of web conventions </li></ul><ul><ul><ul><li>navigation systems </li></u...
how  people see your web sites <ul><li>1. where am I ? </li></ul>3. what else is here ? 2. what else is here ?
where users expect things to  be <ul><li>1 </li></ul>6 6 2 3  4 5  logo shopping cart, help about us, contact us site navi...
visual convention on  (and off) the web <ul><li>don’t need to be explained </li></ul>
Sketch the essential features & look
Sketch the essential features & look <ul><li>Overall page structure and proportions  </li></ul><ul><li>Level 1 navigation ...
choosing software for web design <ul><li>html: learn the limitation and surrender some control </li></ul><ul><li>HTML edit...
designing for different systems <ul><li>design differences arises from: </li></ul><ul><ul><li>platform </li></ul></ul><ul>...
6 steps to cross-platform design: <ul><li>identify your target audience </li></ul><ul><li>choose a single browser </li></u...
designing for speed <ul><li>simpler the better </li></ul><ul><li>remove everything extraneous </li></ul><ul><li>depends on...
8 tricks to designing for speed <ul><li>surrender some control </li></ul><ul><li>eliminate extras </li></ul><ul><li>compre...
the well-organized site <ul><li>a logical structure </li></ul><ul><ul><li>make immediate sense to the user </li></ul></ul>...
site organization <ul><li>site organization is based on </li></ul><ul><ul><li>user goals </li></ul></ul><ul><ul><li>busine...
structuring your site <ul><li>4 steps to structuring your site: </li></ul><ul><ul><li>take stock of what you have </li></u...
6 ways to organize your site: by category <ul><li>use this when all your visitors have the same basic task in mind </li></...
6 ways to organize your site: by task <ul><li>use this when your site allows users to accomplish several tasks which may o...
<ul><li>use this when your site two or more distinct groups of users with different goals and interests </li></ul>6 ways t...
<ul><li>use this when your user speak different languages </li></ul>6 ways to organize your site: by language location
<ul><li>use this either the date or order of elements is essential to user understanding </li></ul>6 ways to organize your...
<ul><li>use this only when you are designing intranet site </li></ul><ul><li>mel </li></ul>6 ways to organize your site: b...
<ul><li>3 ways to visualize the site structure </li></ul><ul><ul><li>the site map: the organization of site sections </li>...
<ul><li>A sketch will typically feature:  </li></ul><ul><ul><li>Stars showing how a user  arrives at the site  (entry poin...
Story Board <ul><li>A story board is used to organize your thoughts and ideas </li></ul><ul><li>Use paper to draw boxes an...
Story Board <ul><li>This is also called a site map (detailed site structure) </li></ul><ul><li>How many pages? </li></ul><...
Detailed Sketches http://ela10b.dev.kcdc.ca/~greentela10/unit1/racial/lesson3/sstoryboard.html
 
 
<ul><li>what your site offers </li></ul><ul><li>how is your site organized </li></ul><ul><li>where they are within your si...
8  bad ideas for site navigation <ul><li>pull down menus </li></ul><ul><li>home-made icons </li></ul><ul><li>color coding ...
12 navigation systems <ul><li>tabs </li></ul><ul><li>left-hand panel </li></ul><ul><li>page-top nav bar </li></ul><ul><li>...
global and local navigation <ul><li>global navigation shows users where they are within the site  </li></ul><ul><li>local ...
12 navigation systems <ul><li>linear path </li></ul><ul><li>multipage path </li></ul><ul><li>pull-down menus </li></ul><ul...
naming site sections <ul><li>short </li></ul><ul><li>consistent </li></ul><ul><li>clear </li></ul><ul><li>jargon-free </li...
<ul><li>Things to think about:  </li></ul><ul><ul><li>Think what global or top-level links really need to be available on ...
 
References <ul><li>Cnet.com </li></ul><ul><li>designWHYS by Shayne Bowman </li></ul><ul><li>Useit.com </li></ul><ul><li>th...
Upcoming SlideShare
Loading in …5
×

Web Design Phase

3,759 views

Published on

web design phase

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,759
On SlideShare
0
From Embeds
0
Number of Embeds
285
Actions
Shares
0
Downloads
116
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Web Design Phase

    1. 1. WEB DESIGN APPLICATIONS Ahsan uddin Shan School of Film & Media Studies Ngee Ann Polytechnic Week 5: Web Design – design
    2. 2. Objectives <ul><li>What this session will cover</li></ul><ul><li>designing for the user </li></ul><ul><li>4 steps to user-centered design </li></ul><ul><li>4 kinds of web conventions </li></ul><ul><li>designing for different systems </li></ul><ul><li>designing for speed </li></ul><ul><li>site organization </li></ul>
    3. 3. Design Phase <ul><li>Function </li></ul><ul><ul><li>What’s the logical way to organize information for the customer </li></ul></ul><ul><ul><li>Define the product, partners, content, and how that content is used to fulfill customer goals </li></ul></ul>
    4. 4. Design Phase <ul><li>How will the site will look to the customer? </li></ul><ul><li>Define the style and organization of visual elements </li></ul><ul><li>Simple usability testing (user’s experience when interacting with the web site) </li></ul>
    5. 5. designing for the user <ul><li>web sites must be used – not just viewed </li></ul><ul><li>you have to consider: </li></ul><ul><ul><li>usability </li></ul></ul><ul><ul><li>technology </li></ul></ul><ul><ul><li>how things render on the page </li></ul></ul><ul><ul><li>the flow from one page to another </li></ul></ul>
    6. 6. designing for the user <ul><li>people have to understand what – almost immediately—what your site is, what they can do there, and how they can find what they’re looking for </li></ul>
    7. 7. <ul><li>4 steps to user-centered design: </li></ul><ul><ul><li>focus should be on the user and the user’s goal </li></ul></ul><ul><ul><li>provide intuitive pathways through the site </li></ul></ul><ul><ul><li>follow interface conventions </li></ul></ul><ul><ul><li>test! </li></ul></ul>designing for the user
    8. 8. designing for the web conventions <ul><li>4 kinds of web conventions </li></ul><ul><ul><ul><li>navigation systems </li></ul></ul></ul><ul><ul><ul><li>icons and other visual elements </li></ul></ul></ul><ul><ul><ul><li>placement on the page </li></ul></ul></ul><ul><ul><ul><li>color </li></ul></ul></ul>
    9. 9. how people see your web sites <ul><li>1. where am I ? </li></ul>3. what else is here ? 2. what else is here ?
    10. 10. where users expect things to be <ul><li>1 </li></ul>6 6 2 3 4 5 logo shopping cart, help about us, contact us site navigation bar
    11. 11. visual convention on (and off) the web <ul><li>don’t need to be explained </li></ul>
    12. 12. Sketch the essential features & look
    13. 13. Sketch the essential features & look <ul><li>Overall page structure and proportions </li></ul><ul><li>Level 1 navigation (your sections) </li></ul><ul><li>Other global navigation (like login/out, site map, help, footer navigation)- available from all pages of the website </li></ul><ul><li>Any key graphical elements </li></ul>
    14. 14. choosing software for web design <ul><li>html: learn the limitation and surrender some control </li></ul><ul><li>HTML editing softwares </li></ul><ul><li>other page layout softwares </li></ul><ul><li>site-mapping software: Microsoft visio, smart draw </li></ul><ul><li>graphics software </li></ul><ul><li>animation software </li></ul>
    15. 15. designing for different systems <ul><li>design differences arises from: </li></ul><ul><ul><li>platform </li></ul></ul><ul><ul><li>browser </li></ul></ul><ul><ul><li>plug-ins </li></ul></ul><ul><ul><li>monitor </li></ul></ul><ul><ul><li>color capability </li></ul></ul>
    16. 16. 6 steps to cross-platform design: <ul><li>identify your target audience </li></ul><ul><li>choose a single browser </li></ul><ul><li>research the differences </li></ul><ul><li>accept the differences </li></ul><ul><li>target different browser </li></ul><ul><li>test </li></ul>
    17. 17. designing for speed <ul><li>simpler the better </li></ul><ul><li>remove everything extraneous </li></ul><ul><li>depends on product, focus, and audience </li></ul><ul><li>what slows down your </li></ul><ul><ul><li>images and multimedia </li></ul></ul><ul><ul><li>page construction </li></ul></ul><ul><ul><li>poor organization and non-standard design </li></ul></ul>
    18. 18. 8 tricks to designing for speed <ul><li>surrender some control </li></ul><ul><li>eliminate extras </li></ul><ul><li>compress all images and multimedia </li></ul><ul><li>replace images of words with words: images of text. not accessible and usable, searchable </li></ul><ul><li>repeat images throughout the site </li></ul><ul><li>mind the details of HTML: should specify attributes, such as image height and width. </li></ul><ul><li>switch to stylesheets </li></ul><ul><li>follow design conventions </li></ul>
    19. 19. the well-organized site <ul><li>a logical structure </li></ul><ul><ul><li>make immediate sense to the user </li></ul></ul><ul><ul><li>similar tasks should be grouped together </li></ul></ul><ul><li>consistent navigation </li></ul><ul><ul><li>users rely heavily on site navigation for orientation (where am I?), context (what else is here?), and direction (how do I get there?) </li></ul></ul><ul><li>clear labels </li></ul><ul><ul><li>helping users to find information </li></ul></ul>
    20. 20. site organization <ul><li>site organization is based on </li></ul><ul><ul><li>user goals </li></ul></ul><ul><ul><li>business goals </li></ul></ul><ul><ul><ul><li>must address your organizational goals, emphasizing features, products </li></ul></ul></ul><ul><ul><li>classification system for the content </li></ul></ul><ul><ul><ul><li>grouping of content, folders and sub folders </li></ul></ul></ul>
    21. 21. structuring your site <ul><li>4 steps to structuring your site: </li></ul><ul><ul><li>take stock of what you have </li></ul></ul><ul><ul><li>decide what’s most important </li></ul></ul><ul><ul><li>choose an organizing principle: by date, name, or by category </li></ul></ul><ul><ul><li>categorize the content </li></ul></ul>
    22. 22. 6 ways to organize your site: by category <ul><li>use this when all your visitors have the same basic task in mind </li></ul><ul><li>research a topic, buy product, or discuss an issue </li></ul>
    23. 23. 6 ways to organize your site: by task <ul><li>use this when your site allows users to accomplish several tasks which may or may no be related to each other. </li></ul><ul><li>wiki, youtube </li></ul>
    24. 24. <ul><li>use this when your site two or more distinct groups of users with different goals and interests </li></ul>6 ways to organize your site: by user
    25. 25. <ul><li>use this when your user speak different languages </li></ul>6 ways to organize your site: by language location
    26. 26. <ul><li>use this either the date or order of elements is essential to user understanding </li></ul>6 ways to organize your site: by date or order
    27. 27. <ul><li>use this only when you are designing intranet site </li></ul><ul><li>mel </li></ul>6 ways to organize your site: by corporate department
    28. 28. <ul><li>3 ways to visualize the site structure </li></ul><ul><ul><li>the site map: the organization of site sections </li></ul></ul><ul><ul><li>the user path: user flow or flow chart. </li></ul></ul><ul><ul><ul><li>screen by screen experience </li></ul></ul></ul><ul><ul><li>the page schematic: wire frame or story board, shows all the elements that will appear on the page, and roughly where they will appear </li></ul></ul>documenting the site structure
    29. 29. <ul><li>A sketch will typically feature: </li></ul><ul><ul><li>Stars showing how a user arrives at the site (entry points) - home page </li></ul></ul><ul><ul><li>Circles showing actions, views or places (which may eventually become pages) - pages </li></ul></ul><ul><ul><li>Arrows showing how users may move around the site - navigation </li></ul></ul>the user path
    30. 30. Story Board <ul><li>A story board is used to organize your thoughts and ideas </li></ul><ul><li>Use paper to draw boxes and curves or lines, or </li></ul><ul><li>a simple rough sketch of the web page </li></ul><ul><li>Indesign, Illustrator, powerpoint </li></ul><ul><li>boxes = curves + square </li></ul><ul><li>Each square has a main title to indicate what the page is about </li></ul>Camera Home Design
    31. 31. Story Board <ul><li>This is also called a site map (detailed site structure) </li></ul><ul><li>How many pages? </li></ul><ul><li>Text based story board </li></ul>GQ // home page fashion gear news urbanwire heatwave latest <ul><li>GQ home </li></ul><ul><li>News </li></ul><ul><ul><li>Latest </li></ul></ul><ul><ul><li>Urbanwire </li></ul></ul><ul><ul><li>heatwave </li></ul></ul><ul><li>Fashion </li></ul><ul><li>Gear </li></ul>
    32. 32. Detailed Sketches http://ela10b.dev.kcdc.ca/~greentela10/unit1/racial/lesson3/sstoryboard.html
    33. 35. <ul><li>what your site offers </li></ul><ul><li>how is your site organized </li></ul><ul><li>where they are within your site </li></ul><ul><li>how to find what they are looking for </li></ul>what users learn from your navigation
    34. 36. 8 bad ideas for site navigation <ul><li>pull down menus </li></ul><ul><li>home-made icons </li></ul><ul><li>color coding </li></ul><ul><li>visual metaphors </li></ul><ul><li>cute, clever, names </li></ul><ul><li>navigation elements that move around </li></ul><ul><li>navigation elements in unexpected places </li></ul><ul><li>flying, floating things </li></ul>
    35. 37. 12 navigation systems <ul><li>tabs </li></ul><ul><li>left-hand panel </li></ul><ul><li>page-top nav bar </li></ul><ul><li>breadcrumbs </li></ul><ul><li>folders & files </li></ul><ul><li>hub & spokes </li></ul>
    36. 38. global and local navigation <ul><li>global navigation shows users where they are within the site </li></ul><ul><li>local navigation picks up where global navigation leaves off </li></ul><ul><li>network navigation displays links to other sites within a larger network </li></ul>
    37. 39. 12 navigation systems <ul><li>linear path </li></ul><ul><li>multipage path </li></ul><ul><li>pull-down menus </li></ul><ul><li>the search box </li></ul><ul><li>image maps </li></ul><ul><li>lists of links </li></ul>
    38. 40. naming site sections <ul><li>short </li></ul><ul><li>consistent </li></ul><ul><li>clear </li></ul><ul><li>jargon-free </li></ul><ul><ul><li>acronyms </li></ul></ul><ul><ul><li>double entenders </li></ul></ul><ul><ul><li>formal or technical words </li></ul></ul><ul><ul><li>industry terms </li></ul></ul>
    39. 41. <ul><li>Things to think about: </li></ul><ul><ul><li>Think what global or top-level links really need to be available on every page. Test your assumptions </li></ul></ul><ul><ul><li>Create enough sections that it will be easy to focus on what you want </li></ul></ul>Organize views into a site map
    40. 43. References <ul><li>Cnet.com </li></ul><ul><li>designWHYS by Shayne Bowman </li></ul><ul><li>Useit.com </li></ul><ul><li>the unusually useful web book </li></ul><ul><li>web design applications </li></ul><ul><li>Web design from scratch ( http://www.webdesignfromscratch.com/colour.cfm ) </li></ul><ul><li>http://www.le.ac.uk (for navigation section) </li></ul>

    ×