Skeuomorphism

Skeuomorphic  Web Design Style

Analysis & Showcase:


 

what is Skeuomorphism?

Skeuomorphic web style is a design trend based on the concept of associative recognition; to make the represented items resemble their real-world counterparts. By utilizing visual elements that remind observers of real life objects, skeuomorphism aims to create a sense of familiarity. To some degree, skeuomorphic style reminds us of Photo-realism web design. Skeuomorph comes from the Greek skeuos (meaning container or tool), and morphê (meaning shape). Wikipedia defines Skeuomorphism as: “an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material”. This style is utilized in many fields (e.g. architecture, ceramics, interior design), and has been applied to material objects since 1890. Examples are copper cladding on a zinc potter, fake wood grain paneling in cars, or wood finish on a plastic object.

 

how Skeuomorphism is applied in web design?

The skeuomorphic design trends in GUI (Graphic User Interface) and web design area have been around for a while. For instance, the icon used on most smartphones’ display to represent the phone function is a skeuomorphic icon. It is designed to look as much like a telephone as feasible. As another example, some websites look like real books; the users can turn over the pages of these websites. Besides, they can even hear the sound of turning pages. Skeuomorphism is in real contrast to flat design.

Apple's products (like iBooks, Calendar and iPad Notes) are concrete examples of using skeuomorphic style in IT industry. There are hundreds of articles out there written about pros and cons of skeuomorphic user interfaces. Regarding Apple, there has been a strong debate over the merits of its extensive use of skeuomorphic designs. It has been argued that Apple has gone too far; meaning that it has advocated this technique at the expense of more screen space than standard. Furthermore, it argues that skeuomorphic interfaces lack creativity and potentially hinder innovation for providing more efficient ways of performing tasks. In 2013, Apple made a shift of preference towards greater simplicity and carried out major redesigns in some of its products.

 

is Skeuomorphic web design good or bad?

So what is the conclusion? Is skeuomorphism a good idea for website design or not? What are good Skeuomorphs? What are bad Skeuomorphs? The fact is: While skeuomorphs have positives, they can also have some drawbacks. When applied genuinely based on the target audience's/consumer's state of mind, skeuomorphism is a good mean in order to effectively create a sense of association. However, if skeuomorphs are used just for the sake of familiarity, it is not okay. Skeuomorphism is a useful tool to facilitate users’ transition into new mediums. We know that web design is not such a new medium anymore. Therefore, skeuomorphs should be applied in web design based on functional reasons rather than familiarity factor.

Furthermore, we know that when a certain web design style becomes very popular, it becomes increasingly overused and misused. When they become just other copies of already overdone skeuomorphic elements, then we are facing a problem; an inappropriate web design. Skeuomorphic web style seems to be heading in this direction. In recent times, we have seen much of skeuomorphic web items; wooden textures, torn-off page edges, stitched ribbons, leather borders, the ruled yellow legal paper, etc. Enough is enough; it is time for more creative designs in this area!

 

 

Ideator

w255-a

 

 

My Pizza Oven

w427-a

 

 

Old Town Spice

w92-a

 

 

Lounge Lizard

w259-a

 

 

Wild Bill's

w271-a

 

 

Dollar Dreadful

w10-a

 

 

G'nosh

w96-a

 

 

Potbelly

w431-a

 

 

Template Monster

w430-a

 

 

East African Bakery

w435-a

 

 

Bagigia

w275-a

 

 

Rosa

w351-a

 

 

Team Fannypack

w270-a

 

 

La Maddalena

w428-a

 

 

M. Burtin

w260-a

 

 

Chris Linden

w227-a

 

 

Eastworks Leather

w433-a

 

 

 

 


   :: Please Note

As we all know, websites are live documents and might be changed over a period of time in different regards. They may change their layout designs, contents, etc., or simply cease to exist (error codes: 404, 403, 401). We do our best to regularly update our presentation on this page regarding these eventual modifications. However, it might happen that we could not keep up with these changes in time. So in case you are the first to notice these inconsistencies, please inform us. We really appreciate your feedback. You can easily contact us via our Contact Form at the very bottom of this page.


 

 


   :: link to us!

If you found some of these articles interesting and useful, please send them to a friend so they can benefit as well. You can easily send them via the email icon at the top of each article. Furthermore, if you happen to have a site similar to ours, you can feel free to link to these editorials from your website.

Quick Contact