You don’t need to go to design school to create incredible looking things for your learning experience design. I once painted a caterpillar and my teacher thought it was a green stick...

But after reading The Non-Designers Design Book by Robin Williams, my design skills have improved immensely. Design, like any art, is also a science. By understanding 5% of the essential principles of what makes great design, you can get 95% of the outcome.

I’ll start explaining the four basic visual design principles Williams discusses in the book and then move onto her typographic principles. While I’ll talk about each principle in isolation, in the real world, the principles are constantly interacting with each other. Those principles are:

1. Proximity
2. Alignment
3. Repetition
4. Contrast

Proximity

Proximity simply means you should put related things closer together. Intuitively we know things that are closer in space are closer in relation. A picture of a woman far away from a girl will make us believe they are unrelated. But a picture of a woman holding hands with a girl will tell us they are likely mother and daughter.

You should use this principle in your design to make it easier to block relevant pieces of information together and create visual separation. When this isn’t done, it’s difficult to parse the information like with this resume here:

The resume isn’t terrible, but because all the sections are relatively even spaced from each other even inside the sections, it takes more effort than it should to see the various spots.

In contrast, this resume by Michael Scott has a clearer separation of sections and is therefore easier for the eye to parse. That’s the subtle power of proximity.

Alignment

Alignment is the principle that every item should have a visual connection to other items. Usually, this means items should be ordered in relation to each other to create a cohesive, whole feel. But sometimes, you will purposefully misalign things to create a certain feel. The point is you place nothing arbitrarily.

When it comes to text, you have three options for alignment:

1. Left alignment
2. Center alignment
3. Right alignment

Generally, left and right alignment will give your text a more sophisticated feel where as center alignment can look amateurish. But it depends on the vibe you are trying to give.

For example, in this case the center alignment helps the vibe of the design because it puts the focus on the man in the middle which makes sense considering it’s his birthday:

But in this case, it just looks terrible:

There are many problems with this design, but for one the center alignment looks messy because many of the lines are of drastically different length making the text look like a strangled sausage. I mean, some lines have only one to three words in them! Everything is super close together making it hard to parse the information. There is very little contrast to see important bits as well.

Sometimes, however, misalignment can be good. It’s all about your intent for the audience.

In the above image, the photo misalignment creates an interesting zig zag pattern for our eyes to move down the page. The misalignment makes us want to continue reading. It’s all about intent.

Repetition

The principle of repetition states you should repeat some aspect of your design throughout your piece. This could be font, boldness, a photo, etc. This repetition makes it easier on your eye to look at a design and helps highlight important parts of the design when it’s broken.

In the menu above, the bold is repeated for each section of food, with of individual food items in italics and the price is continually shown to the right of the food item. This repetition makes it easier for us to understand the design.

This menu breaks the rule of repetition by putting food items in different colored text. The alignment is also terrible making it confusing where to look.

Contrast

Contrast is all about separating visual elements by color, size, font, and more to draw the audiences eye.

Take this party flyer template:

Your eye was likely immediately drawn to the title “Barbecue Party” and the striking image at the bottom. That’s because the title is interestingly colored and in a different font and size than the rest of the text. Then, you likely moved to the date next because it was colored the same yellow as the title. Contrast guides the eye. You should ask yourself where you want to guide people?

With this party template, however, the contrast is not great enough to draw the eye anywhere:

The title isn’t big enough and without bold doesn’t stick from the background. The subtitle is in the same font just slightly smaller making it blend with the title.

The Principles Together

Now that you have a grasp of the four principles you should begin training your designer eye. Anytime you see any design, ask yourself how each principle of design is showing up. Is it working? Is it not?

Here’s a flyer I designed hyping up a Dungeons And Dragons campaign I’m doing with friends next semester. Assess it using what you just learned.

A Note On Color

Color is obviously a huge topic I could talk more about in creating great designs which Williams does explore in the book. But because I already talked quite extensively about it in my article on learning pixel art, I suggest you read that instead if you want to learn.

Typographic Principles

Generally, there are three types of relationships your typography can have:

1. Concordant
2. Conflicting
3. Contrasting

Concordant typography uses a relatively unanimous font and size creating a cohesive, peaceful, formal feel with the danger of being boring.

This is a typical formal wedding invitation. It’s simple and works depending on the vibe you’re going for. But things can be more interesting.

Here’s an example of conflicting typography:

In this case, some of the text looks different, but not enough to tell if it’s purposeful. It looks like a mistake. You want to avoid conflicting typography.

Finally, we have contrasting typography. This is when type looks so different from each other it’s clearly purposeful. And depending on how it’s done, it can create some striking designs.

How To Create Effective Type Contrasts

Now that we know the three relationships types can have with each other, how do you combine types to create effective contrasts? I think this is where you will find the most fun in your typography journey. According to Williams, there are six main ways you can create contrast:

Size

Notice how in this magazine cover, the “Vogue” at the top is much much larger than the other words. this creates contrast in size.

Weight

Weight refers to the boldness of the text.

Notice how the headers and title of the newsletter play with varying weights of type to create contrast. William’s suggests you invest in at least one font family with a transition of super light to super heavy weights to build contrast.

Structure

Structure refers to how a font is built. Some fonts are very mono-weight, with almost no discernible weight shift between strokes, where as others are built with great emphasis on the thick/thin transitions. The easiest way to create great contrast in your designs using structure, is to use two fonts of different categories. Same font categories tend to have conflicting relationships like using two sans serifs, or two moderns.

For example, this image works so well because while the fonts are all the same, the structure of each of them are so different.

Form

The form of a letter refers to its shape. Characters may have the same structure but different forms.

Form changes can be from caps to lower case, roman to italics, or a different font entirely. In the below example, the title card is in all caps and a different font compared to the bottom text, creating great contrast.

Direction

Direction contrast is created by putting things in contrasting directions. For example horizontal against vertical, slanted against straight, or something else.

In this example the horizontal image creates great contrast with the vertical text.

Color

Generally, warmer colors tend to stick out to us, and colder colors recede into the background. You can use this to your advantage when creating contrast.

Train Your Designer Eye

Just reading about the design techniques isn’t enough to truly grasp them. If you want to become a great designer from this simple book, you need to train your designer eye. When seeing designs in everyday life, begin asking what principles of design it uses to work (or not work!).

As you do this more and more, you’ll begin to train your own ability to create great designs. And especially when you start creating stuff yourself, it will really lock in. I know I’ll never be a pro designer. But using the principles of this book, I’ve gotten much much better. You can too.