Effective Design: The Grid System


Web design is much more than how a site might look in the eye of the viewer. An effective website is primarily focused on form and function. As a designer, it is important to not get caught up in the look of the site, but to go back to the skeleton and focus on the layout of the content you are working with. It does not matter how talented you are in Photoshop and Illustrator, if your content is randomly scattered along the page, the appearance is messy, unorganized, and difficult to navigate, resulting in sub-optimal Google Analytics.

This is where a grid system is very effective. A grid system is used to arrange content into a clean, organized structure by implementing horizontal and vertical lines. By arranging content in consistent way like this, the presentation is much more readable, making it easy for the viewer to absorb.

A few things to keep in mind when designing your page layout is the “F” pattern design. Eye tracking studies have identified that when people enter a website, they quickly scan the page in an “F” shape pattern; left to right, and top to bottom. This is evident that your design must have an effective flow line. A flow line typically enters the page from the top left-hand corner, carrying the eye horizontally across the page. This is the base of your structure for you to impose starting and stopping points when aligning your text and images.

Your grid should organize your graphic elements in relation to the page, as well as each other. Whether you decide to implement a three-column, four-column, or six-column grid—commit to it. Consistency is the most important thing as it will only help you later when applying your content to the page.