A composition grid is a structure or pattern used to organize the elements of design within the composition, ensuring good flow.
Using grids can simplify the design process, by offering proven methods to achieve accuracy and consistency in the placement of design elements, yet still allowing for creativity. The main goal of a grid is help establish a visual hierarchy and structure.
Before applying a grid it is important to understand how the viewers eyes move/scans through a composition. Certain areas of a composition are considered active while others are passive. For example in the English language we read left to right, therefore the top left hand corner of a composition is typically the most active location of the composition, while the bottom left hand corner is a more passive location. By placing important elements in the active areas makes them more prominently noticeable.
The applications of grids are proven to be effective in all forms of graphic communication from print projects to web pages, to video and animations.
Anatomy of a page
Before choosing a grid to use in a composition, it is important to have a basic understanding of the anatomy of a page, whether that is a printed or screen based page. The parts of a page include:
- Margins– the outer space that frames the content.
- The top and bottom margins are often referred to ad the header and footer margins.
- Columns – are divisions of space designated for content in order to make it more readable.
- Gutters – the margins between pages or columns.
Baseline grid is a grid that is used to guide text, graphics, columns, etc. A baseline grid is typically used along with other grids.
Types of grids
Different types of grids can be drawn using a variety of mathematical principles.
Basic grids
Basic grids divide a composition a variety of ways to control the flow (visual path) through the design. These girds, sometimes considered typographic grids, are made up of intersecting vertical and horizontal axes used to structure content.
The simplest of these grids have equal divisions, while more complex grids are created by mixing sections of a grid to form a larger unit size in various areas of the composition.
Some basic girds include:
- Symmetrical grids – are made up of columns mirroring each other and creating a sense of balance.
- Asymmetrical girds – are made up of columns where one side of the composition is weighed more than the other.
- Modules – divides columns further into smaller blocks (modules) which content is placed within a single or group of modules.
- Combination grid – use a mix of columns and modules.
Horizontal movement within a composition can be achieved using a module grid, where larger modules of content are placed on top or bottom of the horizontal line. Adding vertical elements on the intersection of horizontal elements helps create vertical movement.
Golden Ratio
The golden ratio also known as the divine proportion or golden mean is a mathematical constant that appears repeatedly in nature.
There are three variations of the golden ratio:
- Golden Rectangle
- Golden Spiral
- Golden Triangle
Golden Rectangle
The golden rectangle divides a composition into a square and rectangle, and then reaming rectangle is then divided into another square and rectangle and so forth and so forth; always retaining the same proportions as the original rectangle.
Golden Spiral
The golden spiral is the visual flow within the golden rectangle. Starting from the smallest square rectangle division in the golden rectangle, and spiraling out getting wider every quarter turn. The golden spiral is used as a guide for clustering elements.
Golden Triangle
The golden triangle is achieved when the lines within the golden rectangle form equiangular triangles, leading the eye into the composition.
Rule of Thirds
The rule of thirds is the simplest of grids to follow and used quite frequently in photography. The rule of thirds is achieved by dividing the composition into nine equal parts. The prominent elements of the composition should then be placed on the intersecting points of the dividing lines.
The rule of third can be taught as a variation of the golden ratio. Unlike the golden rectangle, which divides the composition into a square and rectangle, the rule of thirds divides the square into a rectangle as well, making three equal rectangles.
Rule of Odds
The rule of odd follows the principle that odd numbered elements are more interesting than having one or an even number of elements.
Rule of Space
To actually imply movement of the elements within a composition one can apply the rule of space. The rule of space sometimes called lead room creates negative space that directly relates to the subjects of the composition.
Depending on the location of the negative (empty) space it can create the illusion that the subject is moving away or towards that direction.