Everything I know about the elegance of imperfection, I learned from the white porcelain plate I bought in Kyoto.
What’s so special about this plate? Before it was fired, it was perfectly round, but the artist intentionally roughed up the edges. It’s elegant, enhanced by anything that touches its surface: a bright green pear, roughly chopped chocolate, a pile of toasted almonds. Today, this plate sits on the desk in my home office. It symbolizes a crucial lesson about craft: utility is not contingent on perfection of form. In fact, the lessons I’ve learned about crafting elegant experiences—from the creative brief to user interface design—involve abandoning the desire for perfection entirely.
There is an anecdote, told and retold through translated Japanese literature, of a Zen master who is staying with a priest at a temple close to Kyoto. The priest is having guests over that evening, and he has spent much of the day in the garden—shaping the moss, plucking weeds, and gathering up the leaves in tidy arrangements, all in order to achieve the state of perfection the temple builders had originally designed.
“Isn’t it beautiful,” the priest asked the master…
The master nodded. “Yes…your garden is beautiful; but there is something missing…”
The old gentleman walked slowly to a tree growing in the center of a harmonious rock and moss combination. It was autumn and the leaves were dying. All the master had to do was shake the tree a little and the garden was full of leaves again, spread out in haphazard patterns.
“That’s what it needed,” the master said.
–Janwillem van de Wetering, The Empty Mirror
Wabi-sabi and making websites#section2
When I try to think of a paradigm for pursuing elegance through imperfection, the Japanese concept of wabi-sabi comes to mind.
Leonard Koren, in his book Wabi-Sabi for Artists, Designers, Poets & Philosophers, describes the following material qualities of wabi-sabi: asymmetry, asperity, simplicity, modesty, intimacy, and the suggestion of a natural process.
These attributes may seem only to describe the aesthetics of a design. However, the most successful designs infuse these considerations at every stage, from idea to finished product. As Koren has written:
The simplicity of wabi-sabi is best described as the state of grace arrived at by a sober, modest, heartfelt intelligence. The main strategy of this intelligence is economy of means. Pare down to the essence, but don’t remove the poetry. Keep things clean and unencumbered, but don’t sterilize. (Things that are wabi-sabi are emotionally warm, never cold.) Usually this implies a limited palette of materials. It also means keeping conspicuous features to a minimum. But it doesn’t mean removing the invisible connective tissue that somehow binds the elements into a meaningful whole.
Bringing heart to web experiences can be difficult, since websites and applications are fundamentally a construct of logic (via code). While you can’t create a website that functions as a pure expression of wabi-sabi, finding ways to infuse our creations with a hint of wabi-sabi adds a new dimension to our work. It forces us to consider how the natural order of our physical world should inform the virtual worlds of information that we create. One way this natural order finds expression in the web design world is through the notion of elegance.
A taxonomy of elegance#section3
Jeremy Alexis, of the Illinois Institute of Technology’s Institute of Design, asks us to consider three types of elegance when we face a design problem: logical elegance, systemic elegance, and aesthetic elegance.
Logical elegance stems from a clearly expressed reason for a website’s existence. Crafting an elegant, logical idea for a website brings clarity to a complex set of user needs and business requirements.
I recently saw Luke Wroblewski speak on the beta redesign of Yahoo’s home page. Luke described the redesign’s core idea: Yahoo would be “[t]he dashboard for what you love on the web.” The whole redesign team embraced both this statement and the complexity of their design task, and created a more meaningful experience for their users.
Systemic elegance arises from the scaffolding that supports a site’s core idea. In a website or web application, this scaffolding includes information architecture, user experience, and interaction design as well as content strategy and the flow of information through the system.
Netflix provides an excellent example of both logical and systemic elegance. The company’s undiluted focus on providing affordable access to movies, combined with an ever-evolving user experience rooted in an elegant site architecture, allows visitors to easily use social networking features and view movies online—while, simultaneously, their choices enhance the site’s referral engine.
Formal or aesthetic elegance involves a website’s visual form. This includes user interface design and the brand qualities that suffuse the site’s visual language, content, and user interactions.
Any site design that focuses on clarity can be considered formally elegant—even if the site is also goofy, such as National Geographic Kids. A more obvious example might be the Luigi Bormoli website, which uses AJAX to produce an elegant presentation of glassware. Like a print catalog, the site encourages users to sift and explore products, while eliminating needless page refreshes. Take out the AJAX-enabled aesthetic elements, however, and it isn’t quite as elegant.
I’d like to add one more variety of elegance to Alexis’ list. Natural elegance deals with the “feel” a website or application expresses through its behavior over time, and which is rooted in the rules of order that govern nature.
I’m not just talking about grid systems and earthy screen designs. Natural elegance refers to the ways websites and applications can function more powerfully by weaving natural imperfection into their design at every level. This sensitivity to feel should suffuse the whole endeavor, from the foundational user experience work to the final UI.
It’s possible to create perfectly pleasing websites by focusing only on formal, structural, and logical elegance. But those sites that embrace this fourth type of elegance feel to users like living beings who speak meaningful words; they are the marriage of form, function, pleasing content, and personal feeling.
Where wabi-sabi meets user interface design#section4
Recall the attributes of wabi-sabi: asymmetry, asperity, simplicity, modesty, intimacy, and the suggestion of a natural process. You can probably imagine where these characteristics can be expressed through the visual design of your website. Consider the following possibilities:
Website as book—the page model:#section5
- Visual exceptions create variety, forcing the eye to focus on priority content (asymmetry),
- Enlivened by surface texture to create an illusion of dimensionality, (asperity),
- Design tension born of a grid system on a 2D plane (simplicity) or an organic arrangement that can’t be readily made into a system (suggestion of a natural process),
- Typography is styled in a controlled manner (modesty), and
- The design, from its governing idea through to the finer details, conveys emotion (intimacy).
Craigslist is a prominent, though somewhat rudimentary example of a website that exhibits this design model in a naturally elegant way. While the result may not be visually stunning, the site directly reflects the ways in which we view and share information as a community. Craigslist has evolved in its own organic way over time while staying true to a kind of human expression that mimics a real-world community bulletin board.
The rules change, however, when you’re talking about websites that move beyond the page model to mimic our physical world in its organization and behavior. There is a fine balance between order and chaos when designing the following types of websites:
Website as garden—the physical world model:#section6
- Design tension born of figure/ground relationships on a 2D plane (asymmetry) with an illusion of a third dimension on a z-axis,
- Surface textures are mapped onto objects, simulating reality, and
- Visual exceptions, if they don’t conform to the simulation, break the illusion.
The Eco Zoo takes natural elegance and makes it physical. On this site, you can “climb” a tree and read stories in a pop-up book about creatures such as Yagi-Chan, a goat that wears sheep’s clothing.
Website as petri dish—the molecular model:#section7
- Design tension born of the gravitational pull between page elements,
- Objects can’t express a high level of detail, otherwise the UI is all noise, and
- The site is the visual exception, tending from disorganization (exploratory) to organization (sorted) with a click.
WeFeelFine.org—a site that harvests and visualizes data about human feeling from blogs around the world—demonstrates the ease, flexibility, and fluidity characteristic of natural elegance.
A koan for the web designer#section8
Nothing we see or hear is perfect. But right there in the imperfection is perfect reality.
–Shunryu Suzuki
We’ve explored a number of threads that, when properly woven into a well-thought-out website, can infuse it with heartfelt intelligence beyond mere aesthetics. In small doses, wabi-sabi thinking can provide a counterpoint to our modernist tendency to refine things within an inch of their life, bringing a measure of grace to what would otherwise be a conglomeration of rigidly spaced pixels on a screen.
Beware that the pursuit of website perfection is always a denial of the perfection that exists within ourselves in the physical world. Perceiving even a whisper of our own “perfect reality” is the very experience that our users and clients have hired us to capture, mindfully, through our work.
Many years ago, i learned a Japanese word, something like shobuye. It represented a japanese concept that beauty was enhanced by a slight imperfection. Too bad that English or French do not have a similar word. Maybe our world would be different.
Love this. Reinforces something I’d realized a long time ago in practice and have tried to apply whenever suitable situations show themselves: do something unexpected, including to yourself. I think many actors know to do this when appropriate. I’m not totally sold on “asymmetrical,” these things have to suit the situation. I am sure, however, that you don’t mean ‘do something unsuitable,’ just unexpected, or surprising… can we still say ‘fresh’? Great… thank you so much!
I recently came to similar conclusion asymmetrical is beautiful .
I agree with the approach exposed in this article. And I would to add that the imperfection inside a perfect design push the user to think and not to lay down on the layout.
Brilliant article. I have often tried to incorporate these attributes into my own design work, but often fail due to a client’s misconceptions regarding “pixel perfection” — even though that term in and of itself is a misnomer (pixels aren’t _really_ perfect). Hopefully this article will help to educate people on this subject and bring a little asymmetry to modern web design.
Domo arigatou gozaimasu!
It’s also about living happily with the fact that nothing you do will ever be perfect. Every website I’ve ever created has next steps toward perfection, but they’re mostly just fine as they are, as well. That’s a good feeling.
This is exactly the kind of article I love the most from AlistApart. I’ve never heard of wabi-sabi before.
Under what category would a social networking site fall under, such as Facebook or MySpace, which is dependent on random content posted by users. This content usually goes against the design wishes of the designer of the web application itself, which gives one an unpredictable web environment decided on by its users.
Would these kind of sites fall under the ‘petri dish’ model or some new category called, say, ‘cess pool’?
@*uxdesign* I understand what you mean when you said, _”I’m not totally sold on “asymmetrical,”? these things have to suit the situation.”_
Perhaps a better way to look at asymmetry is to view it in a non-dualistic way. By that, I mean that symmetry and asymmetry are ideals, not fixed points that you can achieve with 110% certainty and aspire towards. It’s likely that every layout you create will land somewhere on the continuum between the two.
Seeing asymmetry in this manner may open up some possibilities that may have seemed unavailable to you when working on a layout that felt balanced but dull, and lacking some sort of spark. Somewhere in the space between the two ideals is the right solution, and the final result may not require the label “asymmetric.”
@*Matt C* – I agree with you, it’s good to aspire towards a great result, but it isn’t perfection you’re striving towards. This is often where we see great print designers flame out when they enter into doing some form of complex interaction design.
@*Daniel* The vast majority of social networking sites fall squarely within the Page model if you’re talking about user interface design. Facebook, LinkedIn, Twitter, and MySpace are all like bulletin boards with notes and type shifting around in a 2D plane. What’s interesting about Facebook is that through their inclusion of user-created applications, you can bring in experiences that conform to the Garden and Petri Dish models. This creates a greater variety of ways that you can interact with the Facebook website as a whole, which leads to the ‘cess pool’ effect that you’d mentioned.
Perhaps a way to think of Facebook or MySpace in that ‘cess pool’ sense is to consider how their sites have been architected systemically. Instead of shaping a world of content that is designed to present a controlled experience, they have ceded control of content and simply created tools for users to come in build their own bulletin boards. It’s fancier than a high school yearbook, but still a poor substitute for a dinner party.
I don’t agree saying asymmetry is imperfection.
Perfect symmetry is simply boring; is the simplest way to find “balance”.
If you look at fine art, especially paintings you’ll not find a symmetrical artwork.
The balance is the key word. And nature is balanced. Or, better: nature seems to us to be balanced, or Wabi-Sabi if you want, as we are used to perceive it from our birth. Is the start-point of our visual perception system.
I don’t disagree with this article in general, but I feel the topic to be much more complex
Very nice article David. I have actually bought dishware that is asymmetric in its form for this very reason. I agree with Jan Tonellato that balance is an important factor. Obviously there are some amazingly asymmetric designs that still have wonderful visual balance.
My only concern is that a lack of understanding around this “wabi-sabi term” could lead to poor designers thinking it is ok if “things are a little bit off”.
I think we should all clarify that the key for designers is intent. If you decide to have something be imperfect, make it obvious to the user that you are aware of its imperfection.
For instance, having two navigation elements that look identical except for one’s baseline is a few pixels off… is not good or thoughtful design. Having those same elements both slightly askew but balanced IS!
@*Chris Meeks* I think you bring up a great point: “wabi-sabi” isn’t something your design _is_. It’s a quality that it exhibits. And it’s intuitive. If you’re forcing it, then it isn’t well-considered.
Here’s a useful analogy. You’re watching a master potter at work. He’s sitting over the wheel, finishing his perfectly formed pot. Then, at the last moment before he stops the wheel, he drives his thumb into the bowl’s edge and dents the corner. The bowl is complete, and it has utility, but the dent — which was placed with intent — is what elevates the bowl beyond any mere piece of pottery.
If you were to ask this potter why he dented the pot, he would probably not have “a reason.” I think most people who do any kind of art or design work recognize that impulse to seek a pure form, and then via “controlled accident”, discover a more powerful solution that wasn’t intended. This maker’s intuition infuses your work, but your intent is married to uncontrollability.
This kind of idea probably makes more sense after one has made a few thousand pieces of pottery… I know I haven’t. 🙂
**@David Sherwin** I think you are definitely correct about the “Maker’s Intuition” part. Being aware of the happy accident and not being so rigid in your previously conceived end-goal is vital.
Funny thing actually, I was a ceramics major in college. So I literally HAVE made thousands of pots and handbuilt forms.
Good discussion!
Shibumi
It is a Japanese word that connotes understated beauty. An ineffable quality having to do with great refinement underlying commonplace appearances. It is a statement so correct that it does not have to be bold, so poignant it does not have to be pretty, so true that it does not have to be real. Shibumi is understanding, rather than knowledge. Eloquent silence. In demeanor, it is modesty without pudency. In art, it is elegant simplicity, articulate brevity. In philosophy, it is spiritual tranquility that is not passive; it is being without the angst of becoming. In personality, it is authority without domination, overwhelming calm.
Your article made me think of the concept of Shibumi.
There is no excellent beauty that hath not some strangeness in the proportion. Francis Bacon
However, the author goes beyond this topic of beauty and imperfection in discussing that beauty in UI design is really a functional matter. The site must exist to serve a clear purpose and audience. Moreover, elegance is ascertained by the efficacy of the site in accomplishing its purpose by engaging and compelling this target audience.
On a lateral connection, this reminded me of an interesting talk on TED I recently heard: http://www.ted.com/index.php/talks/dan_dennett_cute_sexy_sweet_funny.html
Have you considered that there is a difference between perfection and symmetry? Perfect symmetry to be sure, exists, but most perfections are concerning things other than symmetry.
I like the ideas about beauty and UI, there is so much crap out there.
Perfectly symmetrical often tends to be a little boring or kind of steriotypical. If you want something different you must take a risk and break some design rules.You never know the output would be something stunning some thing totally diffrent than done before.
As far as commercial designing is concerend you cant really predicts your clients perspective regarding any design. So staying away from any set rules are always better. Try to be a bit innovative.
vaishali
I have to agree with @*Vaishalli* that something that’s perfectly symmetric can be drab.
@*Matt* – Shibumi is an intriguing concept that does aid in describing the effect of experiencing something infused with wabi-sabi characteristics (as opposed to the artifact or event itself). However, it is not directly associated with wabi-sabi… and it’s also the title of a great spy thriller by Trevanian that I read a few years back. 🙂
This is a favorite quote, and as I think is related to your article, I’d like to share it with you.
From Trevanian’s book “Shibumi”:
“Shibumi, sir?” Nicholai knew the word, but only as it applied to gardens or architecture, where it connoted an understated beauty. “How are you using the term, sir?”
“Oh, vaguely. And incorrectly, I suspect. A blundering attempt to describe an ineffable quality. As you know, shibumi has to do with great refinement underlying commonplace appearances. It is a statement so correct that it does not have to be bold, so poignant it does not have to be pretty, so true it does not have to be real. Shibumi is understanding, rather than knowledge. Eloquent silence. In demeanor, it is modesty without pudency. In art, where the spirit of shibumi takes the form of sabi, it is elegant simplicity, articulate brevity. In philosophy, where shibumi emerges as wabi, it is spiritual tranquility that is not passive; it is being without the angst of becoming. And in the personality of a man, it is . . . how does one say it? Authority without domination? Something like that.”
Nicholai’s imagination was galvanized by the concept of shibumi . No other ideal had ever touched him so. “How does one achieve this shibumi , sir?”
“One does not achieve it, one . . . discovers it. And only a few men of infinite refinement ever do that. Men like my friend Otake-san.”
“Meaning that one must learn a great deal to arrive at shibumi ?”
“Meaning, rather, that one must pass through knowledge and arrive at simplicity.”
Love the article. But when following symmetrical design one most be careful on not loosing creativity. Just my 2cents.
I find myself working towards symmetry but always admire websites, etc that are beautifully asymmetrical. A sort of unconscious ambivalence…
A very interesting article. First time I have seen a web site design compared to the design of a Japanese garden. I have designed many web sites – a recent one on “coin collecting”:http://www.coincollectingsecrets101.com for instance – and I’d like to have the privilige of one day designing a Japanese garden. (Right now I am working on a small garden with some elements of the Japanese in it though.) Guess I need to re-read the text to fully grasp the analogy.
I too learned a new lesson today. The story is so inspiring. We may say that one thing is too perfect but how we know if its really perfect when you can’t see both sides of the picture. 🙂
This all came from Chinese philosophy originally… Of course there is the flip side of the coin, a tale of a man who went to buy a silver serving spoon.
After loking at many ornate ones priced quite reasonably, however all out of the man’s price range, he settled upon a simple plain polished silver spoon.
When he enquired about the price, it was many times the price of the ornate one’s.
After asking why this was so theshop keeper replied: “Sir, this is a simple polished spoon, perfect and flawless in its execution. The others haveguilding, mouldings and engravings in which the artist can hide many mistakes…”
Anabelle
x
“love by birthdate | birthdate compatibility”:http://www.lovebybirthdate.com
.. Perfection is a state of hypothesis. I believe it is very important to have an element of imperfectness so that it looks natural.
Such a Japanese concept. As an artist, I really enjoy the disharmony that one red square on a black background can create, and the jolt of excitement it brings to the veiwer
I’ve always been a fan of what I think of as “pretty ugly”. To me, it’s when something beautiful and perfect is flawed by a clashing color or a lack of balance. To me, it turns something that is so perfect it’s boring into something interesting. Colors that clash and yet look beautiful together. it’s a very difficult concept to articulate, but I think you’ve done a great job.
What’s so special about this plate? Before it was fired, it was perfectly round, but the artist intentionally roughed up the edges. It’s elegant, enhanced by anything that touches its surface: a bright green pear, roughly chopped chocolate, a pile of toasted almonds. Today, this plate sits on the desk in my home office. It symbolizes a crucial lesson about craft: utility is not contingent on perfection of form. In fact, the lessons I’ve learned about crafting elegant experiences—from the creative brief to user interface design—involve abandoning the desire for perfection entirely
“cellulite creams”:http://www.bestcellulitecreams.org
So many of us never follow through or finish anything because it isn’t ‘perfect’. This isn’t a apology or defense for sloppiness or bad work but an acknowledgment that our own judgment of ourselves and our output can be crippling. I know. I used to have that disease myself until I stumbled across the concept of “kaizen”, which simply means improvement, no matter how slight. “Is this copy better than my last effort?” If so, then I define my product as successful. Incremental improvements lead to … magic.
That was an enjoyable article to read. For me, clarity is the first virtue that a professional website design should have, if only because of such an UN-elegant reason like eye strain!! 🙂
The second is elegance, or you could call it art, poetry, beauty. Although what beauty is still so difficult to define…
Warmth is the third of my virtues for the best design, but in fact, it goes hand in hand with elegance. Elegance and cold together? I don’t think so.
I am not sure I agree with craigslist being elegant. It has an impressive clarity, but it could easily feel chilly.
“Foreclosure Process Highlights”:http://foreclosureprocesstoday.com
I creat a few website and have to say Imperfection is OK as far as the website is interesting for the visitors
I agree that imperfections make a person think, however, as an editor, I like to direct what a person thinks about. For instance, when I see imperfections on grammar and spelling, I think about the imperfection, and not more interest in the site or product.
I agree, too much sameness lends a site to boredom for a user, especially a user seeking a social experience.
I know that this is not really saying that you can put anything anywhere and that when you break it down there is an exact art to it but anything that frees me from symmetry is like skinny dipping in the lake on the 18th hole of the US open!
Robin
Really like the anecdote, this article is inspiring.
From the perspective of a fairly equally-brained front end dev who couldn’t draw or come up with a memorable logo to save his life but still feels the creative rhythm, it’s always struck me how much more natural and fluid the process of converting a design from a good artist tends to go as opposed to overly busy, needlessly tight layouts from those of a more engineering background.
It generally takes a lot fewer elements to get the job done, I always feel better about the site I’m working on and the resulting layout always feels more intuitive and easier to use. Of course, I’m in Chicago and there’s a lot of REALLY good designers in town but I don’t think it’s just that.
When you try too hard to quantify things with prototyping and demos and put all this effort and resource into what ultimately has no other purpose than making management feel artificially connected to a process they will never understand, creation rather than control, you’re killing the potential of a site by ignoring what your own senses and experiences are telling you.
Deny it all you want, but this is first and foremost a craft and that means intuition and personal judgment has to have a place. When does any media start sucking by and large? When people start demanding accountability for the unaccountable. When they try to quantify what will make a game, a song, a movie, a toy or a site popular without really understanding what goes into the thought process from an artistic or development perspective and then finding and repeating a meaningless pattern ad nauseum because they got too hung up on a formula for success.
I saw a big blogfest by a bunch of UX guys talking about how Google’s success wasn’t accounted for by its design, which was bad, apparently. Here’s the thing: I’ve never had a problem using Google. It’s never felt awkward. The elements didn’t need to be clumped together “where the action is” by which I assume they meant the actual search field. What links were placed where never struck me as odd and I think I’ve clicked every link on that old-school Google page at one time or another so I didn’t miss anything. It works. It’s easy and instantly recognizable. I didn’t have to think too hard. It provides a tool to help you solve problems and then gets the Hell out of your way. I’m not surprised to find things where they are. That’s good design.
KAIZEN meaning small constant improvments is the key word here.
Hi David, Great blog – I teach sales & website marketing to students/companies – the question I am asked the most by my students is did I get it right? The answer I give often surprises most of my students. Is the customer happy with the goods & are they happy with you? …
In reality the salesmen that recite their scripts to perfection are actually worse salemen than the ones that make a few blunders & appear more natural & imperfect to the customer. Web design is no different – the flaw can sometimes be the making of a site & how the customer remembers you – there is of course a flip side to that…
Lack of attention to detail can in reality kill a site at the worst or make it look sloppy – see “web design mistakes”:http://www.vuzudesign.com/web-design-blog.php?comments=1&aid=51&article=Top+60+Web+Design+Mistakes+of+2009 – one of my students websites is at the very least basic as far as design goes but perfectly formed as far as quick loading – working in any browser and well written for search engines – can’t help thinking though perhaps he hasn’t shown off his creatve skills to potential customer – see “web design cheltenham”:http://www.vuzudesign.com but who’s perfect?
Great article. thank you
Truly a very inspiring article.The approach of asymmetrical design to gain perfection is true in many sense.
Great Article…..thanks again
Great article. Living in Japan I could really see the ideas of Wabi-sabi that are being mentioned.
The Golden Ration is also a wonderful idea to incorporate into the equation of designing through balancing perfection/imperfection.
We made russian translation of this article:
“КраÑота неÑовершенÑтва”:http://www.internet-expert.ru/news/articles/155/
Wonderful to encounter Wabi-Sabi in this context. Yes, really nice thinking about ‘heart’ in the context of web design.
Much food for thought … thanks for the great post.
I always wondered why I loved fonts that look like handwriting, hand drawn/scanned illustrations in presentations and slight imperfections. I think they make things a little bit more human.
I never comprehended why. Reading about Wabi Sabi and the mention of shobuye helps a bit. I like the article at several levels and I love the discussion.