C r a p
This presentation is the property of its rightful owner.
Sponsored Links
1 / 13

C.R.A.P. PowerPoint PPT Presentation


  • 59 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


C r a p

C.R.A.P.

Color, Repetition, Alignment, Proximity


Color

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


Good example

GOOD EXAMPLE

Purple background, not too busy

Important things in different-colored text

Text is easy to read.

Green and purple clash together well


Bad example

BAD EXAMPLE

Busy background that is not related to subject

Font colors are random & no complimentary colors are used


Repetition

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


Good example1

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


Bad example1

BAD EXAMPLE

Different fonts and sizes

Random colors; no relation to other colors used.


Alignment

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


Good example2

GOOD EXAMPLE

Important text & headers justified

Page organized with columns

Important parts of page identified with rectangular pictures


Bad example2

BAD EXAMPLE

All text pushed to left of page

Text alignment is random

Pushed to bottom of page; no attempt at alignment


Proximity

Proximity

  • Keep related things close to each other and less related divided by space

  • White space is important in separating elements of a page


Good example3

GOOD EXAMPLE

“white space” used to divide text

Important things in center of page

Related things are close to each other


Bad example3

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


  • Login