Web Page Layout: Using a Grid

Posted by: jstartup

Tagged in: Web Design

Grid-based layout is a simple method for structuring an effective web page.  Balance is easy to maintain, and there is a common element running from page to page without having to stucture each the same way.  So, for instance, a website with the content area set to 960x680 could be set up as one of the layouts shown below.

Most web pages will be just fine with the first option.  One side holds an image and the other side a section of text.  Two columns of text would work just as well and would allow for more text without making it a full side-to-side read.  There is balance and structure, and the text is not too overwhelming for the reader.

For the other layouts the same rules apply.  Each block can house either text, images or whitespace, and the overall placement can be used to emphasize the theme of the content.  So, for instance, the six-blocked layout could be used to portray either action and excitement or placid simplicity.

Both exhibit structure and harmony but are used very differently, achieving very different results.  Following the same structure on multiple pages of a site is a subtle way to maintain that harmony throughout the website.  Each page can have its own look and emphasis but the pages as a group will be built on the same underlying structure, giving the site as a whole unity and balance.

Comments (0)add comment

Leave a Comment

busy