3.2 Layout

"Good design transcends technology."   
                  - Jason Beaird, The Principles of Beautiful Web Design

The first chapter of The Principles of Beautiful Web Design is a testament to the idea that design is about communication, and that effective communication is both easy to use and understand, as well as aesthetically pleasing. Beaird gives an always-timely review of the principles of art and includes commentary and illustrations of how these principles can be applied effectively to web design layouts. In general the book is laid out with good design in mind, underscoring that the principles covered are universal, transcending both web and print materials. The cover of the book in itself showcases good design by exhibiting unity in the choice of of complementary text colors, which mirror the logo colors. It also utilizes proximity in the close clustering of the paper cranes in order to have the three items appear as a single group, as well as repetition of the folded paper shapes; asymmetrical balance is evident in the large size of the main title block relative to the smaller cranes, which carry equal weight because they are repeated in a cluster.

Perhaps more importantly, the cover exhibits layout according to the classic rule of thirds, which Beaird explains extensively in chapter one. The paper cranes occupy roughly 2/3 of the space from left to right on the bottom half of the page while the title block occupies roughly 2/3 of the space from right to left on the top half of the page. The remaining third of the page in each area is left as negative space, which helps the overall design breathe and focuses attention on the contents of the positive spaces.

So why the rule of thirds? Because it is a good rule of thumb for producing harmonious layouts. For example, take this quick scribble from my sketchbook:

Even though it is only a compilation of crossing lines, it has more visual interest on the page because it follows the rule of thirds. The two straight lines at the left-hand side of the page show a rough division into thirds. Notice that the bulk of the drawing appears in the top 2/3 of the page; additionally the densest area of lines is concentrated in the middle third of the page while the lines in the top 1/3 are bolder, but used sparingly.

Applying this to web design, here is a basic layout for the main content and navigation areas of my site using the rule of thirds:

 










Obviously, the gray box represents the area where the appropriate content would appear. Notice that this box occupies roughly 2/3 of the area from the right edge of the page. The remaining 1/3 of the page is left as negative space to help balance the content area. The logo takes up 1/3 of the horizontal space at the top of the page. Of course, while the design is harmonious, it is not the most dynamic layout ever. I will definitely go back and play with the page elements to see if I get something a little more exciting. The rule of thirds, after all, is a guiding layout formula but it isn't intended to lock design into blocks, per se. Visual elements that occupy certain spaces and land at certain points (like eyes or text hitting on a "third" grid marking, for instance) hold more weight because our eyes are naturally drawn to those areas, but this isn't a hard and fast rule. Playing with the placement of some elements while keeping others along the main grid lines should help create a harmonious and simultaneously engaging design. We'll see...