1 / 38

Web Design

With a focus on screen design and CRAP. Web Design. 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

lucasp
Download Presentation

Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. With a focus on screen design and CRAP Web Design

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

  7. Contrast example

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

  9. Contrast Example

  10. Contrast example Less effective More effective

  11. Contrast example  LESS effective MORE effective 

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

  13. Repetition example

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

  15. Alignment example

  16. Alignment example

  17. Mushy Alignment

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

  19. Proximity example

  20. How could proximity help this design?

  21. How could proximity help this design?

  22. Proximity – which works better?

  23. Proximity – which works better?

  24. CARP Makeover

  25. CARP Makeover add Proximity

  26. CARP Makeoveradd Alignment

  27. CARP Makeoveradd Repetition & Contrast

  28. Video examples • C.R.A.P.- Basic Layout and Design Principles for Webpages (4 minute video demonstration)

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

  30. Elements of screen design • Typography • Color • Design of graphic elements • Layout

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

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

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

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

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

More Related