Subtle Details: Taking Web Designs to Another Level

By / Dec 1, 2009 / Inspiration
shares

Have you ever looked at a web site and immediately been impressed with it’s design? Then you take a closer look and discover what really makes it amazing. It’s the subtle details. Some designers are great at including this in their designs. These types of designers are border line perfectionists and aren’t afraid to make full use of the zoom tool and 1px brush size in Photoshop. In this article, we will look at several ways subtle details are being used in web designs to take them from great…to amazing.

Pixel Perfect Line Work

The designer of Image Spark, used a 1 px line along the top of the nav bar and around the bottom of the search field to make the edges pop. Anytime you have a lighter color next to a dark color, the lighter one will appear closer giving the illusion that there is a raised edge. Notice that the lines are only a few shades lighter than the background color. This is what makes the technique effective. If a white line was used, it would have been overpowering and the effect lost.

subtle detail

subtle detail

A similar technique is being used on atebits, but here it’s used to create dividers. Notice that they are made up of two 1px lines side by side, one dark and one light. This gives the illusion of an inset groove. Another nice touch is how the ends of the lines fade away instead of ending abruptly.

subtle detail

subtle detail

Shadows with Restraint

Shadows are a great way to give a design depth, but when creating shadows, it’s important to not over do it. Photoshop’s drop shadow effect can be a dangerous thing when in the wrong hands. The intensity of a shadow should have a lot to do with the color of the background. A darker background will require a darker shadow, and a lighter background a lighter shadow.

The designer of Fubiz uses a subtle shadow below the nav bar to give the illusion that it is raised off the page.

subtle detail

subtle detail

For fun, let’s see what would happen if the designer went a little crazy with the shadow. Take a look at the image below. The result appears to be quite amateurish.

subtle detail

The official site for the White House has shadows everywhere, but since they are all done subtly, the site maintains a very clean appearance.

subtle detail

subtle detail

Simple Gradients

Gradients are such a simple effect to create. They can be used to achieve various results, such as giving the illusion of a light source or creating depth, but again the key is to keep it subtle. The change in color from one end of the gradient to the other should be minute.

Tapbots uses a simple gradient in the background to make it appear that a light source is illuminating the iPhones. Subtle details like this contribute to pulling the entire design together. In this case, the gradient plays a big role in making the reflections of the iPhones believable.

subtle detail

The tabs on MetaLab each have a gradient fill. This give the illusion of depth and that they are slightly raised. MetaLab is also an excellent example of the pixel perfect detail mentioned above.

subtle detail

subtle detail

Precise Textures

Textures are often used to fill a large area. This is an easy and quick way to add a lot of interest to a design, but textures can also be used in a more precise manner to add multiple layers of subtle details.

Try to overlook the shameless self promotion here. On my portfolio, I used plenty of textures to give it that worn and weathered look. However, instead of just being content with filling the larger areas with texture, I took it a step further and used bits and pieces of texture to add more detail along the edges.

subtle detail

subtle detail

Liam McKay is the master of creating subtle grunge effects in his designs. On his blog, he uses subtle grunge textures that are perfectly placed to accent the content instead of distracting. Notice how even the 1px border lines have a worn look.

subtle detail

subtle detail

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

33 Comments

  1. Murlu
    December 1, 2009

    Really love the subtle uses of grunges even on the edges.

    You see a lot of design that uses a background grudge but the rest is perfectly clean which is a bit offsetting. That extra bit of effort on the edges really pulls together the design.

    Reply
  2. Evi Loveres
    December 1, 2009

    I completely agree. Sometimes the littlest detail make the biggest difference. Great list!

    Reply
  3. Design Informer
    December 1, 2009

    Nice tips for web designers. Thank you for this post. I completely agree with your points.

    Reply
  4. Web Design Maidstone
    December 1, 2009

    Some good pointers, always worth being reiterated

    Reply
  5. Linda Page
    December 1, 2009

    This is SUCH a handy list and inspiring to do better!
    Thanks.

    Reply
  6. Wojta
    December 1, 2009

    Nice post, a lot of good examples.

    Reply
  7. designfollow
    December 1, 2009

    very useful, thank you.

    Reply
  8. h1brd
    December 1, 2009

    Thx a lot for this article, I hope you can do more like it. The detail examples create quality standards and really make the webdesigner shine, sometimes it’s hard to find good articles approaching the little but crucial details :)

    Reply
  9. GIVISION | Jiri Mocicka
    December 1, 2009

    Nice article, some of them are well known and some of them are new. Great stuff.
    If there is just 5 of them it will be enough sometime less is more.

    THX Jiri

    Reply
  10. Michael Chanter
    December 1, 2009

    Thanks great post – checkout my interview with Chris Spooner http://www.redbilby.com.au/an-interview-with-chris-spooner/

    Reply
  11. Brian Jones
    December 1, 2009

    Good post with great finds – thank you

    Reply
  12. Alex Flueras
    December 2, 2009

    Great article. Good for inspiration. Thanks for sharing.

    Reply
  13. Gregor Colnik
    December 2, 2009

    That is so true! best looking websites are made of details that aren’t even noticeable at the first glance.

    great post!

    Reply
  14. Blue Sail Creative
    December 2, 2009

    Thanks for the great advice and great tutorial.

    I found a lot of value in this. Its always the small stuff that makes things beautiful.

    Great Post!

    Reply
  15. Liam McCabe
    December 2, 2009

    Superb post! Web Design Ledger seemed have to stepped up their game since my last visit :)

    Speaking of Metalab, some of you may be interested in a post I recently published on my blog.

    Design a pixel perfect menu – MetaLab style

    Thanks again WDL for the excellent post :)

    Reply
    • Henry
      December 2, 2009

      Thanks Liam. I’m actually doing this full time now. So that means more posts and better quality. :)

      Reply
      • Liam McCabe
        December 4, 2009

        Woot! lucky :)

        Can’t wait till my dream becomes reality as well ^^

        Reply
  16. Erich
    December 3, 2009

    What about shadows underneath like the first picture and the iphone?

    Reply
  17. Jonas
    December 3, 2009

    Great great article..

    Reply
  18. Pieter
    December 3, 2009

    All these things are true, but still, I am getting tired of them.

    Why don’t we leave off the 1px borders or the subtle gradients, and just go plain simple?

    I like the minimalism approach to websites at the moment, for example http://www.trumm.nl or http://www.pieterbeulque.be.

    Reply
  19. Waheed Akhtar
    December 3, 2009

    excellent article. love it. thanks for sharing

    Reply
  20. Chris
    December 4, 2009

    It’s the little things that most website visitors look over but true design connoisseurs notice. Thanks for taking the time to point out some great tips. It makes me want to go back and work on some of my own designs. Tweak and tweak some more!

    Reply
  21. Ivan
    December 5, 2009

    Thanks. Nice advices :-)

    Reply
  22. Designer Aaron | wisnet.com
    December 5, 2009

    Sites with simple gradients and soft shadows always catch my attention. Designing without them can make more of a challenge especially for a client whose site would be better off branded without them. Ah, so many different design decisions to make! Thanks for the great article. I will pass this off to designers that I run into that don’t ever use gradients and also use extra dark super duper shadows! (:

    Reply
  23. Lauren
    December 6, 2009

    I really appreciate it when a designer pays attention to the smallest details like this. Great post. Image Spark is stunning, thanks for sharing.

    Reply
  24. Adam Hermsdorfer
    December 6, 2009

    Good list. That 1px pop can make a site. Thanks.

    Reply
  25. a77icu5
    December 7, 2009

    Great post, for a great blog !

    …added to my feeds ;)

    Reply
  26. Adding Depth with Pixel Perfect Line Work | Web Design Ledger
    December 30, 2009

    [...] in one direction, it becomes a line, and in the hands of a masterful designer with an attention for subtle detail, the 1px line is a powerful design element. It can be used in many different ways, but in this [...]

    Reply
  27. Feel of Design
    January 2, 2010

    very helpful! thanks a lot…

    Reply
  28. Jermaine Young
    January 11, 2010

    I found that the more you grow as a designer the more you go deeper into the subtleties. My very first site was a bulky drop shadowy mess. Now I understand the difference. Thank you. Nice list.

    Reply
  29. Matt
    March 16, 2010

    The texture examples are beautiful. That is one area I want to focus on and improve.

    Reply
  30. Blog Of Sport
    March 21, 2010

    Yeah! Great post..

    Reply
  31. james
    March 15, 2012

    Great Post. Very informative details and the texture is so much beautiful.

    Keep it up!

    -James

    Reply

Leave a Reply