[row] [col span=”4″ span__sm=”12″] [ux_html label=”Blog Notes”]
Write icons created by Freepik - Flaticon 952 word length
Time to study icons created by Andrean Prabowo - Flaticon 5-6 minute reading time
Copywriting icons created by Freepik - Flaticon Us & Jasper.ai wrote this
[/ux_html] [/col] [col span=”8″ span__sm=”12″] [scroll_to title=”top” bullet=”false”]

Layout Theory in Design: How to Arrange Visual Elements for Maximum Effect

The theory behind layout design is that the human brain makes sense of the world by understanding how objects are arranged in space. When we see layout designs that are well-organized and follow some simple rules, it makes it easier for our brains to understand what we’re looking at. In this, our ‘short article series’ we aim to inject some real-world knowledge into your project so here we go.


 

Introduction

Layout design is the process of arranging visual elements – like text, images, and shapes – on a given page. Clearly important for any project from an Ad to a presentation that needs to convey a message through eye-catching visuals, like magazine layouts, website design, and advertisements.


 

Five Layout Principles

The key concept of layout theory comes from Gestalt psychology; a 1920s design movement that’s still influential today (read more about it here). The main idea is that the brain perceives objects as a whole, rather than as a collection of individual parts. We’re pretty sure Aristotle wrote about something similar too.

gestalt

This image is from a fantastic article over at UX Planet.

There are five basic layout design principles that you can follow to create designs that are easy for people to understand.

  1. Similarity: We tend to group together objects that look similar. This is why you’ll often see visual elements arranged in a grid – it’s an easy way to create groups of similar items.
  2. Proximity: Objects that are close together are perceived as being related. So if you want people to understand that two things are related, place them close to each other.
  3. Continuation: The brain likes to follow lines and curves. You can use this principle to lead the eye around the design by using lines, shapes, and color.
  4. Closure: We tend to see objects as being complete even when they’re not. This is why you’ll often see designers using shapes to create a sense of closure – it tricks our brains into seeing something as being complete even when it’s not.
  5. Order: We tend to perceive things as being in a certain order. This is why you’ll often see visual elements arranged from left to right, or top to bottom.

Bonus 6. Alignment: Our brains like things that are in order, so we tend to perceive objects that are aligned as being more related and organised than those that are not. By aligning visual elements, you can create a sense of harmony and balance in your design. Remember the red margin you had to make in your work book at school.

▲ BACK TO TOP


 

The Rule of Thirds

Hour 1 of day 1 of week 1 of Design School, we all learn the ‘rule of thirds’. All creatives use this within their creative industries and it’s easy to see in photography as all of our phones can turn this on in settings. The rule of thirds is a layout design principle that suggests that an image should be divided into thirds, both horizontally and vertically, so that there are nine equal parts. The theory behind the rule of thirds is that the human eye naturally gravitates to intersections or points of interest.

adgenix rule of thirds

▲ BACK TO TOP


 

The Golden Ratio

But… a secret weapon for pro-designers is the ‘golden ratio’. The golden ratio is a mathematical proportion of 1.618 found in nature that has been used by artists and designers in geometry, art, architectures for centuries. You might have heard this in Maths class as Phi.

Φ
Phi (/faɪ/; uppercase Φ, lowercase φ or ϕ; Ancient Greek: ϕεῖ pheî [pʰéî̯]; Modern Greek: φι fi [fi]) is the 21st letter of the Greek alphabet.
 
And once you see it in Art & Design, you can’t unsee it. It’s literally everywhere and we use it in everything. We use this in our templates, blocking in a layout, we even use it in our typography when we create heirarchy.
adgenix typography heirarchy

The Fibonacchi Sequence

 
The Fibonacchi Sequence is another secret weapon in a designers tool box. It is a sequence of numbers. The next number is found by adding the two numbers before it: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, …
 
When we make squares with these widths, we get a spiral like below. We often lay this over our designs when we’re getting more serious about the finished art.

adgenix the golden ratio

▲ BACK TO TOP

Here’s a good video on working with the Fibonacci Grid in a layout:

[ux_html label=”Fibonacchi Sequence Video”]

[/ux_html]

Blocking

I have personally received quick sketches on a napkin over a business lunch which later turned into huge projects. One of the first tasks I set myself is creating the ultimate brief. We sculpt and massage the brief which underpins the rest of the project.

We create mood boards and gather inspiration & ideas. We then quickly set to sketching ideas, speedily invent faux-styles and mock up a layout just for sh*ts & giggles. And the way I do a rapid protoype is by using ‘blocking’.

adgenix blocking

▲ BACK TO TOP


 

The Grid

Blocking out your content starts with using ‘the grid’ whether it’s in portrait or landscape. I split the page into thirds both horizontally and vertically. Place the focal point where the lines intersect. And use information hierarchy to block out where all the design elements will go on a page.

the grid port

▲ BACK TO TOP


 

Winding Up

By following the rule of thirds, you will improve the balance and composition within your layout designs giving a more polished look overall. And it’s easy!

Thanks for reading and I hope this short article was helpful. Keep reading.

Here’s a bonus help video below.

[ux_html label=”Principles Video”]

[/ux_html] [gap height=”40px”]

[ux_html label=”Layout & Composition Video”]

[/ux_html] [/col] [/row]