picture of wood texture

Skeuomorphism in Web Design

October 7th, 2012 | Articles & Tutorials | Theme Author:

Skeuomorphism, while not the most user-friendly of words, is a popular trend in interface design for both applications and websites. Skeuomorphism refers to using textures to emulate real-world objects such as wood, metal or paper. While skeuomorphism techniques do not add anything in the way of functionality to a user interface, they add an artistic element which is popular among many people. This contrasts vividly with the minimalistic and highly function-orientated designs of many websites. Skeuomorphism in interface design styles has long been popular in Apple products while Microsoft is using the opposite type in the new Metro-style interface in Windows 8 which it describes as “authentically digital.”

While completely superfluous in terms of user-friendliness and functionality, skeuomorphism will always have its place although it is very much a matter of individual taste. Skeuomorphism suits some websites more than others and while it is likely to remain a very popular trend in Web design, it is also highly likely that the practical and minimalistic style of Windows 8 will influence the Web as well.

If you are planning to use skeuomorphism in the design of your website, you should take into account the inherent advantages and disadvantages of this design style and how it differs from other types of designs.

The Advantages

Skeuomorphism is, for the most part, purely a matter of personal taste. A lot of people prefer minimalistic designs while others prefer sites which present the sense of comfort and familiarity conveyed by skeuomorphic designs. The latter is typical of people who are less comfortable working with modern technology. Skeuomorphism is one of the main reasons for the success of Apple’s software and mobile devices. It can make for a more user-friendly and customizable interface. If your website is catering to more casual computer users, skeuomorphic design styles are often highly appreciated.

To many people, skeuomorphic designs evoke certain emotions and reactions whereas minimalistic designs are entirely focussed on functionality and practicality. It allows you to establish a distinct style and theme of your website which simply cannot be done in the same way with standard designs. It has the potential to represent art and creativity instead of appearing plain and soulless, provided it is done in the right way. Skeuomorphism can truly bring a website that has a distinct niche alive.

The Disadvantages

Skeuomorphism certainly has its drawbacks. Microsoft defends the minimalistic design styles it chose for Windows 8 by saying that it minimizes distractions and instead maximizes productivity. For those working in a digital environment, skeuomorphism is not ideal for most people and in applications designed for work and productivity, many people prefer a more straightforward and practical design. The same is also true of websites. An online shop, for example, designed using skeuomorphism is more likely to distract potential buyers from what is important while with a blog offering articles on a particular niche, skeuomorphism is often a more suitable option.

Skeuomorphism is also extremely difficult to apply and while there are many themes and templates available for Web designers, it can be difficult to establish a suitable style for your site. Things can easily go wrong and end up looking out of place, kitschy or just plain messy. Elements such as shadows and light sources are difficult to get right and not getting those right leads to horrible results that will turn many visitors off.

Skeuomorphism is often used excessively to the point at which it completely defeats its original purpose of conveying an artistic and creative impression. Functionality is often sacrificed by Web designers who put too much thought into how their site looks and not enough into how it actually works.

No Comments


  1. Skeuomorphism in Web Design | Design News

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>

Get notified when we release new templates and other free goodies!