Details Make the Difference in Web Design

Feb 25 2011 by Jason Gross | 33 Comments

Details Make the Difference in Web Design

Details make a world of difference when distinguishing between ordinary and extraordinary.

A luxury car may have the same number of wheels, seats, windows and doors as a traditional vehicle, but what sets it apart from the competition is the time spent on the details. Heated leather seats, a push-to-start engine, keyless entry, automated parking and extensive digital consoles add value to an expensive, new car.

The same principle holds true in web design. Web designers who take the time to dive into the details that make a difference will reap the rewards of designs that hold more value.

The key word here is value.

There is no guarantee of a direct correlation between the time invested into creating a website and the value that the result has. Some details are more important than others, and it’s important to be able to determine which details make an impact.

Details That Add Value

The type of details we want to spend extra time on improves our work beyond the aesthetic levels.

We want to focus on visual tweaks that can change the user experience profoundly, such as in the way users perceive the site’s theme and message or how they navigate a site.

The average website visitor, one whose not experienced in creating websites, will not be able to point out the nuances that improve their experience, but if those details were removed, a noticeable difference in perception and usability will be revealed.

Those are the details we want to invest time in.

So how exactly does a design detail add value to a website?

The trick is in the user experience. Web designers should have an excellent understanding of how negative space, contrast, shape, color and all the different visual elements play a role in how people use and perceive a website design.

What can be surprising is just how few pixels a designer needs to manipulate before they start to make a difference that has a much larger impact.

What are some of these differences?

Looking Closer

I feel the most comfortable in Photoshop when I’m zoomed in to 500% or closer. It just feels like home. Let’s dig into some design work that does a good job of guiding our experience with subtle details.

I’ll use the Concentrate website as a working example; it seems like an appropriate place for us to devote our concentration on first.

Starting with a high-level view, we can see a creative visual wordplay that is being made on the Concentrate site.

Beyond the can of orange juice concentrate, we see an orange-themed color palette and a background that does a pretty good job of imitating the texture of an actual orange fruit.

Digging a little deeper, we see that CSS3 has been used to provide some shadowing for text to increase contrast against its background.

To truly appreciate the details, we need to dig a little deeper.

Pixel Perfection

True details are applied down in the pixel-level. We see this on the Concentrate site, around the call to action buttons near the top of the web page layout. First, the shadow behind the buttons lifts up this section of the page. The simple two single-pixel lines at the top and bottom of the area is a simple design trick that gives this area greater visual distinction amongst the other elements of the page.

One of the single-pixel lines is more noticeable because it’s bright orange. This provides contrast between both the drop shadow and the background, but what really helps is the second, darker orange line. These two single-pixel lines work together to cordon off this top section.

The Difference

The difference is best demonstrated when those lines are no longer a part of the web design. Below, I’ve removed those lines to show you how big a difference two pixels can make.

Subtle Shadows

Drop shadows are no stranger to web designs. Most websites utilize them early and often to simulate depth on a flat, 2-dimensional medium. Shadows and highlights can improve the way our site is experienced in delicate, but powerful, ways.

As we adopt CSS3 in our designs, it’s easy to get excited about all of the grandiose differences it can make.

To me, though, the truly exciting news is how much detail work can be translated from image editing software directly to the code of our websites.

Staying on the Concentrate site, we see an excellent example of how text shadows can be used in a subtle and effective way to make a site’s content easier to read.

The CSS3 text-shadow property is used in two ways here. First the red headlines have received a lighter shadow to give an embedded/inset look on a color choice that otherwise would not work nearly as well. The second shadow in play is behind the paragraph text, simply giving the white color a bit of a lift off the page.

The Difference

Compare the above screenshot with the same page rendered in Internet Explorer 8 (which doesn’t support the text-shadow property), and we see a site that is much harder to read.

It is worth pointing out that this site is selling Mac software, which naturally raises significantly less concern on what IE users are seeing.

Navigation Nuance

Apart from improving readability and emphasizing possible site actions, details go a long way in site navigation.

The most important part of any web page is the ability your user has to navigate to another page. After all, links are what make the web what it is in the first place, so why not spend a little extra time on navigability?

For this example, we shift our focus to the Lipperhey site.

Apart from a good color selection for the navigation active state, we see that this design adds some interesting details to its primary navigation bar.

The Home button stands out for a few reasons beyond the color change. First, we can see that it drops down just a few pixels from the navigation bar. In addition, a shadow has been added behind the button and is given a slight adjustment in perspective. These two details together give the perception of added dimension to this link, indicating its importance and active state.

The Difference

Reviewing the same navigation without the mentioned details, we find that a lot of the excitement is gone and our active link has an entirely different look-and-feel to it.

Moving Forward with the Details

We explored one of the ways that some of our new abilities in CSS3 can help add value to our designs (text-shadow).

But the power of CSS3 doesn’t end with shadows. CSS3 animation, in the form of things such as the transform and transition properties, can give us an additional tool for detailing work.

When used correctly, CSS3 animations harness a huge ability to efficiently add motion to our site elements without needing the assistance of Flash or JavaScript. In terms of details, animations allow us to provide users with fluid feedback on all kinds of input. Adding a transition animation to link hover states or button clicks, for example, can tell the user that they are hovering on (or touching, in the case of touchscreen mobile devices) an active element.

The beauty of working with site details is that, through progressive enhancement, we can still provide value to a segment of our audience without alienating those who choose to use outdated browsers.

The key here is that we use all of these techniques to add value to an already solid web design. Leaning on any of these techniques without a fundamentally solid design is most certainly placing your cart before the horse.

Where else can detail be added to a site to increase its value? What types of detail techniques have you had success with in your past projects?

Related Content

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

33 Comments

TimMH

February 25th, 2011

Another great article being featured on SixRevisions, I totally agree that the small details really do make the difference. Granted some older browsers do not support the newer fancier CSS3, but it doesn’t mean you can adopt them for the ones that do. Great article about those little elements that really bring a design to life.

Don

February 25th, 2011

I agree that design is in the details, however, I feel like your examples, while good, don’t accurately explain that if the final site were missing the elements you removed, than it wouldn’t be the same site.

What I mean is that if you get rid of what you’ve gotten rid of, the people who designed the sites probably wouldn’t have made them the way they are.

Eric

February 25th, 2011

Great article Jason. I am always amazed how just a pixel or two can completely change a design. As you mentioned it is often just a subtle nuance, but a very important element that I try to work into all of my designs.

David

February 25th, 2011

There a saying in Architecture that goes GOD is in the details. So true. The mastery of a project often goes beyond the details, but without them any project would just look average.

Final Cut Studio

February 25th, 2011

Great examples you’ve shown here. It is quite amazing how a few pixels can add depth and enrich a design!

Thanks for sharing!

Young

February 25th, 2011

These are pretty good examples, especially the bright orange line on concentrate. I’m with TimMH that we should adopt CSS3 whenever you can for the browsers that support it – the detail on lipperhey is using sprite backgrounds, while the “less exciting” version you have can be done in pure CSS3. I probably would prefer the latter for the malleability it offers. You may argue for the percentage of people using older browsers, but then the sprites are using transparent PNGs too – and I personally don’t feel the trapezoidal shape that goes out of bounds makes the design that much better. But that might be the programmer in me talking, not the designer…

Tom Bradshaw

February 25th, 2011

Dude you’re giving away all my secrets :D

Benjamin Reid

February 25th, 2011

I agree with Don. The start of the article sounded promising but the examples didn’t really illustrate your initial points.

Your example about navigation, the change is probably too subtle to be noticed and could be a viable fall back for older browsers if you were doing this with CSS.

Removing the background colour of the button and only changing the colour of the text to show the current page would be a flaw that could potentially make it more difficult to identify what page they are on.

Some examples of how white space and other elements mentioned in the start of your example would of been better.

Jason Gross

February 25th, 2011

@Don I feel like the examples I showed for the Concentrate site do show how the removal of these details shifts the focus areas and the readability of this page. While an ideal demonstration of this would be to show the entire page with the details removed. However, a blog post is not the best environment to show a full site from the top to bottom in a screenshot.

Of course removing the details from the Lipperhey example does not by any means break the functionality or usability of the site. But this article talks about what steps we can take in the details that will add value for users. The Lipperhey example showcases how going the extra mile on a detail can appropriately add value to a design.

@Young You pointed out that the latter example could be executed with CSS but I think it is worth noting that the first example could actually be achieved entirely with CSS as well. Although it would not render out that way in lower tier browsers.

Andrew

February 25th, 2011

Core secrets of a web designer: 1) doubling up lines… one dark and one light, 2) Adding noise, 3) Subtle gradients, 4) text shadow, 5) white space… there’s probably more, but I got tired of writing :-)

Rochelle Dancel

February 25th, 2011

Ah, the devil is always in the detail!

Uber useful article – thanks :)

Young

February 25th, 2011

@Jason Gross mmm yeah, I guess it was my eyes playing tricks on me – cuz of the shadow it looked like the links were curved on the sides. So if you think about that – pretty clever design haha.

christopher

February 25th, 2011

your so righ ton this article. The details are priceless when it comes to great design. I am currently working on a re-design for my personal site, and I have taken a lot of these details and implemented into the new design. The things they dont teach you in school…. :)

Carl

February 26th, 2011

Nice and a really good example of why attention to detail is so important.

Adrian

February 26th, 2011

Nice little article outlining some key aspects of enhancing web designs to give the end user that little bit extra. Good work :o)

Alyssa

February 26th, 2011

So right! And I love that concentrate doesn’t have to worry about IE as much, that textured background is just lovely! Not all websites can do that because of their audience. Glad they took advantage :)

Sam Jones

February 26th, 2011

Nice post Jason, you make some good points.

marianney

February 26th, 2011

i don’t comment much here, but this is really a great article once again. these little details make all the difference. i just hate how so many people still use IE though and won’t see all the work we put into these details. :/

SmashDeveloper

February 26th, 2011

It’s getting easier and easier to make those little changes as web development techniques advance. It makes a key difference when spending some time on those find details that are on pixel level.

One of the key things why the iOS UI is so damn good.
Great article :)

gbsquared

February 27th, 2011

A nice post.

It def. has me thinking of small ways I can try to make my designs better.

Surendra vikram Singh

February 28th, 2011

Great Article!!…

Danae

February 28th, 2011

Hey, this was a really great read. Inspiring me to hurry up and remake my web design portfolio!

John Williams

March 1st, 2011

Nothing more annoying than a site with poor graphics or finishes! It’s all about attention to detail!!

Pixeno

March 1st, 2011

Wow adding those 2 lines of pixels really does make the difference!

Jesse Kaufman

March 1st, 2011

Great article … Personally, I like the examples, because (as some have pointed out) the level of details discussed here doesn’t make or break the site, but it makes a BIG difference in the overall polished “feel” of the site … as @SmashDeveloper said, this is why the iOS UI is so nice … Apple thought and planned for every little detail … compare this to BB or even Android UI and you’ll notice a big difference (not that I’m slamming either of those … I love my Droid Incredible, but the UI is much more inconsistent than iOS without a doubt)

Anyway, glad I’m not the only one that’s this anal about tiny 1-2px details ;) … this is the part of design that I live for! lol

Brian

March 2nd, 2011

When you add cool hover over buttons and things that make the user go wow…. They will remember your website and can convert.

Jomse

March 4th, 2011

Thank you for the classic article….

Jack

March 7th, 2011

This may be a short article but it has really inspired me to look a little closer with the details. Thanks :)

Chris

March 9th, 2011

Always funny to look at the authorĀ“s portfolio here. Zero attention to whats described up there…

Liked the article though!

Arnoud

March 10th, 2011

I love the designs, the details and use of CSS3. However Internet Explorer, which still is the most used browser on the internet, does not support CSS3. We have to wait for IE9 to see what CSS3 support this brings.
As a good webdesigner you should be able to deliver the best user experience to all users. So far for text-shadows…
All other shadows have to be applied with images and css. This is much more work, more CSS, more images, more loading time… this can cause performance issues. Because of Microsoft CSS3 is nothing more than a mirage, a dream for every webdesigner to use.

Andrew evans

April 17th, 2011

I agree to this post regardless of what images have been used. If you know what he is referring to I’m sure you don’t need the ‘best’ example of it in a working state…

What I really wanted to say if it hasn’t been already, a simple black and White website with no shadows, indented lines or headlands CAN still jump off the page. Web is still primarily a 2d medium so we don’t have to make everything 3D for it to POP.

I don’t want to come across a site that is so glossy and 3D that I feel like I’m supposed to lick the screen.

These elements referred to are a shifting trend but so long as they are used to compliment the layout and design, form still follows function right?

Cheers.

Randy

September 30th, 2011

Zurb has a nice article that shows how to add the insets via CSS.

http://www.zurb.com/article/277/3-ways-to-add-depth-to-any-website-with-c

Andreas

October 4th, 2011

Pareto’s principle comes in here too. The details are the last 20% that take up 80% of the time, and therefore translate to 80% of the cost. This explains the huge variance in pricing from low-end design to high-end design.

Leave a Comment

Subscribe to the comments on this article.