Four Basic Principles of Design

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.

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.

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.

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.

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.

 

Share:

Related Articles:

This entry was posted in Resources, Uncategorized, Web Design News and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>