How the Mona Lisa principle can make your website priceless

In the film "A Beautiful Life" the protagonist, a genius mathematician named John Nash, is invited to a secret meeting at the Pentagon. The Soviets have devised a clever system to communicate with their undercover agents in the US. The military ask Nash to decipher the code that is hidden in plain view into newspaper and magazine articles.

There's another secret code hidden in plain view that can help your website look more beautiful, it's called the Mona Lisa principle.

In this article I will talk about:
- What the Mona Lisa principle is
- How to use it to make your website look better
- When not to use it

What is the Mona Lisa principle?

Everyone knows that the Mona Lisa is considered one of the most beautiful paintings ever made. The secret of its beauty lies in the perfect proportions of the subject. Leonardo, like many artists before and after him, knew that the human eye is attracted by elements whose proportions have a specific relationship between them.

These magical proportions are based on the ancient number PHI which was discovered thousands of years ago. The value of PHI equals 1.618 and is observed in many harmonious forms found in nature.

For example, many seashells, pine cones and the human body itself are naturally proportioned with a width to height ratio of 1.618 Architects and artists have used this knowledge to design graceful buildings like the Parthenon and the Great Pyramids or great paintings like the Last Supper or the Mona Lisa. The number 1.618 is even found in sounds and intervals of time.

Proportions based on PHI are seen throughout the world and throughout the ages. It seems that nature loves this number and our brains are designed to respond to it no matter who we are and where we live.

Why is this principle important in website design?

In a previous article, I showed why beauty is critical in website design because it creates a special bond with the visitor and makes, by its own virtue, a website more usable. The Mona Lisa principle is one of the tools that make a design more beautiful, therefore it should be employed, when possible, to enhance our websites.

The most common use of the Mona Lisa principle is in the web page layout. For example, in a typical two column layout, take a common page width of 960 pixels and divide it by 1.618. The result is 594 pixels for the main column and 366 pixels for the sidebar, as shown by the example below.

You can use the same principle for the individual elements within the web page, like boxes, columns of text, images and buttons. Simply make sure that those elements, when possible, have a width to height ratio of 1.618.

And here are some real life examples

Here are a couple of examples of popular designs that use proportions based on the number PHI. The creative director of Twitter posted some time ago a screenshot of how they designed the page.

The designers of the Chrome browser also started with the same proportions when they developed the user interface, as described on their website.

Given the fact that the Mona Lisa principle is so widespread and gives such good results should you use it anywhere? No, and here's why.

When not to use the Mona Lisa principle

The Mona Lisa principle is a guideline that should be followed when appropriate. All good design should adapt to the function for which it's created. Form follows function. This means that it's not always possible to apply abstract design principles to real life. Unlike art, the primary goal of design is to communicate effectively with an audience so it should be concretely applied to each specific situation.

Web pages in particular can be tricky because we often don't know how the web page is going to be viewed. Monitors come in different sizes and resolutions that can't be known in advance and can quickly make our design look unbalanced.

Some elements in the web page may have special requirements where they need to be positioned outside of the boundaries of perfect proportion. In addition to that, web pages need to be designed for different devices, like phones for example, that have a small screen and don't show the entire page.

In these kind of situations, it's better not to follow the rules of good proportion too closely or the design may result stiff and contrived. But as a general rule, try to follow the Mona Lisa principle as much as possible to achieve a design that will be regarded harmonious by most people.

To summarize

The Mona Lisa principle deals with proportion of form. Many works of art and forms in nature that are considered beautiful have proportions based on the number 1.618. This principle is important in website design because beautiful websites are perceived to be more friendly and easier to use by visitors. Even though the principle is valid and easy to use, we may not want to follow its rules blindly when a specific design situation wouldn't make it appropriate.

Like the secret code hidden in magazine titles that everybody could see, the Mona Lisa principle is often not recognized consciously but it's always picked up at an unconscious level by the viewer and the effect it produces on the brain is a positive feeling of order and stability.


More examples

Yes, even credit cards. Maybe that's why we use them more then we should...