5 Subtle Ways to Improve Your Web Designs

Posted

In the web design business imitation is unavoidable. Almost any client who wants a new web site will start the process by sending you some links to sites they like generally followed with “I want my site to look like that”. But sometimes efforts to imitate fall flat for some reason but maybe you can’t put your finger on what is so different about your design, something about it just doesn’t look the same.
All too often the answer is in the details, the most subtle of techniques that you may not even notice when you apply it yourself until you take a step back and look at the whole picture. Some of the coolest web design techniques are the ones that you don’t even notice are there. These are the design practices that really build depth to your design and immerse the visitor without them ever knowing how or why. The truth of the matter is these are the things you won’t notice until they aren’t there.

The Half Pixel Blur

One of the most popular trends in web design right now is this kind of horizontal banding for sites where different sections of the page are broken up by bands of color or graphics that stretch the width of your screen. This can be a great way to design your site in a way that keeps the visitors eyes moving in the right direction but if these sudden transitions are done wrong they can be harsh and distracting. One important measure to take into account is the colors you are moving between but a more subtle approach is to use a half pixel gaussian blur.

Half Pixel Blur

Thin Complimentary Lines

That’s the best title I could come up with. But what I am referring to is drawing a thin line between your color transitions to ease the pain on the eyes. This is best achieved when using a similar or complimenting color to achieve a subtle effect.

A good technique with a bright color palette is to use a bright line to put in a highlight on whichever section you wish to be perceived as being on top of the other section. While you can do this with the dodge tool in Photoshop I prefer draw a solid 1 pixel line with the pencil and use that trusty ole half pixel blur.

Complimentary Lines

Noise

Of everything on this list Noise probably makes the most significant changes to your web page. Adding a little bit of noise will make your page look more organic and natural without distracting the user in areas where content is the most important feature. Stick to uniform, it will help if you want to repeat over an axis. Keep monochromatic selected, we don’t need a bunch of colors floating around and be sure to practice moderation!

Noise

Gradients

Most people understand that gradients make your page more interesting when used the right way. Subtle color gradients will make important elements of the page pop more and when used as a highlighting function they can be a powerful tool for pulling in a visitors focus. As a background element no one should be looking at the way the colors change behind the product or service you are promoting so be careful what colors you choose.

Gradients

Shadows

While the drop shadow has been a staple of the web design world for quite some time now it bears mentioning that subtle shadowing techniques play a huge role in the entire perspective of your web page. Soft shadows can help transition between page sections, and inner shadows can serve as a replacement for overdone bevels on text that needs to pop.

Shadows

Pick and choose from these techniques to create a more organic looking web site that allows your visitors to navigate through your site without needing to stop and appreciate all the work you put into it.

Leave a Reply

XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>