The Principles of Design

By Aenea Liang • January 30, 2015

Download PDF (7.3 MB)
There are a lot of rules and best practices to consider when designing anything (regardless of the medium– website, print campaign, keynote presentation, etc.), and the process can easily become overwhelming to the uninitiated. Fortunately, various sets of principles exist to help lay out the general premise of a design. There are nine principles, and the process becomes vastly simpler after learning the concepts behind this set. Most of the time, after some practice and comprehension, the principles begin to work subconsciously within the back of your mind, guiding the creative process.
Before listing them, I think that it would be wise to get it out there that, in reality, there are no rules. All rules are merely guidelines, and there will always be a case in which they should be broken. Similar to “i before e.”

 

1-guidelines

 

Here are the nine principles (Thank you to Getty Education for the definitions):

 

  1. Balance is the distribution of the visual weight of objects, colors, texture, and space. If the design was a scale, these elements should be balanced to make a design feel stable. In symmetrical balance, the elements used on one side of the design are similar to those on the other side; in asymmetrical balance, the sides are different but still look balanced. In radial balance, the elements are arranged around a central point and may be similar.
  2. Emphasis is the part of the design that catches the viewer’s attention. Usually the artist will make one area stand out by contrasting it with other areas. The area could be different in size, color, texture, shape, etc.
  3. Movement is the path the viewer’s eye takes through the work of art, often to focal areas. Such movement can be directed along lines, edges, shape, and color within the work of art.
  4. Pattern is the repeating of an object or symbol all over the work of art.
  5. Repetition works with pattern to make the work of art seem active. The repetition of elements of design creates unity within the work of art.
  6. Proportion is the feeling of unity created when all parts (sizes, amounts, or number) relate well with each other. When drawing the human figure, proportion can refer to the size of the head compared to the rest of the body.
  7. Rhythm is created when one or more elements of design are used repeatedly to create a feeling of organized movement. Rhythm creates a mood like music or dancing. To keep rhythm exciting and active, variety is essential.
  8. Variety is the use of several elements of design to hold the viewer’s attention and to guide the viewer’s eye through and around the work of art.
  9. Unity is the feeling of harmony between all parts of the work of art, which creates a sense of completeness.

 

2-shapes

 

Closely related to the nine principles of design are the Gestalt principles. For the most part, the Gestalt principles have the same general premise, however, they originate from theories of visual perception developed by German psychologists in the 1920s. The five Gestalt principles are as follows:
  1. Similarity
  2. Continuation
  3. Closure
  4. Proximity
  5. Figure/Ground
I (and presumably every design student ever) had a project in one of my preliminary design classes intended to reinforce these principles. We were asked to create a simple, minimalist accordion booklet showcasing the five principles using an item found in our local grocery stores produce section. Here’s mine.

 

3-baddesign

 

“Okay, but Chris, I still don’t know what to do with all of this information! How do I make a pretty presentation?!”
Okay, well, here’s what not to do in presentations, etc. Certainly never (most of the time) put blocks of text within circles. Don’t keep your text close to the edges of anything, especially if you’re breaking my first tip and putting it within a circle! Think of your design elements as living, breathing characters that need space and breathing room to survive. Marginless text will look and feel awkward, and make your audience uncomfortable. Take care with your colors: don’t use an outrageous combination (unless your design calls for it) and don’t use colors that are overly headache-inducing. This generally narrows down to not using schoolbus-yellow text on a white background. Speaking of illegibility, don’t place text on top of an image that doesn’t have suitable contrast without also adding an overlay.
Alright, I’ve covered what not to do…now, lets wrap up this post with some easy tips to try out in your next design!

 

4-fonts

 

Pair contrasting fonts. This essentially narrows down, in most cases, to using a sans-serif font for headlines, and a serif font for body copy.

 

5-overlay

 

If you’re going to have text on top of an image (and the image doesn’t naturally give a nice contrast between text and picture), try using an overlay! We do this on most of our websites. You may have noticed that I’ve done it all throughout this presentation.

 

 

Good design is generally based off of a grid system. On the web, that translates to designing within a 960 or 1280 grid. In layman’s presentation terms, it means keeping your titles, photos, body copy, etc. consistently in the same place, or at least following the same concept. For this presentation, that meant centered blocks of left-aligned text for copy heavy slides, and centered blocks of center-aligned texts on top of images for title-heavy slides.

Break the system to provide emphasis (this circles us nicely back to the start, with regards to breaking rules). This is tricky to get right. Break it once, it looks like a mistake. Break it twice, it looks like two mistakes. Break it three times, and it’s a system for breaking the system. Break it ten times, you look like a terrible designer. So, break the system approximately three times. The system can be broken with positioning (breaking the grid), color, fonts, etc.

 

7-end

Aenea Liang

Want to Learn More?

Visit the Academy

Explore The Blog

Let's Create Great Together

More About UsWork With Us