1. Page Design

2. A visit to the Wayback Machine
ESPN (1999 vs now)
web.archive.org/web/ /
SI (2003vs now)
web.archive.org/web/ /
Hi*Beams (2001 vs now)
web.archive.org/web/ /
Colorado State University (1997 vs now)
web.archive.org/web/ /

3. Main Design Categories
Free form
Grid

4. Free Form
Free-flowing placement of text and other graphic elements within a design’s frame

6. Grid
More traditional
Objective, unemotional organization to a graphic design

8. The “formula” 2-column, 3-column, 4-column Banner spans columns
Sometimes elements span more than one column
Footer spans columns
Collapses to single column for responsive layout
Also see common layout with one column, large splash element

11. C.R.A.P. Principles of Design
Contrast
Repetition
Alignment
Proximity

12. Contrast If two elements are different, make them very different
Vary size, typeface, emphasis, color, texture, etc.
If everything looks the same, nothing is emphasized

13. Repetition Items performing same function should look very similar
Repetition gives identity
Suggest templating system
Also has load time implications—reuse of graphics

14. Alignment Gives order to design Looks polished and finished
Every element should align with something else on the page

15. Proximity
Items near each other are seen as a unit

16. Balance
Vary graphic weight by adjusting color, contrast, size, texture, lightness, etc.
A design is considered balanced if it roughly equalizes the weight one either side of a vertical bisecting line
Symmetrical
Asymmetrical

17. Simplicity Minimal use of graphics Doesn’t mean no graphics
If an element is removed, does meaning suffer?

18. Fixed Responsive 900-1200 pixels, typically 960 has many factors
Control with max-width

19. Methods
Sketch
Graphic comp
Work in HTML/CSS