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:

konan-website-1

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.

 

konan-website-2

 

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:

symmetry-site1

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.

symmetry-site2

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

 

The Lesson: Website Symmetry is Beautiful.

8 Comments

Chase Webb Oct 10, 2017

I recently came across a website that was all over the place I couldn’t find anything. Clean crisp symmetry can make a huge difference for a business!

Reply
Mark Jan 27, 2014

What a difference going from 2 columns to 3 makes. I’ll have to remember that.

Reply
Ron Lum Jan 29, 2014

Yeah, it totally blew me away when I started thinking about it. Symmetry is not required, and actually, sometimes a bit of asymmetry can be eye-catching. But still, I really like the concept of symmetry in websites. Next week, I think I will dig up some beautifully symmetric sites.

Reply
bertram Jan 25, 2014

great read bro. And yeah, nat portmans face is really symmetrical now that you mention it.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *