Graphic Design for Non-Designers Dave Underwood • Digital Media Services • CU Boulder david.underwood@colorado.edu • 303 492 2672 What does good design do? • Makes you look • Makes you believe • Makes you understand Making you look; pet tricks • Contrast • White space • Rhythm • Playfulness • Cropping • Sublimation • Broken borders • Cool palettes • Tension Contrast Look for elements in the design that can played against one another, either in theme or in form. Don't be afraid to radically scale or color individual elements in order to command the viewer's attention.
White space doesn't have to be white. We use the term to describe regions of the design that are purposely left uncluttered. Nothing calls attention to your target quite like a surrounding field of undeveloped space. Resist the urge to use all of your available design real estate. There’s a coffeeshop in Boulder with a bulletin board near the front door that is covered with customers’ business cards. The ones that feature lots of white space literally jump out at you.
Rhythm When in doubt, repeat. This is probably the easiest design trick. By rubber stamping any one of the elements or forms in your design, you achieve a quick effect that at once is interesting to the eye and implies a sense of chronology or storytelling.
Playfulness Look for different modes and platforms with which to deliver your message. Handwrite a title and scan it. Superimpose text onto real-world objects. Show consequences. Juxtapose opposite ideas. Break the rules.
Creative cropping You can easily create mystery and visual interest by cropping photos in unusual ways. Look for the dynamic changes that can occur when you offer vignettes rather than the whole image. Film-makers often use this trick to frame the action and to heighten our curiosity.
Sublimation By diluting an image and sending it to the very back of your layout you can establish a theme that supports and brands your message without competing with the content. This is also a great way to enlist otherwise unacceptable lowresolution images. An interesting technique for homogenizing a PowerPoint presentation, it requires a little Photoshop work (I’m happy to help you with that if you’d like).
Broken borders Just as a bricklayer strengthens a wall by overlapping each successive course of bricks, you can strengthen your design by allowing individual elements to interact with one another.
“Cool” palettes Color is great, but raw, heavily-saturated color often assaults the viewer. A safe strategy for using color is to hew your work toward the earthier, more subdued end of the spectrum. I like to use colors “sampled” from content photos for text and other graphic elements in the layout.
Tension can be a good thing in design. It draws the viewer in and holds on tight. Tension can be achieved by the use of sharp angles, clustered elements, off-centered content, color, and rotation. There’s a reason “BIG SALE!!” is usually stamped at an angle on price tags.
Experiment with combinations of these tricks. As you can see from the samples, layering different techniques can add even more punch. The trick is staying focused and bold in whatever style you decide on... and knowing when to call it finished.
Making you believe; looking like a pro Designing like a pro requires avoiding rookie mistakes... blunders like using every font at your disposal or jamming your design full of needless content. Very often good design comes from knowing what not to do. Some general guidelines: • Use a grid to avoid scattered design • Don’t use boxes, hairlines, borders, etc., unless absolutely necessary • Avoid trapped space • Don’t stack type and avoid using acronyms as design elements • Don’t use “cute” fonts unless you’re designing a cute product (I’ll bet you’re not) • Limit your font list to two typefaces and make sure they contrast obviously • Tame your palette • Condense, nest, prune, throw away. Fight with your client (do you really need this!!?) • Please, no needless animations, transitions, or other “hood ornaments”
Yikes! I didn’t have to look far on the Internet to find this cornucopia of design mistakes. We’ll use it as a starting place for a little triage exercise.
Grid? What grid? If you draw lines along the edges of each of the elements in this web page, you’ll see that there’s virtually no sense of common axes being used to lay out content. Nothing lines up. The first and most important thing you can do in assembling your project is to give yourself a grid upon which to hang the text and images. And the simpler the grid the better. Using a grid not only makes the design more attractive, but it also makes the artist’s job much easier, both to create initially, and to edit later, if required.
Can the boxes Avoid using boxes, hairlines, blocks, etc. as design elements. Removing these unwarranted add-ons almost always makes a layout appear cleaner and better organized. Leave the boxes to the guys designing IRS forms.
Trapped space White space is good, but trapped space is bad. It pulls the eye in, then has nothing to offer. Give space an uninterrupted exit off the page.
“Stacronyms” Two sins here, one potentially avoidable. The first: stacking type was popular in the 50’s, and it looks it. You don’t need to do it and shouldn’t. The second, hewing an organization or event (or whatever) toward an initialed identity - in this case “DPA” - doesn’t in the least help the audience understand what your message is. If the decision is made to use an acronym for identification, it shouldn’t be made by the designer, heaven forbid. Fonts matter! Apparently some folks feel obliged to use every font in the fonts folder in every design. Bad idea. While we could spend an entire semester on typography, suffice it to say that, as in so many things in life, simplicity in font selection is preferred. Limit any one design to two fonts and be certain that those fonts contrast strongly. A good bet:
c a
A san-serif font like Helvitica for headlines and titles
A serif font like Times for body copy
Prune, nest, prioritize, organize This is where the designer sometimes butts heads with the client over editorial decisions. But anytime you can advocate for simplicity, do. Also, one advantage of designing for the web is that content can be nested into common links to other pages. This is a very important difference between print and online design. Try to make full use of it.
Calm that palette Remembering that raw, fully saturated color (on the left) can overwhelm, try to work in more subdued tones. The end product will invariably feel more civilized.
Better? This is what we’ve done with the web-pagefrom-hell by simply following a few rules and avoiding some common mistakes. We’ve placed all the content on a very simple grid, we’ve sublimated that unwelcoming photo and made it into an abstract background element for our new banner (our audience can still see the photo elsewhere on the site), and we’ve spelled out the department name in a lovely Hoefler typeface. We’ve deleted anything we didn’t need, and we developed a much quieter palette for the page. Piece of cake. Design is like music... It’s all based on rules and conventions. But it’s perfectly fine to break the rules. Scratch that. It’s good to break the rules. But you should be aware of when you’re doing it and why. It’s not until you’ve learned your basic scales that you can start to really spread your wings and lift off. Just ask John Coltrane. And if you’re in no mood to experiment and prefer simply getting through the next gig as quickly as possible, the rules are there to support you and to keep your life simple. Just ask Kenny G. Thanks for attending today! Dave Underwood