Claudio's Blog Just another MA Web Design & Content Planning site

Grids in Web design.

“A Grid System is a rigid framework that is supposed to help graphic designers in the meaningful, logical and consistent organization of information on a page. Rudimentary versions of grid systems existed since the medieval times, but a group of graphic designers, mostly inspired in ideas from typographical literature started building a more rigid and coherent system for page layout”. (http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/)

 

 

The grid system is therefore an organizing principle with roots in the “Villard Diagram” but also other theories of aesthetic measurements such as the golden ratio and the rule of thirds; principles that had been used for a very long time before the modern typographic grid was implemented. It is in fact, in the 1950s that Emil Ruder and other representatives of the Swiss style such as Armin Hofmann and Josef Muller Brockmann started to device a flexible system to help designers achieve coherency in organizing the page.

Hence, the grid system came to be associated with the Swiss Style, also known as the International Typographic Style for the fact that it became adopted worldwide by the 1970s. It is a graphic style that emphasizes cleanness, readability and objectivity through the use of grids, sans-serif typeface, ragged right text and a preference for photography in place of illustrations and drawings; but also it is a style that shows influences from constructivism, and minimalism where the unnecessary is removed and emphasis is given to the necessary.

 

Nevertheless, it is with the advent of 1980s that some designers reacted against the constructive nature of the grid, also rejecting it for its association with corporate culture and its domestic use; and this was done in favor of a more organic structure and a major creative freedom. It is therefore for this reason that, today grids are mostly seen as a useful tool than a requirement or starting point for all page design. In spite of this, grids are becoming more and more employed in web design after their significant use in print and designers now adopt them on their pages for this new media. However, grids on the web are not very flexible as for not having a fixed height as in print.  Also, grids are intended to guide the graphic design process, not to dictate it and so can be broken according to the design’s requirements. But why are they so important?
“The use of the Grids as an ordering system is the expression of a certain mental attitude inasmuch as it shows that the designer conceives is work in terms that are constructive and orientated to the future” - Josef Muller-Brockmann -     

 

“The use of the Grid System implies the will to systematize, to clarify, the will to penetrate to the essential, to concentrate, to cultivate objectivity instead of subjectivity…” - Josef Muller Brockmann - 

Grids help distribute content more efficiently, in a way that is logical and beautiful as with the use of a system that divides space with the golden ratio. Also, online content assimilation and retention increases when these are used, enhancing the user experience. Additionally, compositions and designs are more linear and aesthetically pleasing with a certain order and organization constantly maintained on pages.

Grids also determine the dimension of space in addition to making the design process quicker by creating fields or compartments for the content to be directly placed in. This creates a compact system of arrangement that has its own rhythm, but also that fosters analytical thinking.

“By arranging the surface and spaces in the form of a Grid the designer is favorably placed to dispose the content in conformity with objective and functional criteria” – Josef Muller Brockmann –

Thus, Grids solve usability and accessibility issues but also visual problems through the representation of this visual framework that allow the designer to create more balanced and harmonious compositions.

Additionally, by reducing the number of elements and their incorporation in a grid system a sense of compact planning is created together with a manifestation of clarity and this suggests order. If the information is presented in a logical set out i.e. title, subtitle, text, etc. this will be quicker to scan and easier to assimilate if also these elements are formatted in the right size, with the correct line-high or margins that create white space and make each line of text breath. This factor is enhanced when a baseline grid alignment is adopted too.

A baseline grid is a horizontal grid system that exactly aligns the baselines of all the text on a page, regardless of size or style. Baseline grids create a smooth rhythm in the typography within a design.

Now, to understand how a grid system constructs the framework of a page, it is a good idea to look at the anatomy of a grid and identify each different part that builds it up on. Generally, a grid is made of columns, rows, module, flow-lines, gutters, margins and fields both in print and on the web. In order to construct an effective grid system “Ratios” are very important.

Ratios are the bulk of a well-designed grid system. Either the rule of third or the golden ratio can be adopted to create a grid system, with emphasis on the latter to create more complex grid structures.

Units (or Modules) are also as important as they constitute the base piece from which the rest of the grid is developed. These could be derived from constraints such as the content elements that are going into a design i.e. images, adverts or the typeface sizes, etc. or alternatively by subdividing the maximum screen resolution.

By doing so, a relationship is created between the layout and the element from which the unit is derived. All elements subsequently placed within the composition will be harmoniously connected.

Moving forward…
•    Columns are vertical bands of modules that could be equal in width or vary across the grid.
•    Rows are the horizontal equivalent of columns. Online it is hard to plan for rows as the height of the format is often inconsistent and dynamic.
•    Gutters are the spaces between columns and rows that separate modules either vertically or horizontally.
•    Flowlines or Hanglines are horizontal lines that break the space into horizontal bands. These are used to help guide the eye across the page and above all to align elements.
•    Fields are groups of adjacent modules used to place large images or long blocks of text.
•    And finally…
•    Margins are the space between the edge of the page and the outer edge of the content. These help establish the overall tension in a composition. The smaller the margin the more tension is created.

Designers use this subdivision of space to create layouts that reflect a visual balance within elements of content and build a more organized composition which appeals to the eye of the user, enhancing user experience either in print design or in web design.

Grids used for the web need to be flexible in order to accommodate varying monitor widths and resolutions. When using a fixed-width grid for the Web, even if the browser window expands the layout within the grid is not altered. In a variable-width grid system each column expands proportionately with the width of the browser frame. This would cause the layout within the grid to change in compliance with the width of the user’s monitor.

A combination of variable-width columns and fixed width columns within grid systems would bring the variable-width columns to expand and move the fixed width columns if there is not enough space.

A number of grids exist today whether this are for print design or for the web, however these could be grouped into four main types:

•    Manuscript grid is the simplest grid structure. It’s mainly a large rectangular area made of a single column used for extensive and continuous blocks of text.

•    Column grid is made up by placing multiple columns on the page. This is good when discontinuous information and content needs to be presented.

•    Modular grid is the same as column grid with the addition of rows and gutters. It is used for complex project.

•    Hierarchical grid is commonly found on the web. This is based more on an intuitive placement of elements, which still conforms to the needs of the information.

Now, how are these applied to Websites?

http://www.falmouth.ac.uk/

The university college of Falmouth’s website present a grid based layout which uses multiple of 4 to subdivide the page into columns. In fact, deconstructing the grid, either 4 or 8 and so on 12 and 16 columns seem to lead the alignment of the content. However, 12 columns could be identified as the best structural framework of this layout. These columns divide the total width of the page which is 960 pixels and control the natural flow of the content, maintaining order and organization on the page.

In fact, by looking at the Homepage it is evident that, the majority of content is aligned to an invisible structural framework which also allows a flexible organization of each element. Just looking at the arrow that characterized the links on the left hand side of the page, this aligns completely to the edge of the column; whether these are 4 or a multiple of this, makes no difference for the alignment which is maintained on all pages. Same proportions and column width is reflected on the left where the navigation menu and adverts are disposed. These in fact fit completely within the column and are positioned in the center, sitting directly on fields and separated from each other by apparent uneven spaces.

It is difficult to understand if a baseline grid has been used, however the disposition of text seems to be very linear and in line with the rest of the content. Also, each line of text is disposed within large columns “probably too large” as the margins are probably too small, but line-high and paragraphs are used and this makes the text easy to read, also creating a balance that, in my opinion, allows easy understanding of the information. Since the margins are not too large the page may look a little overfull with content, however as the background extends widely in the window this is balanced up.

Also, the Grid does not seem to be a constraint for all the content. In fact, this is broken in a number of occasions. Firstly, the element at the bottom of the page, where “search bars” and the “Quick Links” button are, extends wider than the total width of the page breaking the grid. This factor is consistent on all pages since this element is fixed to the window and so it is always visible even when scrolling up and down the page. Secondly, the logo reproduced on the top right corner as part of the background image, extends out of the grid, so as the top navigation bar does, and although it is not much emphasized and almost invisible it contributes to enhance brand identity by breaking the linearity of the grid system.

The logo itself is respectively in line with the grid system and regards the same alignment of margins. Although, this does not break the system it still adheres to the concept of brand identity, through the use of typography.

The sections of the page that have been created for this layout are recognizable as header, footer, sidebar, and main content area and this arrangement is consistent on all pages, so are the top navigation bar and side navigation menu on the left. This consistent arrangement improves navigation and so the usability and accessibility of the site. However, such organization of elements and space is not abide  by the “Innovation & Research” category, where the content follows a different arrangement and it extends out the margins to the very edge of the page.

Emphasis is primarily achieved through the color but also by the use of bigger typefaces for headings and the labels on each category of the top navigation bar. These follow the Grid structure in that they are equally divided within columns and this division is made evident by the use of three different colors. Also, emphasis on content is obtained through arrows that point straight to specific direction to guide the user through the information or to suggest an action to be performed such as opening a navigation category or to have access to information.

To conclude, some sections of the site seem not to have been included within the organization of the grid almost looking independent. These, expand horizontally to the size of the window and are respectively the footer and the bar on the very top of the page. However, links and elements of these sections are still positioned within the composition.

http://www.kcl.ac.uk/index.aspx

The King’s College London’s website reflects a feel of alignment and division of space. However, this is not necessarily true. Dividing the total width of 960 pixels in to equal columns it could be seen that not all the content aligns to the same grid. Some proportions are abide by the top navigation bars in that the space occupied by each category is the same for all of them within a grid of seven columns. In other words they all have the same width. However, looking down at the list of links within the main content area on the homepage it is clearly evident that these do not align at all to the same grid; neither the elements in the section within the main content and the banner. Adding or moving columns do not make much of a difference either, hence there is some alignment in that some elements aligns to other adjacent elements but they do not necessarily follow the flow of a grid unless a hierarchical grid system has been adopted. This factor applies also to other internal pages.

Although these present a similar layout to the homepage in that all content is mainly links images and captions with an additional side navigation menu, when it comes to presenting long lines of text the layout changes in the disposition of elements to accommodate the information. However, the typeface used is too small and there is not enough space between each line so legibility is an issue even though paragraphs have been adopted. Furthermore, the text is disposed into very narrow columns on some pages and this makes reading annoying.

Although, some of the content is not in line with a possible grid framework, the composition of the overall layout present some kind of alignment as mentioned earlier, hence usability and accessibility are not as much affected by this, nor the credibility of the layout, since columns are still used and therefore the content is still organized in a compact arrangement.

Emphasis on the structural layout is given by the alignment of the banner, images together with the top navigation bar which features of a widget that hides and shows out sub-categories that are listed and organized within aligned columns.

The logo is placed within the same alignment of the top navigation bar. It seems that it has been designed as well through the adoption of a grid System as typographic elements are well aligned respecting proportions and compactly contained within the same portion of space.  In addition, although it is a little small and not very prominent on the page, in my opinion it still tells about brand identity through typography and the structural look.

 http://www.gsa.ac.uk/

The Glasgow School of Art’s website states it clearly and succinctly that a grid system has been used for the structural planning of the layout and organization of the content within it. In fact, the grid has been left as part of the background, visible and available to the user as a guide to flow along the content presented on the page.

Alignment and organizations are the main points that make the composition work harmoniously and the delivery of the information efficient and effective on every page. This consistency allows the user to navigate the site with ease and to assimilate the information through, in same way, “visual memory” that would make it easier for them to remember.

The content is presented aligned within a 12 column grid system that creates visual balance within a harmonious composition. Such balance has an influence on the user experience, allowing better navigation and use of the site that enhances users’ confident and establishes credibility on the site and consequently on the University.

As far as the homepage is concerned, the information is easier to find and to interpret. This is respectively distributed through modules that enable better maintaining of the visible content when it comes to being updated as these could be re-sized, but also the white used for the “boxes” together with the pink hover (these are click-able images), gives them emphasis and in my opinion it also gives emphasis to the structural framework in which they are contained i.e. the grid. The same arrangement of the information is also adopted on other pages. However, when it comes to some lengthy text, spaces between lines and paragraphs are used for a better interpretation of the information and this improve legibility and accessibility. Also columns of text are not too wide as they are not too narrow and are perfectly in line with the grid.

Alignment and organization is also visible on the top navigation menu where categories follow the flow of the grid same as their subcategories which hide behind the banner in a similar way as they did in the previous example.
Images are also arranged within the grid so are headings and captions and in general they occupy more than a module of space and extend across the columns but still without breaking the grid. Some of these images feature of swap behavior that emphasizes the use of the Grid System by moving the pictures from the original columns they are trapped within to others, maintaining the alignment with the Grid at the same time.

Finally, the logo does not seem to bring particular emphasis to brand identity. Although it may also be recognizable, the type-font size used is too small in my opinion, to enhance the brand image of the University and also this is still contained within the system of the Grid.

In conclusion, it is as a consequence of the growing use of Grids on the Web that several sources and tools are now available on the Internet to help designer build their grid systems. Some of these are CSS Framework and Blue Print as suggested by Mark Boulton but others such as the one I have used to show the examples on this essay, are just add-ons for the browser. I now understand how important grids are for page layouts and I am convinced I will start using them in the nearest future.

References

• A Practical Guide to Design for the Web - Mark Boulton
• The Grid System in Graphic Design - Josef Muller Brockmann -
• Above the Fold - Brian G. Miller
• http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/
• http://www.subtraction.com/pics/0703/grids_are_good.pdf
• http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
• http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
• http://www.thegridsystem.org/
• http://www.subtraction.com/2005/09/01/the-funniest
• http://en.wikipedia.org/wiki/International_Typographic_Style
• http://en.wikipedia.org/wiki/Grid_(page_layout)
• http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
• http://www.designbygrid.com/
• http://urlgreyhot.com/personal/weblog/cutting_and_sewing_grid_based_design_part_1_working_with_other_peoples_comps