Web site design


Published on

Test PowerPOint

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Remember not everything will work with older browsers Ex. CSS will not work in Netscape 4.75 and below Provide links on your page for the user to update their software Ex. Shcokwave, Flash, Browser links Think about people who would visit your site and the tech. They would have
  • Image intensive site Total graphics add up to 84 kb. Slow download on a 56 kbps connection
  • Provide multiple sets of links in different locations on your site Always provide alternative links to image maps Some folks are leisurely browsing your site while others are Looking for specific info. quickly like phone numbers.
  • Reading from the screen tires the eyes because it it back lit. Glare can be a factor Most people read 50% as fast on the computer screen Seven(plus or minus two) rule A well written procedure will contain no more than 9 steps A name=
  • Why would someone visit this page? Who would visit? Text filled page Very restrained Very informational Clear presentation Abundant navigation Clear headings Business oriented layout, fonts, and graphics Newspaper feel, Linear flow( Up/down) left/right
  • Same agency made this site Bright colors Friendly font Dynaic structure Eyecatching graphics Livelier and playful Why is this site different?
  • Lines show table layout
  • Can make info. hard to find Reduces clutter on the page
  • Note White space between columns Note white space between navigation and rest of page White space around each block of text.
  • Who is the target audience? No ads, no links Get straight to the point - searching
  • Who is the target audience? Has a lot of stuff to draw the users eye Like TV
  • Who is the target Audience? Looks like a magazine. Lots of text but well organized Note White space. Looks like print page but uses color and linking/
  • This page is designed for scanning Note four column headings main features Note eh abstracts for the reading available online Click on picture to go to site
  • Page designed for reading Can click on screen to go to web site 2 column layout allows more space for main article Note side links to related content
  • 1 – Newest content and feature info. Can click on picture to go to site 2. Company logo and main navigation 3. Featured content that changes often 4. Reading content 5. Secondary navigation
  • Relative areas of screen importance
  • Traditional, left to right eye movement
  • Landscape display like a TV screen
  • Use text weight and color to control user eye movements Use Hort. Rules and white space effectly
  • Can click pic to go to site map.
  • Can click on image to go to page Note links in the text
  • Yahoo offers a dizzying array of info. on one page.
  • Remember Site Development Foundations manual Lessons 1 and 2 Bobby checks your code for WAI compliance Most sites fail this test. Can be run on or off line
  • Example of normal site versus text based version
  • Books reflect light back to your eye 600 dpi is fine for laser printers but a computer screen is only 72 dpi so text can look grainy Italic text will be hard to read. Use it only for emphasis
  • Web page created like a book or print material
  • Can click on pic to go to site
  • Web site design

    1. 1. Web Site Design Design for the Computer Medium
    2. 2. Craft for Look and Feel <ul><li>How the site works </li></ul><ul><li>Personality </li></ul><ul><li>Users create their own navigation path </li></ul>
    3. 3. Make the Design Portable <ul><li>Site must work with multiple browsers, operating systems and platforms </li></ul><ul><li>TEST, TEST, TEST </li></ul><ul><li>Provide update links </li></ul><ul><li>Consider your audience’s technology </li></ul>
    4. 4. Design for Low Bandwidth <ul><li>Plan pages for a variety of connection speeds </li></ul><ul><li>It will several more years before everyone has broadband </li></ul><ul><li>Images 10 to 15 kb in size </li></ul><ul><li>Most people will only wait 10 to 20 seconds for a page to load </li></ul>
    5. 6. Plan for Easy Access <ul><li>Most important factor in web site success </li></ul><ul><li>Make info. easy to find and get to </li></ul><ul><li>Make multiple navigation paths </li></ul><ul><li>Anticipate what user might do </li></ul><ul><li>Put in direct links to frequently used info. </li></ul>
    6. 7. Plan for Clear Presentation <ul><li>Make info. easy to read </li></ul><ul><li>Break text up into easy to read chunks </li></ul><ul><li>Using contrasting colors </li></ul><ul><li>People scan more online </li></ul><ul><li>Put in plenty of headings </li></ul><ul><li>Seven(plus or minus two) rule </li></ul><ul><li>Use links to navigate long passages </li></ul>
    7. 8. Navigation is clear, easy to read Contains sub- topics Popular links on every page Text legible online Active white space
    8. 9. Create a unified site design <ul><li>Choose colors, fonts, page layout, graphics to fit your theme </li></ul><ul><li>Pick a theme and stick to it </li></ul>
    9. 12. Plan smooth transitions <ul><li>Make the layout of each page the same </li></ul><ul><li>Use same colors and fonts </li></ul><ul><li>Be consistent </li></ul><ul><li>Put navigation in the same place on each page </li></ul><ul><li>The American Zoo </li></ul>
    10. 13. Use a grid for Visual Structure <ul><li>Create a template </li></ul><ul><li>The GRID organizes the page in columns and rows </li></ul><ul><li>Use tables with borders turned off </li></ul><ul><li>CSS will soon replace tables layouts </li></ul>
    11. 15. Use active white space <ul><li>Blank areas on a page </li></ul><ul><li>Can be any color </li></ul><ul><li>Used to guide readers </li></ul><ul><li>Active white space separates content </li></ul><ul><li>Passive white space – page borders and results of mismatches shapes </li></ul><ul><li>Lack of white space makes page look busy </li></ul>
    12. 16. Active White Space Passive White space
    13. 18. Design for the User <ul><li>Know your audience </li></ul><ul><li>Use an online survey for feedback </li></ul><ul><li>Consider the site’s purpose </li></ul>
    14. 22. Design for Interaction <ul><li>Will the user read or scan pages? </li></ul><ul><li>Provide links to keywords inside the text to be read </li></ul>
    15. 25. 5 4 2 3 1
    16. 26. Design for Location 2 3 4 1 5
    17. 27. Guide the Users Eyes
    18. 31. Keep a Flat Hierarchy <ul><li>Don’t make users go through too many layer to find info. </li></ul><ul><li>Use the “three click” rule </li></ul><ul><li>Use cues to guide users </li></ul><ul><li>Example standard navigation bar on every page </li></ul><ul><li>Avoid getting users lost – site map </li></ul>
    19. 33. Use Power of Hypertext <ul><li>You can decide how users get to info. </li></ul><ul><li>Place links within reading material – This is often overlooked </li></ul><ul><li>Avoid “ Click here” </li></ul><ul><li>Use plenty of links for quick navigation </li></ul><ul><li>Provide a table of contents hyperlinks </li></ul>
    20. 35. How Much Content is Enough? <ul><li>Don’t overload the user </li></ul><ul><li>Provide enough navigation clues for them to find what they want </li></ul><ul><li>Split info. up into smaller chucks </li></ul><ul><li>Use hyperlinks between chunks </li></ul>
    21. 37. Design for Accessibility <ul><li>Design for the physically challenged </li></ul><ul><li>ADA (American Disabilities Act) </li></ul><ul><li>Images and media intensive sites thrawt this effort. </li></ul><ul><li>Be aware of screen readers and Braille translators </li></ul><ul><li>Provide text on version of your site </li></ul>
    22. 38. W3c and WAI <ul><li>Web Accessibility Initiative </li></ul><ul><li>Recommendations (a few) </li></ul><ul><li>Use alt attribute </li></ul><ul><li>Provide captioning for video </li></ul><ul><li>Use text with links that makes sense when read out loud </li></ul><ul><li>Use Bobby www.cast.org/bobby </li></ul>
    23. 40. Design for the Screen <ul><li>Computer is landscape </li></ul><ul><li>Screen is backlit. Light comes through content. </li></ul><ul><li>Use good contrasts </li></ul><ul><li>Avoid dark on dark light on light </li></ul><ul><li>Use 72 dpi for scans </li></ul><ul><li>Use italics sparingly </li></ul>
    24. 41. Reformat Content for Online Presentation <ul><li>You are not creating a book </li></ul><ul><li>Times New Roman is hard to read on line </li></ul>