- January 25th, 2012
- Write comment
TABLE OF CONTENTS
1. Grids – Overview
2. Grids throughout history: from the Middle Ages handmade books until today’s websites
3. Websites Analysis
1. Grids – Overview
In design, some of the main principles are balance, proportion and rhythm. According to Joshua David McClurg, balance is “the arrangement of the objects in a given design as it relates to their visual weight within a composition”, proportion “is the relationship in scale between one element and another, or between a whole object and one of its parts” and rhythm “is the repetition or alternation of elements, often with defined intervals between them.” (McClurg, 2005). When these principles are successfully applied, the design is more likely to achieve better results in terms of aesthetics and usability. The most efficient way to have a balanced, proportional and rhythmic design is through the use of grids. In a few words, a grid system is a set of guidelines used to structure content. The use of grids results in a more attractive and logical layout. Although it’s possible to create an aesthetically pleasing design without using grids, it’s not possible to do it with the same efficiency and precision.
There are many possible ways to create a grid system, and mathematical calculations are used according to the intended design. A design created with grids has a solid structure and designer’s decisions are easier to be made following this structure. When choosing where to place some text or deciding the size of an advert box, for example, the designer has structured columns and decisions are made easily without hesitation. It helps the designer to create a logical and more pleasing design. The user experience is enhanced as well, as grid based designs are more attractive and also more usable. According to Mark Boulton, a pioneering supporter of grid-based design for the web, “The grid is the most vivid manifestation of the will to order in graphic design. […] Units are the basic building block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.” (Boulton, 2007).
2. Grids throughout history: From the Middle Ages handmade books until today’s websites
The use of grids remounts to the Middle Ages, when in the 13th century, a French artist and architect called Villard de Honnecourt used a system today known as the “Villard Diagram” which consisted in dividing a straight line into logical parts. Villard is known only through a handmade portfolio he left with approximately 250 drawings dating from the 1220s to 1240s preserved in Paris.
Around 1439, the German Johannes Gutenberg introduced the printing press, commonly considered as the most important event of the modern period. His most important work, the “Gutenberg Bible”, is acclaimed for its high aesthetic and technical quality. In the 20th century, the page layouts of these early books were widely studied by names such as Jan Tschichold.
In 1923, Jan Tschichold, a German typographer, book designer, teacher and writer, converted to Modernist design principles and, in 1927, published his most noted work: Die neue Typographie. In this book-manifesto, Tschichold went through various aspects of modern design. According to Mark Boulton, “As with all manifestos, it’s a work of vision, new ways we should think; a work of unwavering principles on how we should design printed material.” (Bolton, 2011). In the book, Tschichold writes about logical construction in nature and in human activities: “Construction is the basis of all organic and organized form: the structure and form of a rose are no less logical than the construction of a racing car –both appeal to us for the ultimate economy and precision. Thus the striving for purity of form is the common denominator of all endeavour that has set itself the aim of rebuilding our life and forms of expression. In every individual activity we recognize the single way, the goal: Unity of Life!” (Tschichold, 1927)
In another publication called “The Form of the Book”, Tschichold writes about methods that are known as the Canons of Page Construction: “Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life.” (Tschichold, 1991). Mark Boulton defined the Canons of Page Construction as “geometric systems that create beautiful text for books. Text that belongs. Text that feel connected to the physical form in a binding manner that should make it invisible.” (Boulton, 2011). Typographers and book designers apply these laws to this day.
The Van de Graaf canon, also known as the “secret canon”, is a method used in medieval manuscripts and incunabula (books, pamphlets or broadsides, not handwritten, printed before the year of 1501 in Europe). It consists in dividing a page in pleasing proportions. The geometrical solution of the construction of Van de Graaf’s canon works for any page width: height ratio, enabling the book designer to place the text body in a specific area of the page.
Raúl Rosarivo analyzed books from the Renaissance and conclude in his “Typographical Divine Proportion”, first published in 1947, that Gutenberg and others had applied the Golden Canon of page construction in their works. The “secret number”, as Rosarivo called it, was 2:3. Tschichold also concluded that the Golden Section was used in many book design and manuscripts, mostly in the ones produces between 1550 and 1770.
The Golden Section, or Golden Ratio is a mathematical ratio used in design since Greek and Roman times and can be found in nature, being also called Divine Proportion. The Golden Ration creates compositional proportions aesthetically pleasing. In the 19th century, a German psychologist called Gustav Fechner found through experiments with rectangular items (books, newspapers, boxes, buildings etc) that the majority of people prefer to look and use rectangular objects with the Divine Proportion (1:1.618). Many grids are built based on the Golden Ratio. The Golden Ratio can be found if you divide a line into two parts so that: the longer part divided by the smaller part is also equal to the whole length divided by the longer part.
a : b :: a + b : a
a/b = (a + b)/a, where a > b.
The golden ratio is approximately 1.6180339887
The Golden Section is not restricted only to design. According to Mario Livio, “Some of the greatest mathematical minds of all ages, from Pythagoras and Euclid in ancient Greece, through the medieval Italian mathematician Leonardo of Pisa and the Renaissance astronomer Johannes Kepler, to present-day scientific figures such as Oxford physicist Roger Penrose, have spent endless hours over this simple ratio and its properties. But the fascination with the Golden Ratio is not confined just to mathematicians. Biologists, artists, musicians, historians, architects, psychologists, and even mystics have pondered and debated the basis of its ubiquity and appeal. In fact, it is probably fair to say that the Golden Ratio has inspired thinkers of all disciplines like no other number in the history of mathematics”. (Livio, 2002)
In architecture, the most well know example of the Golden Ratio applied is the Parthenon, in Athens.
In art, the Golden Ratio can be found in Leonardo da Vinci’s “Vitruvian Man” and Rene Magritte’s “The Blank Check” for example:
In the example below, the Golden Ration is applied to Web Design, with the main content (1) and the navigation and second column (2) built following to the Divine Proportion.
The use of grids in web design was a natural development of its use in print design. According to Mark Boulton, the Canons of Page Construction and other principles to design grid systems are “about comfort. Creating a comfortable, invisible reading experience.” (Boulton, 2011). Grids in printing design are created in a paper, and that is the main difference to grids for the web. There are no edges or a canvas. Boulton states that to design a layout system for a website, some points have to be considered: “Screen resolution ranging from 2560px wide and above, down to 300px wide and less and, quite literally, everything in between; Different devices all with potentially different pixel densities; Context and usage. We have mobile, tablet, laptop, desktop, TV, fridge, car… etc.” (Boulton, 2011).
As there isn’t a page as a reference like in printing design, the grids for the web have to be planned based on elements of existing content. Boulton states: “Remember the goal is connectedness and this feeling of belonging. We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don’t start from an imaginary page. […] Start designing from the content out, rather than the canvas in.” (Boulton, 2011)
The way to apply these concepts to reality is through Responsive Design. “We can now design effective adaptive layouts that respond to their environment. If these layouts are based on a system that defines its ratios from the content, then there is connectedness on two levels: connectedness to the device, and connectedness to the content”. (Boulton, 2011). Responsive Design force designers to re-write rules and canons established over centuries of graphic and book design practice.
3. Web sites Analysis
The genre chosen was News websites, with emphasis on the online versions of the most important Newspapers in the world.
3.1 New York Times
The New York Times website was built based on a 6-column grid system. It could be also divided in a 12-column grid. Only the first column has a different width, and that was calculated based on the Golden Ratio rule. It was a great solution to resize the first column as it needed to be different from the others, and the use of the Divine Proportion made it balanced and harmonious. The columns 2 to 6, from left to right, have approximately 170 pixels and this first column has approximately 104 pixels. To check that the Golden Ration was applied, I simply divided a (170) by b (104) and the result was 1.63. The aim when stipulating a different width to the first column was to make clear that it was the main navigation of the website. The vertical menu was the solution to display more than 50 links. All the main navigation items are displayed along with the sub-navigation items, an efficient idea to avoid the use of scrolling navigation.
The structure is very solid and the design clear, with visual rhythm and organization. The grid system enables the design to be organized even with a great amount of content being displayed. The 5 remaining column have the flexibility needed to place elements across 2 columns if needed. The main content of the website spans the second and third columns of the grid. The same happens with the advert box that spans along the last two columns. That’s the solution found to achieve emphasis, giving more space to the main news and the ad box. This structure gives the New York Times website the look and fell of the print version, but with the flexibility and dynamism.
3.2 The Guardian
The Guardian website has a beautiful and efficient design. If compared with the other news websites analyzed here, it’s clear how it stands out with the others. The Guardian website was built based on a 6-column grid system. As in the New York Times website, it could be also divided in a 12-column grid; however the smallest element in the website is placed in one of those 6 main columns, so for this analysis it can be seen as a 6-column grid system. The division of the columns and how the elements spam through it has an unorthodox but very effective hierarchy. The 6 columns are divided in 3 main blocks, and the first one is formed by 2 columns, the second by 3 and the third by 1. This sequence of 2-3-1 seems odd but it has a great effect on the website.
The first block is strict, and the content placed in it always spans the first and second columns with no exception. A diverse range of news with pictures or only text is displayed, with even horizontal divisions. The second block is the main one, and the content placed in the top of the page spans all three columns of this block. This content is usually a big picture. Right below this main picture, an interesting method is used, as news with pictures are placed in the first column of the block and the remaining two columns are used together. These two columns are the first spot where adverts are placed. It is a subdivision of the main block, first formed by 6-columns that worked very well. Finally the last block is formed by a single column and adverts, site map, forms and sponsored features are placed in there. In overall is a great use of a 6-column grid system.
3.3 Le Monde
The website of French newspaper Le Monde was built based on a 4-column grid system. As in the previous examples, it could be also divided in an 8-column grid but the elements are placed in one of the 4 main columns in the whole website. With only 4 columns, the content is displayed in large areas, and the rhythm is affected. Aesthetically, the 4-column grid doesn’t help, and the layout is bland and weak. The typography also brings problems; in the title for the main picture, for example, it is centralized, while the picture is aligned to the left. The gutters don’t follow a standard and different sizes can be found through the website.
The website doesn’t give credibility and has no identity either. Perhaps a 6-column grid layout could improve the overall look and feel of the website, as elements would be placed with more harmony and a clearer division would be achieved. The content is badly organized and the there’s no clear hierarchy. I couldn’t identify positive points in this layout or benefits in using a 4-column grid system, especially when compared with great websites such as The New York Times or The Guardian, analyzed previously.
3.4 El País
The website of the Spanish newspaper El País has a much better layout when compared with Le Monde, and has some points in common with The Guardian website. Having a neat 5-column grid system, the website also enhances the user experience, displaying its content in a very clear and organized way. In common with The Guardian, El País has a very clever division of the grid in three blocks. Instead of using The Guardian method of division (blocks with 2, 3 and 1 column respectively), El País presents a more structured format with 3 blocks formed by 2, 1 and 2 columns respectively. The main content is presented in the top right corner of the first block, and this first block also brings interesting features such as a slide box.
The layout is very balanced and organized, presenting a good rhythm and logical visual hierarchy. As in the other websites, the adverts are placed in the last block, in this case formed by two columns. The logo is placed in the centre of the page, and is harmonious with the rest of the layout. A nice touch was a different colour background for the middle column. While the background of the website is white, this column has a grey background, making the grid even more evident. The overall layout is very clear and organized, making the user experience more logical.
The online version of Russian newspaper Pravda is the worse one among the sites analyzed here. The problems with the grid system start with the division of the columns. Apparently there was an intention of creating a 5-column grid layout, but the columns have different widths. In the header, the logo is placed in the left hand side, roughly inside the first columns, however, three news are placed besides and they are not inside any column, already causing a discomfort and making the navigation confusing. In the first column, the “readers top” news were placed also following the grid, as it was done with the logo, and then a series of headlines are placed without any organization out of the structure that supposedly was there.
The grid is only clearly used in three main blocks of news, inserted within the second, thirds and fourth columns. This organization is ruined, though, in the elements right below it. A few more blocks of news are placed once again with no organization and not following the columns. Given the lack of a grid system, the navigation is confused and has no logic or organization. This website is an example of how the lack of a good grid system can ruin a layout.
Through the analysis of these websites, it’s clear how important is to have a strong and consistent grid system when designing. The use of grids in web design has its basic elements based on grids used in printing design and even before that, in handmade books. It’s interesting to observe how the Canons of Page Construction were deeply analyzed throughout the 20th century, concluding that since Gutenberg’s Bible, certain rules regarding grids and page layout had been followed with great results, and how, although these can still be applied when designing for the web, a new paradigm was created. Grids in web design are related to a Responsive Design. Structured and organized layouts have to be created considering all possible devices and resolutions, and, above all, the user experience.
Boulton, M. 2005. Five Simple Steps to Design Grid Systems [online]Available at: <http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1> [Accessed 14 January 2012].
Boulton, M. 2007. Grids are Good (Right?) [online]
Available at: <http://www.subtraction.com/pics/0703/grids_are_good.pdf> [Accessed 15 January 2012].
Boulton, M. 2011. A Richer Canvas [online]
Available at: <http://www.markboulton.co.uk/journal/comments/a-richer-canvas> [Accessed 14 January 2012].
David McClurg, J. 2005. The Principles of Design [online]
Available at: <http://www.digital-web.com/articles/principles_of_design/> [Accessed 15 January 2012].
Friedman, V. 2007. Designing with a Grid Based Approach [online]
Available at: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ [Accessed 15 January 2012].
Livio, M. 2002. The Golden Ratio: The Story of Phi, The World’s Most Astonishing Number. New York: Broadway Books.
Tschichold, J. 1928. Die neue Typographie. Berlin: Tschi.
Available at: <http://www.olivertomas.com/books/the-new-typography/> [Accessed 17 January 2012].
Tschichold, J. 1991. The Form of the Book. Vancouver: Hartley & Marks.