Introduction

Grids have become an important aspect of the design process, whether for print based or screen based design. It is essentially a system and set of rules to aid the design process. Grids are used mainly as a way of organizing and structuring your design work, with the aid of horizontal and vertical guides. There is no limit to how simple or detailed the grid is, which allows the designer to tailor it specifically for each individual design. One can choose to use one grid across all designs, or several different ones across one project. This method was once most commonly seen in Newspapers and Magazines, however it is now extremely widespread and common within all areas of Design.

Although grids have been around for a very long time, it wasn’t until the mid-twentieth century that the first designers of that time such as Linguists, Scribes, Commercial Artists and Printers started to focus on the content, proportion, space and form within their work. One of the earliest examples of the use of grids can be seen in any religious calligraphy texts laid out by scribes, often using modern two and three column grids with typographic variations in weight and colour, for emphasis. Nowadays the use of grids is most common within Graphic Design. There is still some debate going on within the design industry, with regard to the positives and negatives of the use of grids in design. Some designers believe that the use of grids would limit the designer and his creativeness, whereas others believe that the use of grids mainly provides a set of guidelines on which to build a more aesthetically pleasing and well structured design, thus producing a better quality design overall. Graphic Designers have the freedom to design in any way they see fit, yet there is a fine line between good aesthetically pleasing design and bad design.

Grids in Graphic Design

Grids are based on psychological research into human perception of information, focusing on ease of reading and usability as well as aesthetics. Column width is often determined by the maximum word to column ratio, with the optimum word count per line being eight or nine words. There are other determining factors such as the use of type, letter kerning, size, weight and colour, which go hand in hand with grids.

The book has been the most common output of printing from the mid-fifteenth century up till the start of the Industrial Revolution in the late-eighteenth century. There was a variety of grids available yet the grids based on the Golden Ratio in the form of the Golden Triangle were deemed to be the most successful and aesthetically pleasing. The Golden Triangle is an aesthetically pleasing form in which the ratio of the longer side to the shorter side is the golden ratio. This was often combined with the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, etc), which determined the page proportions and margins of the classic book.

The founding of de Stijl in 1975 by Theo van Doesburg was an important movement and influence on the creation and widespread use of the grid. This movement explored form determined by function, favouring minimalistic designs with no decorations and extensive colour, and rectilinear forms. This became quite popular with designers such as Piet Zwart and Paul Schuitema.

In 1919 the Bauhaus was opened by Walter Gropius, influencing the development of Typography and Graphic Design forever. There was great influence on typographic experimentation in order to achieve more clarity, simplicity and usability within design. During the 1920s and 1930s typography became even more popular and significant within design, with the help of typographer Jan Tschichold and his two books The New Typography(1928), and Asymmetric Typography (1935). There was more focusing on logic and natural psychological behaviour, which created a system for the design process.

Swiss Typography became the norm for Graphic Design. Everything element on the page followed logic, precision and aesthetics.

“No system of ratios, however ingenious, can relieve the typographer of deciding how one value should be related to another… He must spare no effort to tutor his feeling for proportion… He must know intuitively when the tension between several things is so great that harmony is endangered. But he must also know how to avoid relationships lacking in tension since these lead to monotony.”
Emil Ruder, Typography

“Just as in nature, systems of order govern the growth and structure of animate and inanimate matter, so human activity itself has, since the earliest times, been distinguished by the quest for order… The desire to bring order to the bewildering confusion of appearances reflects a deep human need.”
Josef Müller-Brockmann, Grid Systems in Graphic Design

Grids in Web Design

With the development of technology and the world wide web, grids have now become a part of the Web Design process. They serve the same purpose as grids within print based design, mainly to help organize and logically structure a web based design for the most clarity, usability and aesthetics. Naturally this involved rethinking the traditional grid systems in order to target on screen specific issues. Print based design is static and fully controllable, whereas on screen design is constantly changing, depending on the device being used, screen resolutions and browsers. Even though the main principles remain the same: to create an aesthetically pleasing, readable and usable interface; the design and grid have to have the ability to morph to each new format, without sacrificing anything in the process.

960px vs 978px

Total width 960px
12 columns @ 60px each
Each column has 10px left & right margin which forms 20px of gutter space
Total content area is 940px

The most common and popular grid system for on screen web design is the 960px grid. It is the most favourite grid system as it is currently the most flexible. It allows the designer to quickly split the design into 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 columns retaining the maximum readability and usability. This grid makes it possible to unify all web design and make it consistently good across the whole web. The problem however is the ever increasing screen resolutions. Although not long ago 960px was an everage screen resolution and still is to some extent, it is now gradually increasing. Along with this the average font size has increased from 12px to 13px, which means bigger text is being fitted into the same 940px space (actual content space). It would therefore make sense to alter the grid in order to accomodate the bigger screen resolutions and bigger font size.

Total width 1002px
12 columns @ 54px each
Each column has 12px left & right margin which forms 30px of gutter space
Total content area is 978px

Based on the constantly changing conditions within web design, another grid system was recently introduced suggesting the use of the 978px grid. It does the same job as the previous grid, however it has been updated to accommodate the new developments in technology. Predictably, the grid will never be static, as technology and the web will constantly develop and therefore the grid will have to develop with it.

Baseline Grid

Another common grid still being used is the baseline grid, in which all the text is aligned to the baseline of the entire grid. This process of creating a baseline is slightly more difficult as it involves calculating the line hight of the entire body text to ensure each line aligns properly. This can be seen perfectly on the The Grid Systems website.

Each element on the page aligns perfectly with the baseline, creating a clean, simple and usable user interface with no extra elements or distractions.

Why use the Grid?

There are many reasons for designers to use grids. It is important to convey the information in the simplest and most organized way in order to provide the best usability experience for the user. In order to be able to create this structure a designer needs grids.

However it is entirely up to the designer to decide whether to use a grid or not. The grid is a guide, and is meant to be used as a reference rather than hard coded rules. It is the responsibility of the designer to research the target audience and to decide what approach will be the most effective. A grid can enhance the structural foundation of a website but can just as easily detract from the experimentation and interactiveness.

Examples

Below are some examples of the use of grids in general and personal portfolio websites. They demonstrate the usefulness of grids as well as the limitations.

Behance

http://www.behance.net/

Behance is a website where users can post their portfolio work and projects for public viewing and critique. With the amount of information needed to be handled the website interface had to be minimalistic and clean, as well as very easy to navigate. And that is exactly what it is. It is divided into a five column grid, however the main focus is on the middle three columns which are wider than the outer two columns. By tweaking the widths and changing the ratios the main focus is on the work of the user rather than the sites navigation, search and adds. In this case the use of the grid was essential in order to portray the work of the users in a professional and clean way.

The website is quite clean yet still remains playful in its unique almost hypnotising and consistent design. There is a limited use of colour which emphasizes the call to action areas of the website, such as the register and log in button, as well as the individual work of the users. The choice of blue indicates the brand is meant for professionals with a specific style of work, not dissimilar to the website itself.

Once inside the website, looking at a specific project the layout changes to a two column grid. Once again the section displaying the users work has a much wider column, this emphasizing this section more than the general user information. The column is also located on the left hand side, and this would be the first area to focus on. The call to action colour remains consistent with the homepage, which makes it simple to navigate.

Tawni Martin

http://www.tawnimartin.com/

Tawni Martin is a freelance Web Designer that took a slightly different approach to designing her own portfolio site. It doesn’t follow the stereotypical minimalistic monochromatic designs, and in this case it showcases her full potential as a web designer. The website has a main navigation at the top of the page that is aligned to the left, which goes against the human instinct of reading left to right. However it is still very clear and therefore easy to navigate. The header image on each page serves as the main focus point, although the text seems to wide to read comfortably.

Further down the page the layout becomes a two column grid, the main body text is located in the left column. Focus is instantly on the slideshow, which provides a sneak peak of the portfolio. Information and contact details are located in the right column.

The footer in my opinion is the least successful part of the website. There is a lot of technical and graphic skill in creating the form and site map, yet the footer feels slightly out of place and out of balance with the rest of the website. Perhaps the header image outweighs the footer too much.

Once inside the portfolio the main body text is split into a three column grid, but remains simple to navigate. The execution of the portfolio preview could have been better, as it seems out of place. Not enough elegance and simplicity to justify the highly graphic interface. The call to action areas are highlighted with vivid colours, however the header image is also a vivid colour and is a portfolio piece in its own. I feel like there is a bit too much going on on the portfolio section and borders slightly irritating.

The about section returns back to a two column grid, however a secondary navigation tab is introduced. The current page is highlighted with a vivid blue, which fits perfectly with the header image. The body text is too wide to read comfortably and very text heavy in general. Perhaps keeping a three column grid as on the portfolio section would have worked better in this case and made the body text more manageable and elegant.

Level Flow

http://www.levelflow.com/

Level Flow is an online portfolio of James Hamilton-Martin, who does Web Design and Motion Graphics. The website is very simple and easy to navigate, it uses a simple two column grid which helps keep the information down to the most necessary. The call to action doodles are humorous and interactive, keeping the main attention on him as the product. By displaying a ‘new’ tag, the viewer gets the feel that he is quite involved and active as a designer within the industry and constantly developing and adding more work. The navigation bar is probably one of my favourite parts of the entire website, just because of its untraditional style and personality. The whole website creates sense of work in progress, doodles, creativity, drawing board etc.

The use of monochrome colours for the entire website means the navigation becomes the main focus point. It demonstrates a range of different skills and areas of interest. This designer is diverse. The work speaks for itself, with the preview of the website working very smoothly and precisely the way you would expect.

Only bug I noticed was that the about page would keep popping up for a brief millisecond every time the user clicked on one of the navigation bars.

Colourful Visuals

http://www.colorfulvisuals.com/

This is an online portfolio of Ace Bobadilla a Digital Graphic Designer. The user interface is very clean and minimalistic, using mainly a single column grid for the entire website apart from the three column grid used for the gallery. Despite the fact that the body text spans all the way across, it is still easy to read as there isn’t a lot of it there. In this particular case it works just fine.

The main focus is on the welcoming ‘Hello There’, which instantly portrays the personality of the designer. The call to action areas as well as important information is highlighted in the same bright vivid colours as the welcome typography.

The single image view is very smooth and turns the whole website into a single column website, keeping the focus on the work itself. Everything is smooth running, information is well organised and thought out.

Webz Guru

http://www.webzguru.net/

This portfolio website belongs to a company specializing in Communications and Technology. The whole user interface is one continuous design, that scrolls down seamlessly either manually or via the navigation bar at the top. There is a mini navigation as well as ‘back to the top’ link on every slide. The website design is monochrome, keeping the focus on the work and the brand. Only the most important information is provided, and follows a very logical hierarchy. The grid system used varies from a one column grid to three column grid. Each slide was though through carefully, in order to find the optimum way of providing the information. Considering both legibility and usability as well as aesthetics.

The technical skills and graphic skill are quite strong, and the use of individual grids for each page made it possible to maximize readability and usability. The single scroll function unified the design overall and made it more aesthetically pleasing.

Volume One

http://www.volumeone.com/

”Volumeone is a design studio that brings a multi-disciplinary approach to the creation of visual solutions for print, motion and digital media. Founded by Cranbrook Design graduate Matt Owens, Volumeone strives to synthesize visual exploration and smart design solutions while maintaining the highest level of design expertise and freshness of approach. All design challenges involve a dialogue between client, creative and the needs of the project and Volumeone works to illuminate and open up this dialogue in an effort to develop the best solutions possible.”

This studio has a very simplistic and elegant website. There are no colours being used anywhere other than the portfolio images, which keeps the attention on the work. They used a two column grid for the header information section, with the focus being on the latest work as well as the news. The rest of the work is displayed in a three column grid.

Once you go into the portfolio section, the layout becomes a three column grid. All focus is on the work, there is no other information whatsoever to distract the viewer. The work is bright and enticing, inviting the user to explore further.

The detailed view of a portfolio piece is a two column grid, with the summary located on the left and the detailed information located on the right. Even though the work is very bright my eye was drawn to the small summary briefly before smoothly focusing on the work itself.

The about section uses the same grid system and work in exactly the same way. It is a bit text heavy with slightly too wide body text for a comfortable read. However it fits with the rest of the design perfectly. Even though the website is very minimalistic, the work is quite the opposite. There is no need for words, the work speaks for itself.

Conclusion

There are many different kinds of grids out there, but I think the most important thing to remember is to use them as a reference and to adapt them to each individual design. As a designer one needs to find what works best for our own work and to create our own system to help organize and better convey the message. The grid is either an enemy or a friend.