by Barney Beckman
Grids Gitter
A visual guide to the usage and function of grid systems in graphic design.
Eine visuelle Anleitung zur Verwendung und Funktion der Netzanlagen in Grafikdesign.
A grid is a structure made up of a series of intersecting straight or curved lines used to structure and organise content. A grid subdivides a page vertically and horizontally into margins, columns, inter-column spaces, lines of type, and spaces between blocks of type and images. These subdivisions form the basis of a modular and systematic approach to the layout, particularly for multipage documents, making the design process quicker, and ensuring visual consistency between related pages. At its most basic, the sizes of a grid’s component parts are determined by ease of reading and handling.
“..a structure comprising a series of horizontal and vertical lines, used to arrange content.�
3
advantages
The good thing about grid systems is that they allow you to design in proportions, balancing between all of the different elements that you might have in your design. A grid system should always be very flexible, so that you can almost twist it to your needs when you’re designing the different parts of your website.
Using a grid system in your design also allows for that sense of uniformity and familiarity - whilst it may work for some sites to have vastly different page designs, for many it will not be the case and you will want to have a uniform and more structured feel to the main layout. This also makes it a lot easier when you come to code the design up, as it will mean that you can pick out the uniform elements in your design and apply this modular effect to your code and CSS structure.
5
disadvantages
First up, many people - particularly those who are new to design or designing with grids - may find that grid systems are quite stifling and restrict creativity. Unfortunately, this can sometimes happen and - pardoning the pun - you may sometimes feel like you’re being prevented from thinking outside of the box and are instead creating very plain, clinical designs.
Grid systems are also really, really hard. Not only do they take a lot of willpower to get your head around the first few times you use them but they can also sometimes involve a lot of maths and calculations. You may sometimes feel like you’re being prevented from thinking outside of the box and are instead creating very plain, clinical designs.
“The grid system is an aid, not a guarantee. It per mits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
7
the golden ratio
There’s a common mathematical ratio found in nature that can be used to create pleasing, natural looking compositions in your design work. It’s known as the Golden Ratio, also known as the Golden Mean, The Golden Section, or the Greek letter Phi.
The Golden Ratio describes the perfectly symmetrical relationship between two proportions. Approximately equal to a 1:1.61 ratio, the Golden Ratio can be illustrated using a Golden Rectangle: a large rectangle consisting of a square (with sides equal in length to the shortest length of the rectangle) and a smaller rectangle.
If you remove this square from the rectangle, you’ll be left with another, smaller Golden Rectangle. This could continue infinitely, like Fibonacci numbers – which work in reverse. (Adding a square equal to the length of the longest side of the rectangle gets you increasingly closer to a Golden Rectangle and the Golden Ratio.)
9
Manuscript Grid
Hierarchical Grid
The simplest grid commonly used to accommodate a long running text, like a book or a scientific text. This type of grid causes extreme fatigue for being too simple.
In the hierarchical grid, column widths and space between columns varies. Dynamic content of most websites and resizing of windows require flexibility in width and length, characteristic of this type of grid.
Modular Grid
Column Grid
A column grid with many horizontal guides, creating modules. Widely used for tabular information it has many advantages over others.
The column grid is flexible and can be used to separate different types of information. It can combine columns of same or different widths depending on the content.
11 Column Grid
Modula Grid
Hierarchical Grid
Manuscript Grid
by Barney Beckman