1 / 22

Document Design is CRAP

Learn about the key principles of document design - Contrast, Repetition, Alignment, and Proximity. These principles help organize information, create visual interest, and improve readability. Discover how to effectively use these design elements to make your page or screen more engaging and visually appealing.

jwhaley
Download Presentation

Document Design is CRAP

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Contrast • Repetition • Alignment • Proximity Document Design is CRAP

  2. Contrast in Principle • contrast aids in the organization of information and creates hierarchy • contrast can add clarity • contrast can make the page/screen look more interesting

  3. Contrast in Practice • to make something stand out, avoid doing wimpy contrast—make contrast strong • do not, however, forfeit legibility – keep it readable • overusing contrast can be over-stimulating, distracting, and annoying, ultimately undermining it as it stands out less and less.

  4. square, linear shape wild, twisted shape

  5. drab, flat gray bright, vibrant orange

  6. bold, bright, simple blocks richly detailed, lively photos conservative, serious, black and white

  7. Repetition in Principle • repetition unifies elements throughout a document • repetition adds visual interest • repetition develops organization and creates consistency

  8. Repetition in Practice • repeat some aspect of a design (e.g., horizontal rule, a certain type of bullet, a type of font) throughout an entire page or site • again, avoid repeating an element so much that it becomes annoying or overwhelming

  9. * *

  10. level 1 heading level 2 heading contrast and repetition:* orange sans-serif level 1 contrasts with blue serif * repetition of contrasting headings organizes topics and sub-headings

  11. Alignment in Principle • alignment unifies and organizes the page • alignment helps create visual connections

  12. Alignment in Practice • nothing should be placed on a page arbitrarily • avoid using more than two text alignments on a page • balance image and text alignment carefully • center alignment and full alignment are more difficult to read than right alignment

  13. images are center aligned, vertically arranged text is left aligned or left justified; headings flush left image arranged centered and left of text

  14. all bulleted items are aligned with hanging indent

  15. Proximity in Principle • proximity helps to organize elements, imply relationships • proximity helps with use of blank space • proximity reduces clutter

  16. Proximity in Practice • create visual relationships with elements that belong together • avoid too many separate elements on one page • don’t stick things in the corners and in the middle of the page

  17. organizations’ logos appear in close proximity

  18. alignment and proximity • multiple, visually competing alignments create interesting look and feel • Proximity between images, titles, and descriptions helps to organize the content of these various alignments so as to not let them get too confusing

  19. individual’s name and contact info in close proximity institute’s name and contact info in close proximity

  20. chunks of related information in close proximity, organized by repeated organizational alignment and simple contrasting primary colors.

  21. It’s all just CRAP

More Related