Transcript Chapter 5 Notes

CHAPTER 5
Learning
Outcomes
 In this chapter...
 common types of website organization
 principles of visual design
 your target audience
 clear, easy-to-use navigation
 Improve the readability of the text
 use graphics appropriately
 apply universal design to web pages
 layout design techniques
 best practices of web design
Copyright © Terry Felke-Morris
1
Overall Design Is Related
to the Site Purpose
Consider the
target audience
of these two sites.
Copyright © Terry Felke-Morris
2
Hierarchical Organization is the most popular *
A clearly defined home page
Navigation links to major site sections
Often used for commercial and corporate websites
* Linear & Random are other methods
Copyright © Terry Felke-Morris
3
CRAP Design Principles
Contrast
 Add visual excitement
and draw attention
Repetition
 Repeat visual elements
throughout design
Alignment
 Align elements to create
visual unity
Proximity
 Group related items
Copyright © Terry Felke-Morris
4
Contrast
Website by
Tian Fang
Copyright © Terry Felke-Morris
5
Repetition
Copyright © Terry Felke-Morris
6
Alignment
Website by
Ashley Dix
Copyright © Terry Felke-Morris
7
Proximity
Website by
Liana Valentino
Copyright © Terry Felke-Morris
8
Are you convinced about accessibility? Why?
Copyright © Terry Felke-Morris
9
Design to Provide for Accessibility
“The power of the Web is in its universality. Access by everyone
regardless of disability is an essential aspect.” – Tim Berners-Lee
 Who benefits from increased accessibility?
 A person with a physical disability
 A person using a slow Internet connection
 A person using an old, out-dated computer
 A person using a mobile phone
Legal Requirement: Section 508
Standards: WCAG 2.0
Copyright © Terry Felke-Morris
10
Design for Accessibility
 Web Content Accessibility Guidelines 2.0
WCAG 2.0
Based on Four Principles (POUR)
1.
2.
3.
4.
Perceivable
Content must be Perceivable
Operable
Interface components in the content must be Operable
Understandable
Content and controls must be Understandable
Robust.
Content should be Robust enough to work with current and
future user agents, including assistive technologies
◦ http://www.w3.org/TR/WCAG20/Overview
◦ http://www.w3.org/WAI/WCAG20/quickref
Copyright © Terry Felke-Morris
11
Writing for the Web
Read Section 5.5
Making Color Choices
 choose a color scheme e.g. (Adobe Kuler)
 Choose from a photograph or image
 Begin with a favorite color or company color
Copyright © Terry Felke-Morris
12
Use of Graphics & Multimedia
Re-read section 5-7 because it is a lot of information
to consume.
Review them occasionally as a checklist.
Copyright © Terry Felke-Morris
13
Graphic Design Best Practices(1)
 Be careful with large graphics!
◦ Remember 60K recommendation
 Use the alt attribute to supply descriptive alternate
text
 Be sure your message gets across even if images are
not displayed.
◦ If using images for navigation provide plain text links at the bottom of the
page.
 Use animation only if it makes the page more effective
and provide a text description.
Copyright © Terry Felke-Morris
14
Graphic Design Best Practices(2)
 Choose colors on the web palette if consistency across older
Windows/Mac platforms is needed
 Use anti-aliased text in images
 Use only necessary images
 Reuse images
Do you really
need to see a
photo of my dog
right now?
 Goal: image file size should be as small as possible
Copyright © Terry Felke-Morris
15
Navigation Design
Make your site easy to navigate
 Provide clear navigation in the same location on each page
 Most common – across top or down left side
Consider:
 Navigation Bars
 Breadcrumb Navigation
 Using Graphics for
Navigation
 Dynamic Navigation
(i.e. dropdown menu)
 Site Map
 Site Search Feature
Copyright © Terry Felke-Morris
16
MORE IMPORTANT TOPICS:
Will discuss at beginning
of chap 6
* wireframes
* page layout techniques
* browser compatibility
Design for mobile devices: Chapters 7 &11
Copyright © Terry Felke-Morris
17
Other can’t-miss strategies
• Above the fold: the most attention-getting
items placed in first 600px vertically
• White space: Placing blank space around
blocks of information. Increases readability.
Allows items to stand out.
Copyright © Terry Felke-Morris
18
Checklists
Be sure to confer with the checklists at the end of the chapter
while creating websites and afterwards…
Recommended online source
Design for non-designers
http://www.designforfounders.com/tips-and-hacks
Copyright © Terry Felke-Morris
19