Page Design

Dec. 11, 1997

October 14, 2014

Dec. 1, 1998

October 14, 2014

Feb. 18, 1997

October 14, 2014

Main Design Categories Free form Grid

Free Form Free-flowing placement of text and

other graphic elements within a design’s frame

Grid More traditional Objective, unemotional organization to a

graphic design

The “formula” 2-column, 3-column, 4-column Banner spans columns Sometimes elements span more than

one column Footer spans columns

Examples Two-column design:

www.cnnmoney.com Three-column design:

www.nytimes.com/sports

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

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

Repetition Items performing same function should

look very similar Repetition gives identity Suggest templating sysetm Also has load time implications—reuse

of graphics

Alignment Gives order to design Looks polished and finished Every element should align with

something else on the page

Proximity Items near each other are seen as a

unit

Balance Placement of elements within a design’s

frame A design is considered balanced if it

equalizes the weight between the x and y axis

Symmetrical Asymmetrical

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

suffer?

Page width Fixed

750-780 pixels 950-1000 pixels

Responsive Mobile Devices