Design Globally Unified or Asymmetrical Web Pages That Look Good
Web design theory, and the larger body of graphic design, is a complex and evolving art. Following are a few related — and sometimes contradictory — rules of well-designed sites:
Well-designed sites have a unified global design and maintain continuity in design from page to page.
Well-designed sites use asymmetric (unbalanced, uneven, and somewhat unpredictable) layouts to make content inviting and to lead visitors to explore content.
These two “rules” are somewhat in contradiction to each other. There has to be enough continuity in style and design from page to page for visitors to feel like they’re experiencing a unified site. Yet, there has to be enough disequilibrium, unevenness, and distinctness so that visitors don’t get bored.
How to create a unified global web design
In a global design, pages are designed so that visitors to a site feel they are navigating within a unified site, not a bunch of disarticulated, uncoordinated pages. Navigation elements and other global site content help visitors engage with a unified look and feel, and easily find their way around.
This global orientation applies in page design, as well as in common elements (such as header content, footer content, and navigation structures) that appear on all or most pages in a site.
A unified design structure might include these elements:
A page design element that defines the page size width at 960 pixels
Header (often with navigation)
The following figure shows all five of these elements in a web page design.
How to apply unevenness to web page design
In a symmetric page, the left and right side of the page are more or less equal in width and prominence. Asymmetric page design means designing pages that are unevenly structured. For example, a basic page concept that splits a page into a left side that is two-thirds of the page and a right side that is one-third of the page is asymmetric.
While rules are meant to be broken and all that, as a general rule, a page split of two-thirds/one-third is more inviting, interesting, dynamic, and engaging than one that’s split half and half (50/50) or into even thirds.
The sketch on top has three columns of about equal width; the one on bottom is more uneven. Again, spend a bit of time examining web pages you like. Note how the vast majority of them are divided unevenly.
The principle of asymmetry, or unevenness, can be applied on different levels. It can be applied within columns: say, splitting a column into different width sub-columns. It can be applied vertically — so that not all rows are the same height relative to each other.