What are touchable web designs? When most people check out a new website, they sometimes think “yikes, this website looks like crap” or “wow, this is one of the best websites I’ve ever seen!” What is it that makes the great websites look so great? In my experience, when I think of “web 2.0” and “great web designs” I think of modern web designs that look touchable. In other words, the elements on the page almost look real, as if they have depth and take up space.

The purpose of this post is to explore how this effect can be achieved, outline the major strategies for creating your own touchable web designs, and give examples of some great web designs out there that have mastered these techniques. Let’s get started!

You may be interested in the following related articles as well.

• Design for the World: Cross Cultural Web Design
• Grid Style In Modern Web Design: Showcase and Resources
• Why Colors Can Make or Break Your Design
• Redesigning Your Website: Are you Making the Right Move?
• Secrets to a Faster and Attractive Web Site Design Revealed
• Mobile Web Design: Overview, Examples and Tips

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

How to Create “Touchable” Web Designs

Creativity means a lot in any kind of presentation. Whether it’s a logo, banner or a complete design; being able to inject creativity into it not only helps in floating the message around, it also leaves solid impression on the viewer. Good design is not easy thing to emerge, or it is often a very challenging job to discover creative designs. However, there are few ways by which you can improve your designing skills. Here we are talking about “Touchable” Web Design. Let’s start with basic elements.

Light

Touchable web designs are created by mastering the illusion of light sources. In real life, in order for us to perceive something that has depth and takes up space, we subconsciously notice gradations, shadows, textures, and layers. These effects are created by a light source, such as the light bulb in the room you’re sitting in. When creating a website that looks touchable, you’ll first need to imagine that your web pages have a light source, say for example, somewhere towards the top of the page – a commonly used location. Once that’s been established, you can use the following techniques to create the illusion of web elements that seem touchable.

Gradations

The most common technique to create the illusion of a touchable web design is to use plenty of gradations. All flat surfaces have gradations of color on them unless the light source is directly perpendicular to their surface. By using linear gradations throughout your website, you’ll create the illusion of flat surfaces that take up space. Common places to use gradations are backgrounds, headers, and navigation bars.

Gradations also help define free form surfaces by using non-linear gradations. When light hits an object, the parts of an object closest to the light source will be lighter in color, while the parts furthest from the light source will be darker in color. For example, if you shine a light onto an apple, you’ll notice that the parts of the apple closest to the light source is very light in color, while the parts furthest away from the light source are darker in color.

Highlights

Shadows

The second most common technique to create the illusion of a touchable web design is to use plenty of shadows. Shadows help define the spatial distance between near objects. In the picture above, the plant’s shadow casted onto the wall helps define the distance between the plant and the wall. A common implementation of shadows in web design is to cast shadows from web elements in the header onto the header background, or to cast the header shadow onto the body of the page.

Textures

Another common technique to give web designs a more three dimensional feel is to implement textures. Textures automatically have highlights and shadows built into them, giving them the illusion of depth. Textures are often used in backgrounds, headers, or other parts of the page where the designer intends to draw attention.

Layers

Finally, the last technique to create the illusion of depth is to leverage layering. This is achieved by creating elements that seem to overlap one another. A common implementation of this technique is to make logos or other artistic designs overlap from the header section of a page onto the body section.

Examples

To get the clear idea, Let’s take a look at some examples which using the properties which we described above.

Webdesignerdepot.com

• Light Source – The light source is positioned centrally on top.
• Gradations – Many of the elements in the header have gradations, giving them the illusion of depth.
• Layers – Dozens of objects in the header are layered on top of each other, creating a sense of rich, overflowing content.

Marcofolio.net

• Light Source – The light source is positioned centrally on the bottom.
• Shadows – Since the light source is coming from the bottom of the page, you’ll notice that all of the casted shadows are upwards, such as the shadows from the body of the page, the torn leather texture in the header, and the navigation buttons in the header. This design also has a faint shadow behind the body of the page, giving the impression that it’s raised slightly above the background texture.
• Textures – What makes this design stand out from others is the abundant se of colored texture in the background, which looks almost like irregular puzzle pieces fitting together.
• Layers – There are three layers in the header portion of the page. The back-most layer consists of texturing and an RSS icon, followed by the navigation layer, followed by the logo section of the page which is the font-most layer.

Designora.com

• Light Source – Here the light source is centered directly on the logo, creating a spot light effect.
• Gradations – This design showcases great use of gradations in the blue arrows and the “Subscribe Now” section of the page.
• Shadows – The shadows from the “Subscribe Now” section are correctly pointing downwards and to the right because the light source is located above and to the left.
• Layers – The “Subscribe Now” section of the page is layered on top of the intersection between the header and body, effectively giving the illusion that it’s floating above the page, while tying the header and body together. The squares in the background also appear layered because they have varying levels of lightness and darkness, creating the illusion that some of the squares are farther back in space, while others appear closer in space.

Blog.Spoongraphics.co.uk

• Light Source – The light source is positioned centrally on top.
• Gradations – The header uses an exaggerated gradation which moves from light to dark and creates the illusion of a slightly curved surface.
• Shadows – Plenty of shadows are used in this design, including a drop shadow from the paper airplane, the post-it note logo, and the shadow casted onto the body from the header. This design also has a faint shadow behind the body of the page, giving the impression that it’s raised slightly above the background texture.
• Textures – This design uses textures for every part of the page, including the header, the post-it-note, and the body.
• Layers – This design uses two major layers. The back layer contains the textured header and body, while the front layer consists of the header elements.

Image Credits

• Crepuscular ray sunset
• Woman Picking a Strawberry
• Schatten
• Large Grunge Textures
• Depth Of Field
• Article Main Image: Shadow Puppet