As user interfaces get more complex and visitors get more comfortable with the internet, it’s more important than ever to serve up a great looking design. It’s not enough to give users content that keeps them coming back — users expect a great design. After all, the design of your site is what will catch their attention at first; with that being said, I believe we’re seeing a shift in the way sites are designed. More and more websites are moving from simple, static designs with minimal effects and basic typography to highly dynamic and meticulously curated designs. By adding a little depth to your designs, you can create subtle changes that have tremendous effects to the overall appearance of your design. Ready to dive in?

 

Shadows

When using drop shadows, doing it in a subtle way is paramount. If you add too much shadow behind an object, the effect looks overdone and not believable. With too little shadow, there isn’t enough contrast and you can’t tell that there is a shadow at all. When you find the right balance, a drop shadow can really help the object jump off the page and make it like its above the other objects on the page.

Carlcartee uses shadows behind each letter box, make a sort of window blind effect. Not only that, but it uses a nice wood texture in the background to make the site even more realistic.

Greg Newman’s site could be used for textures as well, but I wanted to highlight the Date and Comments area of his posts. It uses a light colored background with a rounded edge and shadow, giving it a worn paper feel thats peeling away.

This is an example using the following code:

-webkit-box-shadow: 5px 5px 2px #555;

-moz-box-shadow: 5px 5px 2px #555;

-o-box-shadow: 5px 5px 2px #555

box-shadow: 5px 5px 2px #555;

padding: 5px 5px 5px 15px;

Overlapping

While this might seem pretty elementary, it’s not all that common that you see this done on websites. Maybe it’s because a designer thinks that by covering up one element with another, content might be hidden? I’m not exactly sure, but I really would like to see more of this effect done. It’s so simple, but it creates such a great visual cue.

I love Buffalo’s image rotator here. What I love more is they go outside the box (literally) with their images. It really makes the content stand out and grabs your attention.

 

Although I’m not a drinker, it’s hard to deny that Barleys header stands out from the crowd. If the different logos don’t steal your attention, the huge logo and outside the box style will.

Overlapping involves use of positioning and z–index, which I won’t cover here. However, have a look at some resources and you’ll be on your way in no time.

Depth of Field

Becoming more common in today’s designs is the use of large background images as well as content sliders that display only images. By adding depth of field to these images, you draw focus to one part of the image and blur the rest out. This can create a dramatic effect and draw attention the focused part of the image. Be careful here, because you don’t want to draw too much attention to the image and have your content lost as a result.

The image of the hummingbird used on the Opera site really speaks volumes to their attention to detail. Hummingbirds flap their wings faster than any other bird, and the way it’s blurred just adds to the “speed” paradox Opera tries to convey.

If I knew what a guy covered in post–it notes meant, I’d tell you; but I don’t. So, I’ll just tell you that this large background image is quirky, and focused in all the right places. While it catches your eye and peaks your interest, it doesn’t detract from the content.

You might be able to find the perfect image to use on your site. But, if all else fails, you can take your own! Arm yourself with a bit of background knowledge and get snapping!

Textures

By adding textures to your design, you can quickly create a sense of realism by signaling a users brain to real life items (think brick wall, trees, concrete, paint, etc). By doing so, you are helping to bridge the gap between real life objects and digital renderings, thus attracting the user. Again, you have to be careful here, because this can quickly become overdone if not executed correctly, having an adverse effect on your overall design.

There isn’t much I can say that you can decide on your own about the Good Bytes website. With lots of texture, I want to reach out and touch my screen just to see what it feels like.

Anton Peck’s site is dark, grungy and really unique. There is such attention to detail and it really shows. I can’t tell you anything else — just enjoy it.

There are so many places to find awesome textures these days; just have a look through these sites or do a search… you’re bound to find something!

1px Lines

Overused? Maybe. Effective? Absolutely. A “1px Line” is the use of two 1px lines, one on top of the other with contrasting colors, which makes the line look embossed into whatever it’s sitting on top of. This is much more visually striking than just one flat color, as it gives the line the look like it has a light source on top of it and looks more 3–D. A variation of this technique can also be used on things like buttons to highlight the edges and make them stand off of the background.

The iKreativ site is clean, easy on the eyes and uses 1px lines really well. Instead of a solid color border on top of a really sweet texture, they decided to go with the 1px line technique, and I can’t say I blame them.

If you haven’t seen Launchlist, go now. Please. It’s beautiful, useful and witty all at the same time. Enough said.

Making these types of lines is dirt simple in Photoshop. You simply make a line that is slightly darkerthan the background color, then directly under that, make another that is slightly lighter than the background color.

Inset/Letterpress Text

While this is easy to become overused and subsequently abused, it still adds subtle yet impactful depth to a design. If this is used correctly and not overdone, it can really make text stand out. I wouldn’t recommend it be used for entire body copy, rather things like navigation, headings or callouts because it can get illegible if the contrast between the text border and the background isn’t high enough. Try playing with a few different options to see what looks best.

Masswerks has a simple, clean design that uses CSS3 text–shadow to create inset text. It’s a nice touch that adds a nice touch to an already clean site.

Not only is WeGraphics a great place to get super cheap design resources, it is a pleasure to the eye when looking for something. You will notice the inset text effect throughout various parts of the site.

I am Inset Text hear me roar

color: #000;

font-size: 32px;

text-shadow: 0px 1px 1px #bbb;

background:#555;

padding-left:10px

The nice thing about using CSS to do this is you don’t have to mess with Photoshop and if a browser doesn’t support the CSS, the text is still legible.

3D/Folded Ribbon

This is probably the hottest technique that has hit the streets as of late. By using this effect, you can make elements “wrap” behind other elements, giving it the sense that it’s on top and it’s in 3D. Remember – you don’t have to use square edges for this – experiment with curves, angles and opacity for a truly unique effect.

The Hill Country Baptist Church website is loud and in your face — something not usually associated with a church. Take a look at the navigation pictured, then head to the site to see it all of the nice 3D effects throughout the site.

While Delibar could be used for other examples (like borders or shadows), the navigation is pure awesome. It “unfolds” when the current navigation is shown, providing a stylish, 3D effect.

When researching examples of this effect, I came across this tutorial on PVM Garage. While I applaud the author (Piervincenzo Madeo) for such awesome work, it seems to me that there is a lot of code to have to update. Personally, I like to use Photoshop for this effect, and have found these tutorials (step 25) useful in creating really nice 3D ribbons.

Wrapping Up

I cannot stress enough the fact that you should do research and figure out if you need these effects in order for your design to function. Also, take into consideration the amount of these effects you use — more is not always better. There is a fine balance between adding nice design touches and “overdesigning”. If you have any questions, comments or suggestions, drop a line in the comments!