The principles of design take years to learn and many more to master effectively. They would also take much more than a blog post to thoroughly convey. We can however touch on some of the basic concepts.

Compared to other forms of design, the web is a relatively young medium with many unique aspects. Screen resolution, the limits of technology, browser and operating system differences, etc, even the different monitors we use, all impact on how we make use of the elements of design, the components we arrange based on design principles. We borrow greatly from print, illustration, typography, as well as the more dynamic and organic feel of animation and film.

Balance

Balance deals with the equilibrium of elements within a composition. The visual weight of elements can be used to create moods in the viewer. This is done via symmetry or asymmetry. The results are used to draw the viewer to certain elements over others.

A symmetrical balance is when the elements of your composition are evenly distributed around a vertical, horizontal or central axis, such as a mirrored image.

An asymmetrical balance is the opposite of a symmetrical one, when the elements of your composition are not evenly distributed around an axis. Using different sizes, colors and shapes yet keeping a balance with each element and their visual weights.

Proximity, Unity, Alignment and More

Elements and their proximity to each other create in the mind a relationship between them. The Elements include: Rhythm, the repetition of elements; Proportion, the relationship of dimension, scale and distribution of elements; and Dominance, which deals with the emphasis of certain elements.

These concepts all work together to create a visual hierarchy in your design. They provide visual clues to the viewer of the concept or message you are trying to communicate to them.

White Space

Just as important as everything else, white space is often the most neglected in web design. Many people try to cram too much information on to a page. The result being overwhelming and hard to visually follow.

Consider a room filled with people and objects all jammed together. Our minds have a hard time processing where to look or go to first. Creating a much more relaxed environment by using white space will make it much easier for your viewers to pay attention and focus on your message.

If the environment is interesting and easy to navigate, and the message is interesting, they will stick around and delve further in your site. Presenting them with an overwhelming hodgepodge of information, they may just run for the hills before you even get a chance to convey anything to them.

The Rule of Thirds and Visual Center

Used largely in photography and video, the rule of thirds states that when the main element is off center the composition is more visually interesting. How to do it? Divide your page into thirds, horizontally or vertically and place the element on the lines in between.

Also, our visual focus on a piece is placed just above and to the right of a composition’s mathematical center, this known as the visual center.

Generally these two rules would be used for any photos or graphic elements, such as Flash or videos. However, if used within your layout, they can be used as a guide for your layout, bringing a more artistic and organic feel.

Color

The theory of color harmony has had entire novels written about it. The most basic concepts are complementary, analogous, and triadic. When looking at a color wheel, complementary colors are two colors that are on the opposite sides of each other. Analogous colors are the colors that are adjacent to each other. A color triad is three colors that are of equal distance from each other. These three however barely scratch the surface of color theory. Colors themselves can be used to create moods and convey ideas to viewers; bold, bright, energetic, calm, denoting wealth, strength, intelligence and so on. Research the ideas you want to convey and what will be appropriate to your audience.

Typography

The subject of typography is also quite vast. It is the art of typefaces and has its own set of rules but follows principles of design nonetheless. A good guideline would be to not use too many different typefaces in any given composition. Certain industries have grown accustomed to using certain typefaces. For example, the legal and news print industries almost always use serif fonts, fonts with small semi-structural details on the ends of strokes. Whereas younger more energetic corporations will trend towards the sans serif fonts, stokes without those details. Like design elements, each typeface generates moods and emotions differently in each viewer. Doing research into your website’s audience should help you to choose the appropriate typefaces to use.

Conclusions

All these design elements, and more, are considered and used to create the most effective compositions, to convey concepts and messages to our viewers, and have been practiced for centuries in all forms of media. Understanding these concepts will help to guide you in your work, and also help you to better articulate your critiques and presentations to clients.