Introduction
Grids are one of the most important part that should be considered when designing a website apart from other elements such as colour, typography, graphic or images, etc. This essay will discuss about how are grids used in we design and what are the benefits of using them.
In the first part, I will be talking about brief principle of grids, type of grids, etc. The second part, will be some analysis in using grids of example of websites. For this part, I have chosen to focus on analyzing minimal grid-based websites to start with.
What are grids and why we use them?
There are many things around us are designed by using grid system, including architecture, city/town plan, exterior/interior design, prints (books, magazines, newspaper) and also websites which have become more popular these days.
In terms of web design, grids are a set of vertical and/or horizontal guideline that cross each other to provide a framework for organizing contents and design elements. This grid system is an essential tool for web/graphic designers built to facilitate them to create page layout, giving them a logical pattern/framework for ordering or structuring. Grid system not only provides a rational framework for designers, but also streamlines the design process by making it more easier to align and measure all of elements on the web.
Moreover, using grid reduces the time consuming on developing. For example, if your website has lots of text information in each page, you don’t have to re-design every time that you want to edit pages because you have invisible guideline underneath. Another important thing apart from time consuming on design is grid system adds hierarchy, harmony to the presentation of information. It gives users an aesthetic visual pleasing when using the site. Not just in website, many publications such as magazine, newspapers, etc. also require grids. It provides page-to-page continuity.
When people come to website, they always prefer an organized information of visual elements including columns of text, images, illustration and so on. Using grid allows designers to create the consistency in their design as well. Many websites contain loads of information and many pages. To use grid gives designers to concern about column width, or the position of each element. People always expect that when they are on the website, they prefer to feel the harmonious not just the look of it. Therefore when they change pages, the same column width, which is organized by grids, can create page-to-page consistency to the site. Moreover, grids can unify the dissimilar elements in the design. In website, there are lots of different shape of elements including square, triangle, circle, etc. Grid is a guide to put the variety of elements onto design.
“The grid makes it possible to bring all the elements of design — type characters, photography, drawing and colour — into a formal relationship to each other; that is to say, the grid system is a means to introducing order into a design. A deliberately composed design has a clearer, more neatly arranged and more successful effect than an advertisement put together at random.”
Josef Müller Brockmann
(The Graphic Artist and His Design Problems)
Type of Grid
Originally, grid system found in print design (e.g. newspaper, magazines). There are many design program provides this kind of tool for designers to be an aid in creating a basic web structure when starting to design something. For example, Photoshop, Illustrator, Indesign, etc. where you can create your own grids. You can divide the blank space by yourself so it can be as simple or as complex as you want.
In terms of web design, there are many variation of grids used in grid-based websites. Most web design projects are based on 4 main types of grid.
1) Manuscript Grid
This is the simplest kind of grid, containing a dingle column, usually used for a long text document such as novels. This type of grid shows a very clean style, simple structure to the page layout.
Layout structure and web example of manuscript grid
2) Column Grid
Column grid contains numbers of columns for placing text and images. Columns can be dependent on each other, independent on from each other and crossed over by design element. The width of each column should relate to the side of the text and other design elements in the column to accommodate a comfortable measure of legibility and readability.
Layout structure and web example of column grid
3) Modular Grid
Modular grid is similar to column grid with more complicated structure by adding horizontal divisions. This type of grid allows designers to present more complex information with better precision. Modular grid can be formed by horizontal and vertical units as much as you want for organizing loads of information. Websites that are using modular grid system, most of them are gallery websites, such as portfolio websites, online shop websites that show lots of products. In my opinion, grid quite suit this kind of website in order to showcase images efficiently.
Layout structure and web example of modular grid
4) Hierarchy Grid
Hierarchy grid is commonly found on many websites. It allows designers to organize contents on the web by considering on importance of each design element. Generally, it is used when other types of grid doesn’t fit the design. Hierarchy grid offers variety of ways to create a rational structure which may affect user on interpretation.
Layout structure and web example of hierarchy grid
How to design grids for web?
There are many ways to design website that based on grid system. You can starting create your own layout by sketching on grid paper, or using tools on design program such as Photoshop, Illustrator, Fireworks, or using web standards which is becoming more popular on web media.
One of the most useful website that provides tool for building grid system is the 960 grid system. The site offers 12, 16-column grid framework to download for free. Both of them have the same width at 960-pixel which seems to be a standard number for the size of screen resolution of 1024 x 768 or higher. Moreover, a 960-pixel total width is a good starting point, because it provides a massive amount of scope for divisions (960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480).
There are many various websites that are created by using grid system to make a perfect proportion and rhythm between design elements on the web. Grids are used to form the page layout and to structure the content rationally. The good website has to contain both of well functionality and aesthetic. Using grids can be helpful for web designer/developer to be more logical when ordering each element.
Here are some examples of grid-based websites.
How are grids used in web design?
There are many various websites that are created by using grid system to make a perfect proportion and rhythm between design elements on the web. Grids are used to form the page layout and to structure the content rationally. The good webbsite has to contain both of well functionality and aesthetic. Using grids can be helpful for web designer/developerto be more logical when odering each element.
Here are some examples of grid-based websites.
Poccuo is a design studio based in Washington D.C. The structure of the website is built with 900 px wide which is considered to be reasonable enough for every size of screen resolution In general, this design studio website conveys clean and well-structured design.
From the top of the page is the logo and the main navigation bar which is divided into 6 columns and give a little bit wider column width on logo area to emphasise the brand. To place the logo on the top-left of the page is not only the usual way for the logo, but also it is the natural way for people that always start reading from the left hand side. The quote in the centre of the page is large enough to catch the attention. The quote briefly describe about the business, origin of the project, latest news and updates. The website creates a great visual hierarchy by ordering each items into separated column. This influences user to understand the goal of the website or the goal of their business and also gives a smooth and satisfying experience when using the site.
Another good thing in this website is, in each column contains a selected image from the project and some short description about that project which I think it is really good to keep the description short and simple because this makes the whole site lighter and cleaner and it also makes the images look more interesting as well. Grid helps designer to align the images and text in both header and paragraph, using the same leading and same margin make the site to be in order but I can feel the freedom comes from white space in the same time.
Helen and Hard is an architecture studio in Norway.The aim of the website is to showcase their design projects, introduce the team and presents their design strategy. This is a good example of hierarchy grid website which shows the great way to organize contents based on grid. I will start from the logo on the top of the site, HELEN & HARD is created with a very simple style of medium-sized font, however it works very well on that position. Every time I open this site, the logo still comes out first. Under the logo we will see 940 px wide navigation bar and slide shows of images of selected project. Below the slide show, there are 4 column of text box that contain short story of the company ans news/events. In terms of structure management, I considered that using 4-column grid on 940 px width with 35 px on each gutter is very suitable for this website. I can read text on every text box continuously and pleasantly. Also, on the project page, all projects are presented in 3 columns and 10+ rows, each image is set into the same size and is positioned on the same gird line. When clicking on any image, there will be a long version of description of the project. But the layout they created shows the user that where should be a starting point and where to read through by using the different fonts, font-size, margin for header and body text.
In overall design, using grid to divide column conveys a very well structured content hierarchy. I t help designers to divide blank space for images and text and it creates symmetrical balance on the site.
Kind Company is a web, print design company in Brooklyn, New York since 2004. This design studio website is obviously designed on grid-based system. There are four main columns used in homepage with 20-pixel gutter between each column. From the top of the page is a place for logo and strap-line, which briefly tells us about what company does. Although, the logo of the company is using a very simple typeface (Helvetica), it works very well on that space. The name of the company is in black positioned among gray-coloured strap-line. What makes the logo more outstanding is the use of macro white space on the right hand side. Below the logo or header, we will see the main navigation bar “Project Index” and “Office Bulletin”. It can be noticed that the first button is aligned to the edge of the first left column, so does the contact email “hello@kindcompany.com” that is aligned to the edge of the third column from the left as well.
When we scroll down, we will see that the page layout is divided into two columns to place some text that describe more about company and what they do. These texts are aligned to the edge of column above. This dividing proportion creates a symmetric balance on the website. The use of micro white space in each paragraph gives text to breath. Also, each text body is positioned on the same baseline grid, which has the same margins. It creates a sense of credibility in the way that all information is organized on purpose. The use of dotted-horizontal lines is used to divide horizontal space. I think it gives a hierarchy in terms of readability; we can read and navigate information each column and row easily.
Also, every bottom margin contains the same height. It creates a feel of elegant along with the nice and simple layout. In office bulletin page, it is divided into two columns with the same width in each column as the homepage. It gives a sense of continuity and unity of the website. Although, each page contains the same width of column, it is not boring. On the other hand, doing as such, makes the website clean and make it easy to the eyes and make it easy to use and absorb all of information. Moreover, all links have a good reaction when rolling over them. Every gray link will turn red. It makes call to actions to be clearer and more noticeable.
Conclusion
Having a strong foundation in design principle like grid is a good thing that should be concerned. But, to design a website by using grid is not a solution for all people or all designers. When you starting to design a website, do you have to consider that what your website is about? What is your product? Or who is your audience? Some designs or some websites might not need to use grids, but some might need or grid should be used in some types of website. It depends on how you want the website to be or to feel like. There are many benefits of using grids such as grid adds hierarchy to the presentation of information, gives unity and continuity to the website. One of the most important thing is grid gives system to think to organize everything, every element on the website.
Grid is a smart tool to help designer design a good website. To understand about grid system and to know how it should be used or be applied in the website is a good thing and it benefits in many ways. However, creating a good website is not just about using grids to structure the content or other elements. It needs other web design principle to support everything on the site including many important aspects like usability, accessibility, readability as well.
