Grids Part 1: Ever wondered about why to use a grid in the first place?

History

Grids are not something that have been recently thought up they have been around for hundreds of years. Even in 1792 the Fibonacci sequence and Golden ratio were being used in books.

Why use grids?

Subconsciously and consciously grids make things look like they have been well designed
They create a real sense of order to items and elements
Make it easier to add and create new content
Grids help users find things quicker
You want to be seen as organised and orderly as a business?
Consistency, alignment make for a quality of workmanship which make for a brand impression

Grids are part of design anyway

As soon as we open our graphic package or start designing in the browser there is a grid there whether we like it or not.

Grids are restrictive?

Design is about solving problems within constraints, whether browser or business constraints.

More creative solutions happen when we focus narrowly on the problem. The same is true with grids.

Golden ratio

A number that been used for centuries is the Golden ratio. It's instantly recognisable and is in nature.

Rule of thirds

The problem with the golden ratio is that it’s harder to calculate, it's much easier to use the rule of thirds.

Good Grid rules

Always use a base unit
A real world use case of comes from existing images in a CMS. If there is a common size that be used a the value to construct your grid. ( Mark Boulton)
Vertical Rhythm is very hard to get right on a website due to the way text scales and the differences between devices. Aim for a horizontal rhythm and don’t stress too much about it.
13 pixel text should have at least 13 pixels of line height.
Responsive sites have made grids harder to manage but with a bit of thinking it's more than possible. Aim responsively!
You don’t always need to adhere to a very strict grid structure. It's a good idea to have the main basis in a grid but you can improvise