Grid systems in web design

A grid system was used whilst designing http://cell-industries.co.uk/

The decision was made to use a grid system whilst designing the layout of the website. A 20×20 pixel grid with 12 columns was chosen. Using a grid aided in the neat placement of objects in the design.

It was deemed necessary to use a grid layout system since conveying the purpose and explaining the idea of the website to people was the most important challenge of the design. Using a grid layout allows the web page designs to become more structured. This structure enhances the user experience by implying that thought has been given to how the website is presenting information to the user and therefore gives the user confidence in the website.

Another advantage of using a grid to design with is that it can be transferable to the development stage of the website. When guidelines and sizes have been set for UI elements in the design stage, laying out the pages with code becomes much quicker. It is also easier to generate more seamless visuals from Photoshop mock ups to the coded webpage simply by following the dimensions of the grid.

Further reading an great resources: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>