The Non-Designer’s Design Book, 3/e
by Robin Williams
I, Michael Parker, own this book and took these notes to further my own learning. If you enjoy these notes, please purchase the book!
Part 1: Design Principles
Ch 1: The Joshua Tree Epiphany
- pg 12: Once you can name something, you’re conscious over it, have power over it, and own it. You’re in control.
- pg 13: Contrast of type, color, size, line thickness, shape, space, etc. is the most visual attraction on a page.
- pg 13: Repetition of colors, shapes, textures, spatial relationships, line thickness, fonts, sizes, graphic concepts etc. develops organization and strengthens unity.
- pg 13: Alignment creates a clean, sophisticated, fresh look.
- pg 13: Proximity combines multiple visual units into one, and gives the reader a clear structure.
Ch 2: Proximity
- pg 15: Group related items together, so that the related items are seen as one cohesive group rather than a collection of unrelated items.
- pg 16: When applying proximity correctly, it should be clear where we begin reading, and where our eyes should follow next.
- pg 21: Proximity means elements are intellectually connected. Those that have some sort of communication relationship should also be visually connected.
- pg 22: Communicate that something is different from the others by separating it from the others, adding extra space.
- pg 24: Putting whitespace where it doesn’t belong, like between headlines and their related texts, visually pushes related elements apart.
- pg 27: Don’t use exclusively all caps, because they are hard to read.
- pg 32: Try squinting your eyes and counting the number of visual elements. If there are more than three to five, move related elements closer to one another.
Ch 3: Alignment
- pg 33: Don’t place things on pages arbitrarily. Every item should have a visual connection with something else on the page.
- pg 33: While proximity can push items apart, alignment can tell us that they still belong to the same piece.
- pg 35: A centered alignment often appears a bit weak. Left- and right-aligned text has a stronger edge, which gives strength to the layout.
- pg 38: If you’re going to center text, experiment with making it dramatic in some other way.
- pg 41: If you use both flush left and flush right on the same page, align them in some way, such as using consistent margins.
- pg 42: When information is the most difficult to understand, that’s when it’s the most critical to present it as clean and organized.
- pg 44: Never center headlines over flush left body copy or text that has an indent. You can’t tell if it’s actually centered.
- pg 45: The standard typographic indent is one em, which is as wide as the point size of your type.
- pg 48: Find a strong line and use it. For example, align text along the side of a graphic or photo, eliminating any “trapped” white space.
- pg 49: If your alignments are strong, then you can break through them consciously and it will look intentional. Just don’t be a wimp about it.
Ch 4: Repetition
- pg 51: Repeat some aspect of design throughout the entire piece, such as a bold font, thick line, color, design element, particular format, spatial relationship, etc.
- pg 51: We already use some repetition in our work. But we want to turn that inconspicuous repetition into a visual key that ties everything together.
- pg 52: If the last element on a page is bold, then the reader’s eye is drawn back to the preceding bold elements.
- pg 55: If you have a strongly consistent publication, then you can use surprise elements for items that you want to call special attention to.
- pg 59: Once you establish a couple of key repetitive items, you can vary those items and still create a consistent look.
- pg 61: If an element from a design is strong, you can create multiple designs around it. This ensures variety, while the repetition ensures unity.
- pg 64: Don’t repeat an element so much that it becomes annoying or overwhelming. It should provide contrast, and not confuse the focus.
Ch 5: Contrast
- pg 65: If two items are not exactly the same, then make them different. Really different.
- pg 70: The easiest way to add interesting contrast is with typefaces, but don’t forget about rules, colors, spacing, textures, graphic sizes, etc.
- pg 72: Pull out key phrases in bold so that the reader will be drawn to them, even when skimming.
- pg 72: A reader is put off by long lines of text. Experiment with using more than one column.
- pg 73: Don’t be afraid to make some items small to contrast with larger items. If the reader is interested, they’ll read the smaller print.
- pg 76: A reader’s eye follows the eye of anything on the page, so make sure those eyes lead the reader to the focus of the piece.
Ch 6: Review
- pg 90: Designers are always “stealing” other ideas. A design changes in the adaptation and becomes yours.
Ch 7: Using Color
- pg 92: The primary colors yellow, red, and blue are the only colors you can’t create.
- pg 92: Mix adjacent primary colors to create the secondary colors. Blue and yellow make green, yellow and red make orange, and red and blue make purple.
- pg 94: Complementary colors are across from each other on the color wheel, such as blue and orange, red and green, and yellow and purple.
- pg 95: Triads are three colors that are equidistant from one another on the color wheel. Red, yellow, and blue are the primary triad.
- pg 96: Split compliment triads use a color and the two colors immediately adjacent to its complement. This adds some sophistication.
- pg 97: Analogous colors are those that are adjacent to one another on the color wheel, sharing an undertone and creating harmony.
- pg 98: The pure color is a hue. Add black to a hue to create a shade, and add white to a hue to create a tint.
- pg 99: On the Mac color wheel, hues are on the outer rim. Create a tint by moving toward the center, and create a shade by dragging the slider downward.
- pg 100: A monochromatic combination is composed of one hue with any number of its corresponding shades and tints.
- pg 102: Tones refer to the particular quality of brightness, deepness, or hue of any color. Colors with similar tones have weak contrast and are muddy looking.
- pg 103: Warm colors, which have some red or yellow, come to the front and make an impact easily. Cool colors, which have some blue, recede into the background.
- pg 106: CMYK is the color model for printed projects. The key color is usually black, and together they can print many thousands of colors.
- pg 107: In RGB, mixing red and green gives you yellow. It is composed of beams of light that are not reflected off of any physical object.
- pg 108: Switching between CMYK and RGB loses a little data each time, so do your work in RGB and switch to CMYK as the last step.
- pg 110: When creating an identity package, follow the principle of repetition. Every piece should have some identifying image or style.
- pg 113: On a business card, avoid parentheses, abbreviations, and superfluous words that just add clutter.
- pg 117: When designing a letterhead, envelope, or business card together, work on all pieces at the same time to ensure that the chosen layout works with each one.
- pg 122: Most flyers suffer from a lack of both contrast and hierarchy. Use a focal point and contrast to grab the reader’s attention and then guide their eyes.
- pg 123: In a newsletter, apply repetition to color, graphic style, formatting style, etc. so that every page looks like it belongs to the whole piece.
- pg 126: Most newsletters lack alignment. Once you add alignment, if you break out from it, do it with gusto or else it will look like a mistake.
- pg 126: Use either an extra space between paragraphs or an indent, but not both.
- pg 126: For newsletter headlines and subheads, ignore Helvetica, and invest in a sans serif with a light and heavy black version.
- pg 129: In a brochure, don’t set copy too close to the fold, but graphics can cross the fold without getting lost in it.
- pg 134: For a postcard, grab their attention. Use an oversized or oddly shaped postcard, use bright colors and striking graphics with high contrast.
- pg 135: In a newspaper ad, good design can’t compete with a clever headline.
- pg 137: Don’t cram a newspaper ad full of text. Add white space, and organize it as consciously as you organize the information it separates.
- pg 139: For a web site, repetition is the most important concept, because it lets visitors know that they’re still on the same web site.
- pg 140: Put navigation links at the top or above the fold, and add substantial margins to text to increase its readability.
- pg 142: For fonts, specify Geneva or Verdana or Trebuchet in front of Helvetica, and New York or Georgia in front of Times.
Part 2: Designing with Type
Ch 9: Type (& Life)
- pg 145: The relationship between types on a page is concordant, conflicting, or contrasting. Recognizing and naming contrasts is key.
- pg 146: A concordant design is calm and formal. It uses just one type face, perhaps in different sizes or styles like bold and italic.
- pg 148: Conflicting type faces are similar to one another, and most of the time it looks like a mistake.
- pg 150: Strong contrast attracts our eyes, and one of the most effective, simplest, and satisfying ways to add contrast is with type.
- pg 152: We can contrast type by size, weight, structure, form, direction, and color.
- pg 152: To see what is wrong with a combination of type faces, don’t look for what is different between them. Instead, look for what is similar.
Ch 10: Categories of Type
- pg 154: Oldstyle faces have slanted serifs, diagonal stress, and moderate thick/thin transition in the strokes. It’s best for excessive body copy.
- pg 155: Modern faces have thin and horizontal serifs, vertical stress, and radical thick/thin transition. They look best when set very large.
- pg 156: Slab serif faces have thick and horizontal serifs, vertical stress, and very little thick/thin transition. They are darker than oldstyle and very readable.
- pg 157: Sans serif faces have no serifs, no thick/thin transition, and consequently no stress, meaning they are monoweight.
- pg 159: Script faces look hand-lettered. They can look very good when set very large, but use them sparingly.
- pg 160: Decorative faces are fun, distinctive, and one exists for any whim you want to express. Use them very sparingly.
- pg 164: The x-height is the height of the main body of lowercase letters, the ascender are letter parts taller than the x-height, and descenders are letter parts below the baseline.
Ch 11: Type Contrasts
- pg 166: If contrasting two typographic elements by their size, make the difference profound. Don’t contrast 12-point with 14-point type.
- pg 168: When you put type in all caps, it takes up more space, and so you have to make its point size smaller. It also decreases readability.
- pg 170: When combining weights, emphasize their difference. Invest in at least one very strong, black face to provide beautiful, strong contrast.
- pg 172: Making key heads or phrases very bold creates an understandable hierarchy of information.
- pg 174: When combining type from two different families, use two families with different structures, meaning type categories.
- pg 176: An easy way to choose contrasting structures is to pick one serif font and one sans serif font of varying size or weight.
- pg 177: Rather than combining two sans serifs, build contrast in other ways using different members of the same sans serif family.
- pg 179: We recognize words not only by their letters, but by their forms. Any word in all caps has a rectangular form, and so we must read it letter by letter.
- pg 180: Roman simply means that the type stands straight up and down, as opposed to italic or script. Roman and italic have different form.
- pg 182: Type slanting upward creates a positive energy, and type slanting downward creates a negative energy. But in general, don’t type on a slant.
- pg 183: A line of type has a horizontal direction, while a column of type has a vertical direction. Contrast them with each other and other directional elements.
- pg 185: Contrasting types yield contrasting textures that you can “feel” visually. Pretend the type were raised and you could run your finger over them.
- pg 187: Black-and-white type creates “color” by its size, letterform weight, the structure, the form, and the space between lines and inside and between letters.
- pg 189: Using such color not only makes a page more inviting to read, but it helps organize information, such as separating stories on a page.
- pg 192: Look through any good magazine for examples and ideas of contrasts in type.
Ch 12: So, Does It Make Sense?
- pg 198: To redesign something, start with a focal point, group your information, create strong alignments, create a repetition, and use strong contrasts.