1 / 13

C.R.A.P.

C.R.A.P. Color, Repetition, Alignment, Proximity. Color. Avoid busy backgrounds Use high contrast colors for text Use the same color for your titles, a different color for your subtitles The font colors, types, and size of this page are different for titles & subtitles

weylin
Download Presentation

C.R.A.P.

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. C.R.A.P. Color, Repetition, Alignment, Proximity

  2. Color • Avoid busy backgrounds • Use high contrast colors for text • Use the same color for your titles, a different color for your subtitles • The font colors, types, and size of this page are different for titles & subtitles • Background colors can also help organize a page

  3. GOOD EXAMPLE Purple background, not too busy Important things in different-colored text Text is easy to read. Green and purple clash together well

  4. BAD EXAMPLE Busy background that is not related to subject Font colors are random & no complimentary colors are used

  5. Repetition • Repeat fonts (type, size, color) and graphics to tie related items together • Do the same to divide the page into separate pieces; as in the two columns of this page • Use titles and subtitles of same font, decoration, color, weight to identify parts of the page

  6. GOOD EXAMPLE Font type, size, and color are the same for each related header Page divided into columns Every link is the same font color; easy to recognize

  7. BAD EXAMPLE Different fonts and sizes Random colors; no relation to other colors used.

  8. Alignment • Use vertical align, text-align (left, right, center, justify), and indent (blockquote) to align graphics and text • Use DIV tags to group items • Use graphics such as lines and rectangles to organize page elements

  9. GOOD EXAMPLE Important text & headers justified Page organized with columns Important parts of page identified with rectangular pictures

  10. BAD EXAMPLE All text pushed to left of page Text alignment is random Pushed to bottom of page; no attempt at alignment

  11. Proximity • Keep related things close to each other and less related divided by space • White space is important in separating elements of a page

  12. GOOD EXAMPLE “white space” used to divide text Important things in center of page Related things are close to each other

  13. BAD EXAMPLE Impossible to tell what is important; too much text on one page No white space or attempt at organization Related things not close to each other anywhere

More Related