IS 360Web Site Design

Slide 2

Overview Types of Web Site Organization

Slide 3

Types of Web Site Organization Hierarchical

Pages nested under pages nested under pages

Shallow or deep hierarchies Linear

A sequence of steps (Similar to a Microsoft Wizard)

Random No clear path through the application A directed graph

Slide 4

Navigation (Best Practices) Do use breadcrumbs

Where are we in the hierarchy Do use navigation bars (menus)

Horizontal / vertical / or both Do create a link to get home

Slide 5

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

Slide 6

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

Slide 7

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

Slide 8

Page Design (Best Practices) Color

It depends on the target audience Usually, use light background and dark

text colors Browser independent

Try to support the widest range of browsers

More later Design for the lowest denominator

(screen resolution)

Slide 9

Page Design (Worst Practices) Mystery Meat navigation

http://www.flatpakhouse.com/ A list of big mistakes

http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html#6

Oh my ### http://www.dokimos.org/ajff/

Too much http://www.arngren.net/

Slide 10

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

Slide 11

Color

Slide 12

Organization of Colors Three Primary Colors

Red, Green, Blue In print, we use CMYK Relationships

Complimentary colors live at opposite sides of the color wheel

Analogous colors are located next to each other

http://www.accesskeys.org/tools/color-contrast.html

Slide 13

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)

Slide 14

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

Slide 15

Black It’s not part of the color wheel Black is the absence of color

Evokes feelings of power, sophistication and depth

Slide 16

Slide 17

Layouts (1) Absolute

Everything is displayed using absolute measurements (cm, in)

Use for printer-friendly style sheets Relative

Layout adjusts in size based on the browser’s viewport size

Fixed Similar to absolute

Slide 18

Layouts (2) Elastic

Content is of a fixed width Gutters appear to the left and right to fill

available space Liquid

Use percentage measurements for everything

The total opposite of fixed layout Equated

Requires CSS3 (calc function) A hybrid between fixed and relative layout

Slide 19

Layouts (3) Fluid Min-Max

We set up hard minimum and maximum widths

Conditional Serve different styles based on the

viewport width and height Popular with mobile devices

Hybrid

Slide 20

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

Slide 21

Graphics Design Do use the 216 Web colors

Low resolution configurations will not render other colors correctly

In practice, this is not much of a problem anymore

Keep images as small as possible ADA

Use alternate text for images Limit animations

Slide 22

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/page-speed

Slide 23

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.

Slide 24

A 12 Column Grid

Slide 25

A 16 Column Grid