Learning
Layout Theory
Apr
 |
952 word length |
 |
5-6 minute reading time |
 |
Us & Jasper.ai wrote this |
Layout Theory in Design: How to Arrange Visual Elements for Maximum Effect
Contents
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.
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.
- 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.
- 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.
- 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.
- 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.
- 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.
TThe Rule of Thirds
our 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.
The The Golden Ratio
#8230; 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.
The Fibonacchi Sequence<The Fibonacchi Sequence
AsKe">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.
The Fibonacchi Sequence<The Fibonacchi Sequence
AsKe">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, …
Here’s a good video on working with the Fibonacci Grid in a layout:
Blocking
I have per
Blocking
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’.
The Grid
Blocking out
The Grid
ts 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.
Winding Up
By following t
Winding Up
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.
