5 64 Grid System

64 Grid System is an effort to streamline web (illustration) development workflow by providing commonly used dimensions, based on a width of 64 pixels. There are variants: 32 and 64 columns, which can be used separately or in tandem.

Additionally, all numbers in the 64GS are whole numbers based on the golden ratio (1.618) – there are no decimal points or funky spacing issues. By reading the article on Mathematics and Web Design, it can be know how important getting these numbers right is.

Dimensions

The 64-column grid is divided into portions that are 2, 4, 8, 16, 32 pixels wide. The 64-column grid consists of 64 pixel increments like 128, 256, 512, 1024 (as reference columns).

In order to make easy the creation process, we use proportions of the unit as 2/1 (200%); 3/2 (150%); 1/1 (100%); 1/2 (50%); 1/3 33%); 1/4 (25%); and others as the main sizes for the illustrations.

Examples:

  • 1/8 = 8px
  • 1/4 = 16px
  • 1/2 = 32px
  • 1/1 = 64px
  • 2/5 = 80px
  • 3/2 = 96px
  • 4/5 = 112px
  • 2/1 = 128px
  • 5/2 = 160px
  • 3/1 = 192px
  • other proportions are allowed, both, in length, width and height.

This way we can join them and combine them in order to create new illustrations. The size is rounded up so that it converges with the size of the beginning or ending of the closest unit. It facilitates the use of illustrations in web browsers as the most of the sites use a 960px grid (wordpress uses 768px as default post image). In a Modular approach it is important to understand the concept of Unit as a minimum space of work.

Related information:

License

Designer's guide Copyright © by illustraStock. All Rights Reserved.

Share This Book