Transcript CHAPTER 1
IS 360
Web Site Design
Overview
Types of Web Site Organization
Types of Web Site
Organization
Hierarchical
Linear
Pages nested under pages nested under pages
Shallow or deep hierarchies
A sequence of steps (Similar to a Microsoft
Wizard)
Random
No clear path through the application
A directed graph
Navigation (Best Practices)
Do use breadcrumbs
Do use navigation bars (menus)
Where are we in the hierarchy
Horizontal / vertical / or both
Do create a link to get home
Page Layout (Best Practices)
Do keep pages short
If pages get long, do create named anchors
to implement a table of contents
Do create site maps
Page Design (Best Practices)
Do use a consistent design throughout the
site
CSS helps with this
Make sure visual items have adequate
contrast
Group related items together
Page Design (Best Practices)
Minimize load time by
Paying attention to graphics resolution
Keeping pages as small as possible
Content “above the fold”
Put important material at the upper left side of
the page
Avoid horizontal scrolling
Do use adequate whitespace
Page Design (Best Practices)
Color
Browser independent
It depends on the target audience
Usually, use light background and dark text
colors
Try to support the widest range of browsers
More later
Design for the lowest denominator (screen
resolution)
Page Design (Worst Practices)
Mystery Meat navigation
A list of big mistakes
http://www.webpagesthatsuck.com/biggestmistakes-in-web-design-1995-2015.html#6
Oh my ###
http://www.flatpakhouse.com/
http://www.dokimos.org/ajff/
Too much
http://www.arngren.net/
Design Styles (Introduction)
There are several and I’ll go way beyond your
book (Ice, Jello, Liquid)
These are well-known design styles
Each has their plusses and minuses
Color
Organization of Colors
Three Primary Colors
In print, we use CMYK
Relationships
Red, Green, Blue
Complimentary colors live at opposite sides of
the color wheel
Analogous colors are located next to each other
http://www.accesskeys.org/tools/colorcontrast.html
Color Groups (1)
Warm colors evoke warmth (red, yellow,
orange)
Red symbolizes fire, power, and passion
Orange symbolizes happiness, joy and sunshine
Not as aggressive as red
Bright yellow is happy but dingy yellow brings
about caution, laziness and jealousy
Neutral colors don’t evoke much emotion
(grey, brown)
Color Groups (2)
Cool colors are (blue, green and purple)
Green symbolizes growth, harmony, and money
OR
Beginner, greed jealousy
Blue is peaceful and calming (stability, trust,
dependability)
Purple brings about feelings of wealth and
luxury
Black
It’s not part of the color wheel
Black is the absence of color
Evokes feelings of power, sophistication and
depth
Layouts (1)
Absolute
Relative
Everything is displayed using absolute
measurements (cm, in)
Use for printer-friendly style sheets
Layout adjusts in size based on the browser’s
viewport size
Fixed
Similar to absolute
Layouts (2)
Elastic
Liquid
Content is of a fixed width
Gutters appear to the left and right to fill available
space
Use percentage measurements for everything
The total opposite of fixed layout
Equated
Requires CSS3 (calc function)
A hybrid between fixed and relative layout
Layouts (3)
Fluid Min-Max
Conditional
We set up hard minimum and maximum widths
Serve different styles based on the viewport
width and height
Popular with mobile devices
Hybrid
Text Design
Don’t use obscure fonts
Do use sans serif fonts
Be aware that font sizes differ between
browsers
Keep links short
Don’t link entire phrases or sentences
Graphics Design
Do use the 216 Web colors
Keep images as small as possible
ADA
Low resolution configurations will not render
other colors correctly
In practice, this is not much of a problem
anymore
Use alternate text for images
Limit animations
Performance
A shopper expects a page to load in 2
seconds or less (Forrester Consulting)
Amazon found that it increased revenue by
1% for every 100 milliseconds of
improvement. [Source: Amazon]
Try http://code.google.com/speed/pagespeed
Methodologies
The 960 Grid System
Uses 12 or 16 column
We don’t write the CSS. Use the grids created
by Nathan Smith
The 1140 Grid System for wide screen
monitors
We often use these to fit fixed-size ads.
A 12 Column Grid
A 16 Column Grid