Creating Clean, Pixel Perfect, Web Design

Paying strong attention to detail when creating the design of a website, down to every specific pixel, can add a lot to the appearance.  You may have read my blog post on Web 2.0 clean web design where I touched on some major trends shaping how things are looking today.  In this post, you will be reading about how some of these fine details are put together in a website design in order to achieve a clean website design that is pixel perfect.

Wireframing

In order to show off web design with very fine detail, you must start out by setting up your guides within your Photoshop document.  Planning where everything is going to go, down to the exact pixel, is very important.  Have everything measured out perfectly.  Instead of having that header bar just thrown together at a random 162 pixels high, plan it out and make it a rounded out number such as 150 pixels high.

Once you have all the guides set up and know where you will have everything, start placing shapes of color.  Once you see shapes and color on the screen, you can make further adjustments to the guides and then start adding some detail and depth with subtle gradients, transparencies, and shading.  This is like laying down the foundation of a house that will have everything built on top of it.

Pixel Perfect Detail

Having everything spaced out perfectly, thanks to your wireframe/guides is a start to adding in the detail.  A one pixel line at the top of a box of color can add a highlight effect and a subtle outline can make something a lot more pleasing to the eye.  Very, very subtle drop shadows can keep things clean while adding depth to the design.  For shadows like this, I typically always have it set up so the light source is coming from above and then just have the shadow “distance” going down one or two pixels and the “size” no more than double how far I have the shadow going down.

Navigation Dimples

We have all seen those tiny cracks on many website navigation bars that indicate a break between each button.  With this style of website design, it is very important to properly choose the colors that you use to give a realistic appearance of there being a crack, or dimple, in the navigation bar.  The proper way of creating this effect is to use two lines that are one pixel wide each.  One line is a lighter color and the other is a darker color.  Common mistakes I see are where the lines are either too light and too dark and also when there is just one line with a gradient applied to it.  Both can create an unrealistic appearance and take away from this style of design.  The proper way of implementing this effect, on a navigation bar with the highlight on the top, is by selecting your lighter line color about one-fifth of the way down from the top of the bar and then selecting the darker color about one-fifth of the way up from the bottom of the bar (all once the navigation bar gradient/color is already determined).  This will give a very appealing look that will go along well with the rest of this style of website design.

Half-pixels

On the web and within Photoshop, everything works off of square units of color, also known as pixels.  When you have something that is measured in half-pixels, it creates another shade of the color that is between what color is on either side of that half pixel, a form of anti-aliasing.  In the image below, I show how the box with rounded corners on the right has its pixels perfectly placed.  The box on the left shows how the color is distorted by extruding out a half-pixel.  This can give your design a fuzzy edge look and take away from your clean design.

Conclusion

With a lot of these Web 2.0 design trends being seen more and more today on newly designed websites, a lot of these very clean and pixel perfect designs are achieved easily by just spending a little more time in the pre-design process of wireframing and measuring everything out properly.  Adding that precise foundation can allow you to add onto it major Web 2.0 design principles to help you achieve your goal of creating a masterpiece website that those who visit it will say “wow” when noticing all the precise detail.