1. With a focus on screen design and CRAP

2. The Joshua Tree Epiphany

3. Screen Design CRAP

4. 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

5. Contrast

6. 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.

7. Contrast example

8. 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: http://gmazzocato.altervista.org/colorwheel/wheel.php http://gmazzocato.altervista.org/colorwheel/wheel.php

9. C ontrast Example

10. C ontrast example Less effectiveMore effective

11. C ontrast example  LESS effective MORE effective 

15. 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

16. R epetition example

17. 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

18. Alignment example

20. Mushy Alignment

21. 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!

22. P roximity example

23. H ow could proximity help this design?

25. P roximity – which works better?

27. CARP Makeover

28. CARP Makeover add Proximity

29. CARP Makeover add Alignment

30. CARP Makeover add Repetition & Contrast

31. 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

32. 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?

33. Elements of screen design  Typography  Color  Design of graphic elements  Layout

34. 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.

35. 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

36. 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

37. 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 www.colorcombos.com/ or http://www.colourlovers.com/www.colorcombos.com/ http://www.colourlovers.com/  Start with an image (usually a photograph) and pick colors from within to generate a color scheme.

38. 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  www.principlesofbeautifulwebdesign.com/ www.principlesofbeautifulwebdesign.com/  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