IS 360 Web Site Design
Dec 22, 2015
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 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 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.