The Grid Structure Chivonne Williams, Wannabe Web Designer

Websites The web is a relatively new medium; although it has emerged from the medium of printing, borrowing skills, design language and conventions strongly influenced by print, the web has its own nature.

We can borrow different elements from print media, which has been around for centuries such as structure, typography and the Golden Section, but one unchangeable difference between print and digital media will always be control. Print media allows you to fix the size of text or… is the size of the text unalterable? Control the dimensions of a page or is it… the dimensions of a page can’t be altered? With print media you can make your designs structural yet attractive using a variety of fonts, images and content combined, varying between pages to create visual pieces of art or structured informative content displayed elegantly on a page. Yet as beautiful and advanced as print media is, there is still the question is it really giving every user the experience they need or want if it cant be altered? These are simply facts of the medium.

Web pages can be designed so they are adaptable, a well designed website can be flexible and adaptable for the needs of the user. For example being able to alter the text size to make it visibly larger or smaller, being able to alter the size of the screen so the site is displayed differently and responsively if shrunken or enlarged. Being able to view the content on different size devices large or small. Yet again like print media there are some downfalls. Designs will never look exactly the same from one browser to another; there are browser compatibility issues to look out for. Typography on the web is harder to read than on print media therefore simple things such as line height, spacing, line length and structure all need to be considered. These are simple facts of the web medium.

One particular context that all print media uses to present their content, deliver easy readability and navigation of pages is THE GRID SYSTEM.

Grids are used to balance the design of books, ads, posters, and paintings. They are also more and more frequently used in web design. Grids are one of the most powerful principles and have been used for a variety of different design disciplines, from basic street plans to the architecture of the most complex high-rises - to product and graphic design.

In looking further into the grid system, how its used and how it effects web design I have come across various different tools designed to aid the design process as well as rules followed in-depth such as ratios and measure and the golden section, each of which I will discuss further. ‘The Golden Section’ is a subject I came across many a time whilst researching further into why Grids are so important for all design in general. Interestingly I found it is a term that historically goes back centuries all in the love of measure and precision.

In this Blog I will discus Design elements and how our brains process information, The 960 Grid System and how it aids design, The Golden Section and how it can be used in web design, The Baseline grid, Visual hierarchy and how it can guide and how grids can effect a brand.

The grid has a long history in the design of two-dimensional media but it is not the only way to design web pages but most certainly a good assistant. Another contributing element to the basis of designing on the web is natural rhythm. As designer Richard Rutter explains:

“On the Web, vertical rhythm - the spacing and arrangement of text as the reader descends the page - is contributed to by three factors: font size, line height and margin or padding. All of these factors must be calculated with care in order that the rhythm is maintained.”

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

Josef Müller-Brockmann

Design elements and brain processes

“The grid is a regulatory system which pre-empts the basic formal decisions in the design process. It’s preconditions help in the structuring, division and ordering of content.”

Mark Bolton’s ‘Five Simple Steps’ Grid

Image from Texas Tech University System

In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. Grid-based design can be particularly useful in creating sites that are predictable therefore easily navigated, and visually appealing. Grids are a useful starting point at helping designers to plan where things go, and make it easy for site visitors to use.

An article in Smashing Magazine discussed this further and explained more about how our minds relate to rhythm and pattern. It explains how pattern recognition allows the human brain to store similar or identical impressions (such as primary shapes or colours) in a pattern library and retrieve them for quick analysis of new stimuli. This is the reason why we don’t look at individual letters when reading, but instead recognize whole words at a time (by pulling previous instances of the same pattern from our memory bank). It’s also the reason why we instantly recognize letters themselves such as the alphabet “A,” “B,” “C,” even if the font, size and colour vary the basic shapes are stored in our pattern library in our memory banks.

The article also goes on to explain how the mind also has the opposite effect when pattern or rhythm isn’t followed. Any stimulus that doesn’t match any of your existing pattern records will prompt a new entry in the memory bank, which, in turn, requires more brain processing power. This is where the importance of design structure and grids, whether horizontal or vertical, comes in. This method of thinking and processing I believe proves that Grid systems are indeed a beneficial aid to design and how we process information.


Image from WebDev-il

However many have said grid systems can stifle creativity and cause uncreative boxy looking sites and can over aid creativity by providing a framework that already answers some design questions such as where to place elements or how wide should the measure be? etc. A well-designed grid system will assist in answering a lot of these questions and more and make designing pretty simple. Aesthetics can be measured and more importantly can be constructed. Using a grid allows you to immediately experiment with type areas, shapes and harmonious compositions. You can explore how type and image will work together on the various types of grid layouts using wireframe applications Wireframe, photoshop or any design program and ready designed grid systems or tools such as 960 grid system or yalm.

960 Grid System

“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”

Mark Boulton's ‘Five Simple Steps’

960 Grid

The 960 Grid System is an honorable example of a well-designed tool or the systematic approach of designing with usability in mind. The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The 960 grid can be cut up into many different arrangements of columns (Large areas for content) with gutters (Space between columns). There are two variants: 12 and 16 columns, which can be used separately or in tandem. Firstly 960px is the most versatile grid system that can fit on a 1024px resolution screen. As a web designer its good practice to try and keep the width of a site small so they can fit on 1024px monitor so the majority of users can see the full website on their screens with room for background. Using 960 allows the most combinations of column while being easy to work with.

“…the way the web looks today is nothing like the way it’s going to look tomorrow. And for the most part, I’m sure you’ll agree that’s a very good thing.”

by Molly E. Holzschlag

1140px Grid

Following this quote I also found that 1140px - New to the stage of website design is the up and coming 1140px grid system. Now that computers are being made with much larger resolution screens than the old standard 1024px, this has brought up the average computer screen resolution to 1280px. This equates to more room to play with for ecommerce websites. The best part of this 1140px grid system is it can be implemented into a liquid grid. (Liquid grids automatically calculate the width of the screen they are being displayed on and shuffle all of the websites media, text and images to fit perfectly). So the end result is a website that is fully functional, fits and looks perfect regardless of what its being viewed on.

The Golden Section

The Golden Section is a ratio rule that has been used in Western art and architecture for more than two thousand years. Since the Renaissance, many artists and architects have proportioned their works to approximate the golden section.The rule is a rule followed by much print media, publishing and graphic design works in order to find the perfect grid structure. The Golden Section is also known as the Golden Mean, Golden Ratio and Divine Proportion. It is a ratio or proportion defined by the number Phi (= 1.618033988749895… ) which is designated by the Greek letter ᵠ (phi) which is an abbreviation for the mean of Phidias (an Ancient Greek sculptor, painter and architect that applied this equation to his work, most notably the Parthenon). The rationale behind it is the belief that this proportion is organic, universal, harmonic and aesthetically pleasing.

The formula for the golden section is a : b = b : (a+b). This means that the smaller of two elements (such as the shorter side of a rectangle) relates to the larger element in the same way that the larger element relates to the two parts combined. In short, side a is to side b as side b is to the sum of both sides. Expressed numerically, the ratio for the golden section is 1 : 1.618.


Examples of the Golden Section can be seen everywhere. A cross section of the Great Pyramid, gives us a right triangle, “The Egyptian Triangle”. The ratio of the slant height of the pyramid (hypotenuse of the triangle) to the distance from ground center (half the base dimension) is 1.61804… which differs from phi by only one unit in the fifth decimal place. Round this up to be 2 units, then the sides of the right triangle are in the proportion 1:sqrt(phi):phi and the pyramid has a height of sqrt(phi).

Entire books have been written on the subject of the Golden Section and some graphic designers obsess over its rulings to create the perfect layouts for their works. Other designers believe that the golden section is no more valid as a basis for deriving sizes and proportions than other methods. Relational measurements are what define most systems, from simple leaflet design to the complex of newspaper grids. Such as beginning from standard industrial paper sizes, or dividing surfaces into halves or squares, or simply picking whole-number page formats and making logical divisions within them. Article from Thinking with type. looks more into the Golden Section and typography.

Divine Proportion

This article by Smashing Magazine “Applying Divine Proportion To Your Web Designs” explains what is the Divine proportion (Golden Section) and what is the Rule of Thirds (another layout ⁄ grid formula which is simply to divide the horizontal and vertical measures of your page into 3 sections - like the 0's and crosses grid using this as a grid structure) and describes how you can apply both of them effectively to web design.

  • 1. First, calculate the width of your #content-block. You need to make sure that the ratio between this block and the overall layout width is 1.62. Hence you divide 960px by 1.62 which results in approximately 593px.
  • 2. Subtract 593px from the overall layout width (which is 960px) and get 960px − 593px = 367px.
  • 3. Now if you calculate the ratio between the #content-block and the #sidebar-block (593px : 367px ≈ 1.615) and the ratio between the container-width and the width of the content-block (960px : 593px ≈ 1.618) you have achieved almost the same ratio. This is the whole idea behind the “Golden” proportion. The same holds for fluid and elastic layouts, too.
  • Phiculator is a simple tool which, given any number, will calculate the corresponding number according to the golden ratio. The free tool is available for both Win and Mac.
  • Golden Section Ratio Design Tool Atrise is a program, which allows avoiding the routine operations, calculator compilations, planning of grouping and forms. You can see and change the harmonious forms and sizes, while being directly in the process of working on your project.
  • There are various different frameworks and layout tools you can use to aid your design, this is an article I came across that I found really useful 15 responsive frame works to consider.

Baseline Grid

Grid System

The baseline grid is another type of structure technique used to better your web-based typography. Essentially, it aligns all your text to a vertical grid where the bottom of each letter is positioned onto the grid, just like writing on lined paper.

In order to utilize this technique in web design you would need to define a line-height for the baseline grid based on a ratio reflective of your font size. Example, 1:1.5 is a nice amount that offers us a generous 50% leading (graphics term, kerning being a web design term). If we had a text size of 16px, the line height (using this 1:1.5 ratio) would be 24px or 150%, easily readable.

Baseline Grid

The baseline grid is a great way of adding some balance and proportion to typography. It’s a subtle implementation that can add some natural feeling and rhythm into your designs. Typography becomes consistent with standardized spacing giving it that harmonious feel. Baseline grids are, ultimately, most useful in print. Print is a fixed medium where rhythm can have a powerful effect. The baseline grid is a great tool to give simple structure to your designs but is not to be relied upon or have too much time spent on creating precision in its pixels as Jason Santa Maria express’ in one of his blogs:

“It’s incredibly difficult to maintain a baseline grid in a medium as inconsistent and fluid as a web page. Images, form elements, rendering differences between browsers and platforms: these can all throw a baseline grid out of phase.”

Grid examples

From reading more into both the Golden Section and the way our minds relay data I have come to the understanding that a consistent and predictable structure will, naturally, aid the legibility and user interpretation of a design. As many of the designers in industry state establishing a simple baseline grid and structured page layout will aid in allowing your site to be user friendly and accessible. Using a standard where, for example, headers always have two baselines of white space below them, and the padding of every box always equals three baselines, adds logic to our layouts and makes them easier not only to design, but also to build and, most importantly, digest. Baseline Grids, the good the bad and the ugly.

Visual hierarchy and user guidance


Hierarchy in web design helps the user understand where they’ve been and where they want to go and, thus, helps to communicate the purpose of the website. Proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship. Naturally objects that are bigger demand more attention. Visually using size as a hierarchal tool is an effective way of guiding a viewer’s eye to a particular portion of a page on a web site and even print media. Size is one of the most powerful forms of organization, it’s important to associate size with importance in the design world.

The biggest elements should be the most important in most cases i.e. Brand name, title, headings, call to action; the smallest elements should be the least important i.e. footer notes, slogans, dates. Colour also has a strong hierarchal effect on design, bold, contrasting colors on a particular element of a website will demand attention such as with buttons for navigation or call to action, error messages or hyperlinks. Colour can affect everything from a websites brand i.e. Coca Cola Red, to symbolism i.e. cool, subdued colors to create a mood or follow a style on a brands webpage.

Alignment creates order between elements. It can be as simple as the difference between a content column and a sidebar column. Style can be used as a form of hierarchy that both embraces and exceeds the other tools. For instance: a flat grey background will feel different than dark grey textured background. This style or personality given by the designer will naturally play a role in how different visual relationships are made. This same idea extends to typefaces, buttons, tabs, and other elements. As designers we need to consider the impact on an overall design when we choose to add extra style and polish to an element.

White space can affect the user’s behavior as much, if not more, than the actual content on the page. White space guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.

“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.”

Web Design Tuts

Visual Hierarchy

If you offer users layout clarity, this becomes a part of your brand. As people, we’ve always had a keen sense for visual organization. This is especially the case on the web where studies have proven that regular web surfers have learned to “scan” content intrinsically; automatically seeking information that is relevant to their interests and disregarding information that isn’t.

As the typical web-surfing platforms expand from the traditional computer monitors to phones, tablets, even televisions, it’s becoming ever more important that we use strong, clear visual systems to communicate with web surfers. In order to keep users on our sites we need to create the best legible, user friendly structure, with accessible content and guidance via hierarchy. Things to consider being, Proximity, Size, Colour, Style, Alignment, white space. A good article that discusses this is Web Designer Depot

Effect on image and branding

What is a Brand? It is the emotional and psychological relationship you have with your customers. Strong brands elicit opinions, emotions, and sometimes physiological responses from customers. Logos are not brands, they are merely representations of brands.

To build a successful brand you need to make it memorable. What do you do to make people remember things? You repeat them. Consistency throughout your web design will build on the choices you’ve made earlier regarding selecting the right personality for the brand and evoking the appropriate emotions. Keep consistent colours, visuals and typography throughout to ensure your website projects a uniform image. Website design in its own way helps build your online reputation. A clean and uncluttered design is the mark of a company that knows what it’s doing and what it wants to say.

“A website’s design helps build the character of a website and in doing so, also builds the brand, its personality, marketability and its efficiency.”

The Search Engine People

Web design doesn’t just have an impact on your online brand but your brand as a whole. Essentially, the design of a website seeks to play an important role in ensuring that the target audience looks favorably at the business or individual. A logo that is a perfect visual representation of the company’s purpose, mission, and values has an impact on the website’s design. The use of images the human mind can instantly recollect in website design, helps website visitors recall the website and in doing so recollect the brand.

Therefore a combination of both grid structure techniques, hierarchy and styling forms an easy to use well structured layout which is user friendly, easy to navigate and legible in the design process, combined with building a evoking, memorable brand are the perfect combination to building a credible website.

Some examples of Portfolio and Ecommerce sites that use the concept of the grid structure to maximise their designs:


This portfolio site by Red Cozette makes use of the Golden Section, using its smallest proportion for white space making it easy to visually follow and find the CTA. It uses modular boxes and minimal content placed effectively to balance the page and makes use of a baseline grid as well as the 12 column and golden section.


This Ecommerce site by Net-A-Porter again makes use of the Golden Section in a similar way to the previous site using white space to make the page more visually dynamic and easy to follow. It uses the concept of the baseline grid and agin the 12 column grid, creating lightweight effective user friendly visual using and practicing nearly all grid structures discussed in this blog.


This is a Ecommerce site by Selfridges uses the 960 12 column grid, the main imagery at the top makes use of the Golden Section whereas the rest of the site is divided equally into sections of 4 making it easier visually to navigate. These 4sections are then utilise into creating two doubled sections making use of colour and proximity to draw you to the next CTA points.


This is a Ecommerce site by Teapigs using 960 grid system with 12 columns to create a boxy layout but it has been done well using proximity and colour to guide visually.

SUMMARY To summarize my research on the subject of The Grid Structure I have come to conclude that my opinion on the subject resides heavily on its positive aspects of assisting web design. The benefits are clear, as a designer using aspects of the Grid Structure I would gain a rational, structured framework for organizing and laying out content and my users gain well-organized, legible sites. Using Visual Hierarchy to guide users through my web pages is an important element to the design of a successful website. Considering the way our brain process’ and builds relationships with information through visual content will enable me to create and design web pages to a standard that is harmonious and visually pleasing as well as mentally logical and identifiable, creating a positive user experience. I realize that the structure, general rules followed and the tools designed to aid The Grid Structure, when used should to be followed as a guide to our designs but should not be depended on or used to follow pixel-by-pixel layouts. Many aspects such as browser inconsistencies, variations in devices and creativity prove that it is not a model to solely rely on and the sole decree of web design, but many more aspects prove it is a great benefit. I believe the best way to use the Grid Structure is to use it as a Grid Concept not a ruling. In creating this web page I used the aid of a 12 column 960px grid, I found the CSS style sheet a great aid once I got familiar with it and would definitely use it again, I did not use a baseline grid on this occasion. Chivonne Williams