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