Want to create quick and balanced designs? One trick is understanding grid layouts. The importance of grid layouts allows your designs to have a structure.
Since dawn of design, grid layouts have been in use. Look at print publications such as newspapers and magazines - they would make use of it in order to highlight and emphasize copy that needs to stand out. Without a grid the content would be unorganized, mismatched and have no continuity.
Like many fundamentals, the grid based approach is now used in the digital world throughout web and app design. It can improve both the appearance and usability of a website, and will even help make you design quicker and more efficient.
What is grid layout?
A grid layout makes use of columns, rows, and margins to create a harmonious and proportional design. It is an invisible guideline that sets the tone for where to place elements such as text, images, a logo, and even white space.
An untrained person who views your designs may not be able to recognize a grid layout but the invisible guidelines will be easier on the eye and makes your design appear more fluid.
The grid layout provides a lot of benefits to the person creating the design and the person engaging with it. A well thought-out grid layout allows for the source file to be quickly updated while making the end product easy for the audience to scan for information.
Fonts by Google
How grid layout works
It is up to you to create the invisible grid. One grid does not suit all the designs you create. It is not that simple. However, you can base your grid on theories such as the rule of thirds or the golden ratio.
Rule of thirds
The simplest layout is using the 'rule of thirds'. This rule is mostly known as a photography technique in which two horizontal and vertical lines intersect. The intersections are considered to be the focal points. Focal points are what grabs the viewer's attention making the image more pleasing.
Similarly, this rule can be used in your designs. Look at all your elements you have in your design. Think about which element is of greatest importance. Place that element in the intersection to create a focal point.
Golden Ratio
Another method is using the golden ratio. The golden ratio is quite complex mathematically, but in simple (non-maths terms) the golden ratio is all about creating a sense of beauty through harmony and proportion.
In simple mathematical terms, the longer part of the line (a) divided by the shorter part (b) is equal to the sum of the entire line (a + b) divided by the longer part (a) which both equal 1.618...
But how does this create harmony and proportion your design? It's time to create the golden rectangle. Create a square and multiply one side by 1.618 and you get a harmonious rectangle. Applying this theory, you will eventually get this diagram.
Drawing an arch from one corner to the opposite corner you will get the Golden spiral.
Apply this theory to your designs. The instantly recognizable logo design for Pepsi uses a subtle golden ratio, through golden circles. The larger circle is in golden ratio with the not so evident smaller circle.
Pepsi Logo
Pepsi uses the Golden Ratio
This theory can also be applied to web design. Look at the company Innofil 3D website. The layout has many components, however your eye follows the golden spiral quite subtly and leads to the ghost button 'The Factory'.
Innofill3d Website
Innofill3d Website uses the Golden Ratio
Why are grid layouts important
- You have more control and flexibility with your design
- You will become more time efficient
- Content will look more organized
- Your type elements will look more in control - read our article Understanding the hierarchy of text for a better understanding
- Multiple page layouts will be cohesive
- You will enhance the visual hierarchy
- Avoids clutter and encourages white space
- You will begin to learn and understand 'balance'
- You will be able to break the grid - allowing one element to break the grid whilst the other elements look organized may make your design more impactful
Definition of grid layout terms
Creating a grid layout? Here's some terminology that will help you:
- Columns: Vertical lines that create the visual structure of a page layout.
- Gutter: The empty space in between columns that prevents visual elements from overlapping into a different column.
- Margins: The empty space outside the column that normally surrounds the whole page.
- Baseline grid: The invisible line where the bottom part of the letterforms rest.
How to create a grid layout
To create a grid layout, you can sketch the grid using small thumbnails. They should not take long. This way, you will easily understand the relationship between each design element and can quickly create different grid layouts to cater to your design. To make it easier for you, here is a simple way of creating the sketch. Text elements are represented by lines, whilst visual elements use a cross.
Once you have finalized the sketch, you can start the grid layout using software like Photoshop, Illustrator, or Indesign.
Showing the grid
- From the top panel click on View > Show > Grid
- This is a standard template of a grid layout. It is limiting and you won’t be able to create your own grid.
Want to create your own grid?
- From the top panel click on View > Rulers
- Drag from the ruler to create horizontal and vertical guides. You will have to manually create gutters.
- To prevent the grid lines from moving, go back to View > Lock Guides.
Showing the grid
- From the top panel click View > Show Grid
Want to create your own grid?
- Drag from the ruler to create horizontal and vertical guides. You will have to manually create gutters.
- To show the guides, choose View > Guides > Show Guides
- To lock the guides, choose View > Guides > Lock Guides
What's great about Adobe InDesign is it allows you to create a master page, so there is no need for you to create guides for every single page. Here's how you do it:
- To create a margin, go to the top panel and click Layout > Margin and Columns
- To create rows and columns, choose Layout > Create Guides
- Click 'Preview' to see the guidelines.
Always look to follow the grid, but it doesn't hurt to slightly break it for extra impact.
Examples of grid layout
Below are some exemplary designs from DesignCrowd that made use of an imaginary grid layout:
Our last word on grid layout
Using a grid layout helps provide balance and proportion to your designs. It serves as a guide while working on your design and allows you to achieve your desired results faster. Implement this design technique and watch your clientele satisfaction grow.
Additional writing and graphics by Divya Abe.
Want More?
Could use more guidance on killing it at the more technical aspects of design? Never fear, we've got your back:
8 Simple Steps to Convert Hand Drawings into Vectors
How To Turn Your Own Handwriting Into A Font In 8 Simple Stepsn
How To Design A Logo - Expert Designer Guide Part 3, The Importance Of Typography
Written by Jessica Walrack on Thursday, October 13, 2016
Jessica Walrack is a professional freelance writer with a background in sales and marketing. After 7 years in the corporate world, she stepped into the online sphere and has now been freelancing for 4 years. She specializes in helping businesses to create a stellar online experience for their audience in order to build industry authority and increase profitability. In her spare time, Jessica enjoys traveling all over the world with her family.
