Grid Theory for Website Design
Grid systems form the foundation for many pieces of design work but how do we use grid theory in website design?
Whether you create online website designs or work in print creations, chances are you’ll have used a grid at some point in your design work.
Grids often form the foundations for visual designs and at KIJO, our experts use grid theory and grid systems in web designs that we create for our clients.
In this article, we’ll take a look at grid theory for web design and how grids can help to create appealing and attractive websites.
What is Grid Theory?
When you first begin your web design, it can feel a little overwhelming. When you’ve got a blank page staring back at you, you might wonder where to begin when it comes to placing content and images on the page.
That’s where a grid comes in. A grid can help to divide up your page and prevents you from placing content in random places. Instead, a grid will pinpoint exactly where you should place elements such as logos and images, speeding up the design process and ensuring a visually appealing result.
Grid theory refers to the concept of using a grid, usually made up of a series of intersecting straight or curved lines, to structure your content.
The theory focuses on allowing designers to create designs that are balanced and in proportion, helping to ensure they are appealing to the human eye.
A Brief History of Grid Theory
Using grids in design isn’t a new concept, in fact it dates back hundreds of years. If we look at how old manuscripts are laid out, we can see that they follow a grid layout to present writing and drawings on the page.
Thanks to the Industrial Revolution which saw newspapers and printed press become available to the masses, grid designs became even more popular. Newspapers and magazines all followed a grid layout.
Various designers of the 21st Century also used grid theory to base their designs around, including Jan Tschichold who opted for grid layouts with plenty of white space.
The Purpose of Grid Theory
So why do we need to use grids in design?
When it comes to designing websites, grid theory has many purposes including:
- Grids give websites shape and hierarchy, helping to create a great user experience.
- Grids help to create a clear sense of navigation for users.
- Grids help to ensure web designs are responsive. A grid-based layout allows designs to easily adjust to fit on different screen sizes.
- Grid theory helps your designs to appear well thought-out and professional as opposed to something that you’ve just thrown together.
Types of Grid Systems
When it comes to using grid systems in design, there are five main types of grid that web designers can opt for.
Baseline Grid
A baseline grid focuses on where the text sits within your design to ensure readers can comfortably read your content. Mainly used in print designs such as newspapers and magazines, it’s still an important principle for web designers to consider.
A baseline grid essentially refers to the spacing between each baseline of text. If you have a lot of text to include on a webpage, using a baseline grid ensures you create a legible balance between text and white space.
Manuscript Grid
A manuscript grid is used for all printed text documents such as books and magazines. It’s a single column grid structure that’s simple and acts as a bounding box for any text on the page.
A manuscript grid takes the form of a large rectangle, within which all of the content, usually text, sits.
Column Grid
A column grid is exactly what it sounds like, a grid system made up of multiple vertical columns. With website designs you can have anywhere between 2-16 columns that span the whole width of the landing page.
Designers can then place content and imagery into single columns or spread content across multiple columns. The space in between the columns, called the gutters, should be equal.
Column grids don’t have to be symmetrical, in fact one of the most popular uses for a column grid takes an asymmetrical form. Here, the main content of the webpage spans across two-thirds of the columns whilst the secondary content, such as a sidebar, fills the rest.
Modular Grid
A modular grid follows the same basic premise as a column grid but also adds rows into the equation.
Modular grids are popular in web design and one of their most common uses is in product listings. Many websites use a modular grid to display rows of products in a clear and easy to navigate way to users.
Hierarchical Grid
Hierarchical grids are the most common grid systems used in web design. A hierarchical grid helps designers to display content on a webpage in order of importance, with the most important content at the top.
Hierarchical grids are usually created by placing the most important content on the page first and then creating a grid around it, which means this type of grid system can be a little more flexible but still features the common columns and rows.
Elements of Grids
There are various elements that make up the grid systems we use in website design. Below we’ve listed some of the key terms web designers need to get to grips with.
Unit
Units are the individual elements that make up a grid layout. For example, in a column grid that’s divided into 10, each section is a unit meaning the grid is made up of 10 units.
Gutter
Gutters are the spaces between the elements within your grid. Often in a website design these will be made up of white space that gives your design some much needed breathing room and prevents a web page from looking overcrowded.
Column
Columns are created by combining units and gutters together. For example, you may have 12 units and 12 gutters that you divide up to create 3 asymmetrical columns to place your content in. This then allows you to place your content strategically on the page, adding your most important content to the largest column.
Field
Columns of content can join together to form fields, horizontal batches of content on a web page. Usually, as you scroll down a web page you will discover new fields of content within the hierarchy of the grid design.
Examples of Grid Theory in Practice
So, let’s take a look at some of the different types of grid theory in practice.
Twelve Unit Grid
A twelve unit grid is where your page is divided up into, you guessed it, twelve units. Twelve unit grids are one of the most flexible grid systems as you can then divide them up into four, three or six column grids and make them either symmetrical or asymmetrical.
Four Column Grid
A four column grid is a simple grid system that’s symmetrical and allows you to balance your content across the page.
The simplicity of a four column grid however can make web pages look a little boring and it can be harder to determine a hierarchy within your content.
Three Column Grid
A three column grid is made up of three equal columns that each contain four units. Again this is a symmetrical grid system that allows you to display your content in an engaging and visually appealing way.
Six Column Grid
Content-heavy websites may opt to use a six column grid, where each column is made up of just 2 units. This grid system allows you to fit a vast amount of content onto the page without overcrowding it or overwhelming users.
Grid Systems in Web Design
Now that you’ve got to grips with what a grid system is and how to use a grid system in design, you might be ready to try it for yourself. If so, the KIJO experts have these top tips for you:
The grid should be the first thing you think about. Create the grid for your landing page first and then start adding your content in. You can replicate the grid for the rest of your landing pages too.
You can break the grid if you need to. Just because you’re using a grid as the foundations of your design doesn’t mean you can’t break it. If you think content will look better displayed in a way that breaks the grid’s structure then go for it!
Remember to make use of white space. You don’t need to fill every single bit of space on a web page. In fact, white space or negative space is a key design feature. White space helps to stop your design feeling overwhelming and ensures a good user experience.
Final Thoughts
As you can see, using grid theory in web designs comes with a lot of benefits including creating a balanced and beautiful web page. The theory behind using grid systems in design dates back centuries and chances are, grid designs are all around you, you just might not have realised it.
The KIJO team is made up of web design experts who use key concepts such as grid theory to help form the foundations of our winning client designs.
If you’re interested in finding out more about KIJO’s work and web design services, be sure to get in touch with the team today.
Posted on by Jordan Thompson
