Introduction
The aim of this essay is to illustrate how grids are used in web design based on the designs of a number of hotel websites. Grids are an established design tool and I will come closer in this essay to the theory of grids and their benefits for the web. This is a large topic and I will not be able to summarize everything. Instead, I will attempt to illustrate here, using a number of hotel websites, how grid system theory can be put into practice.
Definition
“A two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.” — Wikipedia
The grid, an invisible structure, is used to put together all the elements within a web page. Grids should never be obvious to the eye, but the effect of the discipline imposed by a grid should be seen by the placement of elements on the web page. The grid also determines the width of column texts, repeated placement of elements, padding around imagery, word spacing, line height and other related design elements. A grid’s main goal is to produce a more readable and enjoyable web page design through creating a connection of unity within a design, which in turn makes web page content flow better. Alex White’s Elements of Graphic Design explains the use of unity through a grid:
“Unity in design exists where all elements are in agreement. Elements are made to look like they belong together, not as though they happened to be placed randomly. (…) So, without unity a design becomes chaotic and unreadable. But without variety a design becomes inert, lifeless, and uninteresting. A balance must be found between the two.”
Designers in every walk of life use grids as a guarantee for positive element positioning. Therefore, the importance of grids goes beyond web and graphic design, to almost every profession where any form of design is implemented. It has become almost professionally vital to use grids in all modern design practices.
Module as a unit of grid
Growing up in the Soviet Union, one of my interesting memories from childhood was the cartoon 38 parrots. It showed a group of animals trying to measure the length of a python. Initially none of them could come up with an unit of measurement. At last, the parrot arrived and offered to measure the python in parrot length, i.e. how many parrots would fit into the python, which turned out to be 38. This was an example where the parrot ended up being a module.
We can of course find more serious examples of modules. There has been a famous saying of Protagoras from the times of ancient Greece “Man is the measure of all things”. When the masterpieces were built in Athens and elsewhere, door sizes were measured in shoulder width, and the height of the ceiling was measured in terms of human height. Here, man was the module system. When the head of a man was taken as a module, then there were 7 heads in a typical man’s height. Moreover, the key points of building rules could be identified at distances that were multiples of this module. So, the module is a unit of measure set to give proportionality, and the grid is a system of proportions.
What are the aims of a grid?
- To work faster and more effectively as the time spent on geometrical positioning of the element on a mock-up is reduced
- To achieve balance and proportionality such that all elements on a mock-up are proportional among each other
- Acceleration and gauging, the unification of all items. Once developing a grid, we do a platform for the future decisions. The clever guides consist detailed description of modular grids. In web design we can make a general mockup for whole website and individual parts for singular variants.
Grids in graphic design
In the context of graphic design, a grid is an instrument for ordering graphic elements of text and images. First of all when talking about grid systems we have to separate form and function. We have to think about aesthetics and proportions as a result of considered construction. Ratios and equations are everywhere in grid system design.
Examples of design with grid and without
Relational measurements are what defines most systems, from simple leaflet design to the complexity of newspaper grids. The designer has to become familiar with the ratios and proportions in order to design a successful grid system; from rational ratios such as 1:2, 2:3, etc. to the irrational proportions based on the construction of circles, such as the Golden Section 1:1.618 or the standard DIN sizes 1:1.14146.
A grid design that can be applied to several different designs without altering the form is termed as a grid system. An example of this would be a grid system for books. A book contains many different page types – title, sub-title, preface, main text etc. A grid system enables the designer to use only one grid on all the various page types. A second example would be a website that has a homepage, a section index, a category index, and an article page. A grid system provides consistency across these pages or sections.
The canvas for a grid system is determined by the type and size of the media: a book, magazine, signage, or a website. The benefit of designing for more traditional media forms is that the canvas will remain constant. It will not change its shape nor size. However, one of the major complexities in web design is that the user has a choice of multiple platforms and multiple browsers that are not always compatible. Beyond that, the user also can resize his/her browser window to the screen resolution. Designing a grid system for such variables is a challenge.
In order to successfully design a grid system for the web, we have to look at a best-case scenario and graceful degradation. In 2006, Jakob Nielsen wrote on his famous Alertbox: “Optimise web pages for 1024 x 768 pixels”. At the time, 60% of all computer screens were set at 1024 x 768 pixels. By 2009, that number was down to 30%.
The simplest grid is a block grid, also called the “manuscript grid,” which represents roughly marked area – unit. Modular grid in 960.gs or Blueprint CSS is a column grid and consists only of vertical divisions or columns. Another type of modular grid has both vertical and horizontal separations. What is created between the intersections is module. The last type is called the hierarchical grid. In this grid type positioning of the blocks is irregular, yet intuitive.
Golden ratio
Grids can be simple with the same size of modules, or complicated with non-linear proportions of module sizes. Here, it is important to remember about proportions, the most famous of which is the Golden ratio. It is known that most aesthetically pleasing designs, works of art, objects and even people have the same proportion in common. Specifically the Golden Ratio, also known as the divine proportion, is designed by the Greek letter Ф (phi).
As stated in Wikipedia, two quantities are in the golden ratio if the ratio of the sum of the quantities to the longer quantity is equal to the ratio of the larger quantity to the smaller one. The golden ratio is an irrational mathematical constant, approximately 1.61803398874989.
Twitter home page based on Golden Ratio
The Golden Ratio and grid based design in web are interrelated. As an example, if we want the website to have total width of 900px, we divide that by 1.62, so the main content bar will be 555px and the side bar 345px. On the other hand, if the total width of the website is 960, then main bar will be 593px and side bar 367px.
In a simpler version of this grid, width and/or height is divided in thirds.
The Wit is a web site of the hotel in Chicago which is designed by using a simple grid also called the Rule of Thirds.
Elements of a web page
There are some basic elements of a web page and many ways to organise them to get a properly functioning and aesthetically pleasing result:
- Container (contains all other elements) is used to hold all page elements, which can be arranged in many ways. There are two types of container: liquid, which expands to fill the width of the browser window, and fixed, where a specific chosen width doesn’t change regardless of browser window size.
- Header is more generally used while referring to the top section of the web page where logo, navigation and tagline are located, but it is not really a specific element of the web page.
- Logo is a graphic mark of emblem used for identity and branding. The logo is usually placed within the header and aligned left.
- Navigation is one of the most important elements of web pages. It should be easy to find and to use. Hence, it is almost always located within the header or at least close to the top of the web page. There are two types of navigation :
- horizontal, where links are displayed inline
- vertical, where links are displayed as a vertical stack
- Content is the element of the page where visitors look primarily and main focal point of it.
- Sidebar is the element with secondary content (e.g. advertising, site search, subscription links, contact methods etc.)
- Footer is the last piece of content located at the bottom of each page of the web site. The footer is the area that many web users expect to find the “fine print” – legal information such as “term and conditions”, “privacy policies”, etc.
- “Whitespace” is any area of the web page that is not covered by typography or other content, but it its as important to a good web page design. Whitespace helps to guide the visitor through the content, creates page balance and gives a good sense of content separation.
Use of grids in web design on the example of some hotel web sites
A number of hotel websites below provide an understanding of how grids are used to present content, visual hierarchy and user guidance, how the layout can be used to give credibility.
a. Trapp Family Lodge
The Trapp Family Lodge is a winter resort catering primarily to the ski tourists. The grid design for the website is based on 3 equal 300 px wide columns. Total fixed width of the body page is 907px. The three main horizontal divisions contain the header (including branding and navigation), main content space and footer.
The use of Lucinda Grande as the primary font and the colour palette results in a website that feels pleasant and family-friendly, which is the target market for the resort. The main emphasis of the site is on visual display of the hotel facilities, surroundings and attractions.
Above the fold
The logo of the hotel is presented on the top-left corner of the webpage and is presented as an image, i.e. can not be clicked to transfer to the homepage from anywhere else. Brand identification is achieved through the prominence and placement of the logo.
The menu bar also contains brief description of the tabs. The choice of the navigation font colour, matching the colour of the crown in the logo, further helps in brand identification. Navigation is split into two levels: one shows the benefits of choosing the Trapp Family Lodge hotel, and the other gives general information about the hotel, newsletter subscription option and a photo gallery.
As this site has a lot of content, different information and promotions, search option on the top is useful to quickly access the most relevant information for the visitor. On the homepage, the text and links to important pages are well written.
The emphasis about the attraction of the hotel is achieved through the aesthetically shot photographs on the slideshow, which has the look and feel of a photo album.
Call to action – easily accessible booking form on the home page. However, the website does not have a contact form, the only contact information is within the footer.
Below the fold is the footer which includes the address and legal information about the site.
The professional design, attractive picture gallery, well-written description and easy to use booking form give the website credibility.
b. Mosaic House
Mosaic House is a hotel and shared accommodation service in Prague. The website is built using 16 column grid, uses Arial as the main font and the fixed body width is 960px.
Above the fold
The logo is placed on the top left corner and by clicking the logo from any of the pages, the visitor can transfer to the main page instantly. The placement and emphasis on the logo results in strong brand identification as it the first noticeable object on each page (our view flows naturally from left to right, top to bottom similar to the way we read).
Choice of languages on the top right corner is easily accessible.
The menu, with a number of sub-categories, is placed alongside the logo on the top part of the page. The sub categories help to direct the visitor to more specific area of interest, facilitating the access of different information without the use of search button.
Call to action
The booking form is in colour R:198, G:00, B:112, hex #C60070 and the brightness contrasts nicely with the mostly white container background and dark photo gallery. Also, the booking form colour palette is in sync with the logo design.
The placement of the contact information just below the booking form is intuitive and easy to access.
Testimonials are placed on a highlighted area and linked to independent review website Tripadvisor, which enhances the credibility of the brand identity.
Attractive photo gallery helps to share views of the hotel and the city.
Additional information about the hotel and facilities are presented up the fold (on my screen resolution of 2560 x 1440); however the visitor can access the details only through clicking on the “Read more” button. Making the images and texts hyperlinked would have been preferable.
Below the fold
Lots of information about the city and the events, making the site a one-stop portal for a new visitor to Prague. The personal touch of including the picture of the blogger further improves credibility.
Social media connection is presented with Facebook fan page highlighted and additional connection to Twitter, Flickr and Tripadvisor on the footer.
c. Hotel Terra
www.hotelterrajacksonhole.com
Hotel Terra is located in Jackson Hole, one of the premier ski resorts in USA. The design is smart and simple and uses pleasant, eco-friendly colours that amplify the understated elegance of the hotel. The logo of the hotel is on the top left corner, which is clickable and the white font stand out nicely on the green background.
The whole page is visible on my screen and hence, none of the information is below the fold.
960px fixed body width, floated to the left. The design uses 5 column grid, where the first column is for branding and navigation menu and the rest are for the content with image gallery.
The navigation menu is on the left and structures the pages creatively with all the categories starting with R. The lack of a search button is not a big handicap due to the extensive navigation menu, which is accessible from all pages.
The body is dominated by the image slideshow, which is arranged using multiple grid type. The text used under the tag h2 below the image gallery works well for search engines.
Social media links (Facebook, Twitter, Tripadvisor, Flickr and Youtube) are on the footer section.
Call to action
The navigation menu is followed by a link to a video on the left column, which stands out due to the colour contrasts. There is another call to action on the top right, above the image gallery, that directs visitors to the booking form page. However, it is less noticeable that the video link.
d. Atlantis the Palm
The Atlantis is a group of luxury hotels with branches in the Bahamas and in Dubai. The first page makes good use of flash intro to split the traffic by visitor type. Once visitors reach the main site, they see beautiful images and a clear next step: to make the reservation.
Above the fold
Language choice is on the top right corner on the main page as well as on the other pages. As Dubai is positioning itself as a travel hub between east and west, the diverse choice of languages cater to people from a wide number of countries.
The width of the flash header is fixed 1200 px and does not resize to the size of the browser. The menu bar is aligned to the rest of the body and is 960 px wide. This creates a mismatch up the fold view, which I found to be distracting.
The grid type used to design the page is made of 4 columns. It uses white space and images to avoid complicated navigation and present a more engaging interface.
Large choice of social media connections improves the credibility by allowing the visitor to access independent reviews.
www.atlantisthepalm.com
Call to action
A number of special offers presented using flash on the main page entice the visitor to make instant reservation. The normal booking form is just below the special offers, but is somewhat drowned out by it.
Below the fold
Four videos give the visitor insight into different aspects of the hotel. Additional information can be found on the high footer on a blue background, which relates to the sea resort nature of the hotel.
Conclusions
A logical layout that is more attractive can be attributed to the use of grids to define the page layout during the initial design phase. In basic terms, a grid is just a regular series of lines and boxes that define sections of a page. Usually, the page is defined into a set number of columns, the simplest and most common being the three column layout. However, the page can be divided into 6, 8, or more columns as well, where the elements may span two or more columns. This enables the designer to create a variety of options for laying out a page.
Yet another option is to use columns of unequal width. The Golden Ratio, a mathematical ratio that has been used in designs since ancient Greek times, is a popular ratio for this type of layout. Use of this ratio ensures a natural and harmonious design.
In web design, it is difficult to control the height of a page. Text shapes often change as the user has the freedom to change the text size in their browser, or the page content is modified. For that reason, horizontal gridlines are rarely used in web design.
Grids are a standard way of organising thoughts visually, from small parts to overall, and makes layout decisions easier. The understanding of how to create harmonious arrangements based on grids allows the designer to communicate better with the user. According to Mark Boulton, the use of grids results in a layout design that is of regular and verified proportions, leading to a pleasing web page.
Sources
Bibliography
- Mark Boulton “A practical Guide to Designing for the Web”, 2006, Mark Boulton Design LTD, Penarth
- Josef Muller-Brochmann “Grid systems in graphic design”, 1996, Ram Publications
- Patrick McNeil “The Web Designer’s Idea Book, The Ultimate Guide to Themes, Trends and Styles in Website Design”
- Gavin Ambrose, Paul Harris “Basics Design 07: Grids”, 2008, AVA Publishing
- Kimberly Elam, “Grid systems: principles of organizing type”, 2004, Princeton Architectural Press
Websites