WEB  DESIGN PRINCIPLES

Principles in Web Design

Author - Tim Weber, GoWebLive.com

In web designing, design is more than just using HTML tags on a web page. The principles outlined below will help you create a more useful and effective website.

Balance

One of the most basic principles in web designing is balance. It is the distribution of the light and heavy elements on a page. It shows one to layout web pages so that they will work effectively. It is also a visual interpretation of design gravity. Remember that darker and larger objects appear heavier than lighter and smaller objects.

Balancing designs can be done in three ways:

Symmetrical Balance – done by placing elements in an even manner
Asymmetrical Balance – more challenging to design because they don’t have elements that match across the designs centerline
Discordant or off-balance – designs that suggest more action and motion

Contrast

When people encounter the word contrast, color is the first thing that comes to mind. However, contrast is more than just a difference in color. There can be contrasts in shapes, sizes and even textures. It is an accentuation of element differences in a design. When you apply contrast in a web design, think beyond or more than just colors. Think about how you can attract your readers in terms of contrasting font sizes, shapes, images and text styles.

Moreover, contrast in web design can be done in four ways. It can be done by

1. Changing of fonts.
2. Providing links.
3. Using different sizes of images and elements.
4. Using contrasting colors.

Emphasis

The eye is drawn to what is emphasized in a design. Though it is very tempting to give emphasis on everything in your website, as a designer you should determine element hierarchy and apply emphasis accordingly based on the hierarchy.

With emphasis, you make the most important element stand out in your design. To include emphasis or dominance in your design, try doing the following ways:
1. Use semantic mark up that will provide some emphasis even when there are no styles
2. Changing of fonts or images
3. Use of contrasting colors

Rhythm

Rhythm is also called repetition. It allows the design to build an internal consistency which helps the viewers to understand it easily. It is said that the whole design can only be understood once the brain has recognized the pattern in the rhythm. Furthermore, rhythm instills a sense of order in the design because it seldom occurs on its own. Due to this, viewers become attracted and therefore tend to investigate further.

To include rhythm in your web design, you can repeat actual HTML texts, add images several times, use background-repeat property and repeat navigation elements of your design

Unity

In design, unity is also termed as proximity. It is the method of keeping same elements together and keeping different elements apart. It provides cohesiveness to designs and is said to pull elements together. It is primarily achieved through layout placement but can also be accomplished with the use of padding and margining of the elements.

Unity can be implemented through adjusting the layout of elements, changing the text spacing and playing with the box properties to influence the padding and margins.