Subtle Details: Taking Web Designs to Another Level
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.
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.
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.
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.
The official site for the White House has shadows everywhere, but since they are all done subtly, the site maintains a very clean appearance.
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.
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.
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.
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.
Related Posts
Here's some other articles that you will definitely find useful.
Adding Depth with Pixel Perfect Line Work
30 Awesome Textures for Creating Subtle Grunge Designs
Best Grunge Textures and Photoshop Brushes All In One Place
Ultimate Grunge Pack: 40 High-Res Textures
50 Most Extreme Free Grunge Fonts
32 comments
Murlu
December 1, 2009Really 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
December 1, 2009I completely agree. Sometimes the littlest detail make the biggest difference. Great list!
Design Informer
December 1, 2009Nice tips for web designers. Thank you for this post. I completely agree with your points.
Web Design Maidstone
December 1, 2009Some good pointers, always worth being reiterated
Linda Page
December 1, 2009This is SUCH a handy list and inspiring to do better!
Thanks.
Wojta
December 1, 2009Nice post, a lot of good examples.
designfollow
December 1, 2009very useful, thank you.
h1brd
December 1, 2009Thx 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
GIVISION | Jiri Mocicka
December 1, 2009Nice 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
Michael Chanter
December 1, 2009Thanks great post – checkout my interview with Chris Spooner http://www.redbilby.com.au/an-interview-with-chris-spooner/
Brian Jones
December 1, 2009Good post with great finds – thank you
Alex Flueras
December 2, 2009Great article. Good for inspiration. Thanks for sharing.
Gregor Colnik
December 2, 2009That is so true! best looking websites are made of details that aren’t even noticeable at the first glance.
great post!
Blue Sail Creative
December 2, 2009Thanks 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!
Liam McCabe
December 2, 2009Superb 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
Henry
December 2, 2009Thanks Liam. I’m actually doing this full time now. So that means more posts and better quality.
Liam McCabe
December 4, 2009Woot! lucky
Can’t wait till my dream becomes reality as well ^^
Erich
December 3, 2009What about shadows underneath like the first picture and the iphone?
Jonas
December 3, 2009Great great article..
Pieter
December 3, 2009All 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.
Waheed Akhtar
December 3, 2009excellent article. love it. thanks for sharing
Chris
December 4, 2009It’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!
Ivan
December 5, 2009Thanks. Nice advices
Designer Aaron | wisnet.com
December 5, 2009Sites 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! (:
Lauren
December 6, 2009I really appreciate it when a designer pays attention to the smallest details like this. Great post. Image Spark is stunning, thanks for sharing.
Adam Hermsdorfer
December 6, 2009Good list. That 1px pop can make a site. Thanks.
a77icu5
December 7, 2009Great post, for a great blog !
…added to my feeds
Feel of Design
January 2, 2010very helpful! thanks a lot…
Jermaine Young
January 11, 2010I 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.
Matt
March 16, 2010The texture examples are beautiful. That is one area I want to focus on and improve.
Blog Of Sport
March 21, 2010Yeah! Great post..
james
March 15, 2012Great Post. Very informative details and the texture is so much beautiful.
Keep it up!
-James
1 Trackback
[...] 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 [...]