Grids in Web Design and the Benefits of Using Them

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 Enjoy her contribution and if you like her article, follow her on twitter at @MayaEdberg

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_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]


Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Leave a Reply

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

Table of Contents

On Key

Related Posts

Cartoon guy contemplating the future

The Future of Venture Capital: Two Potential Directions

For years, I’ve kept private lists of phenomenons that got me thinking and made an impact. I’ve noticed lately these scribbled thoughts are becoming part of private conversations I have online, and so I am starting an experiment. I’m going to start sharing these thoughts in my blog. The result

Bartender at American Bar

World’s 50 Best Bars of 2019

Most people would say it’s near impossible to pick favorites, but every year 500 experts from around the globe choose the top bars in the world. Their choices become the industry-revered rating that is The World’s 50 Best Bars. The ranking, which actually publishes the 100 top bars internationally (instead