Design Elements and Principles

10 min readSep 23, 2022

A design without basis is a plane without a pilot, is not going anywhere.

Have you ever seen any piece of design, that could be print or digital and felt that something is wrong, off, or is communicating a different message than its idea? Most probably that design lacks inappropriate implementation of basic building elements and principles.

Design Elements are the fundamental units of any design that together form a structure in order to convey messages. Elements like point, line, shape, form, texture, color, value, and space; are the various elements that we could find in the composition of any design.

In order to utilize the elements effectively in any design, designers have created some fundamental Principles that bring the elements together into a design to make sense and convey messages. Principles can be taken as rules, rules that could be broken, of course, but you have to know what they are and how to play with them first. The practice doesn’t suggest using all the principles at a time, it depends on the intent or requirements of your design. The way you use the principles determines how successful your design will be.

It’s important to be aware that every single design is composed of Design Elements, just like the bricks of a wall. But to build a wall there should be some rules that make it strong and prevent it from falling. Design Principles are going to be the rules to ensure strength. The way we use them defines whether a design will succeed or not. So now let us go deeper into these concepts.

Free & Discounted Udemy Courses — Explore Now

Design Elements

The design elements were defined by the artist and designer theorist Maitland E. Grave in 1941 as “the materials from which all designs are built”, which could be the point, line, shape, form, texture, color, value, and space. Let's address each one of them.

a. Point is the smallest unit of any graphic or artistic expression, this encourages the mind to think about its position, and offers everything in both imagination and space to draw upon.

b. Line is an element of art defined by a point moving in space, is an element that has more length than thickness, can be unbroken, broken, or implied. A line can be vertical, diagonal, horizontal, and even curved. It can be any width, size, shape, position, direction, interval, or density.

Even though it is basic in form, lines will influence the thoughts and feelings of the viewer, and direct the eye of the spectator into space. Also can group or divide other elements.

c. Shape can be defined as a two-dimensional element that ocupate a determinate area in the space. Every graphic contains shapes, as well as graphics, which could contain other elements, like color, line, texture, and value.

d. In Form, we have a three-dimensional element, it could be geometric (man-made) or natural (organic). It could be measured by height, width, and depth, digitally and physically as well. Mostly created by combining shapes, and it can be enhanced by color or texture.

e. Texture could give the surfaces a tactile look and feel, even if the texture is digital, it can give the illusion of a physical feeling. we can give visual textures to lines, shapes, and forms. They are capable of attracting or detracting the eyes of a viewer.

f. Color can help organize a design and highlight particular areas or actions. Like other elements, it has different characteristics: hue, saturation, and lightness. Playing with these characteristics a color could be more intense or dull (saturation), darker or lighter (lightness also called Value). Because of these characteristics, colors communicate different information and emotions, although it’s important to keep in mind that different cultures have different connotations for each color.

In design, the absence of color is taken as black and white, even though if black and white are colors. It means that color is an element that is not always present in design depending on the intent we can get rid of it.

g. Space is related to the area or real estate that the construction of a design would take. Space concerns a two-dimensional area, but could also give the illusion of a third dimension on a flat surface using shadows, shading, overlap, and sizing.

Same as color, space is not a principle that must be present always in our designs. Yet it’s a good way to add focus or emphasis to elements in your design.

Design Principles

Nowadays we can find a bunch of different articles defining design principles, but there is no standard number set for them. There could definitely be new principles coming as time passes. As design is an evolving and creative practice, there is no definite number of principles but as designers, we should always be mindful about following 6 fundamental principles in order to ensure a successful design.

Here, we’ll try to understand how the proper implementation of them makes the difference.

a. Contrast
It is often the magical key ingredient in making your designs ‘pop’, which is a very common (sometimes frustrating) demand from many design clients. Probably when you think about contrast the first thing in your mind would be color, but the contrast could be brought in different ways, you can play with size and weight also to generate contrast.

Another benefit of contrast is the readability and legibility, which is very important to elements such as text. In the design below we can find multiple applications of contrast through typography, form, and color.

First of all the poster is communicating duality between 2 elements. Also, the use of different colors and font-weight improve the readability of the word “contrast”, This shows that contrast can be used to make your designs visually ‘pop’, and draw attention to certain elements of your design. It’s a basic concept but if executed well, it contributes to a beautiful as well as successful design.

b. Hierarchy
Imagine a design that communicates something in a completely different order than what it should be, the message could be miscommunicated, or even worse, not even understood.

That’s the power of hierarchy, where we, as designers, have to guide or drive our users without them even realizing it. In the above image, the first thing that the eye captures is the red big letters changing completely the way how users read the message, it is a clear example of bad use of the hierarchy. Our designs should communicate the message in the way that we actually expect it to be. Hierarchy sets the way the user will approach the design, giving the starting point where he will put his eyes all the way to the final point where he will steer them.

Hierarchy can be given by size, color, weight, position, and even contrast can be a good tool to improve hierarchy. Now you can see how multiple principles play together to create a good design.

In the above example, The size, color of the 360 and the image is calling the attention first and the direction and position of the objects determine the order of reading. In this case, playing with hierarchy ensures the readability and order of the design message.

c. Balance
The principle Balance refers to the distribution of the weight of the elements in your design. Imagine that your design is a single-leg table with a bunch of objects on top of it, these objects could be the elements that you have to arrange in such a way that the table does not lose its balance, look awkward or fall to one side. The same thing happens in the design as well.

In the image above we can find multiple elements but visually the image has more weight on the right side because of the arrangement of the elements. Although balance doesn’t mean that it should be symmetrical, you can find symmetrical balance when you have the same quality and quantity of elements in both sides of your design or asymmetrical balance when you have a big element in one side of your design and a bunch of small elements in the other side that together give the same visual weight of the big element.

d. Proximity
In the supermarket, you know that you can find any cleaning product in just one spot because all of them are together in the cleaning section. The proximity principle follows this same logic, by arranging similar elements with close proximity in your design.his helps us to organize our design elements and improve focal points in it.

In the above image we can see on the right hand we have a spareness of element that creates clutter and confusion in the design, there is no relation between the elements, instead of on the left hand we have the elements arranged in the way that we can correlate them in two different groups, proximity has the quality to give order and a cleaner look.

In the following example, we can see how the proximity of the information makes the difference between two business cards, in the left hand we have spareness of the information that gives this messy look and feel and it is difficult to know the hierarchy of the information. On the right hand, we have an implementation of proximity, the phone number and the website which are ways to contact this company are grouped, the address and the name of the company that is the ways to approach this company are also grouped, creating a more understandable design.

e. White Space
The presence of design elements makes a significant impact in design and as well as their absence. White space or negative space need not necessarily be white, it could be any color that your background is. White space intends to make your design comfortable for the eye and provides breathing space in your design to reduce clutter or cramps.

In the above comparison, we can see how giving these empty spaces between the elements reduces the weight of the overall composition, making the right image more comfortable to consume than the left one.

In addition, white space can be used to c give the illusion effect to elements with only the silhouette or contours of that element. In the following example, we can see how the designer uses the empty space in this poster to communicate this character embracing someone with long hair only with the impression of a silhouette.

f. Alignment
Alignment is a very important concept that allows us to establish relations between the elements, even though there is no direct correlation between them, alignment provides an invisible line that helps to connect them and guide the eyes. By giving alignments to the components, the viewer has more order and sharpness to interpret the design and can better associate the elements in it.

As you can see in the above image there are 6 principle alignments, right, center, left, top, middle, and bottom. Although alignments could be in relation to the artboard as well other elements. In the example below, we can recognize the different alignments that allow us to correlate each image with their respective plate details in the menu.

We just learned about the six fundamental principles, even though there are more principles that can play on their own or with others along with your design, depending on the intent of your design.

Tips / Best Practices

Think about the intent of your design before applying any principle.
Do your best to not use all the principles at the same time. Play with them depending on the purpose of your design.
Most of the principles have codependencies, understand how they play together to start implementing them.
Principles are like rules that were made to be broken, but you have to understand the rule completely before you break it.
Correlate the principles with the way that you communicate your ideas with others, your design should talk and explain by itself.
It is always good to receive feedback from others to know if you are achieving the design goal.
Practice, practice and keep practicing.

Checklist

Be clear on the goal of your design.
Pick the principles that you think could help your goal.
Break the rules if it is necessary, only if you are clear with what rule you’re breaking and why you are doing that.
Don’t use more than the necessary principles.
Showcase your design to non-designers and ask what they think, that will give you an idea of what your design is saying.
Be open to feedback, sometimes the design just does meet his goal.
Try different approaches with different principles, variations are always welcome.

Quick Question

While designing, which design principles would you apply essentially to something that needs to call attention?

Contrast and Color
Direction and Composition
Symmetry and Balance
Size and Composition

Leave your answer in the comments section below!