Grids in Webdesign « Negar's Site

24Jan/120

Grids in Webdesign

Introduction

This research has been done to discuss the use of grid systems in websites. The topic is a broad subject so in order to make the discussion more specific, I decided to focus on artist's websites and to analyse how they use grid systems in their webpage designs.

The first part of the research will be a grid system in general. The second part, after searching on more than 300 websites, I choose three websites to analyse their grid systems. After the analysing part, I wrote a conclusion for this research and how a better grid system can work in this genre of designing websites.

Grids and artist's work

I can say that artists were among the first group of people that were interested in the secret of beauty throughout the centuries. Among the artists, Leonardo Da Vinci (1451-1519) was the first one who displayed an ardent interest in the mathematics of art and nature. Most of them try to use this mathematical grid system in their work in order to create an extraordinary master piece. But are web designers also thinking about this issue when they are creating a website for an artist? Or, are they just using a simple cliché template for them without thinking of their work and their users?

Grids in webdesign

The use of grid systems in web design is intended to help the designers form and structure the content on the page. Each element on the page such as: columns, rows, gutters, images, margins, and padding can be helpful to organize the information on the page appropriately. Most of the time grids are invisible but traces of them remain apparent by the positioning of elements on a page. There is no limit to using grids in your design. As long as you have a base grid system for your site each page can have a different order.

If we use grid systems in our design it will help us to know where to put the elements of the website and this process will also help the users of the site to find the information they are looking for much easier. This doesn't mean we want to control the user's experience in our site, but that it is a framework within which the user can control his experience. Using the simpler grid system will help users benefit more from that design as it is easier to use. When we add complexity to our design and our grid system, we are decreasing the usability of the site. So we have to keep it simple but also comprehensive."As the user moves from page to page, our goal is to help him acquire a kind of spatial understanding of the parts of the site. We must do our best to ensure that the layout he encounters is consistent where appropriate and divergent where appropriate." (Vinh kh. , 2011. Orederind Disorder Grid Principles For Web Design. P 126)

There are many grid systems that we can use in our designs. It depends on the content of the page and how we are going to place them in our page.

Here are some of the grid systems that designers use in their works:

There are also some techniques in using grid systems in your design:

"1. Grouping
2. Negative space
3. Perimeter Edge
4. Axial Alignment
5. The law of third
6. Circle placement"
(Elam, K. , 2004. Grid System. New York: Princeton Architectural Press)

Having a good grid system is not just to put all the elements in one of the styles but also to know how you should arrange the icons and shapes and text in that style. This aim can be met by using these rules in your design.

Grouping means to put different and similar objects together in a way to create rhythm and repetition. Putting a good negative space in your design helps ensure elements are not too close and cramped in the page. Some of the elements should be on top or on the bottom or they can stick to the right or left of the page. This rule is called Perimeter Edge, and helps the elements in the page not to squeeze the white space of the page. When we place more than one element together within a grid base, the Axial alignment will create a strong visual relationship to the whole design. The law of thirds is the 3x3 grid system. In this system the page is divided by 3 vertical and 3 horizontal rectangles. The four points which are created in the middle are focal points which draw the attention of the viewer, so it is a good location for the important elements of the page. Having a circle in the design of the page is the last rule. The effect of having circle in design will be various and it depends on where to put the circle and how to arrange it with other elements. It can be a space activator, pivot point, tension, starting or stopping point, organization and balance.

There are lots of elements in websites that we have to align with the base grid system which we choose for our website. Sometimes it needs rationality and exact measurements to place the element in the right position. But if we dive too much into it, the result would be something driven by mathematics instead of something that uses maths to create a beautiful product. The whole point of using grids in our design is to make our design more simple, accessible and understandable for the viewers.

With a good grid system we can add good hierarchy to the content which helps the user understand which part of the layout is more important than the other and to focus on the important first. For example placing elements at the top of the page or near the top of the layout gives importance to it, for this reason a site's branding and logo are often placed at the top of the page. In addition, this encourages a user to feel credibility for the brand. Another method of adding identity to a site's logo is using a larger size font because larger size imparts greater importance. This is how visual balance works in our mind; when reading a magazine or website article, upon first sight, larger elements grab our attention. In our mind, we know that less important parts appear smaller and in a lower position on the page in the grid and layout system.

After the logo, navigation is the second most important part of a website because it is the way that users will access the content on the site, so the more we try to add prominence by using the grid technique, the more we will increase the usability and accessibility to the website.

If the design of the whole page is based on a grid and everything is in the correct placement, more emphasis can be placed on specific elements by breaking the grid and placing that item off the gridlines. This will draw the attention of the user to it and improve the usability of the site. But we have to keep in mind that it is fine to break the grid as long as we have a good reason for doing so and also when it is appropriate to do so. Because without having a good reason, not only will it not help improve your design but it will also create chaos in our design.

Analysing the use of grid system in artist's website:

http://www.salwazeidan.com/

The whole page of this website is based in a rectangular shape with the size of 700px width and 430px height. The ratio of these two sizes is 1.627, which is too close to the golden ratio (1.618). The page is divided in 7 columns with the navigation. Each column has 98px width with 2px gutter. All the navigation links have a similar design and they are placed at the top of the page in a horizontal order. With this method of grouping, a long rectangular shape is made at the top of the page. This is the longest element on the page and by placing it at the top they make it control the composition of the whole page. The placement of the navigation and use of uppercase styling for the typography gives credibility to it. This navigation layout provides easy control of the content and increases the usability for users.

The black horizontal lines at the top and bottom of the page give the feeling that they are holding the main content area in place. Also, the contrast of colours draws the user's attention to the main area of the site.

In most artists' websites, the name of the artist is the logo of the site. In this site, they didn't use a good grid and layout system for emphasizing it. Using the same typography, colour and size for the logo and other text part of the site decreases the identity of their brand. They place the logo at the bottom of the page instead of at the top.

The site has the added functionality of allowing the user to change the content into 3 different languages. This is done by clicking on the relevant flag. The language selection menu can be found in exactly the same position on the grid throughout the website. Placing images of three flags next to each other with appropriate negative space between them helps the website look orderly. In addition, a newsletter link is found below this menu throughout the site.

The page is divided into2 main parts. The left and right hand columns use a ratio 1:2.5. As a user navigates trough the website, the main (right) area of the site changes content while the left hand column stays the same. This continuity makes it simple and easy to navigate through the site and a user can predict where he will find information when clicking on a link.

2. http://www.alexkatz.com/

This design is the most common design for artist websites. Upon first seeing the website a user will see a piece of the artist's work, a simple vertical navigation bar and the name of the artist on top (branding). Many believe that they chose a simple design because they want to emphasize and draw a user's attention to their work not the design of the website. However, a good design will encourage users to go through the site and discover more about the artist. A frustrating design on the other hand, will quickly put off users and cause them to leave the site. Placing artist's name which is used as the logo of the site on the top left position in the page draws the most attention to it as this place is the first place a user looks at. The artist name is the only colourful text in this website which again emphasises it.

Next, attention is drawn to the navigation bar which is the final text in this page. Third attention is drawn on the artist's work. This visual hierarchy gives a good guide to the user and they have complete control of the content and layout of the website simply by exploring the home page. Because the grid system used in this website is constant throughout the other pages, the users won't lose their way.

In this design the whole page is 1000px wide and divided into two columns with a 30px gutter between them. The main area is 750px and the navigation column is 209px. The gutter between the artist's name and the main area is the same as the gutter between the navigation and the main area. This provides a nice balance and continuity between the text and image on the first page.

Throughout the site, the navigation column and the logo have a fixed position. By clicking on one of the navigation links, a row containing the page heading is added above the content with a 30px height which is the same as the gutter of the logo with main area and content with navigation. This additional row is simply for the user to identify which page they are in. This is a good example of how a good layout can help to increase the usability of a website.

In each page, depending on the content, the main area has a different grid system. In the archive page, because of the amount of pictures displayed, they divide the area into three equal columns the same size as the navigation bar column. This provides good harmony and visual balance to the grid system of the page. Use of white space between pictures in the columns gives a good visual balance and also increases the legibility of the information for each picture which is located below.

Having the navigation bar in a fixed column on the right hand side of the page provides good accessibility to each page of the site. This is how a good grid system can increase the usability and accessibility of your design.

Gallery websites are another kind of artist's website but they contain more than one artist in their site. As another example of using a grid system in the artist website genre I am going to analyse a gallery website here.

3. http://www.vandopgallery.com/index.php

On the home page of this website we can see a fixed rectangular shape with 700px width and 575px height. At the top of the page is a row with 50px height which is where the navigation is found. In order to put more attention on the navigation bar, a brown background colour is used. Also, to add good balance in the use of colour they use this brown colour on the other edges of the main page. This is how the perimeter edge principle works in a grid system.

Using a circular shape for the website's logo is another technique used in grid systems. The shape of circle is acting as a pivot point as there is no other round shape in this design. The round shape forces the user's eyes to look around this shape and explore the rest of the content. As we can see in the picture, they put the artist's name in the circle shape and the surname outside. This combination of using this technique enhances brand image and identity.

Home page is divided into four horizontal and four vertical columns of different sizes.

The main focus of the site is on the four navigation links found in the middle of the page.(about the gallery, exhibition, artist, corporate collections). Using different colours for each draws attention to them which we call a "call to action" in the design of webpages. I can also mention that the position of these four squares matches the grid system technique called "rule of thirds". Using the same design for these four links and placing them together is the technique of "grouping" in grid design. Also placing them based on the "rule of thirds" technique is another way that grids can help to improve the accessibility and usability of the website.

By clicking on one of the links, the new page layout will be shown as the above picture. The top navigation of the site is in the same position as in the home page. This gives better control to the user and enhances the accessibility of the site. On this page the position of the four navigation boxes and logo changes. Both of them are on the second row of the site under the navigation bar. Placing these two elements on left and right perimeter edge of that row is another technique of placing elements in the page which gives a decent visual effect to the design of the website.

The square navigations have different colours. In order to give a better understanding of which page you are in, they use the same colour from the navigation box for the row's background and on the bottom edge of this row they write the page name that you are in. Placing all the elements on the edge of the row is the technique of "perimeter edge" and it makes a free space in the middle of this row.

The third row has a 20px height in order to provide a gutter between the rows to stop elements of the page sticking together. Using free spaces in grid systems always makes for better legibility of elements which are surrounded by them.

The rest of the page is divided by 2 columns. One column with 180px is for the sub-navigation and 520px column for the content of the page. Choosing a darker colour for the background of the navigation column in comparison with the main area is putting more emphasis on it and making it stand out. In the main area of the site, the big picture doesn't have free space around it and it is stuck to the gridline of this column. This is not so good and should have some negative spacing around it to make it stand out from the other elements.

Conclusion:

Having a simple grid system for our design is better than not having any grid system. Some might say that artists prefer to have simple designs for their websites so that the user's attention is not drawn away from the images of paintings. However, having a simple design does not mean a grid system cannot be used for layout. Even a basic grid system can easily add identity to a website. We have to convince the users that the information which they are receiving from our site has credit, this aim won't be met without paying attention to how we are going to present the information to them. If we look at a famous website which contains important information, by utilising a powerful design, a professional feel is portrayed to the user. This in turn reassures the user that the content is correct and credible.

Resources

books:

Jute, A. , 1996. Grids the structure of graphic design, published : RotoVision.
Elam, K. , 1951. Grid system principles of organizing type, New York : Princeton Architectural.
Boulton, M., 2009. Design for the web, Published Penarth : Mark Boulton Design.
Vinh, KH., 2010. Ordering Disordering Grid principles for webdesign, Published Berkeley, Calif. : New Riders ; London : Pearson Education [distributor]
Golombisky, K.,Hagen, R., 2010. White space is not your enemy, Published Amsterdam ; London : Focal.