web site design
DESCRIPTION
Test PowerPOintTRANSCRIPT
![Page 1: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/1.jpg)
Web Site Design
Design for the Computer Medium
![Page 2: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/2.jpg)
Craft for Look and Feel How the site works Personality Users create their own navigation
path
![Page 3: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/3.jpg)
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
![Page 4: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/4.jpg)
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
![Page 5: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/5.jpg)
![Page 6: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/6.jpg)
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.
![Page 7: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/7.jpg)
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
![Page 8: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/8.jpg)
Navigation is clear, easy to read
Contains sub-topics
Popular links on every page
Text legible onlineActive white space
![Page 9: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/9.jpg)
Create a unified site design Choose colors, fonts, page layout,
graphics to fit your theme Pick a theme and stick to it
![Page 10: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/10.jpg)
![Page 11: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/11.jpg)
![Page 12: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/12.jpg)
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
![Page 13: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/13.jpg)
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
![Page 14: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/14.jpg)
![Page 15: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/15.jpg)
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
![Page 16: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/16.jpg)
Active White Space
PassiveWhite space
![Page 17: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/17.jpg)
![Page 18: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/18.jpg)
Design for the User Know your audience Use an online survey for feedback Consider the site’s purpose
![Page 19: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/19.jpg)
![Page 20: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/20.jpg)
![Page 21: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/21.jpg)
![Page 22: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/22.jpg)
Design for Interaction Will the user read or scan pages? Provide links to keywords inside
the text to be read
![Page 23: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/23.jpg)
![Page 24: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/24.jpg)
![Page 25: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/25.jpg)
5
4
2
31
![Page 26: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/26.jpg)
Design for Location
2
3
4
15
![Page 27: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/27.jpg)
Guide the Users Eyes
![Page 28: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/28.jpg)
![Page 29: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/29.jpg)
![Page 30: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/30.jpg)
![Page 31: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/31.jpg)
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
![Page 32: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/32.jpg)
![Page 33: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/33.jpg)
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
![Page 34: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/34.jpg)
![Page 35: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/35.jpg)
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
![Page 36: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/36.jpg)
![Page 37: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/37.jpg)
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
![Page 38: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/38.jpg)
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
![Page 39: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/39.jpg)
![Page 40: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/40.jpg)
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
![Page 41: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/41.jpg)
Reformat Content for Online Presentation You are not creating a book Times New Roman is hard to read
on line
![Page 42: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/42.jpg)
![Page 43: Web site design](https://reader033.vdocuments.mx/reader033/viewer/2022060115/5578bd47d8b42a85538b47d3/html5/thumbnails/43.jpg)