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