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
