There’s quite a buzz out there about what’s hot in web design, and it’s always ringing in my ear when I fire up Photoshop to create a web page. Once I have chosen the appropriate look and feel for a site, such as a clean and structured business look, or a rough and textured expressive look, I check for trends in that category. Then I dissect the trend. I pick apart what it is that makes these web elements so cool and catchy, so I can use these techniques to provide contrast on a page. These 6 following techniques have proven the test of time in many situations and have been very helpful to me:
Whoever started this technique may be a debatable subject, but Apple sure made it popular. Everything is glossy now and has a reflection. It works so well because it turns your plain white page into a wet, shiny, glassy table. It provides depth. No longer is your element laying flat, it’s sitting upright. And all you have to do is copy your element, flip it 180, and fade it out. Think subtle.
Ok, so I guess the #1 technique would be called “Drop Shadow”, but I think we all know that one. One step further on that is to have your element overlap something on the page. This usually involves some CSS trickiness, but it can be worth it! Having your element overlap provides depth. It allows a visual interaction between things that makes them…alive.
Adding a bit of transparency to elements also provides depth and interest. It’s a good way to manage space as well, letting background design element be carried into the structure of your site.
Embossing is a technique of molding or carving surfaces in relief. There is also the type of embossing that makes surfaces appear raised, but the carved-out style has a particular appeal to it. Smashing Magazine lists this technique right at the top of their very useful Web Design Trends For 2009 post. This style works great for text and logos and gives your page a 3-D look.
Turning boring old icons into real live objects we can relate to is a good thing. If you have one icon you’d like to stand out, then this technique would work great. Think of some relevant object or scene and transform your everyday icon into a wow-factor. Chris Spooner of SpoonGraphics.blog has a spectacular example of this technique.
Adding texture to page elements is a good technique to make your appearance more personable. The hand-crafted look works great if you’d like to say, “This page is unique to _______ (insert your name)”. In this way you can provide 3-D and depth to make something pop off the page.
All of these techniques are helpful to make contrasting elements on a page. Buttons, search boxes, widgets…whatever users should see clearly, can benefit from using some of these basic techniques. That means you only get a few elements to deck-out like this so choose wisely!
Great post Alan. Now I need to get in there and do some of this for my blog!