Geometric Primitives in Web Design. Introduction | WebReference

Geometric Primitives in Web Design. Introduction

[Dmitry's Design Lab]
Dmitry Kirsanov's monthly column
July 1997
Geometric Primitives in Web Design
Before attempting to tame complex design elements, you must be utterly familiar with simple geometric forms, their uses, misuses, behavior, and limitations.  In the article, we'll investigate examples of using basic geometric primitives on several well-crafted web pages.

One of the most important features distinguishing design from other visual arts is the creative use of other people's work.  Your fonts are created by fontographers; your clip art and stock photos are produced and packaged by a graphics company; even the content of the page often isn't yours but is given to you as the material to start with.  Your basic goal is to arrange and coordinate all of this stuff to be aesthetically pleasing and efficiently communicate your message.

Of course in any design there are elements created by the designer from scratch.  These may be as simple as a row of circles in the role of list bullets or as complex as hand-made miniatures in medieval manuscripts.  However, it's not the complexity of your custom graphics that makes a quality design.  Yes, as little as a century ago you couldn't produce a book without a minimum of rococo decorations (leafs, flowers, tracery, etc.); but these days, a well-balanced composition of simple geometric forms is more likely to qualify as the graphic theme for a book cover or web page.

In a sense, rectangles and circles used in design are also sort of "other people's art." A child is unlikely to discover the beauty of ideal circles unless he acquires this notion from the entire design culture surrounding him as he grows up.  And when you begin studying art, be it even the very pragmatic art of web design, you're about to somehow become a child again.  Or at least, you should aspire to it.

As one of the simplest ways to fill up the page real estate, using geometric primitives is the first thing that the beginning web designer should master.  Simply put, only after you're able to visually coordinate two rectangles you can pass on to fonts, custom graphics, or photos.  In real life, of course, you have to use several different techniques simultaneously, as no real-world page consists of geometric primitives only.  Still, basic geometry is a very useful design tool, and as such it is well worth one of my monthly installments.

This article consists of three parts dealing with straight lines, rectangles, and circles---the three most basic geometric primitives.  As always, I use links (repeated in the margins) to various sites whose design helps to illustrate my points; all these links are loaded into a new browser window so that you can have a look at the illustration without losing the track of my text.

As for more complex categories of "other people's art" used in web design, these can be listed, in a very approximate order of increasing complexity, as follows:

  • fonts;

  • photographic images (either custom photos or stock photo collections);

  • 3D graphics;

  • hand-drawn graphics (this is by far the most difficult one, and even among the best professional designers not everyone is good at drawing).

The first item, typography, was discussed in one of the previous articles (although it's a topic deserving much more attention).  I plan to cover the other items in future installments.


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