With a focus on screen design and
CRAP
The Joshua Tree Epiphany
Screen Design CRAP
CARP (CRAP?) Principles
Contrast: making elements different
enough to be interesting
 Alignment: creating strong lines within
a page to make it more organized and
visually appealing
 Repetition: making elements and page
layout similar enough to unify the site
 Proximity: grouping elements that
belong together

Contrast
Contrast
Contrast makes a page
more interesting and readable
Key idea:
 If
two items are not exactly the same,
make them different, really different.
 Shape, font face, size, weight,
texture, line, spacing, color, etc.
Contrast example
Contrast & Text






Text and background color must have high contrast for
text to be readable
Use an interesting font face for title image
Use simple sans-serif font face for body text
Use a very simple sans-serif font face for buttons (usually
small, so simple = readable)
Use contrast to help headings stand out (font face, color,
border, images)
This online tool determines whether your colors have
enough contrast and shows how your colors will look to
color blind:
http://gmazzocato.altervista.org/colorwheel/wheel.php
Contrast Example
Contrast example
Less effective
More effective
Contrast example
 LESS effective
MORE effective 
Repetition

Key idea: REPEAT some aspect of the design
throughout the entire piece.
 Repetition of visual elements throughout the
design unifies and strengthens it by tying
together otherwise separate parts.

If a web site looks professional and is easy to
navigate, it probably demonstrates repetition of





colors
fonts
graphic elements
navigation
page layout
Repetition example
Alignment



Key idea: Nothing should be placed on the
page arbitrarily. Every item should have a
visual connection with something else on the
page.
Strong alignment helps guide the user's eye,
making the page easier to browse and drawing
the eye to the most important parts of the
page.
According to Williams:
 center alignment tends to look formal and can
sometimes look dull or "mushy"
 strong left or strong right alignment looks more
professional and clean
Alignment example
Alignment example
Mushy Alignment
Proximity
Key idea: Group related items together.
 Proximity helps the user identify which
items go together

 close proximity implies a relationship
 Use placement, size, and color to group
items that go together
 don’t be afraid of empty space!
Proximity example
How could proximity help this
design?
How could proximity help this
design?
Proximity – which works better?
Proximity – which works better?
CARP Makeover
CARP Makeover
add Proximity
CARP Makeover
add Alignment
CARP Makeover
add Repetition & Contrast
Video examples

C.R.A.P.- Basic Layout and Design
Principles for Webpages (4 minute video
demonstration)
The Big Picture
3 components of Web Design
 information design
○ What content will the site provide? (list of topics)
○ How will the content be structured or
organized? (outline or flow chart)
 navigation design
○ How will the users interact with the
information? (flow chart)
○ What buttons and hyperlinks will be used, and
where will they be?
 screen design
○ How will each page look?
Elements of screen design
Typography
 Color
 Design of graphic elements
 Layout

Layout – Rule of Thirds
Four layouts in grids that follow the rule of thirds
Try dividing the
page into thirds
for a more
interesting
layout.
Layout – page dimensions

Don’t make user scroll to the right
 Images & divs should be less than 960
pixels wide

Don’t make the user scroll down except
for details
 Logo, title, & navigation should be seen
without scrolling

Keep text lines a readable width
 Too wide = slower reading
Color
Key idea: Coordinate colors and keep it
simple
 Choose 2-3 harmonious colors and a
few highlight colors
 Use bright colors sparingly and
purposefully to draw attention

Choosing colors



Choose harmonious color scheme from color
wheel.
 colorschemedesigner.com/ shows harmonies
and also shows how your colors appear to color
blind users
Find an existing color scheme you like.
 Browse www.colorcombos.com/ or
http://www.colourlovers.com/
Start with an image
(usually a photograph)
and pick colors from
within to generate a
color scheme.
References








The Non-Designer’s Design Book by Robin
Williams
Principles of Beautiful Web Design, a Sitepoint
article by Jason Beaird
www.principlesofbeautifulwebdesign.com/
Designing with CRAP by Christian Montoya
Color Schemes - Mezzoblue blog
Five More Principles Of Effective Web Design
- from Smashing Magazine
4 Principles of Good Design for Websites by
Andrew Houle
The CRAP Principles of Design by John Monte