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.
