Many largest websites with top-notch designs are most likely using a grid-based layout. Grid-based layouts give websites stability and more structure, which provides the designer a template having logic to it for building a site on.
Using a grid does not necessarily make the design boring. A designer that applies the fundamental rules regarding the use of a grid-based layout will know how to go about properly breaking these rules.
Josef Müller-Brockmann once stated that the grid system is not guaranteed; it is, however, an aid that enables many possible uses where designers can individually seek a solution that fits their own personal style. Although it is necessary for individuals to learn the proper way of using a grid as it requires practice to perform this type of art.
The Basics of a Grid
Let us speak a little grid lingo. A grid is a part of a design layout having vertical or horizontal guidelines, sometimes both that are used for incorporating spaces, columns, and margins, which make the framework to keep content organized.
Originally, grids were mainly found in print work, that was until it began to be known they were very applicable in web designing. Grids are not just for creating a newspaper layout; it can aid with the uniform structure to begin a design with.
A grid is merely a tool used to benefit in designing and should not impair a design at all.
Understand the Rules and Follow Them
Anytime a new skill is being learned, there are guidelines that must be followed. The fundamentals must be learned from the start to ensure the principles will be applied effectively.
As you begin with grids, this will be no different so what this means is that it is crucial to follow your grid, making sure that all its designed elements stay aligned within its place. With the help of a grid while creating a design, it will give your content more structure as well as provide a starting point but never suppress your creatively.
Use one of these two ways for establishing your grid template:
1. Creating a Grid of Your Own
Although there are plenty of options out there to use in setting up your own grid along with different theories, there must be a decision made in the end, which is to choose the way that works with the project you are going to be working on and the way that is going to work best for you.
A blank document can be divided using mathematics by making columns consisting of an odd or even number that you can work with. Generally, it is beneficial to keep the space between columns in mind (gutters) and integrating each within the grid system you have created.
It is up to you whether you want to create a grid that is going to be easy to use, or maybe you would prefer one that is more complicated. You are going to have more freedom within your grid layout, the more elaborate and complicated it is. However, if you would like to have room for more interpretation, then you will want to make it as simple as you can.
2. Download a Previously Made Grid Template
If you are just needing a little help for developing a website, you can find standard grids out there if you are in a hurry to get a website up; otherwise, creating your own will take longer.
The 960 Grid System is probably among the more popular ones. It was Nathan Smith who started this system. This grid system gives you the option to select from either a 12, 16, or 24-column grid. It all began when Smith had a design itch; he just had to scratch.
What we are doing here is sharing the grid dimensions that were found over the last twelve months or so by Nathan Smith. Others will also be able to benefit from the 960 Grid System.
You can download the package, which comes with files for Photoshop, CSS, HTML, InDesign, among others. Included in the grid files are additional grids that are helpful with setting up a clean, structured website.
Breaking the Rules Occasionally
The basics of the grids have been covered, so let us move on! Grids are great for lining up various items; their user friendly, streamlined and ensures your designs to stay clean. As previously mentioned, it is important that you do not let yourself feel trapped within the guidelines. Let yourself explore outside of the borders of your guidelines, for it is not necessary to have everything lined-up orderly to create gridded design work for it to be good.
Breaking the grid guidelines now and then helps to avoid having a boring table-based design and instead will give it a little bit of free flow and be more organic.
Review the following examples showing grids that are laid on top of a design; they portray just how beautiful a design can be even if it does not have a lot of structure.
