11 principles of design and art article banner with infographis and examples

The 11 Principles of Design and Art [Infographics Included]

Before moving on to the individual design principle itself, let’s understand what “principles of design & art” mean? In the simplest form, these principles are the guidelines on how to use visual elements to create a composition. 

In this article, we will be looking at each of the design principles in detail. Here is a handy infographic for those who are looking for design principles cheat sheet:

Infographics on the 11 principles of design by ux360.design (with examples)

1. Repetition

A component is repeated when other components with features similar to it are arranged in a composition.

design principle: repetition and its example illustrated
Repeating pattern of shape arrangements

Remember, only one common feature needs to be shared among different components. It does not matter if other features or characteristics of the components are different.

Shared features between components can be form or size.

So how do we determine which common feature is repeated if there is more than one common feature? For this, we choose the most dominant characteristic based on hierarchy, size, etc.

Repetition in design unifies the design, makes the design consistent, and shows the relationship between components.

For example, on Apple’s website, the block for both iPhone XS and iPhone XR is the same, with differences only in the content.

repetition of same components in design with help of apple products page
Repetition of common blocks in Apple’s products page

2. Rhythm

Before we get into detail on how rhythm is created, let us look at what a frequency is. Let’s take a look at the image below to understand different type of frequencies:

how even and uneven frequency occurs in design
Even and uneven frequencies

Basically, there are two types of frequencies: even and uneven frequency.

Repetition has an even frequency when two repeating elements have an equal distance between them. If the distance between elements is not equal, then we have an uneven frequency.

To create a rhythm, an object needs to have varying distances between several frequencies.

design principle: rhythm and how it is created using frequencies
Creation of Rhythm using frequencies

There are 5 types of rhythm:

  • Random rhythm: No Specific distance between frequencies
  • Regular rhythm: Some distance between frequencies
  • Alternating rhythm: Basically, a rhythm that is seen in a white and black square on a chessboard. We use a 1-2-1-2-1-2 pattern for this.
  • Flowing rhythm: A rhythm that follows bend and curves. Example: sand dunes or ocean waves
  • Progressive rhythm: A rhythm that changes as they go along with each change building upon the previous.

Rhythm in design influences emotions, creates excitement that builds gradually over time, and creates reassurance in design.

The wave-like rhythm of Poke London creates a feeling of calm and relaxation. This invokes the feeling of trust within the brand.

Flowing rhythm in the wave like animations at the background.

3. Movement

Movement means guiding the user’s eye to a predetermined path in a composition.

using movement to guide users the start and end point a a curve
Creating an illusion of movement using simple shapes

Movement in design can be used in interesting ways such as the position of a subject that can suggest how other external forces can influence to move it. Also, the same position of a subject can also suggest how these forces have influenced its movement before it reached to that position.

What better way to explain movement than give an example of an infographic. Anima graff’s “How a car engine works” uses movement and motion to explain the various steps on how an engine actually works.

The highlights in the number and the illustration creates a directed experience using movement.

For a deeper insight on using movement in your designs, read my article on the Movement Principle of Design.

Also, I suggest you also look into using coordinated motion in design to associate relations through “Gestalt principle: Common Fate”.

4. Balance

Before going into what balance in design actually is, let us look at two basic properties:

  • Symmetrical design

    Let’s put an imaginary vertical axis in our design called an axis. Now design is said to be symmetrical when objects on both sides have the same arrangement.

    Simply put, the weights of visual elements at both side of the axis is equal.

    Layouts can be mono-symmetric and multi-symmetric.

    In the image below, the middle dotted line is the axis and circles on both sides of the axis are in symmetry.

    symmetrical design example on an vertical axis
    Objects on both sides of the imaginary vertical axis has same arrangement.
  • Asymmetrical design

    Now, let us remove 3 objects from the right side of the axis and just have one remaining circle. Since both weight and arrangement are not equal, the layout is said to be asymmetric.

    asymetrical design diagram
    Different arrangement on both sides of the axis to disrupt the symmetry.

So when is a composition balanced? A composition is balanced when all objects in it have visual equilibrium.

We can clarify this with an example using visual weight. We will use the same asymmetrical design image we had earlier. When we make the circle on the right bigger and bolder, objects on both sides appear to have similar visual weight.

balancing an composition with asymmetry example
Balancing both sides of the axis by using visual weight

Now we created visual equilibrium between all objects of the composition.

Gucci’s website is an excellent example of symmetric balance in websites:

Portraits inside circle on both sides of the imaginary axis create symmetric balance

If you want to explore symmetry & balance in-depth, I suggest reading up on my article on Symmetry: Bringing Balance to Compositions.

5. Proportion / scale

In a composition, proportion refers to the relationship between objects with reference to their size and visual weight.

For size, making an element larger gives it much higher importance than those elements with a smaller size.

design principle: scale, comparing sizes between circles of different size
The left circle with a bigger diameter draws more focus than the smaller circle at the right.

For visual weight, making this part of the sentence bold, makes it look more important than this part of the sentence.

In Avrox’s website, they have a dominantly large image of their product to draw all focus on it.

The product image is relatively larger than all other elements in the UI to create a sense of importance.

6. White space

White space is the empty space in a design. It is also known as negative space.

For beginners, white space may seem like a bit of a counter-intuitive approach. But white space has its purpose. It emphasizes an object in a composition. Simply put, it creates focus.

We can look at a simple example. On the frame below, there are circles and polygons of various sizes.

white space design principle example to create illusion of space and planets
Large white spaces around the shapes to isolate them

The empty space on the image above is perceived as the sky and the placed objects as stars and planets.

With a combination of visual weight and white space, we can create interesting visual illusions. Here, with some little tweaks, we can make it look like gravity is acting upon it.

Drink Seriously’s website uses a lot of white space around its images and texts to create a minimalistic and to-the-point design.

use of white space in design
Use of white space not only around the images and text but only on the image itself.

7. Contrast

Contrast occurs when elements in composition have vastly different properties such as color, size, shape, etc.

Contrast creates a focal point.

Contrast is used in design to create:

  • focus
  • emphasis on the most important element
  • interesting visuals with differences between the elements
example of contrast in design using a bright red circle on a bright green background
Drawing attention to the circle using contrast with color.

Commonly, when contrast is mentioned, many people think about the contrast between colors. But contrast can be achieved with more attributes such as:

  • Color contrast

    In the image above, your eye is attracted to the circle. We can use color to direct users to a specific area. Color contrast is mainly used to make the design pop.

  • Scale contrast

    By making the circle size smaller, we can direct focus to that circle.

    contrast in design using scale by making middle circle smaller than other surrounding circles
  • Shape contrast

    Changing the middle circle into a square creates a visual disruption that focuses on that shape.

    contrast in design using shape where a sqaure shape is focused when placed around circular shapes
  • Type contrast

    Let us take a look at a self-explanatory example on the image below:

    contrast in design using type, text, font or typography

On the grid’s website uses the contrast between the city landmark image and the blue background to create a dynamic visual.

example of contrast in a web design
Use of contrast to create a unique visual in a website

8. Emphasis

Emphasis in design is used to highlight a certain area of the composition to signify its importance. 

Emphasis is achieved by using basic design principles such as:

  • Contrast: We can emphasize an object by contrasting it with other objects around it.
  • Scale: Objects with a bigger size in relation to other objects will be more emphasized.
  • White Space: Large negative space around an object tends to highlight it.
  • Movement: The idea behind emphasis by movement is that even though we are immediately drawn to the bigger circle below, we then follow the arrow to the smaller circle.
emphasis on smaller object from larger object using movement
Drawing user’s attention to the non-dominant using movement

Dollar shave club emphasizes a product using the scale, white space, and contrast principles.

example of emphasis in product for an ecommerce site
E-commerce website primarily emphasize their products to make them more appealing.

9. Hierarchy

Hierarchy is the process of arranging elements in a composition so that it conveys information to the user in a simple manner.

hierarchy in design example: using a timeline to show latest to earliest data
A simple timeline outline that shows the hierarchy in information. The layout is self-explanatory on which part to read first or show which on the order comes first.

While working with visual hierarchy, we not only consider the order of importance but also influence people by using the following basic design principles:

  • Proportion: making elements larger than others to draw attention
  • Contrast: Separation between subjects using colors or values to make an object stand out
  • White space: sufficient space around an element tends to focus on the isolated element.

Nifty’s website uses hierarchy by proportion and contrast to direct the users on what to read next.

visual hierarchy in design to guide users on what is important
Information layout using visual hierarchies like progress bars, position indicators, ordered list, and call to action.

10. Variety

Variety means adding a change to disrupt the monotony of a composition.

Variety creates visual interest in a design.

Variety in design using differentr shape and textures

Variety in design can be achieved through:

  • Repetition and rhythm
  • Shape and scale
  • Color/Hue
  • Type
  • Textures

Medium uses variety in its layout to create a categorization between the type of articles.

variety in design using different layouts(medium example)
Variety in layout example.

For a deeper insight into variety, read my article on how to use variety in design.

11. Unity

Unity in design means creating a sense of visual similarity between different elements in a composition.

Unity is best applied to create consistency in design.  

Unity in design example using color palettes
Use of a proper color scheme can bring unity to a design

Let’s say we want to decide on our brand colors for a new project. Rather than choosing random colors, we might want to use an analogous color scheme that will provide a sense of consistency and unity in the final design.

Using dramatically different visual elements can be a bit jarring to the viewers. They might get confused about what the design is trying to convey.

If composed properly, designs with drastically different elements can be highly effective to convey certain messages. To create unity in a design, each element is created to support the other.

We can use different design principles to achieve unity in design:

  • Repetition: Repeating similar components will make it look related to each other.
  • Balance and alignment: Design with balanced visual weight on either side of the imaginary axis will make it related to each other.
  • Proximity: Elements that are closer to each other are most likely to be perceived as elements with common properties. Explore more on this with the article “Gestalt’s design principles: Proximity”.
  • Contrast: Contrast can be used in interesting ways to add more dynamics to a unified design.

Ugmonk’s homepage has an image of t-shirts on a wardrobe. The background and all other supporting elements create a sense of unison as if it really is a real-world wardrobe.

unity in website design example using clothes selling portal
Unity in design with help of all supporting elements

My reading recommendations

If you are looking to learn beyond the basics principles of design, my go-to book recommendation is “Universal Principles of Design” by William Lidwell Kr. As the title of the book, many of the design principles are covered in detail here. I believe the best explanation is the one with lots of examples. Luckily, this book gives practical examples for each of the topics covered. I love this book because the author also includes useful insights related to designer/user biases, design theories, and more.

Find it here: Amazon

“Visual Grammar” by Christian Leborg acts more like a pocket guide to the design principles. The book explains each of its topics visually and does not contain a lot of text. I recommend this book because it contains some of the more interesting visual concepts not covered in this article.

Find it here: Amazon

Final words and additional reading resources

These are the 11 principles of design and art. Like all universal principles, these are our basic guides for creating a visually pleasing composition. However, these are not concrete rules on how to compose any design. As they say: “Master the basics before you break them”. I believe that having a solid foundation is an absolute must before we explore more creative aspects.

The next step for learning more about design foundations would be to look up The 7 Elements of Design. Many people get confused between the Principles of design vs Elements of design. However, these are completely different terms.

For design principles based on how the human brain works, read up on the “7 Gestalt principles of design“.

One final word, if you want a different take on design philosophy, I suggest you take a look at the Wabi-sabi design principle which encourages us to find beauty in imperfections.