Geometric Primitives in Web Design. Rectangles | WebReference

Geometric Primitives in Web Design. Rectangles


While the straight line is the basis of 2D geometry, a rectangle may well be called the most natural shape for the computer.  Almost all you create comes up in rectangular form; text paragraphs, images, Java applets, and all other elements on your web page are rectangular by default, unless you intentionally change their shape.

Therefore, it is of little surprise that "pure" rectangles aren't in vogue with sensitive web designers.  Maybe it would be more appropriate to write a section on how to avoid, not how to use, rectangles in web design.  But since you're unlikely to get on without any rectangles whatsoever, it might be interesting to see how one might make the ubiquitous rectangles more pleasing to the eye.

Like the HR tag we've discussed, the first natural method of rectangular layout in HTML---tables---offers by default a bevelled look for row and column boundaries.  Similarly, this feature of common browsers is not what you should rely on if you care about the aesthetics of your content.  Even if you have "real" tabular data and want to separate rows or columns, it is often better to use different background colors than the "pseudo-3D" borders.  (The same can be said about frame boundaries.)

It is surprising how much you can improve your page by analyzing what's wrong with the rectangles it consists of.  I would call the ugly rectangular artifact that is so common on average web pages the Ugly Rectangle Syndrome (URS), and you can use the following simple checklist to see if your text blocks, images, or navigation buttons manifest the URS:

(Of course a URS can be rendered even more ugly by using, say, a wrong background or text color, by adding awkward table borders, or in a thousand other ways.  But now we're concerned with the geometric aspect only, i.e. the size and position of rectangles.)

Each of the above items alone may not be a big problem, but together they're a sure sign that something is wrong about this particular rectangle.  Do you have enough reasons for putting it there and making it this high and this wide?  Has the composition been well thought over?  Maybe you could consider moving, resizing, even rotating it?  Or perhaps merging or removing it altogether?


Link 4:  Rectangles without 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.
Link 5:  The Quark Shapes

Link 6:  Rectangles in Russian
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.
Link 7:  The Avalanche of Rectangles

Created: Jul. 26, 1997
Revised: Jul. 26, 1997