Adding Depth To Your Design Elements

The Search Area

Please Note: This tutorial is almost a carry on from an earlier tutorial I did titled Enhance Your Designs With Simple Techniques.

I’ve found that the best way to learn is to actually get your hands dirty and dig straight in. So here we have our first example, a simple search box with a search icon. The first version to the is a pretty bare-bones example of a basic search box. It’s functionality is obvious to the user.

As you can see in the second version to the right, I’ve given this nice, simple search box more depth and visual appeal by adding the following:

• Very light inner-shadow along the left and top sides of the input field.
• Given the button/icon a nice gradient.
• Added some text. Typography can affect design in more ways than you may realize.

The Navigation

Ahhh the nav, it’s an element that can really make or break a design. There’s definitely a set of certain challenges when giving any project navigation because almost every site has there’s designed differently. Below I’ve again designed a basic element and then transformed it into something more appealing.

OK then, so in the above example there haven’t really been that many changes made; however what I’ve done is try and illustrate the difference between a good piece of design and an out-dated piece of design. The first example is nice enough, it’s not terribly ugly, as I’m sure you know some navs can be and it does what it is suppose to do. The problem is that the design is out-dated by a few years, an obvious point here is the underline and the non-current links.

The second example gives a more up-to-date affect because of two reasons. The first is the way the links are setup, it’s obvious which is the current page link. The second is the single highlight going around the inside of the darker border.

I know from experience that this could have been designed a million different ways but for the sake of this tutorial I wanted to keep it simple with as little changing of the basic design as possible.

The Footer

Now we’re onto the last part of this tutorial, the footer. For this section I’ve designed a nice simple footer, a thick border at the top to give it some detail and just three nicely aligned columns.

Click Image For A Larger Version

In the second version I’ve given some real depth to the footer so that it really catches your eye. The first thing that’s changed is the thick border at the top, as you can see I’ve been able to add detail by first making it look indented. This is a really simple effect that can give your design something fresh. Just make it darker than the actual footer. Then add a border to it that’s a little bit lighter than the lightest background colour. Then to give it even more detail I gave it a very fine gradient. Here are all the details:

• The top border has been refined.
• The hover effect of the links has also been given the same refinement.
• An underlining separator has been placed underneath the headers.

I used the font ‘Blue Highway’ not only for the headers but also for the links. I decided on this since we now have the use of services such as Cufon and developers have also started to use Font-Face a lot more now.

If you want to then you can download the Blue Highway font here. So if you’ve got any good short techniques that you’d like to share in the comments below don’t be afraid to tell us.