Designers often face the problem of finding the solution to visual and structural problems. The best approach to solve this problem is the grid, which can create the solid visual and structural balance of websites.
The grid layout structures offer more flexibility and enhance the visual experience of visitors. Developers can easily update the layout in a well consistent way. However it’s not an easy to find the theory behind grid systems.
You need to understand the key facts, techniques and learn basics to reach at desired goal. Some of benefits of grid based website design systems are:
Clarity/Order — it brings the order to a layout making it easier for visitors to find and navigate through information.
Efficiency — It helps designers to quickly add elements to a layout.
Economy —it makes the task easier for other designers to collaborate on the design and decide where to place elements.
Consistency/Harmony — Grids creates the consistency in the layout of pages across a single site or even several sites.
Examples of Grid-based design
Look at few examples of grid-based designs to make clear what the article is about.
Grids are originally found in print design but are very useful to web design. Make sure you site doesn’t look like a newspaper’s layout, but it can surely provide the uniform structure to start the design with.
Useful Tools for Grid-based Designs
Adaptive Grid System based on the Golden Section
Layout Grid Bookmarklet
post about using a background image of a grid for layout
Grid Overlay Bookmarklet
Just a quick note to share my version of Andy Budd’s Layout Grid Bookmarklet.
WPDFD Browser Grid
This grid represents the maximum safe sizes for the three main monitor sizes in use today and assumes that the browser window has been maximised. 640 x 480, 800 x 600, 1024 x 768
Free Online Graph Paper / Grid Paper PDFs
Downloadable and very printable
Gridding the 960
Background image grid + pixel ruler + column divisions for 960px-width layout, all in one mean little package.
Web Page Layout Grid
Add this image as a background to the body of your page to help you lay it out.
Position is Everything – Vertical Grids
A method enabling the vertical positioning of elements across grids/columns
Hope you found the article helpful, to create beautiful and unique web design you need the structure and balance in the layout.
Read here for custom web development.