Grids in Web Design and the Benefits of Using Them

Lately we’ve been beefing up on web design tips, and who better to bring us tips than Maya Edberg, a 25 year old marketing specialist who specializes in web design and internet marketing. Maya is also a blogger for 123seo.com.au. Enjoy her contribution and if you like her article, follow her on twitter at @MayaEdberg
[sws_divider_line]

For hundreds of years, popular print publications have adhered to a strict policy of grid layouts, specializing in things like sight lines and directing user attention to certain photos or textual elements within their newspaper or magazine. On the internet, however, things are a bit more free-flowing; most designers don’t use a grid when designing their website, nor do they attempt to draw any sight lines for their content. This, however, is a relatively big mistake. Even though the internet is a new medium, human psychology and preferences are the same as they were for print media.

There are several key advantages to using a grid layout when designing a website which can enhance the look of a sight and help guide readers and buyers toward the right content. Grid layouts are the most effective way of determining and guiding reader behavior.

Grid Layouts are More Visually Pleasing than Non-Grid Layouts

The human mind prefers to see things in columns, whether that means viewing a widescreen television program or seeing clear and consistent delineation in photographic and written content either in print or online. Something about the way the mind processes data and visual imagery actually causes it to experience a brief burst of “pleasure” when setting its sights on content with clear sight lines. It’s almost as if the website or magazine is giving the reader a set of directions; that works for the human mind, which actually likes being told what to do, what to read, and which pictures to see first.

Using a Grid Makes Site Design Easier

Building a grid-based design for a website is much like designing a magazine full of sight lines. The grid is defined long before any visual elements are actually placed into the design. The web designer decides how wide the overall site will be, how wide the content area will be, and how big any columns or sidebars will be in relation to the main content area From here, horizontal elements are laid out. This includes headers and footers.

Before a single graphic is designed, a grid-based web designer already knows the exact dimensions of ever single file he or she will be creating. And, form there, the design essentially falls into place. Every sidebar or column file is the same width and height; every header file is the same width and height; the same goes for site content, the footer, and any other elements which might be added in later, like search boxes and comment forms.

A Grid Design Directs Users to Certain Content

The use of sight lines is a powerful way to send users to the exact content that a web developer wants them to see first. This often means including a big image “above the fold,” which in this case means placing an image that is guarantee to be seen without scrolling the website down at all. It often means a clear sight line that directs eyes toward a content-rich sidebar column full of syndication and social media links. And a grid design automatically prefers a strong, wide header that draws attention to the blog’s title, mission, and brand identity.

Grid Designs Are Great for Ad Placement

The use of a strong grid design is actually great for pay-per-click ad placement, as the content boxes where the ads will appear are already defined in both length and height. This makes it easy to choose the right style of advertisement, and it makes customization of that ads appearance and dimensions exceedingly easy without tiresome pixel-by-pixel experimentation. And the attractive sight lights of a grid design can bring eyes right to the page’s essential advertisements after a reader has finished an article.

Lots of Benefits to Grid-Based Web Design

The list of benefits that come from using a grid design are numerous. They’re great for highlighting content, drawing attention to advertisements, and even working with human psychology to make readers feel more “at home” or “comfortable” with a grid-based website design. With all of these benefits, and the ease with which a grid design can be created, there’s simply no reason to continue using sloppy, non-grid alternatives.

[sws_divider_top] [sws_yellow_box box_size=”550″]

Want help setting up your WordPress site?


We offer professional website services to help your company stand out from the competition. We help you get from square one to the point where you have the power to edit your website by yourself. Best of all, our turnaround is quick, our capabilities are numerous, and we can help your business grow.

Learn more about our professional WordPress services. [/sws_yellow_box]

About the author: Entrepreneur with ten years of experience running a digital marketing agency out of New York City. I work with startups and brands such as Virgin Airlines, L2 Inc (Gartner), American Express, Fabletics, LOFT, and more. When I’m not helping companies increase their audience and revenues, I love to travel, sail, and read. I also moonlight as a bartender at a classic cocktail bar.

0 comments… add one

Leave a Reply

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