How Physical Thing Goes Digital: Skeuomorphism in Web Design

Current web design situation is characterized by a great amount of trends which are very popular among web users. We’ve already dedicated several articles to design trends in general, this time we would like to speak about skeuomorphism.

To some extent this is a metaphorical presentation of visual elements in all spheres of desing starting from buttons and pockets on your jeans and up to architectural elements. This is a really vast notion and if we wanted to cover each of its’ aspects, this article would turn in a whole novel. We are interested only in web design and UIs realization of skeuomorphism.

The word itself comes from "skeuos" and "morph", which are Greek for "tool" and "shape".

The popularity of this trend comes from its power because it makes a strong positive influence on the user simply because skeuomorphic elements represent in a UI something very familiar for the user.

***

Camera Shutter

The simplest and the closest for everyone example is the click sound that is heard when taking a picture with a digital camera it comes from an audio clip, but the sound originally came from the actual shutter opening and closing.

To the right this is a CCD censor from the point-and-shoot camera, if take of the lens you will see that it comes uncovered, to the right this is a mechanic SLR camera shutter that is the father of the digital camera sound.

***

eBook Reader

The next one recognizable example is the interface of any eBook reader:

This app is designed in the way we can see almost real book shelf with various volumes on it. When clicking on the book-face it opens with a true-to-life animation making an impression of reading a real book. Page flipping also looks like a real paper page; some readers make a sound of rustling paper when the age is flipped. To enhance effect of reading ebook you can buy spray with the smell of a real book, sounds funny but this thing really exists it’s called Smell of Books.

***

Pin Boards

Simple but effective way to make notes and attach them to any part of your screen. No matter where you place it you will find your note easily. Do you remember how Notes app on your smartphone looked five years ago, comparing to what it became it was absolutely unusable!

***

Calculator

The Calculator app for Mac/Windows/Linux and many other calculator apps, emulate the layout of a real physical calculator. Which when you think about it, is a bit of a head-scratcher.

From a usability stand-point, there isn’t actually any reason to emulate a small digital screen, or to have big number buttons on a desktop calculator app. All desktop or laptop computers have some kind of keyboard for the numbers input. And it isn't any easier to click big buttons with a mouse, than use the keyboard. So it can only come down to design for the sake of familiarity.

***

Flip Clock

The so-popular in 50-s flip clock, found its way back to most portables. If you own HTC phone, flip clock if the first thing you see on the screen. Flip clocks are also very popular apps for desktops, what's more you can meet "flips" in the design of some websites.

***

Now let's have a look at some more examples of skeuomorphism, here are several tutorials, free PSDs and apps and online shops with skeuomorphic elements in their designs.

GUI for iPad

***

Safe Lock

***

Braun UI

***

Amplifier Buttons

***

Lemon App

***

Bagigia

***

Pros and Cons

• Skeuomorphic GUIs feel familiar for everyone

Users enjoy the feeling of familiarity when facing a new interface, but its not only the familiarity this is what makes an interface easy to figure out.

• Rich & engaging

When compared to minimalist design, there is a lot more visual cues and treats for the eye in skeuomorphic design, and that can make for a very engaging user experience.

• Shows attention to detail

It takes much time and effort to create a well executed skeuomorphic interface. The end result usually strikes with outstanding attention to details what makes them look realistic, and tactile.

***

• Shows an unwillingness to move on or innovate

Insisting on keeping things familiar in designs can often slow down innovation. Remember, Apple's tagline used to be "Think Different".

• Poor use of space, sometimes

Skeuomorphic designs that have superfluous images or decoration are basically wasting screen real-state that for some users, especially mobile users is in short supply.

• There is the possibility that your creation will have an outdated look

Skeuomorphism is like the fashion. All UIs, no matter how modern and cool they look now, get old and outdated. The problem with this design, is that the more out of the ordinary something looks, the quicker it starts to look old and strange.

***

Important to remember! Inspiration for skeuomorphism isn't limited with your computer screen. Take an opportunity to walk around and get inspiration from the world you live in.