Friday, 26 August 2011

The Principles of Web Design

There are various theories involved in the conceptualization of designs. Within these theories are steps that are necessary in the creation of Web Designs. Although we know the tools to make a website - more often than not, the design stage, where most of the ideas surface, is not taught to us.  Hopefully, this guide will shed light on this matter.

For now, let us focus more on the basic principles of design as taught in Art and now, in Web Design. These are:

  • Unity

  • Dominance

  • Proportion

  • Rhythm

  • Balance


Unity - This describes how the whole composition is affected by the individual parts. It tries to discover how the different aspects of a design link each other to make a complete whole. Unity has its roots in the Gestalt theories, in which it tells how the brain perceives objects as seen by the naked eyes. These are:
Closure- If we see something missing, our brain automatically tries to fill or find that missing piece. When we separate and arrange several small parts coming from a bigger object, our brain will tend to tell us to add information to achieve closure or completeness of that deconstructed object .

Continuance – is just the same as travelling in a car, when you look out the window, your eyes are focused into that one direction for very a long time until something catches your attention. Using directional lines, one will most likely direct the viewer’s eye into that direction.

Similarity, Proximity and Alignment – objects of similar shape, size and color is usually grouped together in the brain. And objects near to each other tend to be grouped in a similar way. 

Dominance – this is about giving emphasis on different strengths of a design. It gives weight and perspective on where the eye goes. There are three stages:

  • Dominant: The thing given the most visual weight, the subject of primary emphasis that advances to the foreground.

  • Sub-dominant: The thing of secondary emphasis, the subject in the middle ground of the composition.

  • Subordinate: the thing given the least visual weight, the subject of tertiary emphasis that recedes to the background.


Proportion – as the name implies, this is the distribution and comparison of forms. It tells the relationship in scales and of different elements. Varying proportions within a whole can portray different kinds of symmetry and can help show depth and weight.

Rhythm – alternating or repeating elements in intervals is rhythm. It creates movement and pattern. There are kinds of rhythms that describe the emotion it portrays.

  • Regular: occurs when the intervals between the elements are similar in size/length

  • Flowing: portrays a sense of movement. Is more often organic in nature.

  • Progressive: shows a series or cycles of forms through a progression of steps.


Balance – this is the arrangement of objects in a given design as it relates to their whole. You may intentionally create tension by throwing elements out of balance or distribute it so that no one section is heavier than the other. It has two forms:
Symmetrical- also called Formal balance, it happens when there is an even distribution around a central axis. This usually shows identical forms on both sides of a vertical or horizontal axis and can also be applied on round or circular axis points, otherwise known as radial symmetry.

Asymmetrical – also known as informal balance, this occurs when the weight of a composition in not evenly distributed around the axis. It is done by arranging objects of different sizes in a composition, wherein one dominant form may offset several smaller ones.

Related concepts


Gradation – the grading of size, color and direction gives a linear perspective. Examples are warm to cool colors and dark to light will cause the eye to move along a shape.

Contrast or Opposition – the juxtaposition of opposing elements. Examples are those found in the colour wheel – red/green, blue/orange. Etc.

White Space – when putting too much graphics and text in a page, it tends to become suffocating.  Adding white space gives some breathing room.

All these principles used throughout history, will determine the future of your designs. These are the building blocks of the foundation of your web design.  Remember that although the tools we use may be powerful - knowing when and how to use them will determine our designs’ outcome. I hope understanding these principles will have broadened your ideas of Web Designing, Enjoy!

No comments:

Post a Comment