Skip to main content

Design for non-designers

banner img These are my notes from The Non-Designer's Design Book by Robin Williams.

The Joshua Tree Epiphany​

This short chapter will explain the 4 basic design principles, each one will be explained in details in the next chapters:

1. Contrast​

  • Avoid elements on the page that are merely similar.
  • If the elements type, color, size, line, thickness, shape, space, etc. are not the same, then make them as different as possible.

→ Contrast is the most important visual attraction on a page.

2. Repetition​

  • Repeat visual elements of the design (colors, shapes, textures, spatial relation-ships, line thicknesses) throughout the piece.

→ Repetition develops the organization and strengthens the unity.

3. Alignment​

  • Nothing should be placed on the page arbitrarily.
  • Every element should have a visual connection with another element on the page.

→ Alignment creates a clean, sophisticated, fresh look.

4. Proximity​

  • When items are close to each other, they beocme one visual unit rather than several seperate units.

→ Proximity helps organize information, reduces clutter, and gives the reader a clear structure.

To make them easy to remember you can use the word C.R.A.P

Proximity​

  • Physical closeness implies a relationship: When several items are in close proximity to each other, they become one visual unit rather than several separate units.
  • By grouping similar elements into one unit the page becomes more organized, the user understand where to begin the message (and he will know when he's finished), and the neutral space (white space) will have their real value.
Upgrading your design begins with a clear communication between your design and the user.

Alignment​

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 seperated from each othe, there is an invisible line that connects them that the user can see.
  • Although we seperate certain elements to tell their groups and relationships (principle of proximity), the principle of alignment tells that even though these items are not close, they belong to the same piece.
  • Lack of alignment is probably the biggest cause of unpleasant-looking documents.
  • Find a strong alignment and stick to it.

Alignment on the edge:​

The strength of the edge is what gives the strength to the layout.

Centred alignment:​

  • A centered alignment (the most common alignment that beginners use) is very safe and feels confortable. It creates a more formal, sedate, ordinary, and oftentimes downright dull look.
  • As a beginner, breaking away from centered alignment will be difficult. You will have to force yourself to combine a strong flush right or left alignment with good use of proximity to discover different results.
Robin's Rule about Breaking Rules: You must know what the rule is before you can break it.

→ Be conscious of where you place elements. Always find something else on the page to align with, if the two objects are physically far away from each other.

Repetition​

Robin's principle of repetition states:

Repeat some aspect of the design throughout the entire piece.
  • Everyone is already using repetition. You only need to turn that inconspicuous repetition into a visual key that ties the publication together.
  • Repetition is very useful one one-page pieces, and is critical in multi-page documents (where we often just call it being consistent).
  • The purpose of repetition is to unify and to add visual interest.
  • Avoid repeating the element so much that it becomes annoying or overwhelming.

→ Push the existing consistencies a little further so you can turn some of those consistent elements into part of the conscious graphic design.

Contrast​

Robin's principle of contrast states:

If two items are not exactly the same, then make them different. Really different.
  • If the two elements are sort of different, but not really, then you don't have contrast, you have conflict
  • Contrast is the most likable thing to the eye.
  • The main purpose of contrast is to create an interest on the page and aid in the organization of the information.

→ Adding contrast is easy, but the most important thing about it is to make it strong. Contrasting elements should never serve to confuse the reader or create a focus that is not supposed to be a focus from the beginning.

Review​

  • 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 uncenter your format, it often makes the effect stronger.
  • 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.

→ The most important thing about all of this is to increase your visual awareness

Using Color​

Color wheel​

  • Yellow, red, and blue are the primary colors.
  • Green, purple, and orange are the secondary colors.
  • The colors between these 6 colors are called the tertiary colors.

Color relationships​

  • The black color is the combination of all colors, and white is an abscence of all colors.

Complementary​

  • Colors directly across from each other, exact opposites, are complements. Because they're so opposite, they often work best one is the main color and the other is an accent.

Triads​

  • A set of three colors equidistant from each other always creates a triad of pleasing colors.
    Examples:
  • Red+Yellow+Blue (primary triad).
  • Green+Orange+Purple (secondary-triad).
  • Yellow-orange+Aqua+Violet.

Split complement triads​

  • Another form of triad is the split complement: choose a color from one side of the wheel, find its complement directly across the wheel, but use the colors on each side of the complement instead of the complement itself. Examples:
  • Yellow+Violet+Bluish-purple.
  • Green+Red-orange+Violet.

Analogous colors​

  • An analogous combination is composed of those colors that are next to each other on the wheel.
  • These colors share an undertone of the same color, creating a harmmonious combination. Examples:
  • Aqua+Green+Lime-green.
  • Yellow-orange+Orange+Red-orange.

Shades and tints​

  • The basic color wheel involves only the pure hue or the pure color. We can expand the wheel by adding black or white to the various hues.
  • Add black to a hue to create a shade.
  • Add white to a hue to create a tint.

Monochromatic colors​

  • A monochromatic combination is composed of one hue with any number of its corresponding tints and shades.

Shades and tints in combination​

  • Choose one of the four color relationships described earlier, but instead of using the hues, use various tints and shades of those colors. → This expands your options tremendously, but you can still feel safe that the colors works together.

Watch the tones​

  • Tone refers to the particular quality of brightness, deepness, or hue of any color.
  • When the tones are similar, it gets a little muddy looking. The contrast is too weak.

Warm colors Vs. Cool colors​

  • You can warm up certain colors such as grays or tans by adding more reds or yellows to them. You can cool down some colors by adding various blues to them.
  • Cool colors recede into the background. Warm colors come to the front.

How to begin to choose?​

  • It can seem overwhelming to choose colors so start with a logical approach, start small then add tints and shades.

CMYK Vs. RGB | Print Vs. Web​

There are two important color models:

CMYK​

CMYK stands for Cyan (means blue), Magenta (sort of red/pink), Yellow, Key color (usually black). The colors in CMYK are used for printed products like books.

RGB​

RGB stands for Red, Gree, and Blue. The colors in RGB are used for devices monitors.

Use CMYK for projects that are to be printed.  
Use RGB for anything that will be viewed on a screen.

These notes were written by Ayoub Abidi.