There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. “It’s what’s inside that counts” and “Beauty is only skin deep” are a few simple examples. Because the Web design industry is now flooded with a lot of raw talent, and because virtually anyone can create a “beautiful” website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.

In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not superficial, but rather improves and enhances the user experience.

A lot of things could fall in the category of “beautiful” or “attractive” in the context of Web design. But a number of factors would make such beauty shallow. Is a website more attractive if it has tastefully placed drop-shadows, gradients or reflections? What if it has an eye-pleasing color scheme? What about big over-designed buttons? Could these be standards by which a design would be deemed beautiful?

If you’ve been keeping tabs on the Web design industry in the last five years, you’ve probably at some point visited one of the many CSS galleries. Visiting those inspirational showcases is great, and I’m sure we’ve all done it, but we need to be careful not to fall into the copycat syndrome, whereby we prettify our websites for no other reason than to make them CSS gallery-worthy.

1Mint.com2 has everything a client could ask for in a “Web 2.0 design”. Does that mean it’s beautiful?

The designers, developers and content strategists who planned and executed many of the websites in those galleries did what they did because they felt it would truly benefit the user experience and their clients’ bottom line. The truly beautiful websites and apps in those showcases are not just visually beautiful; they’re usable, accessible and optimized to benefit both the user and website owner.

With the recent popularity of Dribbble53, the copycat syndrome might be gaining momentum. On Dribbble, a designer reveals a sample of something they’re working on, and then the style of that small snippet starts spreading. The context and strategy underlying it are unknown, yet the style is still viewed as beautiful in and of itself. The designer may have taken hours, days or weeks to arrive at the decisions that informed the design, but now that it’s out in the wild, the snippet becomes nothing more than eye candy.

Of course, the intent of this article is not to blame those who share their designs on Dribbble, nor to blame those who review these designs and offer feedback. But we mustn’t lose sight of the fact that every design decision should have significant reasoning behind it.

How do we measure beauty? If a website is difficult to use, then isn’t its beauty without purpose? Look at the comparison in the image shown below.

The Nettuts+ logo and navigation bar.

I think Nettuts+ is a very nicely designed website. But is the fancy navigation and logo section shown on top more usable than the plain blue and white version below it? Taken at face value, some might argue that the plain version is more usable (if only slightly) than the “beautiful” one.

While the Facebook home page shown on top might not appear the most beautiful design to many of us, it still contains attractive aesthetic elements (colors, gradient background, styled buttons, etc.). But when most of these minor elements are made plain, does it really affect the usability (of course, after you increase the color contrast for the form labels in the right upper corner)?

If prettiness is really as important as we think, then the current Facebook home page should perform much better than the plain alternative. How do we know, though, that the plain version wouldn’t outperform the adorned version?

I’m not about to make a case for bringing back blue links on a white background on every website. In fact, as I’ll explain, both Nettuts+ and Facebook may very well qualify as truly beautiful websites. The examples above were more illustrative, and not meant to criticize the designers who worked on them.

Rather, I’m encouraging designers to consider two things when adding “beautiful” enhancements to their designs.

Responsive and intuitive page elements,

Branding and consistency of theme.

Focusing on these two things will give every pixel in a design a purpose and will contribute to the website’s overall usability. Let’s consider both of these, with a few simple examples to illustrate their effectiveness.

If a design element makes a website feel more friendly or gives subtle hints as to what’s happening, then this adds to its usability. Look at the simple example below from Design Informer:

On the Design Informer website, hover over the search box in the top right, and you’ll notice it brightens up. This is not intrusive in any way, and it looks especially elegant in WebKit browsers, because the brightening animates with CSS3. The default look of the search box could be a bit brighter to improve the general usability of the site, but in this specific case the idea counts more than the execution.

This very simple effect conveys to the user that this is a usable element, and it makes the search box more inviting. It’s a ridiculously simple technique but has a very powerful effect.

But just because you can use an animated effect does not mean you should. If, as in the case of Design Informer, the effect makes the UI more intuitive and responsive, then it is justified. This statement by Stuart Thursby8 sums it up well:

If designers think that using HTML5 and CSS3 makes them a better designer just because they use them, then they’re sorely misguided.

Include an element only if it accomplishes some usability-related purpose. If the design is not made more usable by a particular technique (whether via CSS3, JavaScript or something else), then the designer should reconsider whether the extra code is worth the effort. Decoration only goes so far and often has an effect opposite to the one intended, so consider yours carefully before including it in your design.

Another example of an animation that enhances usability is found on Soh Tanaka’s new website. Look at the screenshot below from this post on his blog:

When you hover over any presentation of code on his website, you’ll notice that the block expands to the right (probably via jQuery, so it would work in every browser).

Again, a simple effect, but not just eye candy; it has a purpose. In tutorials, HTML code is often too long to fit in the highlighter, so the code either wraps or creates ugly scroll bars. Tanaka’s solution makes the code more inviting and readable, and it decreases the likelihood of wrapping or scroll bars.

So whether we’re talking about text links that change color on hover, buttons that move when clicked, AJAX that creates subtle yet intuitive effects, we can take a design beyond mere decoration9 in many ways and truly enhance its usability.

If an element contributes to a website’s overall branding, image or reputation, then it’s safe to say that it contributes to its usability. Properly planned and executed branding is not superficial or decorative. Carefully chosen colors and graphic elements create an inviting atmosphere that leads the user to make easy decisions and helps them interact with elements smoothly and intuitively.

Look at the screenshot below from 10k Apart:

The laurel wreath10 in the background and the distinctive illustration immediately distinguish this website as belonging to A List Apart11. Consistency in branding contributes to the usability of this ALA microsite and makes it feel inviting and familiar.

This screenshot doesn’t do justice to the website’s look and feel; you’ll have to poke around to really experience it for yourself. The design might appear decorative and superficial at first glance, but it’s not. The elements work together to create a consistent and inviting atmosphere, extending the “launch” theme throughout with subtle animations.

My purpose here was not to tell designers to forget about slickness, sexiness and beauty. This should be obvious from the beautiful examples shown, which certainly qualify as both usable and attractive. No one expects owners of beautiful websites to suddenly drop their enhancements in favor of the Craigslist look just to make them more usable.

Rather, this post is just a reminder that eye candy is important, but it isn’t everything, and that for a design to be truly beautiful, it has to be functional, have purpose and contribute in some way to the website’s intuitiveness, usefulness and branding. All of these things contribute to the overall effect of a design.

In Defense of Eye Candy14Research proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.

Looks Matter Because We All Have FeelingsAn article about the importance of aesthetics in web design.

Stop Inspiration Hunting When DesigningThere is definitely a difference between looking at sites for research purposes when beginning a design versus looking at sites just to find some cool stuff you might be able to use. Nice article on Drawar.

Web Design? Screw Aesthetics“When I talk about design I try to do more than mention the aesthetic/visual aspect of it, but it seems people tend to focus on that aspect the most. Web design however adds many more elements to the elegant answer that we are so frantically searching for.” Another interesting article on Drawar.

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Related Articles

Mariusz

Recently, I also made a post defending aesthetics without sacrificing usability, mostly based on Donald Norman’s research on emotional design. You can check it out here: http://beta.mariusz.cc/blog/text/12603815

Andrei Gonzales

Thank you for pointing out the problem with dribbble. The styles on dribbble have increasingly become similar over the last few months. Everyone has some sort of retro-style / noise texture / drop shadow / embedded buttons look. Seriously.

Dribbble is increasingly becoming a club for people who design a certain way, rather than a showcase for original creative work.

Come to think of it… isn’t that the problem with 99% of “best design” galleries out there?

I guess that’s what happens the people who run them don’t know the fundamentals of what makes a website design good in the first place.

Louis

The Design Informer search box is perfectly readable to me, even without mousing over it. The mouse over effect is an enhancement that makes it feel more usable and inviting, but I think it’s fine without the effect, too.

0

8

James

I’d say you both have a valid argument. It really depends on the site/application. You want your most important content/functionality to stand out. For a site like google, search is the most important thing…so this kind of effect would be bad UX. However, for a site like Design Informer, it is more important for users to focus on the current articles, so search is more of a feature and not a necessity to most users. It all depends on the context and scale of importance.

Personally, in this context, I think Design Informer has done a good job as the search box is present and reactive to user interaction, but it is not over powering to the overall design.

Norm

“What’s interesting is that SM actually edited my original version of the article to say that the Design Informer search box is not bright enough, but I don’t agree with that statement.”

While this is a small alteration, I find it quite surprising (disturbing?) that SM would impose some of ‘their own’ opinions in an author’s article. In this case, it isn’t severe, but on a matter of principal I don’t agree with SM meddling with author’s words*

*I can understand people in editorial roles helping authors out with rewriting sentences (or complete paragraphs) that don’t explain or express something properly… but to start fudging the author’s words (which results in breaking an author’s opinion) is a no-no as far as I’m concerned (if the author expresses something that is truly out of line with proper web development and is obviously wrong, that’s another matter completely).

How much will be altered in the next article? SM, editing articles for the purpose of better grammar and explanations is one thing… editing to add your own opinions into the mix is quite another. *wags finger*.

With all due respect, of course.

0

11

Daanvp

To be honest, I must agree with SM that the searchbox is not bright enough.
If your site has a dark theme then it can be a pain finding the searchbox for less experienced web users. They don’t know that on most websites the searchboxes can be found in the right top corner of the website.

0

12

Louis

In the case of Design Informer, there was purpose to the search box not being brighter than it is. If you read this article on Design Informer explaining the design you’ll see that the primary improvement in the new design was to help the user focus on the content as much as possible. An overly-bright search box would have taken away from that focus.

The bottom line is, I don’t think anyone that visits Design Informer has any problem finding the search box on any device, so I think people’s opinions on this matter are just plain wrong, and the search box is fine the way it is.

0

13

Iamzozo

Launchlist yes/no switchers a bit similar to the apple mobile interface. I think it’s eyecandy, not a usable thing. A styled checkbox also works for this and more known – understandable.
Sometimes designers follow trends and not design for function. Websites and apps are functional or even interactive, functional design is more important. And it’s differs for each project. Apple impress the webdesign too, but they don’t create websites (apps impress). The gradient tool was also available for many years ago and the button height wasn’t limited too. These are good things, but sometimes could be better. And it’s a bit ironic if i think about the apple slogan: “Think different”. “Think” would be a good start, for the “Don’t imitate, innovate”. For usability the most important thing is thinking with a creative mind, but in many times we use boxed solutions, because it’s works well.
I’m awaiting how many websites will integrate the big “load more” content button at the end of the website after facebook and google images.
Mothers and fathers are the good start (or grand) for usability and not always the masses – improve with aesthetic :)

0

14

Tim

I’d disagree with the search box appear on hover example you gave. I suggest this is a bad design because:

– By default it looks like the search box is grayed out, and by convention, this means “unusable” or “inactive”.
– It only becomes 100% opaque on hover, but how does the user know to hover over it? Do they hover over all items on the page?
– The effect is lost on touch devices such as the iPad, because they have no hover ability.

Because of these points I’d argue the search box is less usable than having it fully opaque by default.

0

15

Louis

The contrast that’s evident between the search box and the header background makes the search box perfectly visible. The spacing around it in the header also contributes to it being easy to see and identify.

Also, many visitors to Design Informer are return visitors. I think the effect is great for the intended audience. I guess the example was subjective, because I didn’t necessarily mean to imply that this effect would be good for any website.

And although you do make a good point about touch devices, I think the use of whitespace and the contrast make the search box stand out enough, regardless of the hover effect.

0

16

Tim

The contrast that’s evident between the search box and the header background makes the search box perfectly visible. The spacing around it in the header also contributes to it being easy to see and identify.

Sure it’s visible, and yes most people probably won’t have any problems with it. However, is it really better than just the fully opaque version? The article claims this effect increases usability, but I’m not convinced, I only see ways it could hinder usability.

Mike R

The ipad comment is especially true. A lot of rollover effects won’t be seen on ipad or any touchscreen devices so this sort of thing might phase out.

However i don’t think having a greyed out box on a design discussion website will be much of a problem for the people viewing the page as they will hardly be web ‘idiots’.

Alot of design and usability is down to the user that you are targeting. Design informer needs to think about an entirely different sort of viewer than say a supermarket website. One will attract web/design specific people that are web-savvy and don’t need to be guided around the site like sheep. The other will have a more broad spectrum of visitors so will need alot more thought how different people will react.

shaun mcalister

I personally like the search bar rollover effect, even though it doesn’t work on my iPad. Sure, you could argue that because it’s greyed out, a user would assume it doesn’t work – if we’re talking about websites five years ago. People live on the internet, they click, they hover.. if you’re in need of a search on a website, you’re not going to avoid it just because it doesn’t look the way it does by default.

L M

I think this is a really interesting discussion. I also think that the enabled/disabled argument is very compelling.

A similar effect could be achieved by using colors (I’d definitely use desaturated colors…) instead of grays.

A good designer question is, “how much traffic loss are you willing to tolerate due to your design decisions?” By testing several designs, a designer can find out if they’re losing 10%, 30%, 80% of users. You could even print this screen, along with a screen with the search box not grayed out, on paper, and ask participants how they would find X. That would be a quick and easy 10 second test of the designs you could carry out with users very efficiently using a paper prototype.

1

26

willian

Jesse Trippe

Great work on this article. I especially like the screen shots that get the usability or design across without have to go to the actual site. I usually find myself reading these on an iPhone and these little touches make the article MORE USABLE! How about that!

0

28

Jay zawrotny

Wow, that was a really good article. I too have noticed a lot of “good” designs look really pretty but don’t really offer anything for the user. It dissent even help establish the brand because they look like every other 2.0 website.

It also covers my dislike for a lot of critiquing sites the people tend to ignore why the site was made and for whom it was made and judge completely from their own likes/dislikes and only on the aesthetics side of things.

Hopefully this article can remind myself and fellow designers from getting too occupied with aesthetics over function.

Louis

“The examples above [Facebook and Nettuts+] were more illustrative, and not meant to criticize the designers who worked on them.”

For the record, I love the design of Nettuts, and I do think the Facebook home page is better than the plain version I showed. Again, these were just illustrative points using a couple of popular sites.

0

31

David A

More than once I have I been chided for my “form follows function” approach to design. Who would deride such a fundamental principle? Newbies, addicts of the latest trend, unoriginal thinkers, and worshipers of the gradient swirl, that’s who.

I am convinced that anybody who has successfully designed *anything* understands that once a functional framework is in place, aesthetics are applied to transform the product from good to great.

Thank you, Louis, for injecting a little sanity into the design world.

Aaron M.

This is a great article. however I don’t agree with the belief that “anyone can create a beautiful website” Though beauty is in the eye of the beholder, and I admit, I am a little elitist when it comes to what I’d say is professionaly, I can EASILY say that over 98% of the websites I visit are anything BUT beautiful.

It truly is an art in and of itself to merge a beautiful design into a website. Many novices are surprised Photoshop doesn’t come with a “auto-beautify” button that does all the work for them. :)

0

34

Will Sansbury

I tend to agree with your general idea—that aesthetics should be carefully marshaled in support of usability—but you make some broad, sweeping statements about how aesthetics and usability interplay while offering no data or research to support your views.

For example, you say, “Taken at face value, some might argue that the plain version is more usable (if only slightly) than the ‘beautiful’ one.” Where is your data to support this assertion? If people are merely arguing, we’re operating in the domain of opinion. When we’re talking about usability of a site, the performance of actual people, observed using the site, is what matters. Opinion has no standing.

You also say, “If an element contributes to a website’s overall branding, image or reputation, then it’s safe to say that it contributes to its usability.” Again, I’d like to see some support for that potentially dangerous assertion. In my experience, juggling brand and end-user usability is a tricky balancing act, as branding elements can very often compete with clear calls to action.

Do you have research or data to back these assertions?

0

35

Louis

The first statement I made was hypothetical. I said “some might argue…”, implying that it was a possibility that is not unreasonable.

As far as the branding issue: What is dangerous about the assertion I made? I don’t think there’s anything dangerous about making a website beautiful and usable. I guess the problem is, I’m using the term “usable” in a way that people might not be comfortable with. I personally don’t think it’s necessary to limit “usability” to the actual physical interactions between user and web page. I think the look, feel, and memorability of a site contribute greatly to how usable it is. If you *want* to use something, it becomes more usable.

As far as my lack of data is concerned, I think the fact that the most successful design agencies in the world (like Happy Cog) create beautiful, inviting, and reputable websites is enough to back up my assertion.

0

36

Will Sansbury

I hope you didn’t take offense to my comment. As I said, I agree with your premise that aesthetics are an important part of usable design, so long as aesthetic choices do not create usability problems.

From a rhetorical standpoint, though, “some might argue” is a lazy device. If some *do* argue, cite them. If the some you’re referencing is actually you, own your thoughts. Regardless, the crux of my criticism there was that usability is not a subjective matter. If you have two options, you can test them with real and potential users to determine which design better creates the desired result.

As for the branding comment, I labeled it dangerous because many decisions in support of good branding can directly compete with good usability. To tell people that a good branding decision is necessarily a good usability decision lulls them into a false security and devalues usability as a whole. Modern marketing has been branding extremely well for decades, but those same decades have seen hit-or-miss usability. (Case in point: the Netflix iPad app is branded consistently with other Netflix properties, but is a usability train wreck.)

All that said, I want to reiterate that I agree with your thesis here. Aesthetics and usability have, at times, been separated into distinct goals, but in reality, they are inextricably intertwined one with the other. Your article would much better support that thesis, however, if you supported your assertions with data. Absent data, this article is just one person’s well intentioned opinion and is unlikely to persuade anyone who doesn’t already agree with you.

0

37

Louis

Many people tend to have the “Wikipedia editor” view, that you should never overgeneralize and never use what Wikipedia calls “weasel words”. But in this case, this is an opinion based on my experiences as a designer and developer. No design opinion can ever be labeled as “fact”.

But besides that, even when I have included “data” in my articles, then you have the anti-data people that never believe any data can be used to support any point, because they feel the studies conducted are too subjective, and aren’t accurate. So, the result is, even with data to back up your point, it’s still just “your opinion”.

But thanks for your thoughts. I certainly have no problem with being criticized; I’m always trying to improve my writing and look at things from different viewpoints.

0

38

James

I agree with this. While the article is good in general, there is a lack of researched data to back up some statements. Personally, I find more visually appealing sites easier to navigate as there is use of colour, size, contrast, etc. to attract the eyes to the most important functionality. So it is in fact subjective.

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book →

Meet the new Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work. Get the book.

Meet SmashingConf San Francisco 2017, featuring front-end ingredients, UX recipes and nothing but practical beats from the hidden corners of the web. Only practical, real-life techniques and recipes you can learn from. Get your ticket now!