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