The Non-Designer's Design Book [Book Summary]

Software developers often have no idea about design. In fact, most of your marketing team too won't have any idea about design. As a result, projects often don't look too good. Yet there are four basic principles of design that you can teach to anyone, and they are detailed in this excellent book by Robin Williams. They are also quite easy to remember, since they spell C.R.A.P.

THE NON-DESIGNER'S DESIGN BOOK, by Robin Williams

There are four basic principles of design.  They are easy to remember because their initials spell C.R.A.P.

Contrast

The idea behind contrast is to avoid elements on the page that are merely similarIf the elements (type, colour, size, line thickness, shape, space, etc.) are not the same, then make them very different.

The important rule to remember is that for contrast to be effective, it must be strongDon't be a wimp.

Robin's Principle of Contrast states, "If two items are not exactly the same, then make them different.  Really different."

Contrast can be created in many ways.  You can contrast a large type with a small type, a graceful old-style font with a bold sans serif font, a thin line with a thick line, a cool colour with a warm colour, a smooth texture with a rough texture, a horizontal element with a vertical element, widely spaced lines with closely packed lines, a small graphic with a large graphic.

But don't be a wimp.  You cannot contrast 12-point type with 14-point type.  You cannot contrast dark brown with black.  Get serious!

Contrast is often the most important visual attraction on a page - it's what makes a reader look at the page in the first place.

Repetition

Robin's Principle of Repetition states, "Repeat some aspect of the design throughout the entire piece".  You can repeat colours, shapes, textures, spatial relationships, line thickness, fonts, sizes, graphic concepts, etc.  The repetitive element can be anything that a reader will visually recognise.  The repetition develops the organisation and strengthens the unity of the piece.

Repetition can be thought of as "consistency".  As you look through a 16-page newsletter, it is the repetition of certain elements, their consistency, that makes each of those pages appear to belong to the same newsletter.  But repetition goes beyond just being naturally consistent - it is a conscious effort to unify all parts of a design.  Repetition gives a sense of professionalism and authority to your piece; it gives the reader the feeling that someone is in charge because repetition is obviously a thoughtful design decision.

To enhance the design of your piece, look for existing repetitions and then strengthen them.  For example, do you have a numbered list of items? - how about using a distinctive font and then repeating that treatment throughout every numbered list in the publication.

However, avoid repeating an element so much that it becomes annoying or overwhelming.

Alignment

New designers tend to put text and graphics on the page wherever there happens to be space, often without regard to any other items on the page.

Robin's Principle of Alignment states, "Nothing should be placed on the page arbitrarily.  Every item should have a visual connection with something else on the page."

When items are aligned on the page, the result is a stronger cohesive unit.  Even when the aligned elements are physically separated from each other, there is an invisible line that connects them, both in your eye and in your mind.

Lack of alignment is probably the biggest cause of unpleasant-looking documents.  Our eyes like to see order; it creates a calm, secure feeling.  Plus, it helps to communicate the information.

Find a strong alignment and stick to it.  If the text is flush left, set the heads and subheads flush left.

Avoid centring elements.  I guarantee that most designs that have a sophisticated look are not centred.  I know it is difficult, as a beginner, to break away from a centred alignment; you'll have to force yourself to do it at first.

But don't justify text.  It creates awkward g a p s  b e t w e e n  t h e  w o r d s.

Proximity

Robin's Principle of Proximity states that you group related items together.  When several items are in close proximity, they become one visual unit rather than several separate units.

Conversely, items or groups of information that are not related to each other should not be in close proximity.

Don't be a wimp

The fifth general guiding principle of design is Don't be a wimp.

  • Don't be afraid to create your design with plenty of blank space (it's rest for the eyes).

  • Don't be afraid to be asymmetrical (to un-centre your format)

  • Don't be afraid to make words very large or very small.

  • Don't be afraid to make your graphics very bold or very minimal.

Using colour

Colours tend to be either on the warm side (they have some red or yellow in them) or on the cool side (they have some blue in them).  You can "warm up" certain colours (such as grays or tans) by adding more yellow or reds to them.  You can "cool down" some colours by adding various blues to them.

The thing to remember is that cool colours recede into the background, and warm colours come to the front.  It takes very little of a hot colour to make an impact - reds and yellow jump right into your eyes.  So if you're combining hot colours with cool, always use less of the hot colour.

Tips and tricks

Business cards - use a small font (8- or 7-point type).  It makes the card look more professional and sophisticated.  Never mind that it makes it harder to read - a business card is not a book or brochure, it contains information that only needs reading rarely.

Letterhead and envelopes - design them at the same time as your business cards, so that they all look like they belong together.

Alignment - choose one alignment for your stationery!  Be brave - try flush right down the wide with lots of line spacing, or try setting your company name in huge letters across the top.

Flyers - a flyer is the place to try a fun and different typeface, to call attention to a headline.  Do something out of the ordinary to make people stop and look.  Create a focal point to catch the person's eye - one thing on your page should be huge and interesting and strong.

Newsletters - one of the most important features of a multi-page publication is repetition.  Choose an alignment and stick to it.

Brochures - think about the order in which a reader will read the panels and design accordingly.

Newspaper ads - take note of where your eyes go next time you scan the newspaper; I'll bet you see and read at least the headlines of the ads that have more white space.  That's because white space provides a strong contrast on a full, busy page.

Type

There are six basic font groups:

1. Oldstyle - these fonts are based on the handlettering of scribes (wedge-tipped pen held in the hand - hence the serifs of the lowercase letters are always at an angle, the angle of the pen).  Oldstyle is good for extensive amounts of body copy.

Oldstyle fonts:  Times, Baskerville, Garamond

2. Modern - these fonts have serifs, but the serifs are horizontal instead of slanted (and the serifs are very thin - making modern fonts not good for extended amounts of copy).  Modern fonts appeared in the 1700s.  They have a striking appearance, especially when set very large.  They have a cold, elegant look.

Modern fonts:  Times Bold, Bodoni, Onyx, Didot, Bardot, Walbaum

3. Slab serif - Along with the industrial revolution came a new concept: advertising.  At first, advertisers took modern typefaces and made the thicks thicker.  You've seen posters with type like that - from a distance, all you see are vertical lines, like a fence.  The obvious solution to this problem was to thicken the entire letterform.  Slab serifs have little or no thick/thin transition.  Slab serifs are often used in children's books because of their clean, straightforward look.

Slab serif fonts:  Clarendon, Memphis, New Century Schoolbook, Silica Regular

4. Sans serif - the word "sans" means "without" in French, so sans serif fonts are those without serifs on the ends of the strokes.  This was a late idea that didn't become wildly successful until the early part of the 20th century.  Most sans serif typefaces are "monoweight" (i.e. no visible thick/thin transition in the strokes).

Sans serif fonts:  Proxima, Formata, Folio, Shannon Book, Syntax, Arial, Helvetica, Avant Garde.

5. Script - this category includes all typefaces that appear to have been handlettered with a calligraphy pen.  Scripts are like cheesecake - they should be used sparingly so nobody gets sick.  Scripts can be particularly stunning when set very large.

6. Decorative - decorative fonts are easy to identify - if the thought of reading an entire book in that font makes you want to throw up, you can put it into the decorative pot.  When using a decorative font, go beyond what you think of as its initial impression.  E.g. if Pious Henry strikes you as informal, try using it in a more formal situation and see what happens.

The point of being conscious about these six font families is that it allows you to better consciously contrast fonts.  Remember to also contrast size, weight, direction, colour.

The design process

  1. Start with the focal point - what you want users to see first.

  2. Group your information - the proximity principle.

  3. Create and maintain strong alignments.

  4. Create a repetition.

  5. Make sure you have strong contrasts that will attract a reader's eye.