Life's easy with Medialoot.

Unlimited access for only $14/mo.

Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know

Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know

This article looks at some of the most notable examples of the style that Apple is making popular on the iPad in iOS, and weighs up the pros and cons. Is skeuomorphism the future of interface design?

skeu·o·morph [skyoo-uh-mawrf]

noun

iOS, iPad and Skeuomorph Interface DesignA derivative object that retains ornamental design cues to a structure that was necessary in the original, even when not functionally necessary.

In terms of user interface, this means applications that are designed to have elements of them that look or behave like their real-world counter-parts. For example turning a digital page to resemble the experience of reading a physical book.

It is a style that Apple have been been utilizing for a long time, but lately seem to be pushing very hard. In particular on the iPad, which is a veritable smorgasbord of skeuomorphism.

Skeuomorphic Design In Action

Here is a round-up of what we think are some of best, most interesting or controversial examples of skeuomorphic UI in action. They are sourced from a variety of platforms, including desktop and iOS apps.

Apple iCal

This is without a doubt the hot topic at the moment when skeuomorphic design is being discussed or debated. With the release of OS X Lion, Apple decided to bring the look and feel of Calendar for the iPad to it’s desktop counter-part iCal.

Some people love it, and others hate it. But the interesting thing about this example is that it used to be different. So unlike with most designs, we actually have the simple, clean version to directly compare it to.

Propellerhead Reason

Reason 1.0 was released in 2000, and unlike most existing DAW (Digital Audio Workstations) at the time, it featured a heavily skeuomorphic interface. Not just the dials and sliders on instruments, but the whole interface emulated a hardware rack and could even be flipped over to play with the virtual cabling.

76 Synthesizer

76 Synthesizer isn’t the first app to appear on the iPad that mimics the look of classic synthesizers and other instruments. Garageband from Apple, for example does it’s fair bit of that too. But we chose 76 Synthesizer because it is arguably the prettiest app out there doing it right now.

76 Synthesizer is a joy to use, and it just wouldn’t be same without it’s realistic, textured interface. It could be argued that this is because it’s not strictly a productivity app, so a big part of it’s appeal is in it's immersiveness, and the experience of using it.

iBooks

iBooks for iOS simulates a lot of the elements of reading physical books, from the wooden bookshelf that all of your titles appear sit on, to the action of turning pages, and being able to see what’s on the next page gradually before you’ve actually completed the action, just like real books.

Apple were careful not to compromise on usability in iBooks, by allowing you to simply tap the edge of a page to turn it, rather than requiring the swiping action every time, it actually made the experience easier than turning a real page. Which is very important, especially on the iPhone version when it could potentially happen 100’s or 1000’s of times per read.

Calculator

The Calculator app for Mac and many other calculator apps, have all decided to emulate the layout of real, physical calculators. 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 some kind of keyboard for inputing numbers. 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.

Dashboard

The OS X dashboard and it’s widgets are intended to provide the user with information quickly and easily, much like glancing down at the dashboard of your car whilst driving. So it’s understandable to see that the OS X dashboard is ripe with skeuomorphic designs.

Widgets resembling real world objects allows us to instantly recognize their purpose, and differentiate them from each other. We can quickly associate the yellow square as a sticky for jotting down notes, and the analogue clock for the reading the time.

The Good Points

Here is a list of what we consider to be the skeuomorphic style’s main selling points. They include the benefits of using the style, and the improvements it can make for the user experience.

  • Skeuomorphic interfaces feel instantly familiarUsers like the feeling of familiarity when they see a new interface. Imagine sitting in the cockpit of a plane for the first time, and trying to fly it. You probably wouldn't have much luck, but trained pilots can fly different types of plane because they are familiar with the controls.

  • Visually rich and engagingWhen compared to a minimalist design, there are many more visual cues and treats for the eye in skeuomorphic design, and that can make for a very engaging user experience.
  • Demonstrates attention to detailA well executed skeuomorphic interface, takes time and effort. And the end result usually conveys that, by the attention to detail gone into making elements look realistic, and tactile.
  • Designers love any excuse to use texturesThere’s no shame in it, and most designers will admit that they love any chance to use textures! Unless we’re going for a minimalistic or clean look of course. There are simply very few greater satisfactions than applying a subtle leather texture to interface elements or adding 1-2% of noise to the background layer.

The Bad Points

And to balance things out, here are the drawbacks to the skeuomorphic style. The problems that can arise when using the style incorrectly or inappropriately, and the negative effects that can have on the user experience.

  • Skeuomorphic interfaces sometimes hinder usabilitySometimes, doing things the fun skeuomorphic way isn't always the most efficient. For example an app might require a 3 or 4 finger gesture for something that could have been achieved with a single tap.
  • Shows an unwillingness to move on or innovateInsisting on keeping things familiar in designs can often slow down innovation.
    Remember, Apple's tagline used to be "Think Different".
  • Can result in poor use of spaceSkeuomorphic designs that have superfluous images or decoration are basically wasting screen real-state that for some users, especially mobile users is in short supply.
  • Has the potential to look 'dated' soonerJust like in fashion. All user interfaces, no matter how modern and cool they look now, get old and become 'dated'. The problem with skeuomorphic design, is that the more out of the ordinary something looks, the quicker it starts to look old and strange.

The Alternative

Obviously there are lots of alternatives to skeuomorphic design. But in terms of modern user interface design, one style in particular jumps to mind. That is of course Microsoft’s Metro design language.

The Metro Design Principles

The design principles behind Metro are similar to those of the Swiss style and Minimalism. Basically, the content should always be the star of the show, and there shouldn’t be any superfluous graphics, text or effects. The Metro style also favours big interaction areas, rather than small buttons.

Text plays a big part in the Metro design style. It isn’t as some people believe the most important thing (we’ve established that that is the content!) but it should clean, elegant and hierarchical. Text in Metro interfaces usually utilizes size to differentiate importance.

One thing Metro definitely doesn’t condone is skeuomorphism.

"Metro is our design language. We call it metro because it is modern and clean. It is fast and in motion. It's about content and typography. And it's entirely authentic."Microsoft

Windows 8

Microsoft’s upcoming Windows release has been announced, and we can see from the consumer previews that it is heavily adopting the Metro design language.

Windows 8 is designed for both touch interaction on tablets, and phones and mouse interaction on desktops and laptops. Although the default setting is the Metro design view that can be seen in the screenshot to the right, Windows 8 will also feature the classic desktop view that current and previous versions of Windows use.

Your Thoughts & Experiences

Thanks for reading, as always we’d love to hear your thoughts! Where do you stand on the skeuomorphic front, do you love the attention to detail, familiarity, and visual treats of a good skeuomorphic design? Or do you agree with the Metro design language, and believe that content should be the focus, and eye-candy is completely unnecessary?


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    Damian Rees

    Damian Rees

    Wow, great article. There’s such an immediate pick up and use quality to some of these interfaces. I do wonder if the initial intuitiveness will fade with use of time, and to a frequent user may become more of a hindrance.

    Mar 15, 2012 at 6:25 am
  • Reply »
    Tony Thomas

    Tony Thomas

    That’s an interesting point Damian, I use some of the interfaces mentioned here on a daily basis, but not for “mission critical” stuff, so I haven’t noticed any hindrance. I think if professional apps such as Photoshop adopted a skeuomorphic interface it would definitely start to bother me eventually.

    Mar 15, 2012 at 6:50 am
  • Reply »
    Sequoia

    Sequoia

    Beautiful post layout & design.

    Mar 15, 2012 at 11:07 am
  • Reply »
    Tony Thomas

    Tony Thomas

    Thanks Sequoia :)

    Mar 15, 2012 at 1:45 pm
  • Reply »
    erwin schober

    erwin schober

    though i think it can be very useful to easily understand an interface (like with the propellerhead interface for audio devices), i find this most often pretty annoying usability-vise. i don’t need to plug a virtual cable into a virtual mixing desk or flip a page in a virtual book..

    Mar 15, 2012 at 4:35 pm
  • Reply »
    GWD

    GWD

    damn! cool post design. Really really liking it… super easy to read..

    Mar 15, 2012 at 8:04 pm
  • Reply »
    Tony Thomas

    Tony Thomas

    Thanks GWD :)

    @erwin schober: I definitely see your point. I can handle the page flipping thing in iBooks, even enjoy it. But when it’s your time and money on the line, messing about with virtual cables is unnecessary. Logic Pro combines a clean, uniform UI for the arrangement and production, with the realistic interfaces just for instruments and some third party plug-ins.

    Mar 16, 2012 at 6:04 am
  • Reply »
    erwin schober

    erwin schober

    @tony thomas: i totally aggree 8) thanks for this post btw!

    Mar 16, 2012 at 7:00 am
  • Reply »
    Matheus

    Matheus

    I miss FW tutorials :(

    Mar 20, 2012 at 3:37 am
  • Reply »
    Yza

    Yza

    Hey, nice article. I don’t know what’s wrong with me, but from the designer’s point of view - I like this skeuomorphic design somehow (when it’s done right). The universal goal of every tool/app should be to provide clarity (every useful information is right on the screen or one click/touch away), minimum action steps to achieve desired goal ... and pleasure of using - it’s aesthetic . Those bad points named in the article are not only dangers of skeuomorphicism - it could also relate to minimalist or any kind of design in general. And I don’t see anything wrong with your examples like iBooks. There’s control variety for better usability. On iPad (or when anything runs in fullscreen) there’s not even problem with design coherence - when everything works great within the app. Graphics trends are changing every few years, but the good (well executed & polished) design remains ...

    Mar 20, 2012 at 3:55 am
  • Reply »
    Michael Junge

    Michael Junge

    Thank you for a great article. To the list of Bad Points I’d add Risk of Bad Taste :-) What I mean is that with a skeuomorphic design, as opposed to a more abstract or neutral design, you risk loosing clients/users to what they might think is an ugly or wrong design for the object it associates to in real life, which is clear in the love/hate case of Apple’s iCal an Address Book. I quickly had the leather look removed on my mac, allthough I never tamper with theese things. The leather look with the torn off paper edges was just too weird and, to me at least, totally useless. It doesn’t serve a functional or tactile purpose like the design of the synth and the Propellerhead instruments does, and it did not associate well to my real world - I would never choose a light brown leather calendar book in real life either :-)

    The Microsoft Metro design reminds me of Sony’s user interfaces. It’s very interesting to see if it can survive the conservativeness of users.

    Mar 20, 2012 at 7:03 am
  • Reply »
    Tony Thomas

    Tony Thomas

    @Michael Junge: Absolutely, I hadn’t thought of that before but you’re right, I would have definitely gone with a much sleeker looking black leather book if I was really choosing it in a store. Trying to cater to everybody’s tastes could open up a can of worms though, for example if Apple let users customise the appearance of apps too much the UI would end up all inconsistent and reminiscent of MySpace profiles.

    @Matheus: Don’t worry, we haven’t forgotten about the FW tutorials :)

    Mar 20, 2012 at 2:22 pm
  • Reply »
    Pam Hunter

    Pam Hunter

    I believe it is more nostalgia than function.

    Mar 21, 2012 at 3:07 pm
  • Reply »
    Matheus

    Matheus

    Hey Tony, I’m glad FW wasn’t forgotten ;)

    It’s ok to give you a tip for tutorials?
    Cinemagraphs, animations…
    Would be cool to show what FW animations can achieve! ;)

    Mar 21, 2012 at 6:17 pm
  • Reply »
    MCF

    MCF

    “Familiarity” is in the eye of the beholder.

    Apr 19, 2012 at 11:35 am
  • Reply »
    KHGdesigner

    KHGdesigner

    Your pro’s and con’s are right at the forefront of debate in my media design class, which seems to always default to a less is more approach. I think skeuomorphism makes some basic technology more user friendly to the less technically savvy users, who are more apt to use it if it looks and functions in a real life “sim”.

    Apr 19, 2012 at 4:57 pm
  • Reply »
    Video Beagle

    Video Beagle

    Great article…I found the term “skeuomorphic design” on a gizmodo thread, and googled it and found here…I knew the concept, but not the term.

    I generally like the more “realistic” designs.  Delicious Library on the Mac, who’s look has been “borrowed” for a whole bunch of Apple’s iApps, is just fantastic with it. 

    The eye candy appeals, and I remember playing with Reason…possibly back in 2000 in fact, and thinking the cable view was really neat, but I also remember that I found trying to use the “dials” with the mouse counter-intuitive and frustrating. So, the plus and minus right there.

    Apr 25, 2012 at 11:03 am
  • Reply »
    Alfredo

    Alfredo

    Please, please, please don’t use “it’s” when you mean “its”.  This typo reduces your credibility, and this is a real pity.

    Example: Apple decided to bring the look and feel of Calendar for the iPad to it’s desktop counter-part iCal.

    This should be: Apple decided to bring the look and feel of Calendar for the iPad to its desktop counter-part iCal.

    You use “it’s” (a contraction of “it is”) correctly here: It could be argued that this is because it’s not strictly a productivity app.


    Otherwise, you wrote a great article and I really appreciate your contribution very much, indeed.  Thank you.

    May 26, 2012 at 12:25 pm
  • Reply »
    Ronald

    Ronald

    I’ve used a PC for over twenty years and was a die hard to the end. I got an Iphone about a year ago and am scratching my head wondering why I didn’t make the move to Apple sooner (somehting I plan to do in the next year). Everything about it leaves the geek out of the equation which makes using computers easier. I don’t care if a geek thinks I should use his interface that he is familiar with on his terms in his way. I don’t care if he thinks it’s easy. He is most likely forgetting that he has years of experience writing sofware where as I don’t. I care that it’s easy to, intuitive and allows me to get the job done and that’s what Apple has brought to the table with skeuomorphic application and their other software. Real world usage is continues and three dimensional. what skeuomorphic apps do is give you a feeling of continuity and fluidness. Geeks might not care or get it, but the end users who are using the software who aren’t geeks do which is the average user.

    Jun 12, 2012 at 2:26 am
  • Reply »
    Mavamaarten

    Mavamaarten

    * Skeuomorphic interfaces sometimes hinder usability
    * Can result in poor use of space
    * Has the potential to look ‘dated’ sooner

    That’s exactly what I think of Metro, how it’s currently used in Windows 8. 500x500 pixel tiles on a 1980x1020 resolution, you have to be fucking kidding me. That’s an area of like 20 cm², total waste of space. Metro can be very beautiful too, look at the Zune interface, but Metro just tries to make a tablet out of a desktop PC.

    Jun 14, 2012 at 6:25 am
  • Reply »
    Ian Goss

    Ian Goss

    *it’s* and *its* do not have the same meaning.

    Jun 15, 2012 at 10:11 am
  • Reply »
    arvind

    arvind

    I’m sorry, but most of your “selling” points don’t.

    1. “Skeuomorphic interfaces feel instantly familiar”: Wrong. Familiar interfaces feel familiar. It just depends on what you’re accustomed to. Besides, your example doesn’t even meet the definition of skeuomorphism: the pilot getting into the cockpit of a new plane isn’t dealing with something that represents an obsolete technology.

    Further, for someone who’s not used the older technology, a skeuomorphic design is simply obtuse, and hard to understand. Skeuomorphism is a function of the object. Familiarity isn’t.

    2. “Visually rich and engaging”: what if the original was clean and simple? Also, if you can’t make a rich and engaging interface in a new medium, you’re not doing design, you’re doing glorified decoration. You’re the wall painter, not the architect.

    3. “Demonstrates attention to detail” and “Designers love any excuse to use textures” - who, exactly, are these supposed to be selling points for? Do designers not always pay attention to detail? What does it matter if the user sees them doing it or not? That’s not why they’re doing it, is it? And, frankly, what a designer wants to do with the graphic design detail of a particular work should have nothing to do with altering the design’s intent and priorities.

    If you think there’s a necessary tradeoff between ‘eye candy’ and content, you don’t really understand either graphic design, or interface design.

    Jun 15, 2012 at 11:23 am
  • Reply »
    lemel

    lemel

    What about other, non-visual outputs? The shutter sound wav file included in digital cameras and camera apps comes to mind.

    Jun 29, 2012 at 8:25 pm
  • Reply »
    Analía

    Analía

    Great article and nice review! Everything’s a lot easier when the app you’re using reminds you of some other interface you’re familiar with. And HTML5+CSS3 can make it real on the web.

    Jul 18, 2012 at 12:18 pm
  • Reply »
    john

    john

    So basically, take anything interesting or creative and just go with pure functionality. Sometimes people like a little sizzle with their steak you retards.

    Jul 20, 2012 at 2:11 pm
  • Reply »
    qqaazz

    qqaazz

    العاب فلاش http://www.d2ja.com


    العاب بنات http://www.d2ja.com/c1.html


    العاب تلبيس http://www.d2ja.com/c2.html


    العاب طبخ http://www.d2ja.com/c5.html

    Jul 28, 2012 at 11:40 pm
  • Reply »
    digi

    digi

    Amazing post and tips. Thanks Tony for share your experience

    Aug 7, 2012 at 7:02 am
  • Reply »
    Sebhelyesfarku

    Sebhelyesfarku

    This Helvetica Neue Light or whatever is the text font, is illegible.

    Aug 7, 2012 at 12:08 pm
  • Reply »
    Tony Thomas

    Tony Thomas

    I sincerely apologize for the mis-use of “it’s” but come on, I’m only human! It could be worse, atleast I know how to use their/there/they’re correctly, right?

    And as for the debate going on, lighten up :). It is based on my own personal experiences, so I realise it may not be to everybody’s taste.. but it’s only supposed to be a fun informative blog post!

    Aug 8, 2012 at 12:28 pm
  • Reply »
    Craig Gilchrist

    Craig Gilchrist

    I absolutely love the metro design principles but don’t always agree that Microsoft have properly executed them. Usability although slick sometimes means than an over-emphasis on content mean that the UI is often cluttered with text and your attention often s averted for. What’s important.

    Skuomorphic design on the other hand draws your eye straight to what’s important but then often gets in the way of the best user experience.

    This is a great article, perfect balance of pros and cons. A brilliant read.

    Sep 16, 2012 at 5:12 pm
  • Reply »
    istanbul tango

    istanbul tango

    html5 ! wow thanks ! great !

    Tango, Buenos Aires, Arjantin ve Montevideo, Uruguay kökenli bir dans ve müzik türüdür. Dansla beraber gelişen müzik tarzı da aynı adla anılmaktadır.

    Oct 7, 2012 at 7:10 pm
  • Reply »
    istanbul yoga

    istanbul yoga

    Thank you bro ! great html5 !

    İstanbul yogayı akşam olup da yorgunluktan bitkin, ya bir randevuya, yahut da bir yemek davetine gitmek için dışarı çıkamayacağınıza kanaat getirmiş bir halde evinize döndüğünüz vakit kaybettiğinizi sandığınız enerjinizi tekrar kazanmak ihtiyacını duyarsınız, 10 dakika kadar adali yumuşama tatbikatı yapınız.

    Oct 7, 2012 at 7:12 pm
  • Reply »
    istanbul pilates

    istanbul pilates

    istanbul pilates istanbul pilates merkezi

    Oct 12, 2012 at 11:51 am
  • Reply »
    istanbul pilates

    istanbul pilates

    istanbul pilates istanbul pilates merkezi

    Oct 12, 2012 at 11:53 am
  • Reply »
    David RiverRatDoc

    David RiverRatDoc

    Great Article. I forwarded it on Clayton Morris’ thread where he posted the Ouster of Forstall. Main item of contention being Apple does not want to endorse his Paradigm of staying skeumorphic. So this was a great non-biased article to at least let the average reader understand what is this “skewer—doooer—-morpher-thingy?”

    Both thumbs up Guys, and I’ll throw up Two Toes as well to boot. :)

    Oct 29, 2012 at 8:02 pm
  • Reply »
    Petr Machacek

    Petr Machacek

    Well, both, skeumorphic and metro desing have their pro’s and cons. Actually, I use both of them interfaces daily, because I have a Lumia 800 mobile phone and also an iPad. There are things I love about metro design, exemple clarity and visual purity of interface, althought it’s sometimes difficuilt to orientetate in some menus (music and videos). Take iCal for example or iBooks, which look nice, but their usability is more or less restricted due their interface. Also, on mobile device, they sometime run really slow (iBooks). So it’s mostly people’s choice if they want to feel like in their own livingroom or to use minimalistic, yet sometimes a little cold metro.

    Nov 2, 2012 at 6:40 am
  • Reply »
    Paul

    Paul

    Congratulations for your beautiful designs!

    Nov 2, 2012 at 10:41 am
  • Reply »
    Matteo

    Matteo

    “I sincerely apologize for the misuse of “it’s” but come on, I’m only human!”

    @Tony Thomas, how about correcting these mistakes? Being human is exactly what makes you capable of contextualizing words and sentences (among other things), which is something spell-checkers can’t quite do..

    Apart from that, really insightful article!

    Nov 4, 2012 at 11:23 am
  • Reply »
    Ivan Rui

    Ivan Rui

    I just wanted to say: Congratulations! Excellent work in this article. Both, in content and visually.

    Jan 18, 2013 at 9:00 pm
  • Reply »
    Jorge Peña

    Jorge Peña

    I think the metro design language is incredible, it’s easy to undestand and its somehow minimalistic. But sometimes I miss the colors and shapes of a good Skeuomorphic Design.

    Mar 20, 2013 at 9:36 am
  • Reply »
    tom

    tom

    76 Synthesizer isn’t the first app to appear on the iPad that mimics the look of classic synthesizers and other instruments. Garageband from Apple, for example does it’s fair bit of that too. But we chose 76 Synthesizer because it is arguably the prettiest app out there doing it right now.

    Sep 25, 2013 at 1:50 pm
  • Reply »
    Zana

    Zana

    I cant stand the flat design , i prefer skeuomorphism, at least I can tell what is content from what is function. in the iOS 7 i find it hard to navigate and have to refer to iOS 6 references, since I did not know what were buttons and what was diagrams and text. I also find the abstract shapes confusing, it is like learning symbols than relating them to objects of function to what people use on this planet. Its like having to learn a whole new glyph language. It took me a while to figure a large circle and a small circle was not a planet and a moon but an abstract image of a person , a user… In windows 8 I completely got frustrated with anxiety and I felt relieved in not working on the computer with windows 8 installed. its too 2D and flat, and shapes/symbols take a while to understand them., 2D is just to annoying… especially when I see tesseractic shapes in my mind of overlapping fractals and things.

    Feb 19, 2014 at 10:49 pm
  • Reply »
    Julian

    Julian

    I’m with Zana.
    I HATE flat design with a passion. Minimalism isn’t “modern”, it’s been around since cavemen - and its LAZY.
    Of course skeumorphism can go OTT, but shading, rendering, and multiple colours provide depth which is vital to many users. Some people find it incredibly hard to work in a “flat” world.
    ios 7 icons are almost all worse than those in io7 - but non are as bad as the monotone, flat icons at the top right of this page - at best dull, at worst ambiguous.

    Lastly - why the grey text everywhere? Lack of contrast is harder to read.

    Nov 5, 2014 at 1:39 pm
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hey Julian, I agree that it’s a difficult topic because everyone has personal preferences. I personally like realistic looking flat design. We have to remember that flat design is important for speed and responsive sites, but I agree that ULTRA flat sites can be really hard to interpret.

      Nov 6, 2014 at 9:21 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all