design basics for web print Power Point doodling

design basics for web, print, Power. Point, doodling on napkins, and more Lisa Blankenship 2006 (updated 9/08)

visual literacy: the joshua tree principle Graphic designer Robin Williams tells a story about receiving a book about trees as a girl. The first type of tree in the book was the Joshua Tree. She thought she’d never seen one before, but after reading about it in the book, she realized there were several in her own neighborhood in northern California. Source for this and CRAP principles: Williams, Robin. The Non-Designers Design Book. Berkeley, CA: Peachpit Press, 1994.

visual literacy: the joshua tree principle Even if you have no graphic design experience, you usually sense when a design is good or bad. Learning basic design principles, which we’ll refer to as “CRAP” principles (Contrast, Repetition, Alignment, Proximity), enables you to analyze designs in a thoughtful, informed way. It helps you know why a website or ad or Power. Point’s design elements are good or…not so good. Plus you gain a greater ability to create designs—whether in print, web, Power. Point, or whatever medium.

CRAP design principles Contrast Strong contrast adds visual interest to a page and makes it more attractive to the reader's eye. Contrast also highlights ideas the writer / designer feels are most important. What are examples of the contrast principle on this page?

CRAP design principles Repetition The principle of repetition entails repeating some aspect of the design so that each page is familiar. Repetition works to unify all parts of a design and creates a sense of consistency. Random or non-repetitive design makes the reader work too hard to make meaning or enjoy a design. What elements are repeated in this design?

CRAP design principles Alignment Nothing should be placed on a page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, fresh, sophisticated look. In a unified design, every object (whether graphics, photos, or text) is aligned with other objects. This includes vertical and horizontal alignment. How are the objects on this page aligned?

CRAP design principles Proximity Just as ideas that go together are placed in the same paragraph in writing, items that relate to one another should be grouped together in design. When several items are in close proximity to each other, they become one visual unit rather than several separate units. Proximity helps readers organize information and make sense of the message in the piece. Where do you see “proximity” on this page?

more principles of good design 1. Text and graphics usually are cleaner and easier to read if they are left justified rather than centered. This is related to the principle of alignment. http: //www. joshua. tree. national-park. com/ 2. A design needs a focal point—a place our eyes are drawn to. In print pieces this usually is a headline, pull quotes, or visual elements such as photos or graphics. No one wants to read large blocks of plain text. This is related to the principle of contrast. no: http: //www. hrw. org/ 1. yes: http: //www. tortureisnotus. org/

more principles of good design 3. Avoid using all capitals in your titles and headers. Also avoid using italics on your site— harder to read on the web. 4. Keep it simple; the best designs often are. Don’t feel like you have to get fancy in order to be good. The Mark Twain rule of thumb in writing can also be applied to design: it takes great effort to be simple and succinct. bad: http: //www. valweb. org/ http: //www. rogerart. com/ 5. Except in certain, rare situations (think: My. Space) brightly colored and/or textured backgrounds should be avoided like the plague. http: //www. globalaigs. org/

more principles of good design 7. Avoid information overload. “White space, ” or blank space without graphic elements or text, is not a waste of space; it’s an opportunity to draw attention to the elements and words on the page and is one of the most important aspects of good design. 8. http: //tastyresearch. wordpress. com/2006/08/2 8/how-nothing-became-something-whitespace-rhetoric-history-and-meaning/ 9. http: //www. apple. com/getamac/ 7. http: //video. google. com/videoplay? docid=3609 9539665548298&q=microsoft+ipod

CRAP principles at work Practice your visual literacy by analyzing these websites. Where do you see the CRAP principles at work—or not? http: //www. one. org/about/ http: //www. joshua. tree. national-park. com/ http: //www. hrw. org/ http: //www. tortureisnotus. org/ http: //www. uga. edu/sea/ http: //www. facebook. com/

helpful sites for your designs images: http: //www. sxc. hu/ design: http: //www. urlsinternetcafe. com/classroom/fe atures/index. html /