Table of Contents<\/h4>\n\n\n\n- What Is Skeuomorphism?<\/a><\/li>
- The History of Skeuomorphism<\/a><\/li>
- Common Criticisms and Drawbacks of Skeuomorphism in UX Design<\/a><\/li>
- Benefits and Uses of Skeuomorphic Design Today<\/a><\/li>
- Examples of Skeuomorphism in UX Design<\/a><\/li>
- Is Skeuomorphism Still Relevant?<\/a><\/li>
- Skeuomorphism: Best practices for UX design<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n
What Is Skeuomorphism?<\/h2>\n\n\n\n
Skeuomorphism is a design technique in which UI elements look and sometimes act like their real-world counterparts. In some cases, the skeuomorph object is one we no longer use.<\/p>\n\n\n\n
The term \u201cskeuomorph\u201d is derived from Greek: <\/p>\n\n\n\n
skeuos (\u03c3\u03ba\u03b5\u1fe6\u03bf\u03c2<\/em>) = container or tool<\/p>\n\n\n\nmorph\u1e17 (\u03bc\u03bf\u03c1\u03c6\u03ae<\/em>) = shape<\/p>\n\n\n\nIt was invented by Dr. Henry Colley March in 1889. Originally, a skeuomorph referred to a physical object that had ornamental designs or features that were no longer relevant or necessary. Like a clay pot that had shapes carved into it to make it look like a woven basket.<\/p>\n\n\n\n
A good example of a skeuomorph that we\u2019re all familiar with today is Burger King<\/a>\u2019s Impossible Whopper: <\/p>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2021\/11\/1-burger-king-impossible-whopper-skeuomorph.png\")
<\/figure>\n\n\n\nConsumers are all familiar with what a beef patty looks like \u2014 especially one of Burger King\u2019s flame-grilled patties. The Impossible patty, despite not containing any meat, looks exactly like a beef patty. <\/p>\n\n\n\n
Why do Impossible and\/or Burger King do this? Part of the reason why skeuomorphs are useful is that the familiarity in design makes it easy for people to transition from the old way of doing things to the new way. <\/p>\n\n\n\n
Skeuomorphs can also be useful for nostalgia reasons. For instance, many camera phones still make a \u201cclick\u201d noise when someone snaps a picture, despite there being no need for that sound.<\/p>\n\n\n\n
Skeuomorphs have also played a role in digital design over the years. While they\u2019re not as prevalent today, you can still catch glimpses of them from time to time. <\/p>\n\n\n\n
For example, the Trash icon found in the Mac dock is a skeuomorph: <\/p>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2021\/11\/2-mac-desktop-icons-skeuomorphism.png\")
<\/figure>\n\n\n\nMost of the other icons are flat and look more like digital logos than physical objects. This is the biggest distinction between skeuomorphism and other digital design trends<\/a> and techniques. <\/p>\n\n\n\nThe History of Skeuomorphism<\/h2>\n\n\n\n
When and where exactly have we used skeuomorphism in UX design? Let\u2019s take a look: <\/p>\n\n\n\n
The First Wave<\/h3>\n\n\n\n
In the early days of software development, skeuomorphism played an important role in onboarding users to a new way of working. <\/p>\n\n\n\n
Take Microsoft\u2019s suite of applications<\/a>. It wasn\u2019t necessarily the act of writing, performing calculations or creating presentations digitally<\/em> that created an obstacle for consumers, professionals and students. <\/p>\n\n\n\nIt was the other functions they had to think about that weren\u2019t really relevant before. Like having to \u201cSave\u201d their work, \u201cCut\u201d text or to \u201cPaint\u201d a format. <\/p>\n\n\n\n
While this video<\/a> depicts what the Microsoft Word toolbar looks like today, we still see remnants of Microsoft\u2019s skeuomorphic icons of the past: <\/p>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2021\/11\/3-microsoft-word-toolbar-icons.png\")
<\/figure>\n\n\n\nMicrosoft didn\u2019t use unrecognizable icons for these main functions because they would\u2019ve only worsened the users\u2019 learning curve. Instead, it took real-world objects that users were familiar with (e.g. the floppy disc for \u201cSave\u201d, scissors for \u201cCut\u201d and paintbrush for \u201cFormat Painter\u201d) and turned them into action buttons. <\/p>\n\n\n\n
The Second Wave<\/h3>\n\n\n\n
The next time skeuomorphism made a big splash was in the late 2000s and early 2010s. This was around the time when the mobile touchscreen rose to prominence and designers had a need for easing users\u2019 transition from old to new. <\/p>\n\n\n\n
Apple<\/a> was largely responsible for the rise of skeuomorphism this time around. <\/p>\n\n\n\nBack in 2010, this is what the Apple home screen looked like: <\/p>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2021\/11\/4-apple-device-from-2010.png\")
<\/figure>\n\n\n\nFor starters, the app icons looked like clickable buttons sticking out from the background. Secondly, many of the app icon designs were skeuomorphic in nature. For example:<\/p>\n\n\n\n
- Camera<\/strong> used a picture of a camera\u2019s lens<\/li>
- YouTube<\/strong> had a graphic of an old TV<\/li>
- Notes<\/strong> was a yellow legal notepad<\/li><\/ul>\n\n\n\n
While they weren\u2019t the most exciting or creative of designs, these skeuomorphic icons made the apps and, more importantly, their purposes instantly recognizable to users. <\/p>\n\n\n\n
Apple wasn\u2019t the only company using skeuomorphism in UX design. Nor was it only present on smartphone screens. Apps and websites alike adopted skeuomorphism. <\/p>\n\n\n\n
Back in 2014, Artifact Coffee<\/a>\u2019s website used a popular form of skeuomorphism: <\/p>\n\n\n\n
What Is Skeuomorphism?<\/h2>\n\n\n\n
Skeuomorphism is a design technique in which UI elements look and sometimes act like their real-world counterparts. In some cases, the skeuomorph object is one we no longer use.<\/p>\n\n\n\n
The term \u201cskeuomorph\u201d is derived from Greek: <\/p>\n\n\n\n
skeuos (\u03c3\u03ba\u03b5\u1fe6\u03bf\u03c2<\/em>) = container or tool<\/p>\n\n\n\n morph\u1e17 (\u03bc\u03bf\u03c1\u03c6\u03ae<\/em>) = shape<\/p>\n\n\n\n It was invented by Dr. Henry Colley March in 1889. Originally, a skeuomorph referred to a physical object that had ornamental designs or features that were no longer relevant or necessary. Like a clay pot that had shapes carved into it to make it look like a woven basket.<\/p>\n\n\n\n A good example of a skeuomorph that we\u2019re all familiar with today is Burger King<\/a>\u2019s Impossible Whopper: <\/p>\n\n\n\n Consumers are all familiar with what a beef patty looks like \u2014 especially one of Burger King\u2019s flame-grilled patties. The Impossible patty, despite not containing any meat, looks exactly like a beef patty. <\/p>\n\n\n\n Why do Impossible and\/or Burger King do this? Part of the reason why skeuomorphs are useful is that the familiarity in design makes it easy for people to transition from the old way of doing things to the new way. <\/p>\n\n\n\n Skeuomorphs can also be useful for nostalgia reasons. For instance, many camera phones still make a \u201cclick\u201d noise when someone snaps a picture, despite there being no need for that sound.<\/p>\n\n\n\n Skeuomorphs have also played a role in digital design over the years. While they\u2019re not as prevalent today, you can still catch glimpses of them from time to time. <\/p>\n\n\n\n For example, the Trash icon found in the Mac dock is a skeuomorph: <\/p>\n\n\n\n Most of the other icons are flat and look more like digital logos than physical objects. This is the biggest distinction between skeuomorphism and other digital design trends<\/a> and techniques. <\/p>\n\n\n\n When and where exactly have we used skeuomorphism in UX design? Let\u2019s take a look: <\/p>\n\n\n\n In the early days of software development, skeuomorphism played an important role in onboarding users to a new way of working. <\/p>\n\n\n\n Take Microsoft\u2019s suite of applications<\/a>. It wasn\u2019t necessarily the act of writing, performing calculations or creating presentations digitally<\/em> that created an obstacle for consumers, professionals and students. <\/p>\n\n\n\n It was the other functions they had to think about that weren\u2019t really relevant before. Like having to \u201cSave\u201d their work, \u201cCut\u201d text or to \u201cPaint\u201d a format. <\/p>\n\n\n\n While this video<\/a> depicts what the Microsoft Word toolbar looks like today, we still see remnants of Microsoft\u2019s skeuomorphic icons of the past: <\/p>\n\n\n\n Microsoft didn\u2019t use unrecognizable icons for these main functions because they would\u2019ve only worsened the users\u2019 learning curve. Instead, it took real-world objects that users were familiar with (e.g. the floppy disc for \u201cSave\u201d, scissors for \u201cCut\u201d and paintbrush for \u201cFormat Painter\u201d) and turned them into action buttons. <\/p>\n\n\n\n The next time skeuomorphism made a big splash was in the late 2000s and early 2010s. This was around the time when the mobile touchscreen rose to prominence and designers had a need for easing users\u2019 transition from old to new. <\/p>\n\n\n\n Apple<\/a> was largely responsible for the rise of skeuomorphism this time around. <\/p>\n\n\n\n Back in 2010, this is what the Apple home screen looked like: <\/p>\n\n\n\n For starters, the app icons looked like clickable buttons sticking out from the background. Secondly, many of the app icon designs were skeuomorphic in nature. For example:<\/p>\n\n\n\n While they weren\u2019t the most exciting or creative of designs, these skeuomorphic icons made the apps and, more importantly, their purposes instantly recognizable to users. <\/p>\n\n\n\n Apple wasn\u2019t the only company using skeuomorphism in UX design. Nor was it only present on smartphone screens. Apps and websites alike adopted skeuomorphism. <\/p>\n\n\n\n Back in 2014, Artifact Coffee<\/a>\u2019s website used a popular form of skeuomorphism: <\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\nThe History of Skeuomorphism<\/h2>\n\n\n\n
The First Wave<\/h3>\n\n\n\n
<\/figure>\n\n\n\nThe Second Wave<\/h3>\n\n\n\n
<\/figure>\n\n\n\n