Use a Grid System For Better Converting Pages
Use a Grid System For Better Converting Pages
I recently began working with my new interior designer (my house is stuck in the '90s!) and in trying to decide what type of furniture to buy, we've been laying out the room design on a grid. It dawned on me that this is the same process I use when designing a new web page.
Many marketers think of page design in terms of a 2-column layout or a 3-column layout, but they soon start feeling confined or restricted. Using a grid system can open up your design while still bringing consistency and uniformity to your page (2 essential elements in good design).
The first step in creating your web page grid system is to gather examples of your text and graphics and experiment with different layouts. Then, determine how your elements will repeatedly appear on your pages and establish the placement and style guidelines for major components such as headlines, sub heads, graphics, buy buttons, navigation, links, etc.
Your goal is to set up a standardized, balanced layout that will permit you to plug in copy and images without having to reorganize or recreate your design for every new page. Without this solid backbone, your overall site design ends up being random and confusing, which will have a negative effect on the trust your visitor's place in your site.
The keys to successfully designing your pages using a grid system are:
Thinking above the fold. While your page can be as long as you want it to be, you've only got approximately 45 square inches to capture your prospect's attention. Remember, when your visitor lands on your site, he will not see your page in its entirety.
Being consistent. Once your grid system is designed, stick with it. Haphazardly adding elements will degrade your design, make your page look amateurish and erode your visitors' confidence in your site. The entire point behind the grid system is consistency.
Being realistic. While it is definitely getting more sophisticated, HTML does not allow the flexibility of a printed page. Don't expect the free-flow design available in desktop publishing software or printed page design. Plan your grid system with HTML's constraints in mind.
While working with a grid system may seem time-consuming it actually speeds up your design process in the long-run. But the biggest benefit, which I've alluded to a few times, is the overall page consistency, which leads to visitor trust, which leads to increased conversions.
Use a Grid System For Better Converting Pages - To learn more about this author, visit Karen Scharf's Website.
Like this article? Share it with your friends
Stuck on a design for your new web page? Stop thinking in linear terms of columns and start thinking of your page as a grid.
I recently began working with my new interior designer (my house is stuck in the '90s!) and in trying to decide what type of furniture to buy, we've been laying out the room design on a grid. It dawned on me that this is the same process I use when designing a new web page.
Many marketers think of page design in terms of a 2-column layout or a 3-column layout, but they soon start feeling confined or restricted. Using a grid system can open up your design while still bringing consistency and uniformity to your page (2 essential elements in good design).
The first step in creating your web page grid system is to gather examples of your text and graphics and experiment with different layouts. Then, determine how your elements will repeatedly appear on your pages and establish the placement and style guidelines for major components such as headlines, sub heads, graphics, buy buttons, navigation, links, etc.
Your goal is to set up a standardized, balanced layout that will permit you to plug in copy and images without having to reorganize or recreate your design for every new page. Without this solid backbone, your overall site design ends up being random and confusing, which will have a negative effect on the trust your visitor's place in your site.
The keys to successfully designing your pages using a grid system are:
Thinking above the fold. While your page can be as long as you want it to be, you've only got approximately 45 square inches to capture your prospect's attention. Remember, when your visitor lands on your site, he will not see your page in its entirety.
Being consistent. Once your grid system is designed, stick with it. Haphazardly adding elements will degrade your design, make your page look amateurish and erode your visitors' confidence in your site. The entire point behind the grid system is consistency.
Being realistic. While it is definitely getting more sophisticated, HTML does not allow the flexibility of a printed page. Don't expect the free-flow design available in desktop publishing software or printed page design. Plan your grid system with HTML's constraints in mind.
While working with a grid system may seem time-consuming it actually speeds up your design process in the long-run. But the biggest benefit, which I've alluded to a few times, is the overall page consistency, which leads to visitor trust, which leads to increased conversions.
Use a Grid System For Better Converting Pages - To learn more about this author, visit Karen Scharf's Website.
Like this article? Share it with your friends
![]() | |
| |
No article feedback found. |
| |
Leave Your Feedback |
|
| |
| |||
|
To learn more about the Evan Elite Author Program please contact us. |
![]() | |
![]()
| |
![]() | |
|
| |
![]() | |
|
| |
![]() | ||
|
| ||
![]() |
| Have you written articles that would be of value to entrepreneurs? Become an expert on our site by publishing them! Expose yourself to a wide audience, drive more traffic to your website and get more sales! Click Here for details. |
|
|
![]() |
| Modeling the Masters: Learn the true secrets behind Walt Disney's business success factors & grow your company! Video produced by Phanta Media |
|
|
![]() |
"Learn straight from Evan how you can Make a Full Time Income (And More) from a Website"
Click Here To Learn More |
|
|
|
|
Get advice & tips from famous business owners, new articles by entrepreneur experts, my latest website updates, & special sneak peaks at what's to come!
|
![]() |
|
|
![]() | ||
|
The Top 10 ProBlogger Posts
Best Posts for Bloggers | ||
|
Write The PR
Press Release Builder | ||
![]() | ||
![]() | ||||
| ||||
| ||||
| ||||
|
|
|
|
|
||||||||||||
|
|
|
|
|
| ||||||||||
|
| ||||||||||





Subscribe to Karen's articles











