8 months ago


16 The Principles of

16 The Principles of Beautiful Web Design Figure 1.12. Symmetrical balance: Contemplation by David Lanham 10 Although it may not be practical for all designs and clients, this type of symmetry—called horizontal symmetry—can be applied to website layouts by centering content or balancing it between columns. The Albion West Coast page 11 is an example of such symmetry. Notice on the screenshot in Figure 1.13 that the content areas are balanced in perfect symmetry, While some elements, like the hand-drawn sketch in the background, add subtle variation to the site. Figure 1.13. Albion home page The two other forms of symmetrical balance are less common in website design, due to the nature of the medium. They are, however, commonly exhibited in logo and print design: 10 11

Layout and Composition 17 ■ bilateral symmetry, which exists when a composition is balanced on more than one axis ■ radial symmetry, which occurs when elements are equally spaced around a central point Asymmetrical Balance Figure 1.14. An example of asymmetrical balance Asymmetrical balance, or informal balance, is a little more abstract (and more visually interesting in general) than symmetrical balance. An example of asymmetrical balance is shown in Figure 1.14. Rather than mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page; for instance, if you have a large object on one side of a page, and partner it with several smaller items on the other side, the composition can still feel balanced. The concert poster by my friend Jeremy Darty presented in Figure 1.15 is a fine example of asymmetrical balance. The visual weight of the large pink flamingo on the left is balanced by the combined weight of the smaller flamingos and text blocks on the right-hand side of the layout. Notice, also, Jeremy’s use of the rule of thirds. The blue cloud behind the Pop Sucks title takes up one-third of the vertical space and spans two-thirds of the horizontal. Figure 1.15. Asymmetrically balanced design by Jeremy Darty

Layout and Design - In Easy Steps
Boot Camp
The Complete Guide to a High Converting Website
Web Site Design & Usability Testing - HIPNet
30 ways to create amazing web experiences on tablets
Download PDF -
How to build a department web site (starter pack) - University of ...
Creative Services - Keiger Graphic Communications
Visual Design for Library Websites - WebJunction
Responsive Email Design Guide - e-Dialog
slides - HTML5 Developer Conference