Website grid -- in graphic designing it is two-dimensional structure consisting of a series of lines (vertical, horizontal and angular) that are auxiliary lines, used for content distribution. Simply speaking, the grid is an outline on which a designer can organize content and graphic elements.

In designing responsive websites, the grid is significant, as you need to have in mind different screen sizes on which a website will be browsed.

Where to start a grid design?

Starting with the design of website grid and Internet services, we start first with meeting our customer. General assumptions of grids are similar for all websites, though a well-designed grid cannot be properly designed without deciding on few things first.

First of all:

  • Agree with the customer on the range of functionality of the web page.
  • Determine with the customer the scope of information and means of communication on the website
  • Decide with the customer about menu structure, with particular attention to its complexity

By writing "decide with the customer" I mean the necessity to help the client and provide a precise explanation of all issues. Some customers may not know their exact needs of a website, which is completely natural and you should not be surprised by this at all.

When designing a grid for a client's website, consider theirindividual needs and requirements. Thought through and well prepared grid is like a well fitted custom 'tailor-made' suit.

If you absolutely do not know where to begin, start from scratch. For anyone interested, we recommend: Grids are good

When we know the customer's needs...

Having determined the scope of things that will be included on the website, we can proceed with analysis and the preparation of the grid. As already mentioned, the general rules for creating grids are set for each interface. However, in case of websites and Internet services, it is necessary to pay attention to the individual elements that personalizes the website appearance. Range of presented information, amount of elements, and finally the way of communication, affect the appearance of the website. A well-designed grid will be helpful for the team in creating the Internet page as a whole.

What to avoid?

In website design it is imperative to avoid several issues, which may turn into big problems in the near future:

  • Elements "extending beyond the grid." On large screens they look good, at lower resolutions they become troublesome.
  • Fixed positioning elements. Great part of mobile browsers has problems with proper displaying of such positioned elements.
  • Graphics elements (pictures), smaller than the smallest "space" on the grid. This rule, however, does not apply to icons and elements which complement text blocks to the grid.

The example of the grid usage

Below you can find examples of website content distribution with the usage of a grid and without it, as well as the grid layout that has been chosen for the sample website.