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

C ontrast 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

C ontrast & 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:

C ontrast Example

C ontrast example Less effectiveMore effective

C ontrast example  LESS effective MORE effective 

R epetition  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

R epetition example

A lignment  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

Mushy Alignment

P roximity  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!

P roximity example

H ow could proximity help this design?

P roximity – which works better?

CARP Makeover

CARP Makeover add Proximity

CARP Makeover add Alignment

CARP Makeover add Repetition & Contrast

V ideo examples  C.R.A.P.- Basic Layout and Design Principles for Webpages (4 minute video demonstration) C.R.A.P.- Basic Layout and Design Principles for Webpages

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 colorschemedesigner.com/  Find an existing color scheme you like. Browse or  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 Principles of Beautiful Web Design   Designing with CRAP by Christian Montoya Designing with CRAP  Color Schemes - Mezzoblue blog Color Schemes  Five More Principles Of Effective Web Design - from Smashing Magazine Five More Principles Of Effective Web Design  4 Principles of Good Design for Websites by Andrew Houle 4 Principles of Good Design for Websites  The CRAP Principles of Design by John Monte The CRAP Principles of Design