MULUNGUSHI UNIVERSITY

Pursing frontiers of Knowledge

SCHOOL OF SCIENCE, ENGINEERING AND

TECHNOLOGY
ICT461 Web Systems and Technology

Lecture 3. Web design basics

 In this lecture you will learn . . .

▪ 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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Design for Your Target Audience

Consider the
target audience
of these sites.

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Web Page Design - Screen Resolution

▪ Test at various screen resolutions

▪ Test with multiple devices

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Website Organization

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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Hierarchical Organization

▪ A clearly defined home

page

▪ Navigation links to major

site sections

▪ Often used for commercial

and corporate websites

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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.

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Linear Organization

▪ A series of pages that provide a tutorial,

tour, or presentation.
▪ Sequential viewing

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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
Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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 © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Design for Accessibility
Web Content Accessibility Guidelines 2.1 (WCAG 2.1)
https://www.w3.org/TR/WCAG21/Overview
https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0

Based on Four Principles (POUR)

1. Perceivable
Content must be easy to see or hear
2. Operable
Interface components in the content must be operable by both mouse and
keyboard
3. Understandable
Content and controls must be easy to read and well-organized
4. Robust.
Content use correct syntax and function on popular operating systems,
browsers, and assistive technologies.
Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Writing for the Web

▪ Avoid long blocks of text

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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
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)

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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.

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Hexadecimal
Color Values

▪ # indicates a
hexadecimal value

▪ Hex value pairs range

from 00 to FF

▪ Three hex value pairs

describe an RGB color

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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 : https://webdevbasics.net/color

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Color Theory
▪ Color Theory:
• the study of color and its use in design

▪ Color Wheel
• Primary Colors
• Secondary Colors
• Tertiary Colors

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Color Schemes Based on The Color Wheel (1)

▪Monochromatic
shades, tints, or tones
of the same color
https://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 © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
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 © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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 © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
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:
• https://webaim.org/resources/contrastchecker
• https://snook.ca/technical/colour_contrast/colour.html

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Making Color Choices

▪ How to choose a color scheme?

• Monochromatic
• http://meyerweb.com/eric/tools/color-blend
• http://www.0to255.com
• Choose from a photograph or other image
• http://www.colr.org
• Begin with a favorite color
Use one of the sites below to choose other colors
• http://paletton.com
• http://www.colorsontheweb.com/Color-Tools/Color-Wizard

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Use
of
Appealing to Everyone
Appealing to Kids & Preteens
Color

Appealing to Older Adults

Appealing to Young Adults
Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
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 © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Flat Web Design Trend

▪ Minimalistic design style

▪ Features blocks of color
▪ Often requires vertical
scrolling

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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.

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, 30Inc. All Rights Reserved
 Navigation Design

▪ Make your site easy to navigate

• Provide clearly labeled 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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Wireframe

▪ A sketch or blueprint of a web page

▪ Shows the structure of the basic page elements,
including:
• Logo
• Navigation
• Content
• Footer

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Web Page Design Page Layout (1)
▪ Use adequate empty or blank space
▪ Use an interesting page layout

This is usable, but

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

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Web Page Design Page Layout (2)

Columns of
different
widths
interspersed
with graphics
and
headings
create
interesting,
easy to read
web pages.

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Page Layout Design Techniques

Fixed Layout
◦ AKA rigid or
“ice” design
◦ Fixed-width often
at left margin

◦ More appealing if
fixed with content is centered

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 Page Layout Design Techniques

Fluid Layout
◦ AKA “liquid” design
◦ Expands to fill the browser
at all resolutions.

◦ Adaptation:
◦ Page content typically centered
and
often configured with a
percentage width such as 80%
36

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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 © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Progressive Enhancement

▪ 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 © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, 38Inc. All Rights Reserved
Responsive Web Design
▪ Ethan Marcotte, noted web developer
http://alistapart.com/article/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:
http://www.mediaqurie.es

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Web Design - Best Practices Checklist

http://terrymorris.net/bestpractices
•Page Layout
•Browser Compatibility
•Navigation
•Color and Graphics
•Multimedia
•Content Presentation
•Functionality
•Accessibility

Copyright © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
 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 © 2022 Terry Ann Morris, Ed. D. Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved
Copyright

This work is protected by United States copyright laws and is

provided solely for the use of instructors in teaching their
courses and assessing student learning. Dissemination or sale of
any part of this work (including on the World Wide Web) will
destroy the integrity of the work and is not permitted. The work
and materials from it should never be made available to students
except by instructors using the accompanying text in their
classes. All recipients of this work are expected to abide by these
restrictions and to honor the intended pedagogical purposes and
the needs of other instructors who rely on these materials.

Copyright © 2021, 2018, 2015 Pearson Education, Inc. All Rights Reserved