Devil is in the Details

by Jin, 10-13-08 // 4 comments

Does this ever happen to you? You pass by the front window of a trendy clothing store and see a casual dress shirt displayed on a mannequin you really like. You go in the store and ask the clerk to get you the shirt you saw. The eager clerk gets you the shirt of your size, then adds “This shirt is our best seller this season! It will look good on you!”

“Damn right it will!” You pay for the shirt and get that warm ‘n fuzzy feeling. On your way home, you wonder when you should wear the new shirt. Maybe next day at work/school? Or save it for a special occasion?

When that day finally comes, you realize what a lying liar the clerk was. The shirt doesn’t look good on you at all, even though it’s the right size. In fact, you’re not even convinced at this point the clerk got you the same shirt you saw at all. You’re not delusional about your body, but you know you’re better looking than a headless dummy. For reasons you can’t describe, the shirt just looked better at the store.

It’s the same shirt. Chances are you’re just wearing it wrong. Of course, I’m using the word “wrong” subjectively, but I assume you are going after a certain look with that shirt. People in the fashion and advertising industry stage their products with a great attention to the details. Details that are so subtle they only register as a feeling to us. Thus, making it hard to mimic when we try it ourselves.

Take the shirt for example, if you pay close attention to the mannequin next time you go back to the store, you’ll see a great amount details in staging: the shirt is never buttoned up all the way up to the neck; the collar is pulled back some, leaving more open space around the neck area; the sleeves are unbuttoned, rolled up to the elbow; it’s not tucked in(if it is, then it has a vest over it); if you look on the back, it probably has pins there to make the shirt seem more fitted.

It doesn’t end there. The shirt is accompanied by the right accessories. The pants, the belt, the watch, the undershirt, the expensive jacket over it, the shoes and even socks are carefully picked to best compliment the shirt in terms of color, texture and style. It is done this way, so you buy the whole outfit, instead just one shirt. Clever marketing huh?

Before I go off tangent, let’s focus back on the shirt. It’s amazing how slight change in details can affect the overall appearance and the tone.

black shirts

Above: five photos of the same black shirt. Each one gives off a different feeling and a personality. The difference sometimes lays within the arrangement of a single button.

“Pay attention to the details.” It’s a phrase we hear within the design and art community and we follow it studiously. But what’s in a detail? When it comes to web design, it can be the radius of a rounded corner, a 0.1em change in of font size, or 1px border versus 2px, padding and margin space between elements, using As instead of Bs in your hex code for coloring, the list goes on.

To me, what the detail is, isn’t as important as what it does. Details are there to facilitate the overall picture without overwhelming it. Details are there to achieve a feeling.

When asked what distinguishes the products that his team develops during an interview:, Jonathan Ives, the vice-president of design at Apple said:

A. Perhaps the decisive factor is fanatical care beyond the obvious stuff: the obsessive attention to details that are often overlooked, like cables and power adapters. Take the iMac, our attempts to make it less exclusive and more accessible occurred at a number of different levels. A detail example is the handle. While its primary function is obviously associated with making the product easy to move, a compelling part of its function is the immediate connection it makes with the user by unambiguously referencing the hand. That reference represents, at some level, an understanding beyond the iMac’s core function. Seeing an object with a handle, you instantly understand aspects of its physical nature – I can touch it, move it, it’s not too precious.

When adding details in our designs, we must question every pixel and every type use. There needs to be a reason for every design element, and the way they are. If we can’t identify what emotional response they’d have on our users, then we’re merely adding noise.

4 comments

also feel free to contact me on twitter or via email
Frank Lee 10-14-08

Jin, I think this is a good start on paying attention to details, but I’d like to know more of your ideas of what constitutes good details in web design. I’m getting my Associate of Applied Science in Web Design now, and this is something my professors have brought up a lot.
It seems for me, when it comes to details, it’s hard not to overdo it and become a perfectionist.

Jin 10-14-08

@Frank,

It seems for me, when it comes to details, it’s hard not to overdo it and become a perfectionist.

IMHO, the term “perfection” is rather subjective. In my experience, I find trying to be a perfectionist really hinders more than it helps. What’s “perfect” to you may be interpreted differently by others; also what’s “perfect” to you may be different next week when you revisit your original design. But I think ultimately, what you’re saying is, to strive for as much excellence as you can, not necessarily “perfection,” which is what every designer should aim for.

One way that works well for me is when I find myself spending too much time on details, I take a step back. I look at the details I’ve been working on and see if they serve the purpose of the overall theme. I wrote an article on not over doing it not too long ago, also there are couple blogs published recently on this topic as well: Fight Perfection and Perfection is Bad for You.

What constitutes good details in web design? I can’t really give you specific examples that are true to all web sites, since each site is different in nature. However, on a conceptual level, each site design process is similar. Establishing an efficient design process is very important, because it helps you to identify what are needed details, and what’s just mere noise.

I typically try to establish a clear understanding what the site is set out to do: its core, basically. Then I come up with visual, structural and interactive solutions to achieve those goals. At this point, I don’t think about details like typography, colors, graphic effects, etc. I just sketch out a wire-frame mockup, with the bare minimal essentials, not “features.”

Once I think the site design is sound from a usability standpoint, then I focus on the visuals.

Enough with the fluff, here is something more substantial:

Take my site for example: its primary goal is to let people read and comment my blog articles. Its secondary goal is to reflect a personality (branding, if you will). The emphasis I wanted was on each individual article, therefore I only display one at a time. I give the article title an extra big type so it will grab people’s attention right away. The excerpt box has a clear visual cue to separate the title and body, and it also serves as a teaser or hint to what the article is about. The article body and comment section have high contrast in colors, so visitors know clearly when the article ends and when the comment section begins. Within the comment section, my (author) comments are further distinguished from regular comments with different link and background color.

Next for navigations: To achieve a basic navigation, all you need is a link to an archive page that contains all the past posts. But that’s not very user friendly, so I added “previous” and “next” article links. I could go on and add listings of “past N posts,” “most active commenters,” “last N comments,” “most popular posts,” etc. To me they’re just features that distract people from reading the article. They may work for other sites, but not mine. It’s also the reason why I fix my navigation bar on the bottom.

For the secondary goal: to reflect a personality. At this point, the layout is already quite unique to reflect my own taste, which is a simplistic design. However, it looks plain and boring. The challenge is to add graphical elements without taking away from the primary goal. I thought about creating ONE common graphical template for the entire site, but what purpose would it serve? When it comes to a blog site, visuals have very high diminishing return. No matter how impressive I’d make it, people won’t see it the 100th time they visit the site. Content is king on a blog site, that’s why I focus on each article. I decided to use a different background photo or color that are appropriate for each blog entry, this way the visual becomes part of the content. Not only do they compliment each other well, but also add freshness to the site.

Those are the details I focus on first, because they’re important. Here are some that I do care about, but less. That’s why they’re still not fixed yet.

  • The top and bottom padding doesn’t match the left padding in the excerpt box.
  • Print.css still has glitches with Internet Explorer.
  • The RSS icon on the footer is ugly.
  • Archive page’s formatting isn’t done.
  • Text anti-aliasing issue with IE7.
  • Previous link not showing up on frontpage(WordPress issue).
  • Overall typography needs tweeking.

The list goes on. The point is, none of them would affect how people read the articles too much, therefore they can wait. If I spent more time fixing everything to make it “perfect,” chances are my blog would still have 0 posts right now.

I’m not sure if I answered your question, but I think it’s important to show you a design thought process. Keep in mind, it’s MY process. In this particular example, it works for my site. In reality, making a site for a client, all the little bugs should be fixed, but you need to set the priorities.

Frank Lee 10-14-08

I wish my professors could explain it the way you just did, seriously, thanks alot. It’s hard when you’re first learning about web design to put all of the pieces of what makes a good site together, but your blogs really help. I missed a class going back so I could read all of them, but I think I learned more from you anyway. Can’t wait to see what you talk about next.

Jin 10-14-08

Frank, the web is quite complex these days. There are a lot of things for a new comer to learn than when I started. So it may seem overwhelming.

Focus on both the techniques and concepts equally. I don’t have enough free time to write long technical tutorials, so I tend to write mostly about design from a philosophical point of view. There are a lot of good resource sites on improving your technical skill, such as nettuts.com or psdtuts.com and many more.

Even though online resources are vast, I still recommend you to buy good books. Rarely a site is as good as a well written book in terms of comprehensiveness.

For Photoshop, the best book is Photoshop CS2 WoW. The book is printed in full color, each tutorial is explained in details.

Also, get Don’t Make Me Think, it’s one of the best books ever written on UI design.

There are a lot of well designed sites out there. Observe what makes them good. But be careful not to make inspirations as a design crutch.

You can also find inspirations in other medias as well, such as print, photography, industrial design and fine art etc. The more you get into it, you’ll find similarities between all these fields.

Good luck on your journey into web design. I think it’s very fun and rewarding.