Subtle Details: Taking Web Designs to Another Level

By / Dec 1, 2009 / Inspiration

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.

  • http://www.beginnerdj.com Murlu

    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.

  • Evi Loveres

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

  • http://designinformer.com Design Informer

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

  • http://www.squiders.com Web Design Maidstone

    Some good pointers, always worth being reiterated

  • http://www.pagedesignltd.com Linda Page

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

  • Wojta

    Nice post, a lot of good examples.

  • http://www.designfollow.com/ designfollow

    very useful, thank you.

  • http://scarletbits.com h1brd

    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 :)

  • http://www.givision.net GIVISION | Jiri Mocicka

    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

  • http://www.redbilby.com.au Michael Chanter

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

  • Brian Jones

    Good post with great finds – thank you

  • http://www.studioweber.com Alex Flueras

    Great article. Good for inspiration. Thanks for sharing.

  • Gregor Colnik

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

    great post!

  • http://www.bluesailcreative.com Blue Sail Creative

    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!

  • http://blog.creativityden.com/ Liam McCabe

    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 :)

    • http://henryjones.us Henry

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

      • http://blog.creativityden.com/ Liam McCabe

        Woot! lucky :)

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

  • http://www.snowtographers.com Erich

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

  • Jonas

    Great great article..

  • http://pieterbeulque.be Pieter

    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.

  • http://www.smashingshare.com Waheed Akhtar

    excellent article. love it. thanks for sharing

  • http://www.visualswirl.com/ Chris

    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!

  • http://efekat.com Ivan

    Thanks. Nice advices :-)

  • http://www.wisnet.com/ Designer Aaron | wisnet.com

    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! (:

  • http://nymphont.blogspot.com Lauren

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

  • http://www.bigtunainteractive.com/ Adam Hermsdorfer

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

  • a77icu5

    Great post, for a great blog !

    …added to my feeds 😉

  • Pingback: Adding Depth with Pixel Perfect Line Work | Web Design Ledger()

  • http://www.feelofdesign.com Feel of Design

    very helpful! thanks a lot…

  • Jermaine Young

    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.

  • http://www.apacheadvertising.com Matt

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

  • http://blogofsport.info Blog Of Sport

    Yeah! Great post..

  • http://fastdesign.com.au/ james

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

    Keep it up!

    -James