The Four Basic Principles of Design

pi-article-principlesofdesign
  • 5 Read Time(minutes)
  • 1/5 Difficulty

In this article, we’ll be talking about the four general principles of design. Four basic principles you can find in every well-designed piece of artwork. We’ll be discussing each of them individually, however you must be aware that these principles are applied together. Let’s get to it!

Principles of Design

Proximity

New designers often tend to put elements (texts, graphics, etc.) randomly around the page trying to fill every little piece of empty area. This makes the whole artwork cluttered and the information hard to find.

The principle of Proximity states that you group elements together that are related to each other. To obey the rule of proximity, move related objects close to each other. This way, the whole artwork will be easier to scan through.

Let’s see a very basic example of Proximity. On the left you can see a simple list with a couple of automobile makes. On the right I’ve applied the principle of Proximity, and separated the car makes by nationality. By doing so, we get a much cleaner result.

The Four Basic Principles of Design

When a number of items are in close proximity, they become one visual element, reflecting their relationship. Applying the rule of Proximity automatically creates organization among the elements. There are other very important design principles that improve the look of the whole design, but proximity by itself does a great job.

Alignment

Beginner designers put text and graphics on the page where there is space for it, often without paying attention to any other elements. This creates anarchy among the elements. To get over it, we must use the principle of Alignment.

According to the principle of Alignment, nothing should be placed arbitrarily on the page. Everything should have a connection with some other items. When elements are aligned carefully on the page, they make up a “stronger cohesive unit”, even if they are physically separated from each other.

In the following example, I have already applied the principle of Proximity to separate relevant pieces of information. Over on the left, we can see a clear layout, with a centered arrangement of elements. This looks pretty good and legible, however, the sides of the text are kind of “soft”; you can’t really see its strength.

The Four Basic Principles of Design

With the principle of Alignment applied, we can see a hard edge on the right side. The elements on the page have a solid invisible line connecting them, which gives the whole design strength and firmness.

Most new designers tend to center everything on the page because it’s very safe and comfortable. It creates a more formal look, but also a very dull one. Take a look at just any design you like, let it be a poster, a website logo, anything! I bet they are not centered. It’s not easy to break away from the centered layout. But I encourage you to try aligning your elements to the left or right side, and with careful use of the principles mentioned in this article, you’ll definitely see a difference!

Repetition

The principle of Repetition states that you repeat some aspect of the design throughout the entire artwork. Repeating elements can vary from using the same color or the same font, a particular bullet point or a certain design element.

Just like a well-designed book in your hand. All pages have the same format; the headline stripe, the page title, the page number in the corner… everything is (keyword alert!) consistent. Imagine if one page had a different kind of headline graphic or different text styling. It would look like that page weren’t part of the book.

The Four Basic Principles of Design

How many examples of repetition can you count? Applying the rule of Repetition is not hard at all. You just have to stay consistent with your headings, paragraphs, bullets, etc. One important thing before we move on to the last principle of design, is that you shouldn’t use repetition too much; avoid making your repetitive elements annoyingly overused.

Contrast

The purpose of Contrast is to differentiate similar elements from each other. If two elements are not exactly the same, make them different!

Contrast can be created in a variety of ways. You can play with color, size, font weight, spacing, distinctive font faces, and so on.

Contrast only works well if the difference between elements on the page is BIG. If you’d like to differentiate two items from each other, don’t be shy; dare to make a big difference! You can’t contrast 16px type with 14px type. You can’t contrast brown with black either.

The Four Basic Principles of Design

If you look closely, you can not only see good examples of using the principle of Contrast, but also Repetition, Alignment and Proximity. We could use color to further improve contrast in our designs. I haven’t touched the text color in any of the above examples in this article (for a reason).

Conclusion

Can you recall the four basic principles in the above image? Can you tell why this design looks good? Then, congratulations! You have successfully learnt the four basic principles of design. From here on, you’ll be able to recognize these principles, and use them in your future designs.

Further Reading

If you’d like to further educate yourself with the four basic design principles, let me recommend you the awesome The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice written by Robin Williams. It contains spectacular examples of the aforementioned principles.

Let’s Talk!

What are your comments? I’m really curious if you’ve learnt new things from this article. Please share me your thoughts!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

2 Responses

Comments

  • ululf01 said on 2013.02.12. at 9:45 Reply

    thanks for the explanation of post, nice

  • Grace said on 2013.10.02. at 16:54 Reply

    I've learned that it looks more professional if your papers/projects have alignment,proximity,contrast, and repetition. i never really thought it mattered especially with graphs and illustrations, but after reading this it make sense why.

Trackbacks

There are no trackbacks yet.

Join the Conversation

Captcha: 6 × four =