Good design is a science. It follows a set of rules.
All you need to do is just follow them and you can create something awesome.
Let’s look at Layout in detail in this post.
Layout is how each element is placed on a page. For example, take a look at the design below:
It looks like the elements such as the Heading, paragraph text, and buttons are just thrown in on the page. They don’t seem to be in order.
For example, let’s draw a vertical line where the text, ‘First Missionary Baptist Church’ starts.
Do you find that the text and the buttons below align with the first line? NO.
This makes the page cluttered and unorderly and as a user does not appeal to my eyes.
Now let’s align the elements on the page so that it is against the vertical line.
Do you see how it looks much better already?
This is the concept of Layout.
Now for another example:
Take a look at this layout.
Many elements or in our case, teal square blocks are just scattered on the page and this looks clumsy. Our eye cannot follow any kind of pattern in viewing them and that makes it even harder to visualize the importance of one element over another.
What if we neatly align the elements on the same horizontal and vertical line and then center all of the elements on the page? The result we get will look like this.
Much better isn’t it?
Now that you understand the concept of a clean and neat layout, here are some Layout tips that you can follow in your design.
Alignment is the first step to forming a great layout. When you want to arrange elements on a page, there are a few ways you can do it so that it is easily readable and effortless on the eye.
On a vertical axis,
On a horizontal axis,
Take a look at the graphic below:
The above image explains very clearly how to layout elements on a web page.
When you start aligning elements on a page, you start to see a structure, a grid. A grid is a guideline where you can place elements/content in a structured fashion.
Take a look at the image below.
You can place content neatly inside each box that makes up the grid. This way, your design will look neatly aligned and visually pleasing.
While creating web pages, we use a 12-column grid layout.
See how the elements are neatly aligned about the Gridlines.
Makes a much visually appealing page!
The next most important topic while discussing layout is Visual Hierarchy. This has to do with priority. What do you see on a Web page that grabs your attention FIRST? What if you do not know where to look on a web page?
Consider these three elements on this web page:
Where does your eye go first? Maybe the first thing that you will see is the little girl on the left, but what is the second thing that your eye will be redirected to? Little hard to say, but I’m going to go with the big font heading on the right.
See how it’s very difficult to scan the page when the elements on it do not have a hierarchy!
A good design layout has a proper visual hierarchy. If you want to grab the attention of your users to a certain element on the page, make sure you follow these guidelines.
A very simple trick is to have a Big Element, a medium element, and a small element on the page/section of the page just like in the image below.
Now we have 3 elements in different sizes. So which one do you think grabs your attention first? It is the huge circle!
Then you will look at the medium circle and lastly the smallest circle.
This is how you grab attention to an element - by SIZE.
Another way to grab attention is by providing CONTRAST in design. Take a look at the image below.
Which element do you think will grab your attention first?
Yes, you are right! It is the hot pink circle, even though it is the smallest!!
Because of the contrast, it gets on the background of black. The next one that probably grabs attention is the big pink circle and lastly the grey circle.
So, now, let’s implement this same logic in the first section that we looked at before.
Now you have a clear visual hierarchy on the page. The image of the girl is what your eye will see first, then the big heading, then the subheading, and then you will look at the navigation menu and other elements on the page.
What are optical illusions in design? Let’s learn this from an example.
Take a look at the square and circle. Which do you think is bigger?
Neither! They are both the same size if you look at the width and height of the 2 elements. So why does it feel like the square is bigger than the circle?
That is an Optical Illusion.
Trust your eye! If any element looks smaller than the other in comparison, and even though you see that the actual sizes are the same, you would have to adjust it against the other so that they look the same to your eye.
Similarly, look at the icons in the image. Even though the icons as an image have the same height, you can see that the school icon in the center looks smaller than the rest. So you would have to increase the height on the image to match the rest of the icons.
What is proximity in design? It is the grouping of elements based on their relationship with each other.
For example, take a look at this image.
See how things are spaced so wide apart on the page! This is a bad design layout.
The buttons below the subheading are related to one another. So they should be placed next to each other.
As you have read this article, you would now realize the power of layout in design. Follow these design principles for a great layout.
You've worked hard and now excited to launch. Before you go live, make sure you've tested all aspects!