Geometric Primitives in Web Design. Rectangles

hile 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:

• The size of a rectangle is just enough for its contents, with no significant padding space on either of the four sides.

• The position of a rectangle is determined by the content that immediately surrounds it, with no attempt made to coordinate or align it with the rest of the page.  (Recollect the nuances that I discussed in a previous article.)

(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?

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.