Effective website design – The Gutenberg Diagram
The Gutenberg Diagram is one long-proven basis of effective website design. And is a backbone to many web pages, from registration pages on Facebook to detailed content pages within online publications.
Based upon a visitor’s initial skimming of a website page (on a desktop PC or tablet), The Gutenberg Diagram offers a useful basis for website design. It splits the screen into four visible quarters. Shown in the graphic below, these are:
- The primary optical area: This is where the visitors’ eyes naturally go when landing on a web page. Born from the learned habit of reading a book from top left to bottom right, our minds are preconditioned to start here. That’s why a brand’s logo and hero message will most frequently be positioned in the top left.
- The strong fallow area: As the visitor skims a page, they are next drawn to the top right of the page content. Hence it’s used as a great place for pull out supporting messages, secondary level offers, or cross-links to supporting content.
- The weak fallow area: The place on a web page that the visitor initially spends least time and gives least attention. That’s why it’s often used for the start of body content within a page. It’s considered, within the Gutenberg Diagram to be the most invisible spot on the page.
- The terminal area: As the visitor reaches the bottom right, there is a natural break in their skimming of the page. As it forms a natural pause, the terminal area is frequently used as a primary position for calls to action.
Below are a couple of website design examples of The Gutenberg Diagram in practice, within Facebook’s registration page and one of our own web pages.
Where the Facebook page is a simple registration page, our Branding page uses the Gutenberg Diagram as the layout basis for the above the fold content. A supporting client testimonial provides reassurance of our expertise (hence in the Strong Fallow Area). Whilst our free ‘7 Essential Tips for Effective Marketing’ receives optimum exposure during the visitors’ initial skim of the page (so sits in the Terminal Area).
At the heart of the effectiveness of The Gutenberg Diagram, we feel are a couple of important factors:
- Don’t make web visitors work hard to find the information they want. Indeed, help them find information that might be of interest. By breaking the web page into distinct areas, each with a specific purpose, content can remain uncluttered.
- Solid foundations are an important part of effective website design. Every web page should have a clear function. So by understanding how web visitors are likely to interact with it, enables appropriate design features to be implemented.
As you can imagine, The Gutenberg Diagram does bring an element of simplification to website design. With web visits via smartphones outnumbering desktop visits, websites pages must now be designed to be dynamic. So the Gutenberg Diagram ceases to reflect how content is viewed via the mobile medium. That said, it still has its place in providing a framework for effective website design.
“Your website is your greatest asset. More people view your webpages than anything else.” Amanda Sibley (Hubspot)
It’s essential your website design provides the perfect match between what you’re trying to sell with what your audience is looking for. It needs to accurately reflect your brand and tie in with your other marketing collateral and activities. And of course work equally effectively across PC, tablet and smartphone.
Get in touch to find out how we can help with your next website design project.