Web Development & Design Foundations

with HTML5
Tenth Edition

Chapter 5
Web Design

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-1
Learning Outcomes (1 of 2)
In this chapter, you will learn how to ...
• Describe the most common types of website
organization
• Describe principles of visual design
• Design for your target audience
• Create clear, easy-to-use navigation
• Improve the readability of the text on your web pages
• Use graphics appropriately on web pages

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-2
Learning Outcomes (2 of 2)
• Apply the concept of universal design to web pages
• Describe web page layout design techniques
• Describe the concept of responsive web design
• Apply best practices of web design

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-3
Overall Design Is Related to the Site
Purpose (1 of 2)

Figure 5.1 The compelling graphic draws you in

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-4
Overall Design Is Related to the Site
Purpose (2 of 2)
• Consider the target audience of these sites.

Figure 5.2 This text-intensive web page offers numerous choices

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-5
Website Organization
Hierarchical
Linear
Random
(sometimes called Web Organization)

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-6
Hierarchical Organization
A clearly defined home page
Navigation links to major site sections
Often used for commercial and corporate websites

Figure 5.3 Hierarchical site organization

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-7
Hierarchical & Shallow (1 of 2)

Figure 5.4 This site design uses a shallow hierarchy

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-8
Hierarchical & Shallow (2 of 2)
Be careful that the organization is not too shallow.
• Too many choices  a confusing and less usable web
site
• Information Chunking
• Be aware of the number of major navigation links
• Try to group navigation links visually into groups with
no more than about four links.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5-9
Hierarchical & Deep
• Be careful that the organization is not too deep.
– This results in many “clicks” needed to drill down to the
needed page.
– User Interface “Three Click Rule”
 A web page visitor should be able to get from any page on
your site to any other page on your site with a maximum of
three hyperlinks.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 10
Figure 5.5 This site design uses a deep
hierarchy

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 11
Linear Organization

Figure 5.6 Linear site organization

A series of pages that provide a tutorial, tour, or

presentation.
Sequential viewing

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 12
Random Organization
• Sometimes called “Web” Organization
• Usually there is no clear path through the site
• May be used with artistic or concept sites
• Not typically used for commercial sites.

Figure 5.7 Random site organization

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 13
Design Principles
Repetition
• Repeat visual elements throughout design
Contrast
• Add visual excitement and draw attention
Proximity
• Group related items
Alignment
• Align elements to create visual unity

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 14
Figure 5.8 The design principles of repetition, contrast,
proximity, and alignment are applied on this web page.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 15
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, outdated computer
• A person using a mobile phone
Legal Requirement: Section 508
Standards: WCAG 2.0, WCAG 2.1
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 16
Design for Accessibility (1 of 2)
• Web Content Accessibility Guidelines 2.0
WCAG 2.0
https://www.w3.org/TR/WCAG21/Overview
https://www.w3.org/WAI/WCAG21/quickref/?versi
ons=2.0

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 17
Design for Accessibility (2 of 2)
Based on Four Principles (POUR)
1. Perceivable
Content must be Perceivable
2. Operable
Interface components in the content must be Operable
3. Understandable
Content and controls must be Understandable
4. Robust.
Content should be Robust enough to work with current
and future user agents, including assistive technologies
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 18
Writing for the Web
Avoid long blocks of text
Use bullet points
Use headings and subheadings
Use short paragraphs

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 19
Design “Easy to Read” Text
Use common fonts:
• Arial, Helvetica, Verdana, Times New Roman
Use appropriate text size:
• medium, 1em, 100%
Use strong contrast between text & background
Use columns instead of wide areas of horizontal text

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 20
More Text Design Considerations
• Carefully choose text in hyperlinks
– Avoid “click here”
– Hyperlink key words or phrases, not entire sentences
• Chek yur spellin (Check your spelling)

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 21
Color Theory
Color Theory:
• the study of color
and its use in design
Color Wheel
• Primary Colors
• Secondary Colors
• Tertiary Colors
Figure 5.11 Color wheel

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 22
Color Schemes Based on The Color
Wheel (1)
Monochromatic – shades, tints, or tones
of the same color
http://meyerweb.com/eric/tools/color-blend
Analogous – a main color and two colors adjacent to it
on the color wheel
Complementary – two colors that are opposite each
other on the color wheel

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 23
Color Schemes Based on The Color
Wheel (1)

Figure 5.13 Monochromatic color scheme

Figure 5.15 Complementary color

scheme

Figure 5.14 Analogous color scheme

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 24
Color Schemes Based on The Color
Wheel (2)
Split Complementary – a main color, the color opposite
it on the color wheel (the complement) and two colors
adjacent to the complement
Triadic- three colors that are equidistant on the color
wheel
Tetradic – two complementary color pairs

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 25
Color Schemes Based on The Color
Wheel (2)

Figure 5.16 Split complementary color

scheme

Figure 5.18 Tetradic color scheme

Figure 5.17 Triadic color scheme

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 26
Implementing a Color Scheme
Choose one color to be dominant
Use other colors in the color scheme as accent colors
• headings,
• subheadings
• borders,
• list markers, etc.
Use neutrals such as white, off-white, gray, black, or
brown
Do not restrict yourself to web-safe colors
Feel free to use tints, shades, or tones of colors
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 27
Verify Sufficient Contrast
When you choose colors for text and background,
sufficient contrast is needed so that the text is easy to
read.
Use one of the following online tools to verify contrast:
• http://webaim.org/resources/contrastchecker
• http://snook.ca/technical/colour_contrast/colour.html
• http://juicystudio.com/services/luminositycontrastratio.
php

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 28
Color Scheme Resources
https://meyerweb.com/eric/tools/color-blend
http://paletton.com
http://www.colorsontheweb.com/colorwizard.asp
https://color.adobe.com/create
http://www.colorspire.com
http://hslpicker.com

Figure 5.11 Color wheel

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 29
Color & Target Audience (1 of 4)
Appealing to Kids & Preteens

Figure 5.20 A web page intended to appeal to children

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 30
Color & Target Audience (2 of 4)
Appealing to Young Adults

Figure 5.21 Many teens and young adults find dark sites
appealing
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 31
Color & Target Audience (3 of 4)
Appealing to Everyone

Figure 5.22 A compelling graphic along with white background for the
content area
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 32
Color & Target Audience (4 of 4)
Appealing to Older Adults

Figure 5.23 A site designed specifically for the 55-and-older age

Group
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 33
Checkpoint
1. List the four basic principles of design.
View the home page of your school and describe
how each principle is applied.
2. View https://www.walmart.com,
http://www.willyporter.com , and
https://www.sesamestreet.org/art-maker
3. Describe the target audience for each site.
How do their designs differ?
Do the sites meet the needs of their target
audiences?

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 34
Use of Graphics & Multimedia
• File size and dimension matter
• Provide for robust navigation
• Antialiased/aliased text considerations
• Provide alternate text
• Use only necessary multimedia

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 35
Graphic Design Best Practices(1)
• Be careful with large graphics!
• 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 © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 36
Graphic Design Best Practices (2)
• There is no requirement to limit your color choices to
web safe colors.
• Use anti-aliased text in images

Figure 5.24 Antialiased text

Figure 5.25 This graphic was

not antialiased: The letter “A”
has a jagged look

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 37
Graphic Design Best Practices (3)
• Use only necessary images Do you really
need to see a
photo of my
dog right now?

Sparky the Dog © Terry Felke-Morris

• Reuse images
• Goal: image file size should be as small as possible
with acceptable display quality

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 38
Web Page Design Browsers & Screen
Resolution
• Test with multiple browsers
– Google Chrome, Mozilla Firefox, Microsoft Edge, Apple
Safari
• Test at various screen resolutions
• Design to look good at various screen resolutions
– Centered page content
– Set to either a fixed or percentage width

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 39
Figure 5.38 This fixed-width centered content is
balanced on the page by left and right margins

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 40
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
– Site Map
– Site Search Feature
– “Skip to Content” Hyperlink

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 41
Figure 5.31 Dynamic navigation with HTML and
CSS

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 42
Wireframe
A sketch or blueprint of a web page
Shows the structure of the basic page elements,
including:
• Header
• Navigation
• Content
• Footer
• Image locations

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 43
Figure 5.35 This wireframe page layout a top
navigation area and a hero image

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 44
Web Page Design Page Layout (1)
• Place the most important information "above the fold"
• Use adequate "white" or blank space
• Use an interesting page layout

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 45
Figure 5.33 An adequate page layout

This is usable, but

a little boring. See
the next slide for
improvements in
page layout.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 46
Figure 5.34 An adequate page layout

Better

Columns make the page more

interesting and it’s easier to
read this way.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 47
Web Page Design Page Layout (3)

Best

Figure 5.36

Columns interspersed with graphics

and headings create the most
interesting, easy to read page.

Figure 5.35

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 48
Page Layout Design Techniques (1 of 2)
Fixed Layout
• AKA rigid or
“ice” design
• Fixed-width often
at left margin Figure 5.37

• More appealing if
fixed width content is
centered

Figure 5.38

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 49
Page Layout Design Techniques (2 of 2)
Figure 5.39 Figure 5.40

Fluid Layout Fluid Layout Adaptation:

• AKA “liquid” design • Full width top bar
• Expands to fill the • Other age content
browser at all typically centered with
resolutions. side margins
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 50
Flat Web Design
A minimalistic design style with a focus on simplicity,
blocks of color, empty space between design elements,
hero images, long shadows, buttons with transparent
backgrounds, and use of typography.

Figure 5.27

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 51
Single Page Website
“One Page Website”
Contains one very long page (a single HTML file) with a
clearly defined navigation area, usually at the top of the
page. This navigation takes you to specific areas on the
page.

(More in Chapter 6)

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 52
Figure 6.53 Using the background-attachment
property

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 53
Mobile Design Quick Checklist
Small screen size
Bandwidth issues
Single-column layout
Maximize contrast
Optimize images for mobile display
Descriptive alternate text for images
Avoid display of non-essential content

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 54
Figure 5.42 Mobile display.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 55
Progressive Enhancement (1 of 2)
• Design your website so it displays well in mobile
devices
• Design your website so that it is usable in older
browsers
• Add enhancements with CSS and/or HTML5 to take
advantage of the capabilities of modern browsers.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 56
Progressive Enhancement (2 of 2)

Figure 5.41 Figure 5.42

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 57
Responsive Web Design
Ethan Marcotte, noted web developer
https://www.alistapart.com/articles/responsive-web-
design
Progressively enhancing a web page
for different viewing contexts
(such as smartphones and tablets)
through the use of coding techniques, including flexible
layouts and media queries.
Examples: https://www.mediaqueri.es

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 58
Web Design Best Practices Checklist
https://terrymorris.net/bestpractices
• Page Layout
• Browser Compatibility
• Navigation
• Color and Graphics
• Multimedia
• Content Presentation
• Functionality
• Accessibility

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 59
Checkpoint (1 of 2)
1. View the home page of your school. Use the Best
Practices Checklist (Table 5.1) to evaluate the page.
Describe the results.
2. View your favorite web site (or a URL provided by your
instructor).
• Maximize and resize the browser window.
• Decide whether the site uses fixed or fluid design.
• Adjust the screen resolution on your monitor
(Start > Control Panel > Display > Settings) to a different
resolution than you normally use.
• Does the site look similar or very different?
• List two recommendations for improving the design of the
site.
Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 60
Checkpoint (2 of 2)
3. List three best practices of using graphics on web
pages. View the home page of your school.
Describe the use of graphic design best practices on
this page.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 61
Summary
• This chapter introduced you to best practices of web
design.
• The choices you make in the use of color, graphics,
and text should be based on your particular target
audience.

Copyright © 2021, 2019, 2017 Pearson Education, Inc. All Rights Reserved 5 - 62