Geometric Primitives in Web Design. Circles | WebReference

Geometric Primitives in Web Design. Circles

 
  Circles
 
 

Of all the figures mentioned in this article, the circle is the most enigmatic, the most unusual, the most famous.  It was, not unreasonably, considered a perfect or even "sacred" form by the ancients.  Anyone who studied geometry knows that the circle (in 2D) and sphere (in 3D) possess a set of unique features that somehow set them apart from the rest of the abstract world.

However, I would not claim that circles are particularly favored in any computer visual art, including web design.  After all, computers with their pixel-based screens aren't very well equipped to display circles (much worse than rectangles).  Circular designs of, say, navigation bars are not rare, and some are nice, but I haven't yet seen one that would definitely beat the plum of the web layouts that do not use circles.

It is difficult to say why that is.  Maybe the viewer can't suppress the subconscious feeling of the circle being too alien on the rectangle-dominated computer screen.  Or perhaps we just feel the inefficiency of the circle in terms of using screen space.  Indeed, the circle has the shortest perimeter among all figures with constant area---while for layout purposes, on the contrary, it is often desirable to minimize area and maximize perimeter.

  

Link 8:  Macromedia rounds out
On the other hand, it cannot be denied that circles have certain charm.  When used sparingly, circular forms can convey the feeling of softness and perfection.  You can cut circular fragments out of your photos or inscribe circles in the corners of your rectangles.  A variation of the latter technique is the rectangles with rounded corners that we've already seen successfully used in page design.  Another example is the home page of Macromedia where nearly everything, starting from the company logo, is rounded out with 90-degree arcs.  

 The Design Unit page demonstrates using concentric circles of different colors, all clipped out by a common rectangle, representing the site's sections (labelled above the rectangle).  This layout not only associates a certain color with each of the sections, but also implies a sort of hierarchical relationship among the sections, with "vision" being in the core and "people" in the circumference.  (Note also the thin dotted line leading to the awards section).
Link 9:  People at the Outskirts

Link 10:  Liska and Geometry
For a final example visit the site of Liska and Associates, Inc. where the geometric approach is taken to its extreme: Every section of this site is symbolized by its own geometric shape.  It is interesting and, combined with the clean austere design, produces a pleasant looking site.  However the idea, when implemented too literally, immediately reveals its artificial nature: Why in the world "portfolio" must be a triangle and "what's new", a trapezoid?!  The geometric symbols pretend to imply something about the essence of each section while in fact they've been chosen in an almost random fashion.  

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

URL: https://www.webreference.com/dlab/9707/circles.html