July 14th, 2010 Better Web Design – Part 1 : Fine-Details

Better Web Design : A Series

This will be the first article in a series I will be writing. The goal is to help fledgling web designers work inwardly on their practices to become an overall better web designer.

In general, one can look at a website and think, “Wow, this looks great” or “This is alright”. Many web users are not designers, nor are they aware of how they can make these observations.  It is inherent in the way our mind interprets what we see. We are not just seeing it, we are analyzing it, remembering similar experiences, and abstracting the concepts.  In this process, we are recalling natural cues of beauty such as symmetry,  crisp lines,  clean alignment, equidistant spacing,  subtle color combination, and practical information hierarchy.  We can understand that the same design by a better designer is better, but why is that?

There are clearly a number of factors. Is it good layout? perhaps a  well-done logo? intelligent color scheme? Perhaps, but then again. Let’s explore these facets.

A good layout is not to difficult to come by. All you really need is clean and equal alignments,  clear gutters and margins, and breathing room for content and text. After all, a nice two column layout can solve many content problems. Further, there are now many great grid systems and layout templates that can provide any designer with a solid foundation.

Then a good logo? It is true that a good logo can make a design better just like a bad logo can make a good design look low quality. A logo is a small piece of identity and in general many of the most well-done designs utilize a logo that is little more than a well-selected typeface with careful kerning.

Perhaps, it is color scheme? Colors can be attractive and harmonious but most sites have a fairly simple color scheme. There are award-winning fantastically designed websites that are black and white.

Let me present this thought to you.

A major factor that separates a stunning professional designer from an amateur is the fine-details. In a word, craftsmanship.

The decision to make  a 1 pixel subtle  gray line, when it could just be black.  The call to use a subtle arched drop-shadow when it could be just a block or an outline. The addition of  a slight texture or a smooth gradient to enhance the depth of a button.  Even a 1 pixel 50% opaque line to create a sharp highlight can make a world of difference.

To many, this all sounds like unnecessary fluff. A number of readers may write-off such considerations as useless or unnoticeable and therefore, not worth the time or effort.  Humans are subtle creatures, we can detect extremely minute details without realizing it. I guarantee you this; A user will always notice craftsmanship.  Think of any product you have used that has a cheap alternative. There is a reason it is cheaper. Many times it is not really important, but when building websites people have little tactile reference or other paradigms to make a mental comparison.  Well detailed design is sometimes the only way to prove genuinely that you care about quality.  You don’t need to take my word for it, let’s look at an example.

An Example

Let’s take the example of a website that has a simple but professional design. I am going to use Dribbble, because I love the idea of the website. Also, I would love an  invite just as much. But, I digress.
I created this basic wire-frame based on the current Dribbble site design.

This step is to help us separate the layout from the design for the purposes of demonstration. The layout is nice, but there is nothing that is particularly professional or outstanding about it.

Okay, let’s take a look at the logo.

My amateur example  site will be called “Pupppies”. Below is a side by side comparsion of the dribbble logo vs. my quickly concocted  pupppies logo.

I didn’t spend as much time as the designers at Simplebits , but it isn’t a bad logo for a 5 minute investment. Albeit copyright infringing…

Wondering about the color scheme? For the sake of this example, I will be using the same color scheme as dribbble, so that we are on an even playing field.

I give you Pupppies! ( Make sure to open in full resolution!)

Alright, so I followed the layout closely, used  similar logo, and the same color scheme. It doesn’t look as professional does it? Can’t see it? Enlarge both mock-ups in full size and then take a look.

You will notice that Pupppies does not look bad.  But, it also does not stand out. It feels stagnant, boring, and generic.   Let’s look at the actual website now :

That is very nice.  Take note that the website feels solid, clean, coherent and overall…professional.  This uses the same layout, basically the same logo, and an identical color scheme, and yet… It feels alive and vibrant. The dynamic nature of the site is prevalent and it conveys depth and tactile sensation despite being on a screen. The texture grabs you and helps the content to jump off the screen… ( Remember, open it up in a full window)

But, why? Let’s look.

Let’s first look at the top navigation below. Same layout, similar logo mark, same colors. But, notice how dribbble’s design  has a nice soft gradient to create depth, it also has a soft gaussian monochromatic noise applied. Compare how it has a smooth rounded square for the hover state, with a softened drop shadow to give the appearance that the option is  indented. An inverted gradient inside of that square helps to make it work with the background.  Take notice of how the hovered link is white and bolded, where the inactive links are a slight grey. Many times subtle shifts in color can seem the most drastic when applied to higher contrast.

Next is the call to action button. Let’s check out what we did for  Pupppies. The button is a  flat pink, inherited font size and boldness. Dribbble took the high-road here with a subtle but still hard lined gradient and highlight to give the button 3d space and depth. Further, it uses nicely rounded corners. These are all great features because users respond to convention. In short, if it looks like a button, they want to click it. The button also uses that contrast of the white rather than relying on a bold or thickness to create readability. To finish it off, there is a white text arrow which helps guide the user to click and implies the “action” inherent in the button.

In the next, example we can see a ton of exquisite detailing. Notice, how Dribbble’s designers have applied an extremely light 1 pixel outline and accented it with an soft arched drop shadow. This makes it pop up ever so slightly. Also, take notice that the background shade is the same in both, but Dribbble ‘s usage of a slight gradient moving down the page and the soft gaussian noise is building a subtle tactile feeling with texture and it is working beautifully.

For now, we have covered a few small examples in this comparison that are representative of some of the details I am speaking of. I challenge you to seek out professional websites and see if you can identify where the designer spent extra time and put special thought into the decisions being made.

Next time you are creating a web design and you think the project is ready to go. Stop yourself, revisit the design and spend an extra hour.  Spend time just adjusting spacing, hand-drawing a line, adding smooth or  subtle gradients to create depth, add a highlight to a button, even give it a slight under glow. You can watch as the design you thought was good an hour before begins to transform into a polished and finely-tuned piece of work.

I encourage you to just try it once.

Attention to detail is the mark of a great craftsman and the signature of a more solid designer.

Thanks for reading and I hope this is helpful for you and please let me know what you think, leave a comment or shoot me an e-mail.