GRIDS IN WEB DESIGN

This essay talks about the use of grids in the web not by an expert in the industry but from a newcomer in the field of web design. Feel free to read. Hope you find it interesting.

villard

Introduction-The Search For A Better User Experience

As web designers when we think about the web probably two things come into our minds.
First, the information: unordered, vast, different. Second, the presentation: the way all this information is presented.

" Web design is like a giant puzzle game. Web designers are called to put together different pieces of information in a logical way, but unlike real puzzles this one can never have a perfect solution. "

What we want is to achieve as much perfection as possible, to arrange our information in a meaningful, clear and attractive way for our users. But how can we achieve that? Opinions differ. Tools though exist to help us get there. One of those creative tools is grids. Grids have seen an extensive use the past centuries. Architects, painters ,photographers , typographers e.t.c implemented them in their designs. Printing media though probably made the most use of them. Even before typography grids like Villard's Diagram (13th century) helped to organise hand written content in books. Grids, the tool for creating the perfect page , was considered a trade's secret between the bookmakers of that period.

It took many years for the web community to understand what the bookmakers of the 13th century knew very well. That grids can be their allies. Since then lot have been written about grids in the web and new online grid systems emerge one after another. Their main goal is to face the all increasing complexity of websites and the demand of users for more aesthetically pleasing designs. Web design though is not so simple like the traditional graphic design whose final forms results from offset printing. Fundamental problems like the different screen sizes and resolutions make it difficult to implement perfect grids. The difficulty increases dramatically when we have to work on fluid and not fixed width designs. It's like working on a constantly changing canvas , the proportions and dimensions of which we cannot know.

Grid Basics

Many might wonder what a grid is, how can we construct one and how can we use it.
We can design a grid for our website by taking a close look to our content. We highlight individually the importance of each element (for example our brand identity, a navigation bar etc.). Then we ask ourselves how we want each element to interact with us and with the rest of the website. After we end up with some draft solutions, we apply the proper mathematical principles. The combination of those 2 will create our final grid. If we would like to give a grid definition for web design we could say that:

" grid is a system for organizing elements on a web-page. Taking into account the nature of the content and size of the page, the area is divided up into (generally even) segments against which everything is aligned " (gridness.net)

The terminology that is used to describe the anatomy of the grids might get confusing. Making a quick reference, according to Khoi Vihn the main parts of a grid are:

Unit: The smallest vertical division of the page. Are the building blocks of grids and are measured in width. Usually are too narrow to house any textual content.

Column: A group of units that are combined together(usually two or more) to create workable areas for presentation of content.

Regions: Groupings of similar columns that form parts of the page. Usually every region has different kind of content than another region.

Fields: Horizontal divisions of the page. Are measured in height and help the designer visually pace the placement of elements on the y-axis. One of the most effective ways to calculate fields is the golden ratio.

Gutters: Are the empty spaces between units and columns. When units are combined into columns though they incorporate the gutters between them but not the space to the left of the leftmost unit nor the space to the right of the rightmost unit.

grid

Baseline Grid:
The baseline of our text is of out most importance. The baseline grid is nothing more than a uniform top-to-bottom repetition of baselines spaced apart according to the leading or line-spacing of the text.

baseline-grid

Mathematics , Nature and Grids

Aristotle said:

" Mathematical sciences particularly exhibit order, symmetry and limitation; And these are the greatest forms of the beautiful "

modulor Vitruvian Man Nature

As designers "the beautiful" is what we want to incorporate in our designs. Mathematics can help us bring a natural harmony to our designs that will look pleasant to the human eye. Good grids are sophisticated, based in logic and make use of mathematical properties.

Golden ratio
Is an irrational mathematical constant, approximately 1.61803398874989. In mathematics and arts two quantities are in golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity(a) to the smaller one(b). In other words (a+b)/a = a/b. Attribution to the discovery of golden ratio is given to the Greek philosopher Pythagoras around the sixth century BC. Scientists have spent endless hours over this simple ratio and its properties. Leonardo Da Vinci called it the "divine proportion" and used it in many of his paintings. Psychologists nowadays believe that the golden ratio plays a very important role in our human perception of beauty.

parthenon Mona Lisa
Apple Logo space geek

Fibonacci sequence
Golden ratio is intimately tied up to another mathematical concept, the Fibonacci sequence. Took its name by the Italian Leonardo of Pisa who was known as Fibonacci. By definition the first two numbers in the Fibonacci sequence are 0 and 1. Each subsequent number is the sum of the previous two. So the result is a sequence of numbers of 0,1,1,3,5,8,13,21,34,55,89,144 and so forth. Any number in the Fibonacci sequence when divided by the number that immediately precedes it, yields a quotient very close to the golden ratio number (1.618). For designers shows a particular interest because when expressed as a logarithmic spiral forms the basis of a grid that is instantly recognizable as harmonious and logical.

twitter

Rule of Thirds
Finally the simplest concept but also the less scientific is the so-called rule of thirds which is in fact not quite a rule and only superficially mathematical. It's dating back to the eighteenth century and provides a basic rule of thumb of how to make aesthetically pleasing and harmonious compositions. The rule of thirds proposes that our “canvas” is divided in 9 equal parts by 2 equally-spaced horizontal lines and two equally-spaced vertical lines. The most important elements of our design must be placed along those lines and ideally in the intersection of them, thus creating more tension and interest on them.

Rule Of thirds

Before we get sucked up by maths and start taking out the calculator we must remember that:

"maths gives us a guide that we can apply, however it’s rather about implementing sites with maths than implementing maths with our designs" (smashing magazine)

How Grids Are Used In News Websites

Grids with their evenly distributed use of columns, rows and other elements make an adaptable architecture that fits perfectly for content-rich websites like news websites. Let's take a look of how they are used.

NYTIMES.COM
 The New York Times website is considered by many one the best implementations of grids in the web . The famous designer Khoi Vihn was the design director of the website. In an old interview of his he points out that the website has inherited some characteristics from a previous design and as a result some elements of the website have no rational or mathematical relation to others. Still though the website has consistency and logic. Starting from the top of the website we can see the brand identity( NYT logo) has been given the most generous space of all the other elements of the website. The user can immediately see the New York Times logo to welcome him. Imposing, placed inside a rectangle that takes the whole width of the page and given generous white space so no other element will "steal" attention. The website differentiate and give emphasis to it's content in many ways. If we try to divide the website it seems to be based on a 6 column/11 units design. The first column(one unit wide) is significantly smaller than the others. This adds a specific distinction which the designer took advantage to place there the navigation bar. Continuing to the right we can see that 1 region is formed consisting of 3 columns. The less importance news take 1 column width and the most important take 2. The website continues like that, It separates content in regions and fields. Gray structural lines are used horizontally and vertically to make this distinction even clearer. Also the headlines have various weight , size and colour. The grid structure can been seen everywhere. It's clear though that the designer tried to squeeze as much information as possible in the homepage. This helps the user to have instant access in news, art, opinions, market, real estate etc. Unfortunately that characteristic is also a point of controversy for many designers that believe the website looks too busy.

New York Times

CNN.COM
 CNN like the New York Times is a world class news agency. Unlike the New York Times though it follows a different approach on it's design. The structural elements of the grid are de-emphasized. The containing boxes and the structural lines are there but not so visible. The website seems to use a 3 column / 16 units grid design. It maintains a consistency throughout the page between image/text pairs , column width and horizontal spacing (horizontal rhythm), vertical element spacing (vertical rhythm) etc. As a result the content becomes more apparent, the clarity of presentation is greatly enhanced and the user experience becomes more pleasant.

CNN.com CNN.com

NEWS247.gr
 Finally new247.gr is a Greek news website. We can take advantage of the language barrier in order to focus more on it's grid and the logic behind the positioning of the elements. The website uses a 3 column/ 24 units design with a generous 20px gutter. The generous gutter allows the website to "breathe". As a typical news website in it's homepage must present a sample of the latest and more interesting news. The solution the designers chose was to divide the homepage in three main columns.

The far left column is the bigger and hosts the most important news. The bigger size draws more attention and emphasizes the importance of the content. It's a common tactic in content-rich sites to present their most important content in this body area. People skim pages like they read, from left to right, so this is the first thing they will notice. The narrower column in the middle is used for less important stories. Finally The far-right column is being used for advertising units and links that lead outside the website i.e. Facebook, Twitter and other media links. This division allows the user to instantly recognise different content and it's importance.

Another characteristic of this website is how text/picture pairs are used to imply the grid. The pictures are placed above text and always take the maximum width available of each column. This enhances the implied lines of the grid. If the website was making less use of images or the images were smaller than the maximum column width, the page layout was going to look broken and the website much more "heavy". Also the combination of written and visual stimulation leads to a better communication. The user can find interesting information with just a quick look of the page without having to read everything like he was going to do in a traditional newspaper.

At the top left of the page we can clearly recognize the "brand" which is aligned cleverly with a navigation bar that leads to different section of the website, politics, sports, car etc. A containing box 24 units long that is located above the 3 main columns has a double role. First it hosts the top 5 stories of the day. Second and equally important works like a point of reference for they eye of the user.

Finally the elements throughout the website are aligned horizontally but not vertically without an obvious use of a baseline grid. This is a compromise between the benefits that a baseline grid might offer and the freedom/flexibility needed. The lack of vertically consistency thought creates a second benefit. Adds a variety that keeps the interest of the user and makes the website less monotonous.

news247.gr

Why to use Grids

By now we understand that grids can become a great tool for web designers. The main benefits of using grids are:

Problems of Grids

Many people believe that if a designer chooses to use a grid the result will lack of creativity.
"To say a grid is limiting is to say that language is limiting or typography is limiting" ( Ellen Lupton) .
Problem relies somewhere else:

Conclusion And Last Thoughts

In conclusion I believe that grids if properly used are powerful tools in the hands of web designers. No matter if we decide to implement a grid or not, the users will still search for some kind of order in our designs. It's up to us if we want to get a head start by using them or not. There is no recipe for great design. Grids must be seen as a rule of thumb for the foundations of our creativity. I would like to close this essay with a sentence of a great graphic designer Josef Müller-Brockmann (1914-1996) who strongly influenced our point of view about grids.

"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. "

References and Many thanks to: