Geometric Primitives in Web Design. 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.||
|Actually, you can profit from the rectangular shapes instead of shunning them. Admittedly, "pure" rectangles with sharp edges aren't very promising in this respect, but if you round your corners a bit, the rectangle takes a fresh new look and can even serve as a foundation of the entire site design---exactly which it does for this Russian press agency.|
|As a final example in this section, visit a page of the design company called Avalanche. Here, the rectangles and straignt lines are working in earnest, being totally responsible for the overall style of the page. This symphony of rectangles is only enlivened by several elements using arcs and rounded corners (mostly in the non-tiling background), but the heading graphics is built entirely of horizontal and vertical straight lines of varying weight. Note, especially, how the "company" and "Avalanche" boxes are contrasted in their color, frame thickness, and what might be called their internal texture---and how they are carefully positioned with respect to each other, so as to interrelate and avoid merging at the same time.||
Revised: Jul. 26, 1997