Grid systems form the foundation for many pieces of design work. But, how do we use grids and grid theory in website design? What is grid theory?
Whether you create online website designs or work in print creations, chances are you’ll have used grids at some point in your design work. Grids often form the basis of most visual designs. At KIJO, designers utilise grid theory and implement grid systems in the website designs that we create for our clients.
In this article, we’ll take a look at grid systems and grid theory for web design, and analyse how grids can help to create appealing and attractive websites.
Grid theory refers to the concept of using grids, usually made up of a series of intersecting straight or curved lines, to structure your content. Grid theory focuses on allowing designers to create designs that are balanced and in proportion, helping to ensure they are appealing to the human eye.
Using grid systems in design isn’t a new concept. In fact, it dates back hundreds of years. If we look at how ancient 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 and most continue to do so.
Various designers of the 21st Century also used grid theory to base their designs around. Jan Tschichold, a German calligrapher, typographer and book designer, famously opted for grid layouts coupled with plenty of white space. He is widely known for defining the elements of asymmetrical typography, made possible by using grids and grid theory.
So why do we need to use grids in website design? When it comes to designing websites, grid systems have many purposes including:
When it comes to using grid systems in design, there are five main grid types that web designers can look to.
A baseline grid focuses on where the text sits within your design. This ensures readers can comfortably read your content. Baseline grids are mainly used in print designs such as newspapers and magazines, but it’s still an important principle for web designers to consider.
Baseline grids essentially refer 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 grids are 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.
Manuscript grids take the form of a large rectangle, within which all of the content (usually text) sits.
A column grid is exactly what it sounds like. Column grid systems are made up of multiple vertical columns. In website design, 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 though. 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 grids follow the same basic premise as column grids but bring rows into the equation. The modular grid is very popular in website design and one of their most common uses is for product listings. Many websites use a modular grid to display rows of products in a clear and easy-to-navigate way.
Hierarchical grids are the most common grid systems used in website design. A hierarchical grid system helps designers to display content on a webpage in order of importance, with the most important content at the top.
These grids are usually created by placing the most important content on the page first, and then creating a grid around it. This means this type of grid system can be a little more flexible but still features the common columns and rows.
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 know.
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. This means the grid is made up of 10 units.
Gutters are the spaces between the elements within your grid. Often in a website design these will be made up of white space. This gives your design some much needed breathing room and prevents a web page from looking overcrowded.
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.
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.
Let’s take a look at some of the different types of grid theory in practice.
A twelve unit grid is where your page is divided up into twelve units, like website builder Elementor’s blog page here. 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.
A four column grid is a simple grid system that’s symmetrical and allows you to balance your content across the page. However, the simplicity of a four column grid can make web pages look a little boring and it can be harder to determine a hierarchy within your content. They work well in footers though, like ride-hailing service Uber’s website.
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. High-end skincare brand Aesop uses three column grids on their product listing pages.
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. You can examples of a 6 column grid on Airbnb’s site – the online marketplace for short and long-term home stays and experiences.
Now that you’ve got to grips with what grid systems are and how to use grids in design, you might be ready to try it for yourself. Just remember to keep the below in mind:
As you can see, using grids and grid theory in website design comes with a lot of benefits, namely creating a balanced and beautiful web page. The theory behind using grids and grid systems in design dates back centuries. Grid designs are all around us. However, because they’re so present it’s hard to notice them!
We’re specialists in web design and work with grid systems daily. Grids help us form the foundations of our award-winning client designs. If you’re interested in finding out more about KIJO’s work and our website design services, be sure to get in touch with us today.
