Partial preview of the text
Download Web Site Design - Web Programming - Lecture Slides and more Slides Computer Programming in PDF only on Docsity!
Web Site Design
Overview
Types of Web Site Organization
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
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)
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
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)
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
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
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
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
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
