Essential Tips to Add Realism to your Designs

September 13, 2010 · 14 comments

by Damon Bauer

Essential Tips to Add Realism to your Designs

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?


ElegantThemes
ThemeForest

Advertisement

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.
shadow-carlcartee
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.
shadow-gregnewman
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.

overlap-buffalo

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.

overlap-barleys

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.

depth-opera

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.

depth-pineapple

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.

texture-goodbytes

There isn’t much I can say that you can’t 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.

texture-antonpeck

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.

1px-ikreativ

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.

1px-launch

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 darker than 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.

inset-masswerks

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.

inset-wegraph

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.

ribbon-hill-country

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.

ribbon-delibar

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!

Author : Damon Bauer

Damon works as a web developer based in Toledo, Ohio. While he’s not creating websites, he enjoys riding motorcycles, camping and sports. You can follow his blog at Trust Your Technologist.

{ 13 comments… read them below or add one }

Mauritius We bDesign September 16, 2011 at 7:18 am

Great collection very useful for my next web design project

Reply

Cory Flanigan September 15, 2010 at 3:24 pm

Great writeup!

I specifically liked the fact that you don’t need to be a graphics wizard to use these, just comfortable with some CSS. It reminded me of an important question posed by one Seth Godin, http://bit.ly/rgagd.

Thanks, for providing well researched, insightful, useful words on becoming a better designer (or creating better designs, at least.)

May just have to put some of these to work in my current project!

Reply

tripwire team September 15, 2010 at 5:43 pm

Cory your feedback is really appreciated. I’ll check out Seth question you are linking to.

Reply

Damon Bauer September 15, 2010 at 6:11 pm

@ Cory -

Thanks for the kind words :)

A little bit of research and questioning can go a long way in deciding what’s needed vs. wanted in a design. Does adding this drop shadow help the design, or is it just superfluous? I’ve found myself asking things like that many a time, much to my own discord ;)

Reply

Jamie September 15, 2010 at 10:16 am

Nice Article Damon.

When I was a designer in the late 90′s everyone I knew started using drop shadows on everything they could get there hands on :). Although this has died down a bit now it is interested that drop shadows are here to stay, including the 1px lines you mentioned.

Reply

Jennifer R September 14, 2010 at 11:10 am

Nice collection, could you create an article about how to create these effect with Photoshop?

Reply

Damon Bauer September 14, 2010 at 6:16 pm

@Jennifer R -

Thanks, glad you liked it. I’ll keep an article about creating these in Photoshop in mind. Thanks for the feedback.

Reply

Katie September 13, 2010 at 11:33 pm

Great article! It lists really good techniques on how to make a modern, clean and beautiful website. Thanks!

Reply

Damon Bauer September 14, 2010 at 6:17 pm

Your welcome!

Reply

logolitic September 13, 2010 at 6:50 pm

really useful informations, interesting to read !

Reply

Rory September 13, 2010 at 8:15 am

I really enjoyed this article. For some people its very difficult to decide on all the different aspects that make an image or design stunning. This article goes a long way in making that a more simple process for people like myself that are technical programmers but find that they often have to go graphics based work which is a completely different type of creativity in my mind. Thanks again

Reply

tripwire team September 13, 2010 at 6:58 pm

Rory I agree with you that Damon hit spot on with this article. Interesting reading for myself as well ;)

Reply

Damon Bauer September 13, 2010 at 8:01 pm

@Rory -

Glad you liked it. As someone who doesn’t always work in design, its important for you to know what you should and should not use in certain situations. Like I said in my post, you should really figure out the motivation behind your design first, and decide if any of the effects will help or harm the message of the design.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 1 trackback }

Previous post:

Next post:


Web Analytics