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