Introduction
In this essay I will attempt to explain what the grids are use for, starting with a brief history, then a definition of grids and the important of the grids on the web. Finally some examples of websites to illustrate the use of the grids on the web and show with these examples how important grids are when the web designer wants to show order and harmony on the web.
Learning how to use grids is one of the hardest thing for the designers. The reason of grids is because they help to divide de content into modules. This makes the content more organized and flexible. Grids help the design to be built quicker and for the person who visit the website it makes everything more enjoyable to view and read.
"Information presented with clear and logically set out tittles, subtitles, texts, illustrations and captions will be only not be read more quickly and easily but the information will be also be better understood and retained in the memory. This is a scientifically proved fact and the designer should bear it constantly in mind."
To be able to understand grids, there is important to have a look at some definitions:
Column grid.
- Units: Is the smallest vertical division of the page.
- Columns: They are groups of units, which are combined together for the presentation of the content.
- Baseline: It is a invisible line where the letters of the content rest.
- Regions: A group of column.
- A problem can be solver quicker and cheaper.
- Fields: Horizontal division of the page, the golden radio method is the most effective to calculate the height of the field.
- Gutters: Are the spaces between columns.
History of grids
The use of grids started hundreds of years ago, no one talk about grids until mid-twentieth century, The pages on the religious texts were justified and often using more than one column placed symmetrically on the page.
Late-sixteenth-century English Bible.
From the beginnings of printing until the Industrial Revolution, the only print were books, they were printed in one column justified. The next hundred years with the Industrial revolution the graphic design was born, and the print became really important and popular, posters, newspapers, magazines, timetables, and all kind of information was printed.
English Illustrated Magazine
Müller-Brockmann’s Grid Systems in Graphic Design
"This spread is from Josef Müller-Brockmann’s Grid Systems in Graphic Design, in which he explains, in meticulous detail, how multicolumn and field-based grids can be used flexibly to achieve any number of different layouts, in both 2-D and 3-D work."
The modern typographic grid was born after the Second World War II by the influence of the modernist.
Grids have its root long time ago since books started being writing by hand until today where people print almost everything; and the Internet has become so important.
What is a grid?
"A grid subdivides a page vertically and horizontally into margins, columns, inter-column spaces, lines of type, and spaces between blocks of type and images. These subdivisions form the basis of a modular and systematic approach to the layout, particularly for multipage documents, making the design process quicker, and ensuring visual consistency between related pages."
The well design grid depends on the radios which are the core; these ratios could be rational such as 1:2 or 2:3, or irrational such as 1:1.414 (print design A4 paper) and the golden section which is base on the Phi number.
When the design is for the web, it has to work in every browser and devises or screens size, also it has to be adaptable just in case the user wants to increase the text size and the design does not get ruin.
Example of grids
Why are grids important?
There are many reasons for the web designers to use grids, but the main thing is they just bring benefits to the websites. Some reason about why to use a grid are:
- Grids are important in a presentation of content to show order, continuity and harmony.
- Grids help the users to find the information easier and at the same time help the web designer to put the information in the right place; where it can be found.
- Grids help the user or web designer to add new content keeping the original design.
- A problem can be solver quicker and cheaper.
Websites analysis
I have chosen some examples of websites to analyse their use of grids.
Coca-Cola Great Britain
The first website I chose to analyze is the Coca-Cola's website, which is 1000px width with a fixed layout; it appears to use twelve unit grid, is clear that they do not stick to the same layout for every page. On the home page it is used two grids on the top of the page as it is showed on the picture. Then for most of the elements on this page it is used four equal-width columns.
Two equal-width columns
Three equal-width columns
Coca-cola is fizzy dark drink, which was introduce in the market in 1886 by United States and since then it has been growing all over the world. Coca-cola being a brand well known internationally makes the user to trust them with all the products they have.
Even though coca-cola is a international drink every country is free to have its own web design, they just have to keep the logo. The branding section on this website with the logo, picture, twitter contact, change country and advanced search remains on all the pages, keeping harmony and uniformity. The menu also remains on all the pages, the menu has 9 options and these option have more options, to help the user to find things easier.
The typography on the logo is clear, it is bright red and with a different font and color the word Great Britain, so they kept the logo and they just add Great Britain to clarify where the website is from.
The content on the three grids is clear, and because they used grids on the website, it shows order and continuity on all the pages.
The website does not have much whitespace but the page does not look saturated, it looks friendly and organize and for this reason it is easier for the user to scan for information.
The Sun
The Sun is a tabloid newspaper published in the UK and Ireland; founded in 1963. The Sun's website used three equal-width columns on all the pages, so it has continuity and harmony. the branding is shown on all the pages, the logo uses two colors white and red which make a good contrast; the typography is clear and the size of the font is perfect to get the audience attention; also it shows the date which is very important for a newspaper. The main menu does not have many options but once the user click on any option, a sub-menu will be displayed to give the user more option to click on.
Three equal-width columns
On one hand the website has a lot of information, quite a lot going on; even that the content shows order and the bold on the tittles makes easier for the user to scan for information. On the other hand this website is a website for a newspaper so a lot of information is something to expect.
The typography is clear, and the font on the website uses more than two colors, which help the news to be differentiated.
The information on the bottom of the website shows the menu vertically, with two different colors to keep the contrast but at the same time to differentiate it from the rest of the website. the search box is friendly. The menu appears twice on the website, on the top and on the bottom, making easier for the user to find information; because it is a newspaper website there is quite a lot of information so if the user is reading something on the bottom then the user won't have to go back to the top in case the main menu is required. On this part of the page the use of grids is not clear, grids should have been used to show continuity; even that the information does not look messy.
Six equal-width columns
The website is a fixed layout but it has the option of mobile device, which will appeal more users to visit the website. Also because some people do not want to get the newspaper printed every day, they offer the option of getting it on the phone, for all the customers who like reading on the way to work, or just with a cup of coffee in a cafe. The big picture next to the statement gets the users attention inviting them to click and read more. Also the small pictures on the bottom of the main image give the user and idea of the main news and help the user to scan for information.
The Sun mobile option
The mobile version appears to use three unit grid, is clear that they do not stick to the same layout on the same page, because on the bottom the use of grids is clear which is not very clear on the top; the use of grid on this section would have help the content to show continuity, and the white space would have been the same between the different news.
The Sun mobile option
PC World
Pc Word is a company who basically sells electronic stuff and accessories , it has the option to shop on line. The website used a fluid layout, which let everything go larger or smaller in proportion with the user’s preference. It used four equal-width columns.
The branding is not very big but is clear and it uses two colors which is right. the search option is clear and easy to find. Also the three options on the right are clear and the shopping option looks different to the other two options, because the main reason of this website is to make the people buy.
Four equal-width columns
The sale advertising is bright and appeals the user's attention as soon as they go to the website, the word Sale is big making the user to click and have a look at the sales; once the customer clicks the sale looks like a barging making the customer to buy something.
On the sale option the page appears to use six equal-width columns, keeping the order and continuity and it keeps the sale advertising, just a little bit smaller. The save price in each product makes the customer think is saving lots of money, and the customer end buying something.
Six equal-width columns
Save the children
Save the children is a foundation which work hard to help children in United Kingdom, Africa, Asia and South America. The children fund was set up in 1919, since then the foundation has been growing in different continents.
The website uses a fixed layout and centred within the browser window, it is 960px wide. The logo is a child which represents the website very well, it uses one colors and it has a good contrast with the light green at the back. The typography used is clear, and it has good size. The statement of "No child born to die" with the bold and logo used on part of the statement contribute to trust in the foundation.
The main menu is clear and it is right on the left and on the other side there is the search box, leaving not much whitespace. Also the red color on the link "donate" appeals the user to click on the link, it is an invitation to help the children.
Three equal-width columns
On the footer it looks like a grid was not used, even that the links do not look very messy; a grid should had been used to keep continuity. Also the main menu is display with the sub menu, helping the user to scan for information. The logo appears on the bottom next to a statement which help the website and foundation to be trusted by the users.
Eight equal-width columns
On the left hand side right on the bottom is a link to click on and select the mobile mode, which make the website modern, because at the moment most people use the Internet on their mobiles. The main menu shows just three options signup, donate and menu; signup and donate because the propose of the website is to make people to contributed with a donation to the children and the menu so if the user is interested on more information; onces the user clicks on the menu, a sub menu is displayed helping the user to find what the user is looking for in a easier way.
Save the children mobile option
Conclusion
Overall, grids help the web designer to show order on the website or create order in design problems; they are very useful where there is a lot of information to show, because it gives to the website a professional touch.
"Well designed grid systems can make your designs not only more beautiful and legible, but more usable."
Grids help the user to scan for information and find what she/he is looking for easier, so the user won't go somewhere else. The use of grids on the web make the website to appear consistent on all the pages, it gives continuity and it makes the website trusted by the users. Furthermore grids are used not only on the web, they have been used on books, magazines and newspapers, but they are just some examples of what grids can be apply on.
To summarise, Khoi Vinh says "In my view, the central challenge of any graphic design problem is determining the constraints. Constraints - rules, frameworks, limitations - are so often the spark that ignites an inge¬nious solution. A grid system is not just a set of rules to follow then, but it’s also a set of rules to play off of - to break, even. Given the right grid - the right system of constraints - very good designers can create solutions that are both orderly and unexpected. That’s when you’ve gone from using the grid as a style and moved into using the grid as a real tool for creativity."
Design
To design this standalone page a sixteen equal-width columns was used and a fluid layout. I design the icon and branding in Photoshop; the image on the footer was done in Photoshop as well. Why Photoshop and not Illustrator? Personally I find Photoshop easier to use at the moment and it did let me everything I wanted to do.
It was not easy to decide which grid to use so a sixteen equal-width columns was used after trying all the possible options; one of the reason to chose this specific grid was that it was easier to combined the columns to show the content; one block of four columns was used to show the menu and a block of eleven columns to show all the content. The typography used was Georgia, because it is clear to read; and some space was given between the lines to not let the user to get tired and getting the readers interest. Also for the branding design a font called Archivo Black was used, which was downloaded on google open fonts website.
A tool called design was used to make easier the use of grids; which was downloaded for free and which is really good, it has four options to make easier the design but in this case it was used just the grid option. The grids section has the option to insert the width of the page, the number of columns and some more useful options.
Grids design - Sixteen equal-width columns
