Basics of Web Design

Chapter 3
Web Design Basics
Basics of Web Design:
HTML5 & CSS, 6th Edition
Copyright © 2022
Terry Ann Morris, Ed.D.
[Link]

1
Learning Outcomes
 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
 Choose a color scheme for our website
 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

2
Copyright © 2022 Terry Ann Morris, Ed. D.
Design for Your Target Audience

Consider the
target audience
of these sites.

3
Copyright © 2022 Terry Ann Morris, Ed. D.
Web Page Design
Browser Compatibility
 Web pages do NOT look the same
in all the major browsers

 Test with current and recent versions of:

• Microsoft Edge, Firefox, Chrome, Opera, Safari
• Mobile devices
 Progressive Enhancement:
• Website functions well in browsers
commonly used by your target audience
• Add enhancements with CSS and/or HTML5
for display in modern browsers
4
Copyright © 2022 Terry Ann Morris, Ed. D.
 Web Page Design
Screen Resolution
 Test at various screen resolutions
 Test with multiple devices

5
Copyright © 2022 Terry Ann Morris, Ed. D.
Website Organization

 Hierarchical
 Linear
 Random
(sometimes called Web Organization)

6
Copyright © 2022 Terry Ann Morris, Ed. D.
 Hierarchical Organization

 A clearly defined home

page
 Navigation links to major
site sections
 Often used for commercial
and corporate websites

7
Copyright © 2022 Terry Ann Morris, Ed. D.
 Hierarchical: Too Shallow

 Be careful that the organization is not too shallow.

 Too many immediate choices  a confusing and less usable website.
 Group, or “chunk”, related areas

8
Copyright © 2022 Terry Ann Morris, Ed. D.
 Hierarchical:
Too Deep
 Be careful that the
organization is not too
deep.

◦ This results in many “clicks”

needed to drill down to the
needed page.

◦ Too many clicks can result in

a frustrated website visitor.

9
Copyright © 2022 Terry Ann Morris, Ed. D.
Linear Organization

 A series of pages that provide a tutorial,

tour, or presentation.
 Sequential viewing

10
Copyright © 2022 Terry Ann Morris, Ed. D.
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

11
Copyright © 2022 Terry Ann Morris, Ed. D.
Visual 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

12
Copyright © 2022 Terry Ann Morris, Ed. D.
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
13
Copyright © 2022 Terry Ann Morris, Ed. D.
Design for Accessibility
Web Content Accessibility Guidelines 2.1 (WCAG 2.1)
[Link]
[Link]

Based on Four Principles (POUR)

[Link]
Content must be easy to see or hear

[Link]
Interface components in the content must be operable by both
mouse and keyboard

[Link]
Content and controls must be easy to read and well-organized

[Link].
Content use correct syntax and function on popular operating
systems, browsers, and assistive technologies.
14
Copyright © 2022 Terry Ann Morris, Ed. D.
Writing for the Web

 Avoid long blocks of text

 Use bullet points
 Use headings and subheadings
 Use short paragraphs

15
Copyright © 2022 Terry Ann Morris, Ed. D.
 Design “Easy to Read” Text
 Use common fonts:
• Arial, Helvetica, Verdana, Times New Roman

 Use appropriate text size:

• medium, 1em, 100%
 Use appropriate line length
• Between 50-60 characters is recommended
 Use strong contrast between text & background

 Use columns instead of wide areas

of horizontal text
16
Copyright © 2022 Terry Ann Morris, Ed. D.
More Text Design
Considerations

 Carefully choose text in hyperlinks

• Avoid “click here”

• Hyperlink key words or phrases
• Do not hyperlink not entire sentences

 Chek yur spellin (Check your spelling)

17
Copyright © 2022 Terry Ann Morris, Ed. D.
 Using Color on Web Pages
 Computer monitors display color as intensities of
red, green, and blue light
 RGB Color
 The values of red, green, and blue
vary from 0 to 255.
 Hexadecimal numbers (base 16) represent these
color values.

18
Copyright © 2022 Terry Ann Morris, Ed. D.
 Hexadecimal
Color Values
 # indicates a
hexadecimal value

 Hex value pairs range

from 00 to FF

 Three hex value pairs

describe an RGB color

19
Copyright © 2022 Terry Ann Morris, Ed. D.
Web Color Palette

 A collection of 216 colors

 Display the most similar on the Mac and PC platforms
 Hex values:
00, 33, 66, 99, CC, FF
 Color Chart : [Link]

20
Copyright © 2022 Terry Ann Morris, Ed. D.
 Color Theory
 Color Theory:
• the study of color and its use in design
 Color Wheel
• Primary Colors
• Secondary Colors
• Tertiary Colors

21
Copyright © 2022 Terry Ann Morris, Ed. D.
 Color Schemes Based on The
Color Wheel (1)
Monochromatic
shades, tints, or tones
of the same color
[Link]
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

22
Copyright © 2022 Terry Ann Morris, Ed. D.
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

23
Copyright © 2022 Terry Ann Morris, Ed. D.
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

24
Copyright © 2022 Terry Ann Morris, Ed. D.
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:
• [Link]
• [Link]

25
Copyright © 2022 Terry Ann Morris, Ed. D.