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.
Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.
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.
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.
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.
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.
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.
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.
To get the clear idea, Let’s take a look at some examples which using the properties which we described above.