Grids in Web Design

In modern web design, many websites have come to adopt a grid system for structuring content. Furthermore, there are many tools available that can help web designers with projects using a grid. Some dislike the concept due to designs looking similar or feel that their creativity is restricted. New web designers may even view that it mostly consists of organising blocks of elements that strictly follows the grid.

Grids have many uses and when a web designer learns to understand and appreciate their existence, they will discover that grids are more than just filling a restricted space with content.

What is grid design and why use it?

A grid is a number of intersecting vertical and horizontal lines that are used as a guide for structuring content. In modern web design, it has become a standard in creating websites with much content. The basic theory is the emphasis on structure and unity, which makes content heavy websites easier to navigate and visually appealing.

Well designed grid systems can make your designs not only more beautiful and legible, but more usable.
- Mark Boulton

Although some designers dislike grids, we need to remember that web design is more than just creating a page with content and graphics. Aside from branding, factors such as usability and the audience will also need to be considered. When a website appears to be user friendly and appealing to a user, it gives the impression of a well-structured design created by a professional web designer.

Restraints are healthy. Restraints help us create better work. How can we, as web designers, embrace grids with a different, restrained approach?
- Daniel Eden

Some web designers feel that the grid system feels restricted and that it limits creativity - it will if you want it to. The grid is a reference to help you decide on where to position specific content and because of its rigid nature, it does encourage a web designer to think more creatively and experiment.

Daniel Eden’s example of creating a layout with multiple columns

You can have more than one grid. Your front page could be based on a five column grid while inside pages with ads on a six column. There is no one right way.
- Anne Van Wagener

Using a grid may change your layout but it can turn into a good design within the framework you created. It ensures consistency but also allows experimentation through the different positioning of content, as it forces the designer to structure with the space available to them. There are many possibilities with grids so it is incorrect to assume that they limit creativity.

Grid systems can facilitate creativity by providing a framework and already answer some designers' questions such as 'where should the folios go', 'how wide should the measure be?' etc. A well designed grid system will go some way to answer these questions and more.
- Mark Boulton

When you are working on a project, using the grid you created will save time on creating the design and coding the website. Not only will it maintain consistency for the many designs you create, it will also provide flexibility for future updates. Your client may want certain content to be at specific positions or they may ask you to update a section with new content. Grids can provide some flexibility to a design.

Examples of grid-based websites:

How is it used?

There are many different approaches to grid design and interestingly, mathematics is involved. It can be a useful tool to create beautiful designs and as a web designer, it is beneficial to understand the different design approaches available as you may have to use it in future projects.

A website can appear to be appealing and harmonious to a user, due to a simple mathematical concept. This is known as the golden ratio, an emphasis on natural order that appears in nature and art. It is an expression of natural beauty, which our brain subconsciously recognises. Individuals who don’t feel confident with their design ability may find the golden ratio useful, especially when designing with a grid.

❈ Golden Ratio

In Mark Boulton’s article Design and the Divine Proportions, he explains that instead of creating designs based on our feelings, the golden ratio (also known as the divine proportion or golden section) provides a simple guideline that allows us to design in a logical way. It is a mathematical constant which is approximately 1.618. In other words, it is a ratio between the two segments of an object.

The ratio applies to design because it is believed that this proportion is aesthetically pleasing. Hence, it can improve the communication of your designs because you have made it to have the natural order. The design will provide the balance and harmony, and therefore the website appears to be well structured and comfortable to view.

❈ Applying the golden ratio

The golden ratio can be used to create a two column layout. For example, you are working on a layout with 800px as the width. Your design contains a content column on the left and the navigation on the right. To apply the golden ratio, divide the width 800px by 1.618 to get 494px, which is the main column for the content. For the navigation column, subtract 494px from 800px to get 306px.

This method can also be applied to the height of the layout if the design uses a fixed height. For example, your design uses a height of 600px. Your content will be at the top and footer at the bottom. Divide the 600px by 1.618 to get 371px, and this is for the content area. Subtract 371px from 600px to get 229px for the footer area.

For both of these methods, the rectangles can be switched over to achieve your design aims. However, the ratio is only a reference to guide you when designing. It doesn’t ensure that you will create a good design but it is useful if you want the design to have a sense of natural balance and harmony.

❈ Golden Rectangle

Aside from layouts, the golden ratio can also be applied to elements such as images and text. This will be the golden rectangle, with its width and length having the golden ratio. It can be very useful in helping you to decide where specific elements should be placed, especially for elements that you want primary focus on.

Golden Ratio applied to a website — Collision

An example of the golden ratio and rectangle applied on a homepage.

❈ Rule of Thirds

The rule of thirds is a simplified concept of the golden ratio. The concept is to divide an image into thirds by equally spaced horizontal and vertical lines, so you get a three by three grid. You can also break down the thirds into more thirds to achieve a complex layout design. The vertices of the lines are ideal placement for the most important elements in your design, which means that content around or on those points are more likely to create interest to the user and it is also pleasant to view.

The rule of thirds is useful for creating designs that aims to guide the user’s eye to important content whilst providing a comfortable viewing experience. In other words, it is a very useful guide to help the designer to understand where a user would look at a layout. However, it is not always useful to use all four points of the grid but one or two can be used to emphasise the main message or purpose of the website.

Rule of Thirds applied on Nettuts layout design — NetTuts design with rule of thirds

Vitaly Friedman has suggested on Applying Divine Proportion To Your Web Designs that the left upper corner is usually the strongest one, since users scan websites according to the F-shape. Additionally, Carrie Cousin’s article Using the Rule of Thirds as a Grid Outline, explains the concept further with the following points:

The common path the eye follows on a design is from top to bottom and then left to right.
A good design is not always symmetrical. The intersection at the top left corner of the grid is the most viewed location.
It is still applicable to designs even when the concept is not used.

Where users are likely to look on a Rule of thirds Grid — Carrie Cousin describes how users view the points from the rule of thirds grid

She also addresses the importance of the intersections of the rule of thirds grid. The main focal point is the intersection at the top left of the grid, with 41% of users focused on looking at this part of the screen first. This location is ideal for the placement of a logo or other significant information about the website. Users will then follow to the intersection below it with 25% stopping at this point. They will then look to the top right point and finally the bottom right point. With less than 14% of users focusing on the bottom right of the screen, it is important for designers to consider the placement of content within this screen area.

The rule of thirds becomes significant when it is applied to the homepage because this is when users develop a first impression of a website, and decide whether the content is relevant to them. There is less significance on using the concept on content pages but it is still relevant for the overall design.

News and advert driven websites uses the rule of thirds to create harmony with the different content presented on a page. It is common for banner adverts to appear on the top third of the screen, below a horizontal header. The right of the screen usually contains sidebars and sidebar advertising. This approach is common because it helps the user to distinguish between paid advertising and the website’s content.

❈ Creating a rule of thirds grid

If you were starting your design on paper, you can construct the rule of thirds grid by drawing a rectangle and then equally divide it horizontally and vertically into thirds. More thirds can be added for more complex designs.

You can also create the grid using simple math. Divide the width and height of the resolution you want to work with by 3, which will give you the size for each block. Again, you can add more thirds if you want.

❈ Vertical rhythm

With grids providing horizontal and vertical alignment for layouts and elements, we also need to consider the vertical rhythm. It is the spacing and arrangement of text on a grid. There are three important properties: font size, line height and margin or padding.

...regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost.
- Richard Rutter

Although subtle, good use of vertical rhythm can make a website harmonious and more readable. Establishing a suitable line height and spacing between elements can create a continuous rhythm in the vertical space. This will maintain consistency for all text on a grid, hence proportion and balance is achieved throughout the page.

However, Wilson Miner explains that text does not have to align directly on each grid line. Due to the way CSS renders line height, it can be easier to align text within the grid lines. If you compare the images below, you can see that regardless of how you align the text, they both appear to be more readable with effective use of vertical rhythm.

Vertical rhythm comparison — Antonio Carusone on 8 Simple Ways to Improve Typography In Your Designs

Good vertical rhythm — Wilson Miner on Setting Type on the Web to a Baseline Grid

Alternative methods

Don't see the grid as a structure that, once created, cannot be changed, revised or thrown out completely.
- Mark Boulton

Good designs can be achieved without a grid. Some designers feel that it restricts creativity and that many grid websites become monotonous and similar. Instead, they find alternative methods that abandon the grid system either fully or partially, to achieve unique and interesting designs.

…breaking down the rigid confines of grid layouts challenges designers to maintain ease of use while creating designs that look different from what we’re so accustomed to seeing.
- Molly E. Holzschlag

As a designer, we are always thinking of new ideas for any creative work we do. We then decide whether the current design requires any changes or a total redesign altogether. This concept applies to grid design because it is only a reference to help us design a layout. We are allowed to work outside of its structure if we feel that it isn’t helping us further with the design. Sometimes we need to experiment with certain elements by not aligning them to the grid, or incorporate alternative methods with reference to grids – the result may be more interesting than one would expect. This can create a sense of challenge for the designer to create a unique design whilst considering usability.

❈ Circles

…they present rebellious designers with yet another way to deviate from the norm.
- Joshua Johnson

Since we are familiar with designs using rectangles and blocks, using other shapes such as circles, can create unusual yet unique layouts. Such websites can be a way for some designers to express that there should be no limitations to create unusual designs, yet at the same time considering usability. It can also be a way to inspire other designers to experiment, and think outside-of-the-box from time to time when designing.

Mediovski is an example website that uses circles effectively in their design. On the carousel, you can see the circle icons with numbers and text underneath. The circle also changes depending on which image its showing. This helps the user to know which image they are viewing and what information it is trying to convey.

Below the carousel, there are three circle icons with lines connected between them. This subconsciously guides the user’s eye along the path. This approach is useful for directing information to the user in an unusual layout so that they don’t feel lost. It is these subtle features in such designs that provide an effective way to control user experience.

More example websites:

❈ Focal points

Every web page has to present something useful and attractive to its users.
- Mohammad Moradi

A focal point is a section of the website that attracts user attention. It is distinct in terms of its colour, position or size from the rest of the webpage. The focal point should relate to the goals and objectives of the website and its owner. This approach helps the designer to guide users to the most important aspects of the website.

Spigot has a minimalistic design that makes effective use of imagery and icons to create the focal points for its homepage. They have also emphasised the company’s tagline, which clearly explains the purpose of the website and business. The use of icons on the menu is simple and easy to understand with supplementary text. Additionally, their emphasis on their minimalistic approach is showcased in the overall design of the homepage. There seems to be many focal points used yet they are clear for the user to understand.

More example websites:

❈ Diagonal lines

After years of strict, standard grids that utilize clear vertical and horizontal directionality, a bold diagonal design can make a refreshing statement that’s eye-catching and attractive.
- Joshua Johnson

This seems to be a new trend in current web design. It uses the grid concept but the grid feeling seems non-existent in such designs. Instead, diagonal lines have created interesting unique websites that we didn’t expect to be effective in web design.

How a specific group of people choose to communicate and portray information can tell you a lot.
- Joshua Johnson

Interestingly, this trend was found in many websites from non-English speaking countries, and in particular Hispanic countries. A designer can use cultural design trends to gain inspiration and understand how different products and services are marketed online in different countries.

Diamonds:

This is one of the popular approaches, which is fairly easy to implement. Using diamond patterns or diamond shaped elements can create interesting variations to a design.

Hexagons:

This seems to be the next upcoming popular shape to be used in creating diagonal lines based layouts. Joshua Johnson predicts that it will be a popular trend in 2013.

Typography:

Having the typography to have a slanted diagonal effect can make taglines and messages appear to be more powerful and effective. Interestingly, diagonal lines in type such as the character “/” can create a technological feel in your designs.

Thick lines:

Thick bold diagonal lines are commonly used in photographs to create interesting cropping effects. It can make photographs to appear more attractive due to the unusual crop.

Conclusion

The grid system is something that every web designer needs to be aware of due to the history it has in art and design.

A web designer should adopt the grid system as part of their skillset, so that they are more flexible in producing different layout designs. Grids shouldn’t be viewed as having a rigid restrictive nature. With a number of website examples presented, they clearly demonstrate that a designer should learn to incorporate different design approaches with grids, which can be an exciting challenge to create interesting and unique designs.

As responsive web design is becoming the norm, grids have become a common practice among web designers on producing well-structured websites. Due to this, new web designers should learn about the grid system as it can develop their design ability, so better website designs are produced. However, with a number of design trends appearing, it is also an exciting time for designers to experiment and get inspired.

Natalie H. Man