Website Symmetry is Beautiful

Natalie Portman is beautiful. Even with her ridiculous makeup in Star Wars: The Phantom Menace, you could still see her beautiful genetics. What makes Natalie Portman beautiful though?

There are many traits of beautiful people, but one important trait is symmetry. Scientific studies have shown that symmetric faces are perceived as more attractive than asymmetric faces (link). Furthermore, when generating facial composite images (a computer averages out many faces to make 1 face), the results are usually attractive, even if the faces used to compile the composite weren’t attractive to begin with (link).

Websites and Symmetry

So why am I, a website developer, writing about beautiful faces? It’s because I believe the same principle of symmetry = beauty carries over onto other things in our world, including websites.

 

You don’t need to think about whether something is beautiful or not.

The great thing about beauty is that is instantly recognized. You don’t need to think about whether something is beautiful or not.

While I was finishing up a website for a client, I happened to click on a link on their website and went to a Japanese University’s website:

I thought the website was pretty.

The website itself wasn’t anything special. It wasn’t created by a creative agency, but rather, probably put together by a staff member. It didn’t have any fancy graphics or animations, but rather, it looked like a Microsoft Word document. And I could tell that there were many things done that web designers shouldn’t do, such as making your paragraphs span the entire width of a page. But it didn’t matter: it still looked good and I was intrigued.

I thought about why the site looked so good to me. Then I realized it was because of symmetry.

Everything on this website lined up beautifully. Pictures were lined up, menu icons were lined up, paragraphs were justified so that they lined up too, just like the facial features of Natalie Portman’s beautifully symmetric face. This site, even though it was not made by a professional, still had qualities of beauty because it had symmetry.

 

 

And that’s why I hate sidebars

I’ve never really liked sidebars. I tried to completely avoid them when I first started working on websites. But after some time, I started using them because I realized there was a lot of utility that a sidebar provides. But I still hated them. Why? Because they create a huge amount of asymmetry.

Think about it: Your content area is aligned to the center of the screen. But when you add a sidebar, you typically get a 25% sidebar area and 75% content area split. So regarding your content area, it’s actually not in the center of the screen anymore. When your readers are reading your content, they’re either looking at the left or right side of their screens.

 

The symmetry solution: 2 sidebars

At the time that I saw the symmetric Konan University website, I was working on this architectural drafter’s website:

The above was a test site, but I really did not like it. In fact, I had come to a completely halt in terms of knowing what to do with it.

After looking at the Konan website and thinking about symmetry though, I knew I had to make it symmetric. I was going to make 2 sidebars of equal width. I would place one sidebar on the left and one on the right. This meant that my content area would still be center-screen and everything would be symmetric in design.

My client loved the new draft. And I loved it too.

 

The Lesson: Website Symmetry is Beautiful.