Geometric Primitives in Web Design. Rectangles | WebReference

Geometric Primitives in Web Design. Rectangles

 Rectangles

How is this analysis performed in real-world examples?  Maybe you have already visited Adobe's site and taken the elegance of its top navigation bars for granted (they're designed by Studio Archetype).  But imagine that you are assigned the task to design a navigation mechanism with exactly the same set of buttons; what would you do?  How could you arrive at a similar (or similarly pleasing) layout?

 Let's try out here an "anti-rectangular" approach.  Arranging the buttons vertically, one below the other, would be not only less efficient with regard to space, but it would also produce a much more rectangular-looking panel, the one with its overall height and width almost equal to each other.  Horizontal layout, on the other hand, results in the bar which is perceived as a strip rather than as a rectangle. The vertical dividing lines (on the lower bar) are necessary for the ease of orientation, but they aren't too salient and do not break the bar into smaller rectangles, in part because all buttons are of the same width and this rhythm helps the eye to see their integrity.  For the upper bar of buttons (they represent tools as opposed to topics in the lower panel), the designer found it appropriate to abandon the button boundaries and to further "de-rectangulate" the bar by adding a gradient on the left.  Thus the two bars, with some features in common and the other in contrast, present a simple and elegant navigation design example.

The old home page of Quark, Inc. demonstrates how you can successfully fight the monotony of rectangles by adding random stairs and notches to their outlines and by drawing crooked corridors between them.  (Now their design is different, but the small fragment of the old design screenshot on the right shows you what I'm speaking about.)  To make these whimsical paths more prominent, the edges of the shapes are all similarly shaded.  However, in this way the parts may feel too separated, so the artist decided to add a touch of integration---notice how the chimney-and-smoke graphic is used to bind three adjacent rectangles together.