Design elements and principles made clear, easy and simple

Design elements and principles are the tools used to achieve a good final composition that conveys your message clearly.

These days, there’s no shortage of design tools for non-designers. However, knowing how to use Canva or Snappa won’t make you a designer. And I am not suggesting that you should become one! You have your business to run.

So I’d like to help you understand the basics of how designers put together a satisfactory design.

Let’s use a culinary example to explain how design elements and principles work together. Simply put: a finished design is the final dish a chef puts on the table. Design elements are the ingredients of the dish, while the principles are the recipe – or the style of the recipe.

You could also say that the elements are the units, while the principles are the rules that make the units play together nicely in space.

When you create social banners, graphics and other images for your blog or website you are going to find it really useful to have an arsenal of tools at your disposal, and to have at least an idea of how to use them.

With practice, you will find it easier and easier to create designs that truly express your message and your brand.

Design elements and principles: definitions.

The definition of design elements and principles varies quite a bit according to who you ask. I think it’s fine that this categorisation is fluid. I don’t think there’s a definitive word on it.

I have thought about which design elements and principles are in my arsenal of tools for a while (years). On this occasion, I finally settled on this list of design elements:

  • Line
  • Shape
  • Size
  • Pattern/ Texture
  • Value (i.e. light and dark)
  • Space

Then you also have

  • Colour
  • Typography
  • Images

which are more complex elements, but still elements rather than principles. They deserve their own post though, so  you won’t find them in this one.

Design elements, I’ll remind you, are the components of a design. Design principles are the rules. Neither live in isolation. Design elements and principles need one another.

Line

The simplest design element. And yet, so many faces to it!

A line can be thick or thin; it can have a direction, an angle; it can be used to guide the eyes of the person who’s looking at it to a specific point and for a specific purpose.

A line has many functions:

  • it defines shapes and edges, creating patterns, images and letters
  • it is essential to organising a composition
  • it establishes boundaries and defines areas
  • it leads the eye and the vision.

A line can be strong, delicate, hesitant, vigorous, broken, dotted, textured, regular, changing, and created with a variety of implements. 

This article on Design Shack is an excellent compendium of how to use design’s humblest element, the line. This is how designers do it! Precious advice for non-designers on how to spice their Canva designs with a line or two.

Design elements and principles. Design based on lines, by Tom Crabtree, on a yellow courier bag.
Great example of a design based on line, by Tom Crabtree. The lines on this bike courier bag lead the eye towards the top of the bag. They also create a clever 3D effect with the curves.

Shape

Shapes can be geometrical or organic. Both types are a two-dimensional outline, which means you can measure it by height and width (not by depth). In a word, shapes are flat: closed paths delineating an area.

A shape can be created by lines or by color, tone or texture. Geometrical, basic shapes can be squares, circles or triangles, with precise angles and curves and measurable angles. 

Organic shapes are generally not rigid like geometric shapes; they are usually curvilinear, like the shapes found in nature, and as such they are irregular and more difficult to measure.

An example of this type of organic shape is a leaf, for instance, a pebble made smooth by the sea, a piece of drift wood, or the shape of an animal. See the example in Jo Walker’s lovely book cover below. 

Cover of Idiopathy by Sam Byers. Design by Jo Walker.
An example of organic shapes used in a book cover design by Jo Walker.

Organic shapes are in fact usually associated with shapes found in nature, although these can be extremely regular, if you think of the Fibonacci sequence in a shell or in a romanesco cabbage.

Shape can also trigger instant recognition, or evoke an atmosphere.

Hard angles and spikes communicate something that’s cold, even dangerous: curved shapes are more warm and welcoming.

These are important details to bear in mind when choosing a shape for your designs. Don’t go spiky if you want to give out warmth. Go curvy and cuddly.

Design elements and principles. Cover of the book The Metaphysics of Ping Pong. Design by Stephen Parker (Yellow Jersey)
The best designs are the simplest. This great book cover by Stephen Parker (Yellow Jersey) depicts the title of the book (The Metaphysics of Ping Pong) with beautiful simplicity. Remember this in your designs: keep it simple!

Size

The size of an element in a graphic design composition can be very important: it can make an element shout, or whisper.

Combined with another element, for example  colour, it can communicate very effectively which the focus point should be.

Size is also useful to organise and create visual hierarchy.

Design elements and principles. Newspaper title 'Rape is a violent crime'
There is no doubt that the title of this article is being shouted at the reader. The size (and colour) of the typography makes sure that it’s noticed.

Pattern and texture

A pattern made of curvy lines

Patterns are made of repetition. They are shapes, or more often compounds of shapes that repeat regularly over a surface, often following a grid. Patterns are a very useful device to create order, organisation, association and consistency.

With patterns, the viewer expects and anticipates a sequence. So if you create a pattern, and then break it, you will definitely capture your viewer’s attention.

Patterns can also help to create texture in a flat visual environment. 

Design elements and principles. Cover of the book Leaving the Sea by Ben Marcus, designed by Peter Mendelsund.
This book cover designed by Peter Mendelsund creates a pattern, and then breaks it: the tags with the title of the book and author, seemingly drowning in the waves, are a great visual device.

Texture is about making the 2D design environment tactile and adding depth to it, for instance by adding embossing or stamping, or engraving, to a piece of print.

Scans of actual physical textures added to a photo or image can also create the visual illusion of texture, as perfectly demonstrated by the book cover above by Peter Mendelsund. The cover image adds depth to the flat surface of the book cover by using paper cutouts. 

Value

Value is simply the level of luminosity, i.e. lightness or darkness of a colour: the amount of light present in a colour.  

When used as a design element in a composition, it can be most useful for differentiating elements and above all for creating contrast. Two colours with similar value create little contrast. Two colours with very different value create stark contrast. 

Differences in value can also create a sense of depth.

Value is extremely useful when designing for accessibility: a strong differentiation in value works for colour-blind people, as well as people who can see colour. If you are concerned about accessibility (and you probably should be) you should always check that your designs work in greyscale, as well as colour. 

Book cover by Jo walker of the book The Grass is Singing by Doris Lessing
This book cover by the very talented Jo Walker uses value to create great contrast between the two sides. Dark values are normally ‘heavier’ than lighter ones, so the title of the book is placed on the white.

Space

Not every list of design elements has space on it. Yet it is essential, also because it is the no.1 problem with most designs created by non-designers.

  • Positive space is the space occupied by the object(s) or element(s) in the design.
  • White space is the empty space, or the open space between design elements or objects, such as a background.

Usually non-designers feel need to occupy all available space, or to space things in a way that does not help the eye to grasp the message. I have three main recommendations for you:

  1. Identify the main elements in your design, and leave enough space between them.
  2. Don’t be afraid of white space. You don’t need to cover every single inch of your design.
  3. Make sure that your type is reasonably spaced. Don’t leave too much space, or too little, in between lines of type.
So much space in this magazine spread! Look how the space really is an essential element of the design. I have been unable to find the source for this so unfortunately I don’t know who to credit for this brilliant design.

 

Design principles

Design elements by themselves are not enough, of course. You also need guidance and help when putting them together in a composition. This is what design principles are for: they provide rules and guidance on how to put together your design elements on the page.

Just like with design elements, the list of design principles usually varies depending on who you ask. With me, it can vary depending on how much time I spend thinking about it. Today, this is my list:

  • Visual Hierarchy (achieved through to Focus/Emphasis, Contrast, Isolation, Scale and Placement)
  • Balance (Symmetry/ asymmetry)
  • Movement
  • Rhythm & repetition
  • Unity
  • Alignment
  • Proximity

No designer sits down and thinks: I will use these specific design principles in this project. A well-considered composition will always end up using more than one design principle working harmoniously within the composition.

Designers end up using principles instinctively: non-designers will need to remind themselves.

There are many more design principles and rules than the ones I’ve mentioned here, but I don’t want to make you cry. These are the basics ones that you need to take into consideration when creating your social media graphics or pages for your website.

Visual hierarchy

Visual hierarchy is the arrangement of all the elements in a design. It’s the no.1 thing to consider when creating a design.

Visual hierarchy organises information and guides the viewer by creating dominant and subordinate elements. 

The ABC of hierarchy is very simple:

A. Where do you want the viewer to look first?

B: Where do you want the viewer to look second?

C: Where do you want the viewer to look third?

And so on.

There are various ways of establishing visual hierarchy. Let’s have a look at them.

Establishing visual hierarchy: the focal point.

Also called emphasis, the focal point leads the viewers’ eyes to the most important element in your composition. It’s the dominant story, the centrepiece of your design.

You need one focal point– but not two. 

If you give emphasis to all elements in a design, you have given it to none of them; you will just end up with visual chaos (unless you are a shit-hot designer and you really, really know what you are doing). 

This advert has a very clear focal point.

Establishing visual hierarchy: contrast.

Contrast draws the attention by creating a difference. It establishes boundaries between the elements.

Contrast highlights importance and information, it creates connection as well as separation.

You can achieve meaningful contrast by using a number of design elements: colour for instance, or size, or value.

Avant-Garde magazine, 1967: call for entries on a poster contest with the topic 'No More War'. Visual hierarchy achieved by contrast of colour and size.
Avant-Garde magazine, 1967: call for entries on a poster contest with the topic ‘No More War’. Visual hierarchy achieved by contrast of colour and size.

Establishing visual hierarchy: isolation, scale and placement.

When you isolate an element you draw attention to it. The size of elements can draw attention to them. Small elements can also draw attention when contrast is used.

Just so that you know: the eye naturally looks first at the foreground, top-left corner or centre of a composition. So you might want to put your message to the top-left, or centre. 

Isolating a shape focuses attention on it (focused attention = more visual weight). Please note that a focal point usually carries a great amount of visual weight and must be counterbalanced accordingly with other elements in a composition.

Balance

Balance is the stability created by an even distribution of visual weight. An element balances an opposite element. A balanced design creates visual harmony.

There are many visual factors that contribute towards a well-balanced composition. 

Symmetrical balance has equal distribution of weight along a central axis.

Balance achieved with a centred design, i.e. elements distributed along the central axis, with an equal distribution of weight. By yours truly, Piccia Neri.

However, a balanced design can also be asymmetrical, i.e. the weight and counterweight are not distributed along a central axis.

You might choose to have more weight on one side than the other, for instance. You may even decide to create an unbalanced design in order to trigger a feeling of instability in the viewer, if that’s the aim of your design. However, if you are a beginner it’s perhaps safer to avoid this.

Asymmetrical balance tends to be more visually exciting, or at least more visually interesting, than symmetrical balance.

Remember that  positive space is visually heavier than white space. So a lot of filled space requires balancing amounts of empty space.

Dark value is visually heavier than light value. So a layout with a lot of dark tones requires balancing amounts of light tones.

Movement and flow

Good design controls the eye’s journey through the composition. That’s why movement is an important principle to consider. 

In very simple words: with movement and flow you give your viewers a path to follow through your design. You can achieve this via different visual devices.

Different kinds of linear movement communicate different kinds of messages. For instance, solid vertical lines, such as trees or a cityscape, communicate stability as well as strength. Diagonal lines are dynamic and exciting. Two converging diagonal lines communicate distance.

The bottom line for movement and flow is that you want to move the eye across the layout not only to convey information, but also to evoke emotion. So be strategic about how you do it. It has to make sense!

This spread by the legendary designer and typographer Herb Lubalin leads the eye of the viewer on a clear path across the page.

Rhythm and repetition

A constant repetition or a pattern of elements can create rhythm in a design.

Rhythm is a sequence of visual elements at regular intervals.

Just like in music, rhythm  is a very important device when planning a design. It’s another way of getting the eye to move through the page.

As we said when talking about elements, with patterns the eye expects a sequence, so it will automatically follow the repetition. A strong visual rhythm aids in creating stability.

There are many ways of achieving rhythm in an image:

  • A sequence of repeated visual elements at regular intervals creates a visual rhythm. 
  • Repeating a colour can also create rhythmic movement.
  • Grouping several photos establishes a rhythm.
  • Inserting a variation within the repetition is also very important to establishing an effective rhythm within your designs.
A masterpiece of simplicity by the legendary 1960s designer Jacqueline Casey. Rhythm is achieved by repeating the visual element of the stylised coffee cup. It is also broken by the cups ‘melting’ into the white space at the bottom right.

Unity

Unity is the goal towards which all designs should aspire. Your designs will achieve unity when all the elements you’ve used, however different and varied, work together harmoniously and convey a cohesive message.

Simple! Or, not so much…

The main image for the 24th LLGFF at the British Film Institute in London is a jumble of disparate elements which somehow manage to achieve visual unity. By Piccia Neri.

 

Alignment

The principle of alignment is another principle that gets often overlooked by non-designers.

It’s really important that you align the elements within your designs. Straight lines don’t exist in nature: this is why alignment creates a sense of human-made order that’s soothing to the soul.

All design programs have tools that help you align the edges of your elements. Use them! You can align to the edges or to the centre of your elements. The choice depends on the design as a whole.

Good alignment aids organisation and visual hierarchy, and avoids messy results.

This poster by Shahir Zag pisses me off and gives me a migraine.

Proximity

Proximity is when you group similar elements together. By doing this, you also  create enough space between them (remember space as a design element?). This design principle is also often neglected by non-designers. Often, groups of elements with similar meanings are not differentiated, or not enough, which makes it more difficult to understand the message.

A good application of the principle of proximity means that your content is clearly organised.

Applying proximity does not only mean that your elements should be physically close to one another in space. You can create proximity also by using the same typography, or size, or colour. For instance, you create proximity by using the same font size and colour for all the chapter headings in a book, even though they are not placed near one another.

Conclusions

There is much more to design, and to design elements and principles, of course. And of course, no one is expecting a non-designer to come to grips with all this in one blog post.

But one thing is for sure: when in doubt about which or how many design elements and principles to use, keep it simple.

Most of the designs I have chosen as examples are miracles of simplicity. This is probably the most valuable lesson a non-designer can learn. I observe you a lot, and notice that the recurring habit is to over-complicate your message. Don’t try to say too much: say one thing only, but say it well.

I look forward to your comments and questions – fire out please.

And by the way: have you joined the Facebook group yet? We’re having themed weeks, and it’s a lot of fun. Tons of helpful content put out on a daily basis. Next week: Best web hosts, and why. Can’t wait to see you in there.

Leave a Comment