page design. dec. 11, 1997 october 14, 2014 dec. 1, 1998
TRANSCRIPT
![Page 1: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/1.jpg)
Page Design
![Page 2: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/2.jpg)
Dec. 11, 1997
![Page 3: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/3.jpg)
October 14, 2014
![Page 4: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/4.jpg)
Dec. 1, 1998
![Page 5: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/5.jpg)
October 14, 2014
![Page 6: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/6.jpg)
Feb. 18, 1997
![Page 7: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/7.jpg)
October 14, 2014
![Page 8: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/8.jpg)
Main Design Categories Free form Grid
![Page 9: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/9.jpg)
Free Form Free-flowing placement of text and
other graphic elements within a design’s frame
![Page 10: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/10.jpg)
![Page 11: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/11.jpg)
Grid More traditional Objective, unemotional organization to a
graphic design
![Page 12: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/12.jpg)
![Page 13: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/13.jpg)
The “formula” 2-column, 3-column, 4-column Banner spans columns Sometimes elements span more than
one column Footer spans columns
![Page 14: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/14.jpg)
Examples Two-column design:
www.cnnmoney.com Three-column design:
www.nytimes.com/sports
![Page 15: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/15.jpg)
![Page 16: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/16.jpg)
![Page 17: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/17.jpg)
C.R.A.P. Principles of Design Contrast Repetition Alignment Proximity
![Page 18: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/18.jpg)
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
![Page 19: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/19.jpg)
Repetition Items performing same function should
look very similar Repetition gives identity Suggest templating sysetm Also has load time implications—reuse
of graphics
![Page 20: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/20.jpg)
Alignment Gives order to design Looks polished and finished Every element should align with
something else on the page
![Page 21: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/21.jpg)
Proximity Items near each other are seen as a
unit
![Page 22: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/22.jpg)
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
![Page 23: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/23.jpg)
Simplicity Minimal use of graphics Doesn’t mean no graphics If an element is removed, does meaning
suffer?
![Page 24: Page Design. Dec. 11, 1997 October 14, 2014 Dec. 1, 1998](https://reader036.vdocuments.us/reader036/viewer/2022070408/56649e6b5503460f94b68c50/html5/thumbnails/24.jpg)
Page width Fixed
750-780 pixels 950-1000 pixels
Responsive Mobile Devices