1

Web Development & Design

Foundations with HTML5

CHAPTER 5
WEB DESIGN

Copyright © Terry Felke-Morris http://terrymorris.net 2

Copyright © Terry Felke-Morris
 Learning
Outcomes
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
◦ Apply the concept of universal design to web pages
◦ Describe web page layout design techniques
◦ Apply best practices of web design

Copyright © Terry Felke-Morris http://terrymorris.net 3

 Overall Design Is Related
to the Site Purpose

Consider the
target audience
of these sites.

Copyright © Terry Felke-Morris http://terrymorris.net 4

 Website Organization
Hierarchical
Linear
Random
(sometimes called Web Organization)

Copyright © Terry Felke-Morris http://terrymorris.net 5

 Hierarchical
Organization
A clearly defined home page
Navigation links to major site sections
Often used for commercial and corporate websites

Copyright © Terry Felke-Morris http://terrymorris.net 6

 Hierarchical & Shallow

Be careful that the organization is not too shallow.

◦ Too many choices  a confusing and less usable web site
◦ Information Chunking
◦ Research by Nelson Cowan: adults typically can keep about four items or chunks of items in short-
term memory (http://www.ncbi.nlm.nih.gov/pmc/articles/PMC2864034/)
◦ Be aware of the number of major navigation links
◦ Try group navigation links visually into groups with no more than about four links.

Copyright © Terry Felke-Morris http://terrymorris.net 7

 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 © Terry Felke-Morris http://terrymorris.net 8

 Linear Organization

A series of pages that provide a tutorial,

tour, or presentation.
Sequential viewing

Copyright © Terry Felke-Morris http://terrymorris.net 9

 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 © Terry Felke-Morris http://terrymorris.net 10

 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 © Terry Felke-Morris http://terrymorris.net 11

 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 http://terrymorris.net 12

 Design for Accessibility
Web Content Accessibility Guidelines 2.0
WCAG 2.0
http://www.w3.org/TR/WCAG20/Overview
http://www.w3.org/WAI/WCAG20/quickref

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 © Terry Felke-Morris http://terrymorris.net 13

 Writing for the Web
Avoid long blocks of text
Use bullet points
Use headings and subheadings
Use short paragraphs

Copyright © Terry Felke-Morris http://terrymorris.net 14

 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 © Terry Felke-Morris http://terrymorris.net 15

 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 © Terry Felke-Morris http://terrymorris.net 16

 Color Theory
Color Theory:
◦ the study of color and its use in design
Color Wheel
◦ Primary Colors
◦ Secondary Colors
◦ Tertiary Colors

Copyright © Terry Felke-Morris http://terrymorris.net

 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 © Terry Felke-Morris http://terrymorris.net 18

 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 © Terry Felke-Morris http://terrymorris.net

 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 © Terry Felke-Morris http://terrymorris.net 20

 Color Scheme Resources
http://meyerweb.com/eric/tools/color-blend
http://colorschemedesigner.com
http://www.colorsontheweb.com/colorwizard.asp
http://www.leestreet.com/QuickColor.swf
https://color.adobe.com
http://www.colorspire.com
http://colrd.com
http://hslpicker.com

Copyright © Terry Felke-Morris http://terrymorris.net

 Appealing to Kids & Preteens Appealing to Everyone

Color & Target Audience

Appealing to Young Adults Appealing to Older Adults

Copyright © Terry Felke-Morris http://terrymorris.net 22

 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 © Terry Felke-Morris http://terrymorris.net 23

 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 http://terrymorris.net 24

 Graphic Design Best Practices(2)
Do you really
need to see a
 Use only necessary images photo of my dog
right now?

 Reuse images

 Goal: image file size should be as small as possible

with acceptable display quality

Copyright © Terry Felke-Morris http://terrymorris.net 25

 Web Page Design
Browsers & Screen Resolution
 Test with multiple browsers (Pick a browser and stick to it for this class)
 Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari

 Test at various screen resolutions (we will use 1024x768 or 1280x720 for your
projects)

 Design to look good at various screen resolutions

◦ Centered page content
◦ Set to either a fixed or percentage width

Copyright © Terry Felke-Morris http://terrymorris.net 26

 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
◦ “Skip to Content” Hyperlink

Copyright © Terry Felke-Morris http://terrymorris.net 27

 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 © Terry Felke-Morris http://terrymorris.net

 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

This is usable, but

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

Copyright © Terry Felke-Morris http://terrymorris.net 29

 Web Page Design Page Layout (2)

Better

Columns make the

page more interesting
and it’s easier to read
this way.

Copyright © Terry Felke-Morris http://terrymorris.net 30

 Web Page Design Page Layout (3)
Columns of different widths interspersed
Best with graphics and headings create the most
interesting, easy to read page.

Copyright © Terry Felke-Morris http://terrymorris.net 31

 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 © Terry Felke-Morris http://terrymorris.net 32

 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%

Copyright © Terry Felke-Morris http://terrymorris.net 33

 Design for the Mobile Web
Predicted that by 2015, more users will access websites
using mobile devices than with desktop computers

Three Approaches:
◦ Separate .mobi mobile site
◦ Host the mobile site within your current domain
◦ Configure your current website for mobile display
using responsive web design techniques

Copyright © Terry Felke-Morris http://terrymorris.net 34

 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 © Terry Felke-Morris http://terrymorris.net 35

 Responsive Web Design
Ethan Marcotte, noted web developer
http://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: http://www.mediaqueri.es

Copyright © Terry Felke-Morris http://terrymorris.net 36

 Web Design Best Practices Checklist
http://terrymorris.net/bestpractices

•Page Layout
•Browser Compatibility
•Navigation
•Color and Graphics
•Multimedia
•Content Presentation
•Functionality
•Accessibility

Copyright © Terry Felke-Morris http://terrymorris.net 37

 Web Page Design
Browser Compatibility
 Web pages do NOT look the same in all the major
browsers

 Test with current and recent versions of:

◦ Internet Explorer
◦ Firefox
◦ Chrome, Safari, Opera
◦
 Design to look OK in commonly used browsers (like Internet
Explorer) and implement new technologies (like CSS3) in modern
browsers (like Safari & Firefox) – Progressive Enhancement

Copyright © Terry Felke-Morris http://terrymorris.net 38