The average consumer who visits websites is more likely to remain on a site that is visually appealing, at least for a while. He is looking for a product or service perhaps, but an ugly page, with clutter and distractions will make him bounce. Likewise, a boring site with lots of text, little color, and only a few visuals is just as unappealing. First impressions are huge in a noisy world of online competition, and site design is that first impression. While design trends come and go, understanding a few basic rules of composition that have come from centuries of art can make a web design engaging and memorable.
The Golden Ratio/Rule of Thirds = Balance
The masters through the ages understood balance. In fact, to them it was geometric and called “The Golden Ratio” which formed a “Golden Spiral.”
Of course, the Gold Ratio could be rotated as the artist wished, as it is superimposed on the Mona Lisa.
Because the Golden Ratio involves some complex math, it has, over time, been simplified to the Rule of Thirds, and it is this rule that has been incorporated into the majority of web designs. It provides a grid of sorts that a designer can overlay onto his elements placement.
The grid that is formed by the Rule of Thirds has 4 intersection points. The rule of thumb is to place the most important elements at these intersections because that is where the eye goes first. Not all of the intersections will necessarily be utilized. And because visitors usually view in an “F” pattern, the upper left is probably the most important, then moving down to the middle and across, and then back and to the bottom. Here is an example of a web design that uses the Rule of Thirds, featured in an article in Smashing Magazine.
DemandWare is a cloud-based software tech company that provides service to e-commerce retailers. It has used two intersections in this page for the information it wants visitors to focus on – it’s purpose/benefit (most important) and then a featured client (the other pink box). And the entire page is balanced.
Understanding the relationship between the Golden Ratio and the Rule of Thirds and how it applies to web design is just one reason why basic art training classes are good for all designers.
White Space
Elements need space to “breathe.” Even if the space around them is not white, the space must be there. It calms down the page and allows viewers a rest between elements that you want them to really see and/or read.
Hierarchy
Some elements of a design are obviously more important than others. Place on the grid is one method of achieving visitor focus on these. Another method is by using typography. Headings and subheadings of text can demonstrate hierarchy as can captions – larger ones can direct the eye to a more important image.
Color
Choosing a color palette means that colors complement one another and promote the “mood” of the product or service. Luxury and sophistication need black and deep blues or purples; fun needs bright primary colors. Choosing incorrect colors throws off the emotional appeal that a good design could otherwise have. Rolex has the right idea as does Lego.
Depth
While a web page is just made up of pixels on a screen, the illusion of depth can be offered. One way to do this is to adjust size and placement so that some elements appear farther away than others.
Simplicity
Several of the other composition factors address simplicity, but it is worth mentioning again. It is easy to get carried away, adding more and more elements because they are just “cool.” Unfortunately, you can reach a point where complexity annoys visitors, especially if there is not enough white space. Flashy touches should serve a design purpose or should be left out. Minimalism continues to be a design trend for 2016.