đź“–The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice

Williams, Robin


  • Don’t be a wimp.
  • Rule about Breaking Rules: You must know what the rule is before you can break it.

Layout principles:

  • Proximity—move related items close together.

    • When grouping items together, some changes might be needed to sizes, weight, and placement, contrast of images.
  • Alignment—“Nothing should be placed on the page arbitrary. Every item should have a visual connection with something else on the page.”

    • “Centered” is a legitimate alignment but it is usually weak as it creates soft sides. Use left or right alignment to create strict edge.
    • if you center text, at least make it obvious that it is centered.
    • the professional typographic indent is 1 em.
    • find a strong line and use it (for alignment)
    • avoid using more than one text alignment on the page.
  • Repetition (being consistent)—“Repeat some aspect of the design throughout the entire piece.”

    • repetitive element doesn’t have to be the same element. it could be variations or related items.
    • Avoid repeating an element so much that it becomes annoying.
  • overlapping pulling outside of the border helps unify
  • ”Contrast various element of the piece to draw a reader’s eye into the page.”

    • make contrast really different. don’t be a wimp


  • YRB are primary colors
  • Green Purple Orange are secondary
  • next are tertiary
  • you get secondary/tertiary colors by mixing equal amount of neighbor colors
  • color relationship

    • opposite colors are complementary
    • triads harmonize well

      • YRB—primary triad. Green Purple Orange—secondary triad.
    • split complement triads—choose opposite color, but use two adjacent ones instead
    • analogous colors—two or three adjacent colors
  • hue/shade/tint

    • hue = pure color
    • shade = hue + black
    • tint = hue + white
    • monochromatic = one hue + any number of its tints and shades
  • warm/cool

    • warm colors (have red or yellow)—come forward
    • cool colors (have blue)—recede into the background

§ Typography:

  • If more than one paragraph is quoted, the double quotation mark is set at the beginning of each paragraph, but at the end of the last only.
  • kerning—adjust spaces around letters
  • widow = <~7 chars on last line
  • orphan = last line of paragraph on next page
  • the style of punctuation should match the style of the preceding word


  • Relationships:

    • Concordant—only one type family with little or not variant.

      • harmonious, sedate/formal
    • Conflicting—similar type faces but not much different.

      • the lack of contrast results in conflict
      • should be avoided
    • Contrasting—different typefaces (clearly)

      • visually appealing and exciting
  • font categories:

    • oldstyle—for text
    • modern—good for titles, big text
    • slab serif—no thick/thin transition, thicker. Clean and straightforward, good legibility.

      • can be used in the body but looks darker/heavier
    • sans serif—no serif, monoweight (usually)

      • if not monoweight, might be hard to combine
    • script—sparingly, very large, never all caps
    • decorative—go beyond your first impression: they can give different impression in different context.
  • Type contrast:

    • size
    • weight
    • structure
    • form

      • uppercase/lowercase
      • roman/italic
    • direction
    • color

The process:

  • start with focal point
  • group information (proximity)
  • align
  • repetition
  • contrast


Want to receive my đź–‹ posts as I publish them?