By its broadest definition, a skeuomorphic is an object or design that mimics or resembles another object, material, or technique. In the context of digital design and user interface, skeuomorphic design elements are aspects of a design that tap into a user’s historical understanding of physical objects – despite the design features not being necessary to the digital representation.
Perhaps the most simple and famous example of skeuomorph being used in design is the classic telephone icon which often depicts a rotary phone – despite rotary phones being over 20 years out of date.
Another classic example is the trashbin/recycling bin icon used in most operating systems, where the image of a trashbin is used in order to help the user understand an icon’s functionality. It instantly conveys the message that the virtual object carries similar characteristics/functionality to a trashbin.
The Purpose Of Skeuomorphic Design
Skeuomorph design is used to make new interfaces look familiar by tapping into well-established, deeply ingrained habits or historical cultural norms. While this can be extremely useful for conveying functionality to users, well implemented skeuomorph design can also be used to convey important ideas and even feelings.
Proponents of using skeuomorphism in design argue that it makes technology more accessible.
By borrowing design elements from older devices and the physical world, users can more quickly familiarize themselves with newer interfaces.
The telephone icon for example represents a device that is 20 years out of date, yet individuals who have never used an actual rotary phone still recognize the icon as a universal symbol for phone calls. They also serve as powerful cues that can represent abstract ideas that would be otherwise difficult to visually capture.
Here are some of the best examples of skeuomorph design we found on the web:
The startup weekend logo offers a classic example of skeuomorphic design. The lab beaker – while completely irrelevant to the actual creation of a startup – conjures up in the viewer’s mind thoughts of experimentation, creativity, and the mixture of various elements in order to come up with a better whole.
The site design itself can also be loosely classified as skeuomorphic, with the blue background, white clouds and grass representing the classic daydreaming environment we all experienced as children on lazy summer days – even though startup weekend’s events certainly don’t take place in open fields.
The Dropbox.com interface makes use of many classic skeuomorph elements. The logo itself uses an open box to represent the simple “drop and store” aspect of the Dropbox application. The Dropbox interface also makes heavy use of a classic skeuomorph element that has been around since the debut of Windows – the folder. Can you spot the other skeuomorph elements in use here?
The literary bohemian website is a great example of using skeuomorph design not to aid with functionality, but rather to transport you to a particular state of mind. The layout conjures up the atmosphere of a bygone era, an era when people paid with coins, editors wrote with typewriters, and mail was the only way to communicate over distance.
The site is carefully designed to bring you back to an era of simplicity – perhaps an era where each written word truly mattered – an era when a letter was something you spent an evening carefully crafting by a bare bulb, sealed with candle wax, and hand delivered to the mailman, as opposed to a few quickly hammered out jabs on a keyboard and a click of a mouse.
The Bagigia is an iPad case that uses skeuomorphic design to give the product a retro look – in this case, the look of a hot water bottle. The Bagigia.com website itself relies heavily on Skeumorphic design, with the zipper used as a horizontal scroll bar, and leather and stitching used to highlight the navigation menu.
Like the Startup Weekend website, Sproutbox.com uses skeuomorphism to convey an idea to the viewer. In this case, the use of sprouting flowers plays on the understanding that flowers sprout from a seed. A seed planted in fertile ground and carefully watered will sprout into a beautiful, blossoming flower – just like your startup.
Apple is probably the foremost leader in digital design over the past decade. While not strictly a web design example, Apple has been so influential in implementing skeuomorph design into their applications that they deserved a mention in this list of great examples of skeumorph design. The iPod, iPhone, and later the iPad revolutionized the way users interact with their digital entertainment, phones and internet browsing, and many of the iOS’s default applications rely heavily on Skeuomorph design.
Under the guidance of Steve Jobs, Apple has featured skeuomorphic interface elements in many of their groundbreaking designs, including the Notes application, iCal, Newsstand and many more.