How these three simple rules of design can make your website more appealing to visitors

Do you remember the so called "butterfly ballot" fiasco that marred the US presidential elections in 2000?
Voters were confused by the way candidate names were positioned on the ballot in an important Florida County and made mistakes that lead to endless recounts and controversies over who would be the winner.
The problems were due mostly to the fact that the candidate names were misaligned on the ballot.

A bad alignment can create problems not only in an election but on our websites as well.
Misaligned elements on a web page result in poor design that frustrates visitors and makes the site less appealing.
Good use of alignment can improve a website design but to make it even more effective you can use additional design principles like white space and rule of thirds.

In this article we look at these three rules of design that when used together can create an outstanding web page:

- Alignment
- White space
- Rule of thirds


Visual alignment is one of the best ways to improve the usability of a website. Each element on a web page, and by element I mean blocks of text, images, headlines, etc., should be aligned to one or more other element.
The vertical and horizontal rows that are formed by the aligned elements create a perception of unity and stability that appeals to most people.
Consciously or unconsciously we all want order in the world around us and reward order in design with our attention.

Although it's true that sometimes misaligned elements create interest and attract the eye, the general rule is to keep related elements aligned at all times along the horizontal and vertical axis.

Alignment alone will give order and unity to your page but if you want to go one step further you should take into account another principle that will make your page pop: white space.

White space

Have you ever wondered why little kids love Teletubbies? If you have never watched the TV show I forgive you: to an adult, the four colorful creatures that live in a futuristic dome may seem strange and a little creepy. But the fact is that small children just love them. But what do Teletubbies have to do with white space?

Well, if you watch the show closely you will notice that there's a lot of white space in the Teletubbies landscape, and this is by design.
The hilly landscape has open grassy areas with trees scattered here and there. It was designed by the producers of the show to look like a savannah. Why is it so? Because humans, and particularly small children, have a strong preference for savannahs.

The reason is probably because our species evolved in the savannahs of Africa and we unconsciously feel at home in that environment.
Given our strong savanna preference it's no mystery that people unconsciously like designs with groups of elements clustered together separated by white space. By not cramming a lot of visual elements together you will leave breathing space and make your visitor feel at home.

But where should you position the main elements on the page? At the top? In the center? There's another rule of design that deals with this problem. It's called the rule of thirds.

The rule of thirds.

The rule of thirds is simple. Divide the page into thirds, horizontally and vertically. This will leave you with nine rectangles and four intersection points where the imaginary lines that divide the page cross.
Place the most important elements at each one of the point of intersection to achieve a powerful composition.
The rule of thirds has been used for centuries by painters and artists because it results in a pleasing composition and should be carefully followed in web page design in order to position the elements that need the biggest attention.

But some popular websites don't follow these rules and they are still succesful.

It is true that many high traffic websites follow these rules only partially. But if you look closely you will notice that most of these websites have been around for a long time so visitors know where to find stuff they need because they have been exposed to it several times.

High traffic websites can afford to downplay some of these rules but the principles remain critical especially for small websites that don't have tons of traffic already.
If the website is new to a visitor, and it's not designed according to the rules of perception, it's more likely to be abandoned after a few seconds.


Three principles of design can be employed to make our website more appealing to visitors: alignment, white space and rule of thirds.
Aligned elements create an impression of unity and stability on a web page. White space is universally recognized as pleasing, especially in younger audiences.
Rule of thirds helps us position elements that need to be given emphasis and creates a more interesting layout.

You may want to take a look at your home page with a critical eye and start taking advantage of these three powerful techniques to make it more user friendly. Visitors on your website represent business and you don't want them to run into the same kind of problems that electors faced with the Florida ballot.