Page 1

CRAP BASIC PRINCIPLES OF DESIGN by stephanie spicer


GOALS OF A DESIGNER → Attract attention

→ Call the viewer to action OR

Produce a desired response

→ Make the information easy to find → Simplify information → Organize


C IS FOR

CONTRAST COMMUNICATES

importanc

AND MAKES


CONTRAST

TO THE READER AN ELEMENTS INFORMATION

stand out


Contrasting color

WEB DESIGN: Using contrast to attract attention and produce desired response.


Contrasting color

WEB DESIGN: Using contrast to attract attention and call user to action


Contrasting color and form

WEBCREME.COM

LOGO DESIGN: Using contrast to attract attention and produce desired response.


Contrasting color and form

THINK QUARTERLY - GOOGLE. FROM ISSUU.COM

PURPOSE OF DROP CAPS AND PULL QUOTES?


R IS FOR REPETITION

repetition repetition repetition repetition repetition repetition

repetition repetition repetition repetition repetition repetition

repetition repetition repetition repetition repetition repetition


REPEATING DESIGN ELEMENTS OR STYLES MAKES SIMILAR KINDS OF INFORMATION

easy to find

TOO MUCH CONTRAST CREATES CHAOS, SO BALANCE IT WITH REPETITION FOR

order and unity


REPETITION: PUBLICATION DESIGN

Four pages in a magazine of the same story repeat colors and illustration style.


THINK QUARTERLY - GOOGLE. FROM ISSUU.COM

Remember the last example for Think Quarterly? Notice many elements are repeated throughout the magazine: fonts, pull quote style, etc.


REPETITION: BRANDING

Chipotle repeats use of red and metallic silver (Chipotle peppers and aluminum foil) in their marketing


THINGS TO REPEAT → Page numbers or navigation → Logos and other branding elements → Colors — pick a scheme

Repeat colors from photos or illustrations for more cohesion

→ Select a 1-4 fonts for every design piece depending on complexity. Not sure? Use less Anytime you have the same or similar information, put it in the same spot and make it look the same!


ALIGNING ELEMENTS

organizes & structures CREATES

unity IN A DESIGN

AND CAN direct th

read ’s

CENTER


TOP ALIGN

A IS FOR ALIGNMENT

exampl of fou -column grid GUTTER


ALIGNMENT: TYPOGRAPHY

helvetica

GRC

Helvetica’s alignment compared to it’s near clone, Arial. The main difference is the edges of the letters are parallel (aligned) with the edge of a page or screen edge.


ALIGNMENT

The red line leads you to begin reading about the story.


P IS FOR

PROXIMITY IS A SIMPLE, B

keep similar informa

(SAME PLACEMENT, STYLISTICALLY SIMILA

visually dintinguish


PROXIMITY

BUT IMPORTANT PRINCIPLE:

ation visually similar

AR, PHYSICALLY NEAR CLOSEBY, ETC.) AND

different information


PROXIMITY LOGO NAVIGATION

NECON.PL PRODUCTS


FLAVOUR FROM ISSUU.COM


CONCLUSION

If you are trying to design something, and it looks like CRAP, break it down!

Analyze how contrast, repetition, alignment, and proximity are helping or lacking in your piece.


CRITIQUE The following designs are winning contest entries by high school journalists.

Keeping in mind the CRAP principles, how are they successful or unsuccesful?


CRITIQUE


CRITIQUE


CRITIQUE


CRAP  

A presentation document about the 4 basic principles of design