week 2 web site design principles
DESCRIPTION
Week 2 Web Site Design Principles. Design for the Computer Medium. Craft the look and feel Make your design portable Design for low bandwidth Plan for clear presentation and easy access to your information. Craft the Look and Feel. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/1.jpg)
Week 2
Web Site Design Principles
![Page 2: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/2.jpg)
2
Design for the Computer Medium
• Craft the look and feel• Make your design portable• Design for low bandwidth• Plan for clear presentation and easy access
to your information
![Page 3: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/3.jpg)
3
Craft the Look and Feel
• The interface that the user must navigate is called the look and feel of a Web site
• Users look and feel when they explore the information design of your site
• Plan for a deliberate look and feel
![Page 4: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/4.jpg)
4
Make Your Design Portable
• Make your Web site design portable and accessible across different browsers, operating systems, and computer platforms
• Remember to test your work even when you feel confident of your results
![Page 5: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/5.jpg)
5
![Page 6: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/6.jpg)
6
![Page 7: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/7.jpg)
7
Design for Low Bandwidth
• Plan your pages so that they are accessible at a variety of connection speeds
• If your pages download slowly because they contain large, detailed graphics or complicated animations, your users will leave before they ever see your content
![Page 8: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/8.jpg)
8
![Page 9: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/9.jpg)
9
Plan for Easy Access to Your Information
• Your information design is the single most important factor in determining the success of your site
• The goal is to organize your content and present it as a meaningful, navigable set of information
• Your navigation options should present a variety of choices to users without detracting from their quests for information
![Page 10: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/10.jpg)
10
Plan for Clear Presentation of Your Information
• Design your information so it is easier to read• Break text into reasonable segments that
make for easier on-screen reading• Keep the “seven (plus or minus two)” rule of
information design in mind
![Page 11: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/11.jpg)
11
![Page 12: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/12.jpg)
12
Create a Unified Site Design
• Plan the unifying themes and structures• Create smooth transitions• Use a grid to provide visual structure• Use active white space
![Page 13: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/13.jpg)
13
![Page 14: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/14.jpg)
14
![Page 15: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/15.jpg)
15
Plan Smooth Transitions
• Plan to create a unified look• Reinforce the identifying elements• Avoid random, jarring changes in format
![Page 16: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/16.jpg)
16
![Page 17: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/17.jpg)
17
![Page 18: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/18.jpg)
18
Use a Grid to Provide Visual Structure
• The grid is a conceptual layout device that organizes content into columns and rows
• A grid provides visual consistency• HTML authors use the table elements to build
the grid for their pages• CSS will eventually replace tables for layout
![Page 19: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/19.jpg)
19
![Page 20: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/20.jpg)
20
Use Active White Space
• Use white space deliberately in your design• Good use of white space guides the reader
and defines the areas of your page• Active white space is an integral part of your
design that structures and separates content
![Page 21: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/21.jpg)
21
![Page 22: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/22.jpg)
22
![Page 23: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/23.jpg)
23
Design for the User
• Keep your design efforts centered solely around your user
• Design for interaction• Design for location• Guide the user’s eye• Decide whether the user will read or scan
![Page 24: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/24.jpg)
24
![Page 25: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/25.jpg)
25
![Page 26: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/26.jpg)
26
![Page 27: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/27.jpg)
27
Design for Interaction
• Think about how the user wants to interact with your information
• Design for your content type• Decide whether the user is likely to read or
scan your pages
![Page 28: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/28.jpg)
28
![Page 29: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/29.jpg)
29
![Page 30: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/30.jpg)
30
Design for Location
• Rank the information you want to display• Assign location based on the relative areas of
screen importance
![Page 31: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/31.jpg)
31
![Page 32: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/32.jpg)
32
![Page 33: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/33.jpg)
33
Guide the User’s Eye
• Plan the design to guide the user’s eye• Focus the user’s attention by object
placement, text weight, and color use
![Page 34: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/34.jpg)
34
![Page 35: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/35.jpg)
35
![Page 36: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/36.jpg)
36
![Page 37: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/37.jpg)
37
![Page 38: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/38.jpg)
38
Keep a Flat Hierarchy
• Provide plenty of linking options• Provide location information• Use plenty of textual links• Don’t overload the user with too much
content• Design for accessibility
![Page 39: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/39.jpg)
39
Use the Power of Hypertext Linking
• Add clickable text and images where necessary to guide users through your information
• Provide plenty of links to let the user get around quickly
![Page 40: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/40.jpg)
40
![Page 41: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/41.jpg)
41
![Page 42: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/42.jpg)
42
How Much Content is Enough?
• Be conscious of the cognitive load of the user• Separate content into smaller portions • Use hypertext linking to divide content
between pages
![Page 43: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/43.jpg)
43
![Page 44: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/44.jpg)
44
Design for Accessibility
• Develop Web pages that remain accessible despite any physical, sensory, and cognitive disabilities
• Developing accessible content naturally leads to creating good design
• Follow W3 Accessibility Initiative guidelines at www.w3.org/WAI/
![Page 45: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/45.jpg)
45
WCAG Guidelines
• Perceivable — Information and user interface components must be perceivable by users
• Operable — User interface components must be operable by users
• Understandable — Information about the user interface and its operation must be understandable by users
• Robust — Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies
![Page 46: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/46.jpg)
46
WCAG Guidelines - Perceivable• Provide text alternatives for any non-text
content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols, or simpler language
• Provide synchronized alternatives for multimedia (i.e., transcripts of audio, descriptions of videos)
• Create content that can be presented in different ways (for example, spoken aloud, simpler layout) without losing information or structure.
• Make it easier for people with disabilities to see and hear content, including separating foreground from background
![Page 47: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/47.jpg)
47
WCAG Guidelines - Operable
• Make all functionality available from a keyboard
• Provide users who have disabilities enough time to read and use content (i.e., text scrolls)
• Do not create content that is known to cause seizures (i.e., flashing visual content)
• Provide ways to help users with disabilities navigate, find content, and determine where they are
![Page 48: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/48.jpg)
48
WCAG Guidelines - Understandable
• Make text content readable and understandable (limit line length of text, provide white space, avoid large chunks of italic text)
• Make web pages appear and operate in predictable ways (place elements in same relative order within a website)
• Help users avoid and correct mistakes that do occur (i.e., entering data into a form color coded text may not be enough maybe sound or highlighted text)
![Page 49: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/49.jpg)
49
WCAG Guidelines - Robust
• Maximize compatibility with current and future user agents, including assistive technologies (use standards-compliant markup and validated code)
• Consider providing alternative methods of content presentation to accommodate a variety of users (i.e., text-only alternative to be used with screen readers)
![Page 50: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/50.jpg)
50
Design for the Screen
• The computer display is very different from print-based media
• The display is landscape-oriented• Colors and contrasts are different• Computer displays are low-resolution devices• Reformat paper documents for online display
![Page 51: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/51.jpg)
51
![Page 52: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/52.jpg)
52
Reformat Content for Online Presentation
• It is a poor choice to take documents that are formatted for print and post them online
• A document that is perfectly legible on paper is hard to negotiate online
![Page 53: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/53.jpg)
53
![Page 54: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/54.jpg)
54
![Page 55: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/55.jpg)
55
• Design specifically for the computer medium, considering how the page layout, fonts, and colors you use appear on the screen
• Craft an appropriate look and feel and stick with it throughout your site
• Test and revise your interface by paying close attention to the demands of online display
• Make your design portable
Summary
![Page 56: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/56.jpg)
56
Summary (continued)• Plan for easy access to your information• Design a unified look for your site • Strive for smooth transitions from one page to
the next• Create templates for your grid structure and
apply them consistently• Use active white space as an integral part of
your design• Use text, color, and object placement to guide
the user’s eye
![Page 57: Week 2 Web Site Design Principles](https://reader038.vdocuments.us/reader038/viewer/2022102500/5681306a550346895d964908/html5/thumbnails/57.jpg)
57
Summary (continued)
• Know your audience, and design pages that suit their needs, interests, and viewing preferences
• Leverage the power of hypertext linking
• Provide enough links for the users to create their own path through your information
• Design your text for online display