Design Principles: How to Design a More Engaging Experience

What are design principles?

Design principles are widely applicable design guidelines and considerations that designers apply discreetly. These are fundamental tips for creating visually appealing designs that make sense to the viewer.

Design principles represent the accumulated wisdom of researchers and practitioners in design, behavioral sciences, sociology, physics and ergonomics, and other related disciplines.

Although we talk about them separately, in practice, they work together to create a design. They are applied when selecting, creating, and organizing items. More experienced designers understand how principles support, reinforce, or even contrast with each other to create the desired effect. They can predict how viewers will likely react to their designs by applying them.

which are the design principles?

If you search for "design principles," Google will return results with articles that include five to more than a dozen basic principles.

Based on more than 20 years of experience and after working on thousands of designs, I use in my design process ten principles that I consider the most important when working on any design.

Why 10 and not the 12 that most designers mention? Because there are two that I consider the result of using others.  These are the "proportion" and the"white space."  I do not detract from them. I only see them aspart of another design principle.

Here are those 10 basic design principles in no order (they are all equally important):

‍

‍

1.   Balance

Comparing objects in real life have physical weight, and elements in a design have visual weight.  Large elements are heavier and small elements lighter. This element has its own "weight" based on the amount of attention it attracts.

Balance is the distribution of the visual weight of objects, colors, texture, and space (including negative space).Visual balance ensures the design weighs equally on both sides of the center point. By achieving this balance, visual harmony is created, and the design is prevented from feeling too chaotic for the viewer.

‍It's like a scale: too much weight on one side, and everything gets unbalanced.

‍

Symmetrical Balance

Symmetrical design uses an imaginary line to divide a work into two halves around a central point. Elements of equal visual weight are balanced on each side of the axis to create symmetry.

There are two variants of symmetrical balance: reflective symmetry, where the two halves are exact mirror images, and translational symmetry, where the same shape or elements are repeated on both sides of the design.

Asymmetric Balance

An asymmetrical composition is when a design uses uneven elements. One side may have a visually heavy element, balanced with multiple lighter elements on the opposite side. It still strikes a balance but provides an entirely different experience. Asymmetry is often more visually attractive. Where symmetrical designs can be static and predictable, asymmetrical balance gives a more dynamic feel.

Radial Balance

Es when elements "radiate" from a point in the center of a design. Think of the rays shining from the sun or the petals of a rose. This form of symmetry is a way to add depth and movement to a design, drawing attention to an object in the center of a composition.

‍

2.   Contrast

The opposite of similarity is contrast.  Humans usually like the difference. Designs that look the same are boring. So, by experimenting with contrasting shades of colors, shapes, sizes, textures, and fonts, you can, to a large extent, draw attention, control visual flow, and keep people engaged.

Contrast occurs when two or more elements of a composition are different. It can create specific effects, emphasize the importance of certain features, and add visual appeal to your designs. As with most elements of art, it's about striking a balance. Various techniques can be used to achieve this, such as using colors, fonts, or sizes. Still, it's vital to note that adding too many variations can confuse viewers (the opposite effect you want to have).

‍

3.   Emphasis

Emphasis is a strategy that aims to draw the viewer's attention to a specific design element. This can be a content area, an image, a link, or a button, among others.

This design principle is closely related to the next one I will mention, "Hierarchy," since the main objective of Emphasis is to create a focal point in the design. This effect is achieved by manipulating elements such as color, shape, and size to make specific parts of a design stand out.  We see emphasis used in most fields of design, including architecture, landscape design, and fashion design.

For example, you want to draw attention toa "call to action" on a web page. You could increase the size of the text and use colors that stand out from the background, emphasizing the call and ensuring visitors don't miss it.

‍

‍

4.   Hierarchy

Information ranked from most important to least important helps the viewer navigate and digest it easily.  The concept of visual hierarchy proposes that the human brain has innate organizational tendencies that "individual structure elements into a coherent and organized whole," especially when processing visual information.

Hierarchy consists of organizing the value of the elements within a design by drawing the eye of the beholder to the most important thing first.  

In design, the hierarchy is used to: Add structure, Create visual organization, Create direction, Add emphasis.

 Several visual tricks help to plot the correct flow path:

1. Size and scale. The larger an item is, the more likely a viewer will see it. Doing something smaller can reduce its importance and put the emphasis elsewhere.
2. Color and contrast. Use bright colors to make certain elements or information standout. A splash of color makes a big difference.
3. Sources. Use different fonts and stylizations such as italics and bold to draw the eye and move the text higher or lower in the hierarchy.
4. Negative space. White space gives an element of breathing room and makes a central element stand out.

Establishing a clear visual hierarchy is important because it holds a design together. If used effectively, hierarchy can make a complex message simple.

5.   Proximity

Proximity indicates that elements are connected or have a relationship with each other and become an optical unit that helps organize or give structure to a design. The principle of proximity ensures that related design elements are placed together. Any unrelated parts must be separated.

Negative space is good. Don't be afraid to group related items together and use large areas of space to add organization and structure to the design.

‍

Using varying amounts of negative space to join or separate elements is critical to communicating meaningful groupings. An example of this is the article you are reading. Each design principle is separated from the next using a greater amount of negative space between each principle relative to the negative space used between each paragraph within the explanation of the principles.

This is because taking advantage of proximity to create influential groups is reflected even when presenting basic text content: sentences are grouped into paragraphs separated above and below by negative spaces.

A typical mistake some beginner designers make is scattering the elements throughout the page to ensure that "the gaps" are filled. This often results in poor proximity, as related components need to be grouped together, making it easier for the viewer to determine the relationships and connections of the information. Feel free to group related items and use large space areas to add organization and structure to the design.

‍

6.   Alignment

One of the most straightforward principles to understand is alignment. Alignment is the arrangement of elements on a page that prevents them from being a complete mess. Aligning elements create a visual connection between them and order the design. Without alignment, the elements seem to have no sense of direction and crumble. It's essential to incorporate this principle into your design constantly. 

Alignment is the placement of visual elements to align in a composition. In design, we use alignment to organize elements, to create structure, and next to proximity, to create connections between elements, obtaining a clear result. Usually, alignment is an invisible line with which elements are aligned, but it can also be physically insinuated.Alignment can be used to achieve a particular appearance.

In the design, there are two principles of alignment: edge alignment and center alignment.

Border alignment

As the name suggests, border alignment refers to content placement on any page or canvas edges. Everything stays on the edge whether the elements are placed on the page's right, left, top, or bottom. It is called horizontal alignment if the border alignment arranges the elements to the left or right. Still, if the elements are placed on the top or bottom edge, it is called vertical alignment.

Center alignment

This second type of alignment places the content on the imaginary center line. Let's take an example of center-aligned text. Each text may have a different width, but each is placed right in the center of the page.The same rule applies to all elements in the design. The funny thing is, if the imaginary central line runs from top to bottom, we get the horizontal alignment. Similarly, our content is aligned vertically if the center line runs along the horizontal plane from side to side.

‍

‍

7.   Repetition

As you may have already guessed, repetition refers to when an element is repeated throughout a design. It could be anything from using a particular font color to adding a repetitive pattern to a social media post to a social media post to a social media post (see I did?).

Repetition makes the designs visually exciting and cohesive. It also creates a sense of consistency by using a repetitive motif that the viewer comes to expect. This makes it particularly useful when creating your distinctive brand identity.

Brand identity is the visible element of your brand. It distinguishes your company from millions of others, so when people see your designs, they immediately know it's your business. Every successful business uses repetition.Why do we equate the blue can with Pepsi? Because these images were repeated so often, they became synonymous with the brands they represent over time.

So, while repetition can only help you make a sweet wallpaper for your iPhone, it's a crucial tool for any business looking to build a visual identity and brand recognition.

‍

8.   Rhythm

In design, rhythm has nothing to do with how you move your hips. Don't worry; you can leave your dancing shoes at home.  Rhythm in design refers to a relationship between the elements that create a sense of harmony.

It's about giving your composition a sense of action and movement. Instead of letting the viewer's eye settle to a focal point, the rhythm encourages viewers to move their eyes through the entire piece, following the shapes naturally. It is something that is reflected in nature and works of art.

There are three different types of rhythm:

1. Regular rhythm: the elements are repeated precisely in an evenly spaced arrangement.
2. Fluid rhythm: movement is suggested through the repetition of organic forms or the irregular repetition of repeated elements.
3. Progressive rhythm: a sequence is created in which the elements are slightly changed each time they are repeated.

It is important that you realize how we are uniting the design principles in a fluid and natural way. Creating "Emphasis"and "Hierarchy" correctly results in a design with Rhythm. I repeat:

Instead of letting the viewer's eye settle to a focal point, the rhythm encourages viewers to move their eyes through the entire piece, following the shapes naturally.

One of my favorite examples of rhythm is in Impressionism's "Starry Nights" by the famous post-Impressionist, Vincent Van Gogh. Violent brush strokes help present unstable and dynamic changes in the rhythm of their emotions. Now, I don't pretend this article will turn you into Van Gogh. But I hope you can see how the rhythm works to set a tone, create a feeling, and make the interaction with a design an active experience.

‍

9.   Movement

When we think of movement, we think of a dog running or a Ferrari roaring on the highway. But in design, it's not just what you look at; it's how you see it.  Movement shows action and creates a sense of direction within a composition. It also serves asa guide for directing the eye from one element to another.

A good designer can guide the viewer by using lines, borders, shapes, and colors to create focal points and make objects look a certain way.

The visual journey can control the progression of the viewer's eyes in and around the composition. For example, the eye will travel along a real path, such as a solid or dotted line. It will move along more subtle paths, such as from large to smaller elements, from dark elements to lighter elements, from unusual color to color non-color to usual shapes.

Keep in mind that simplicity is vital.Using more than one movement technique in a composition can confuse the viewers.

‍

10.   Unity

It is no coincidence that Unity is last on the list. The reason: it only happens when all the elements within a design coexist to form a holistic experience pleasing to the eye.

Unity can be interpreted in two ways:

• ‍Conceptual Unity. The act of combining things for the convenience of the user. It is best achieved by thinking about content and function. For example, if, on a website, the content or functionality of one of its pages can be unified with yet another page, this reduces the number of interactions the user requires to fulfill their goal. Or in the case of a poster for an event, where you must make sure that all the information about the event is present in the poster.Can you imagine that the date and time are not there? Conceptual unity requires that related actions be grouped naturally and forward-looking.
• ‍Visual Unity.It is best described as harmony. A design principle in its own right is how the different elements of a work of art or design come together and create a sense of wholeness.

Visual unity adds order and makes a piece feel like a coherent whole rather than a messy combination of individual parts that exist on the same page.

To achieve unity, you need to keep three things in mind: whether the elements you've used have a good reason to be there, whether they work together, and whether the message or concept you're trying to display is clearly communicated.

‍

conclusion

These ten basic design principles can inspire you to take your creative work to the next level. No matter what you're designing, from a logo to a website, if you take the time to learn and apply these concepts, you'll be on your way to becoming a better designer.

Remember that these design principles do not work in isolation or independently. The combination of them in a coherent way gives you the ideal result. Design is constantly evolving, so it's crucial that you're always researching and learning what other designers are doing and thinking about how you can apply their techniques to your work.

Now, all that's left is to put on your creative cap and get to work. Happy creating!