By: Christian Mucyo


Any time the two end points of a line come together, a shape is created (Beaird, Jason).
Shapes are two-dimensional areas with a recognizable boundary. They can be open or closed, angular or round, big or small. Shapes can be organic or inorganic. They can be free-form or geometric and ordered.

Geometric, Freeform and Abstract Shapes

There are two main categories of shapes. Geometric Shapes and Organic (or Freeform) Shapes.

We have basic geometric shapes that most people think of as shapes and are easily recognizable: Circles, Triangles, and Rectangles. Other geometric shapes include: Arrows, stars, diamonds, ellipses, plus signs, semicircles, and more.
Organic/Freeform shapes are more abstract than geometric shapes, and consist of non geometric curves, random angles, and irregular lines.

Geometric Shapes

Geometric shapes have precise curves, angles and straight lines that make them difficult to draw by hand, unless you have a compass, protractor and ruler. However we see that, on a computer, geometrically defined lines, curves, and angles are usually the default forms in any image-creating program (PhotoShop, Gimp, etc...).

Freeform/Organic Shapes

On the other hand freeform shapes have a free-flowing nature that conveys a sense of informality and spontaneity. They can represent the outline of a product, human gestures, or an organic doodle.


Abstract Shapes

Another type of shapes that we take a look are Abstract Shapes.

Abstract shapes are shapes that have a recognizable form but are not "real" in the same way that natural shapes are. An example would be the above "handicapped" icon that design a handicapped person that we usually used in parking lots or for bathrooms. Other examples of abstract shapes are: Alphabet glyphs, Icons, and Symbols.

Positive and Negative Shapes

A shape will be either Positive or Negative.

A positive shapes refers to a figure or foreground shape and is the focus of the picture, often called the subject matter.
A negative shape usually refers to an empty shape or space and is the background or surround of the subject matter (positive shape).

The image below illustrate the principle or positive and negative shapes:


Meaning of Shapes

There are an endless variety of shapes and combination of shape, each communicating its own meaning and message. Most of the time the meaning behind shapes and combined shapes is cultural. Below is a discussion of some basic geometric shapes and their meaning.


Circles represent the eternal whole and in every culture are an archetypical form representing the sun, the earth, the moon, the universe and other celestial objects. Circle have no beginning or end and they suggest well-roundedness and completeness. Their completeness suggests the infinite, unity and harmony. Circular shapes also suggest tenderness, love, friendship, care, support, protection, affection and compassion.


Squares and rectangles are familiar and trusted shapes that suggest honesty. The right angles they possess represent order, mathematics, rationality and formality. They are the most common geometric shapes encountered and everything text we read is set in rectangles or squares. They suggest conformity, peacefulness, solidity, security, and equality.


Spirals are expression of creativity. They are often found in the natural growth pattern of many organisms and suggest the process of growth and evolution. Spirals convey ideas of fertility, birth, death, expansion, and transformation. Clockwise spirals represent projection of an intention and counterclockwise spirals the fulfillment of an intention.


Crosses symbolize spirituality and healing. The 4 points of a cross represent self, nature, wisdom, and higher power or being. Crosses suggest transition, balance, faith, unity, temperance, hope, and life.

Shapes in Web Design

Shapes in Web Design can be used in many ways:
  • Add interest to a design
  • Sustain interest
  • Organize or separate elements
  • Direct the eye through the design

Shapes that lean toward the user appear to be blocking or stoping progress, whereas shapes leaning away from the user give the impression of aiding progress by opening up space. Some few tips to achieve good web design can be:
  • Try to keep background shapes simple and large. Being large can help attract attention and simplicity can put the focus back to the foreground
  • Try to use few shapes where possible. Don’t use 3 or 4 shapes to communicate when one shape will do
  • Try to limit the number and size of shapes where possible for clarity in conveying your message

Shapes can be used to convey depth by varying their size and position within a design. Larger shapes will appear closer and smaller shapes will appear further away. Shapes that are located lower in a design will seem closer and those higher up further away. Overlapping shapes is another way to create a sense of one in front of the other to add depth to your design.



The Principles of Beautiful Web Design 2nd Edition, Jason Beaird