{"id":69923,"date":"2017-02-21T22:19:00","date_gmt":"2017-02-21T11:19:00","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=1653"},"modified":"2025-11-11T17:24:09","modified_gmt":"2025-11-11T06:24:09","slug":"what-is-skeuomorphism","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/what-is-skeuomorphism","title":{"rendered":"What Is Skeuomorphism and Why It Might Be Over"},"content":{"rendered":"\n<p>Not too long ago, skeuomorphism was everywhere. Loved and useful at first, it quickly became one of the most hated trends in the design industry. What was once a means to ease the user\u2019s transition into the world of computers, became almost an insult to good design.<\/p>\n\n\n\n<p>But, how did skeuomorphism come to be in the first place? And what changed people\u2019s minds about it?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is skeuomorphism?<\/strong><\/h2>\n\n\n\n<section class=\"elements-gallery\">\n    <div class=\"elements-gallery__slider\">\n        <div class=\"slider\">\n            <div class=\"slider__items swiper-wrapper\">\n                                    <div class=\"slider__item swiper-slide\">\n                        <img decoding=\"async\"\n                            class=\"slider__image\"\n                            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/a7f8286f-430e-4c0d-85e2-ae336c785f52?format=auto&#038;cf_fit=contain&#038;w=900&#038;s=f00eb2ec190f8607401215deb6a3b22560a7ccf4f146b1420e2c3891099ebff7\"\n                            alt=\"Neumorphic UI Kit\"\n                        >\n                    <\/div>\n                            <\/div>\n\n            <div class=\"slider__controls\">\n                <a class=\"slider__control slider__control--prev\" href=\"#\">\n                    &lt;\n                <\/a>\n                <a class=\"slider__control slider__control--next\" href=\"#\">\n                    &gt;\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"elements-gallery__info\">\n        <div class=\"elements-gallery__info-left\">\n            <h3 class=\"elements-gallery__title\">\n                Neumorphic UI Kit            <\/h3>\n\n            <div class=\"elements-gallery__meta\">\n                By\n                <a\n                    class=\"elements-gallery__meta-link elements-gallery__meta-link--author\"\n                    href=\"https:\/\/elements.envato.com\/user\/cerpow\"\n                    target=\"_blank\"\n                >\n                    cerpow                <\/a>\n                in\n                <a\n                    class=\"elements-gallery__meta-link elements-gallery__meta-link--category\"\n                    href=\"https:\/\/elements.envato.com\/graphic-templates\"\n                    target=\"_blank\"\n                >\n                    Graphic Templates                <\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"elements-gallery__info-right\">\n            <a\n                class=\"elements-gallery__more\"\n                href=\"https:\/\/elements.envato.com\/neumorphic-ui-kit-MGQ8CA3\"\n                target=\"_blank\"\n            >\n                View more\n            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<section class=\"elements-product-embed elements-product-embed--grid elements-product-embed--has-info\">\n            <div class=\"elements-product-embed__info\">\n                            <div class=\"elements-product-embed__info-left\">\n                    <h3 class=\"elements-product-embed__title\">\n                        Unlimited creative assets. Access to AI tools.                    <\/h3>\n                <\/div>\n            \n                            <div class=\"elements-product-embed__info-right\">\n                    <a\n                        class=\"elements-product-embed__more\"\n                        href=\"https:\/\/elements.envato.com\/\"\n                        target=\"_blank\"\n                    >View all<\/a>\n                <\/div>\n                    <\/div>\n    \n    <div class=\"elements-product-embed__grid-wrap\">\n            <div class=\"elements-product-embed__item\">\n    <a\n        class=\"elements-product-embed__link\"\n        href=\"https:\/\/elements.envato.com\/neumorphic-ui-kit-MGQ8CA3\"\n        target=\"_blank\"\n    ><\/a>\n\n    <div class=\"elements-product-embed__meta\">\n        <h3 class=\"elements-product-embed__meta-item elements-product-embed__meta-item--title\">\n            Neumorphic UI Kit        <\/h3>\n        <span class=\"elements-product-embed__meta-item elements-product-embed__meta-item--author\">\n            cerpow        <\/span>\n    <\/div>\n\n            <img decoding=\"async\"\n            class=\"elements-product-embed__image\"\n            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/a7f8286f-430e-4c0d-85e2-ae336c785f52?format=auto&#038;cf_fit=contain&#038;w=900&#038;s=f00eb2ec190f8607401215deb6a3b22560a7ccf4f146b1420e2c3891099ebff7\"\n            alt=\"Neumorphic UI Kit\"\n        >\n    <\/div>\n    <\/div>\n<\/section>\n\n\n\n<p>Skeuomorphism is a design trend where an object in software tries to emulate the look and feel of a real object. The most iconic representations of skeuomorph objects are the trash can and the save icon which looks like a floppy disk.<\/p>\n\n\n\n<p>The history of skeuomorph design can be traced back to Steve Jobs who was a big advocate of computer interfaces using skeuomorphic design. Think back to the earlier versions of iOS software, with the leather binding in the Calendar app and the Contacts app which looked like a physical address book.<\/p>\n\n\n\n<p>But skeuomorphic design isn\u2019t strictly visual. It can also be auditory, like the clicking sound in the Camera app or the swipe gestures on tablets and iPads.<\/p>\n\n\n\n<p>This design trend was very popular in the early 2000s and it was used everywhere; from computer interfaces to websites and UI kits. Drop shadows, gradients, and bevels ruled the design world, until they disappeared almost overnight.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Why Was Skeuomorphism Useful?<\/strong><\/h3>\n\n\n\n<section class=\"elements-gallery\">\n    <div class=\"elements-gallery__slider\">\n        <div class=\"slider\">\n            <div class=\"slider__items swiper-wrapper\">\n                                    <div class=\"slider__item swiper-slide\">\n                        <img decoding=\"async\"\n                            class=\"slider__image\"\n                            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/45a36145-51fd-455f-b93c-2489811326a9?format=auto&#038;cf_fit=contain&#038;w=900&#038;s=d21d45a906c2a4488474c09eeebaf55583eac3ceea8ae0b564c31fbc205d4456\"\n                            alt=\"Finance Wallet Mobile App UI Kit Template\"\n                        >\n                    <\/div>\n                            <\/div>\n\n            <div class=\"slider__controls\">\n                <a class=\"slider__control slider__control--prev\" href=\"#\">\n                    &lt;\n                <\/a>\n                <a class=\"slider__control slider__control--next\" href=\"#\">\n                    &gt;\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"elements-gallery__info\">\n        <div class=\"elements-gallery__info-left\">\n            <h3 class=\"elements-gallery__title\">\n                Finance Wallet Mobile App UI Kit Template            <\/h3>\n\n            <div class=\"elements-gallery__meta\">\n                By\n                <a\n                    class=\"elements-gallery__meta-link elements-gallery__meta-link--author\"\n                    href=\"https:\/\/elements.envato.com\/user\/panoplystore\"\n                    target=\"_blank\"\n                >\n                    panoplystore                <\/a>\n                in\n                <a\n                    class=\"elements-gallery__meta-link elements-gallery__meta-link--category\"\n                    href=\"https:\/\/elements.envato.com\/graphic-templates\"\n                    target=\"_blank\"\n                >\n                    Graphic Templates                <\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"elements-gallery__info-right\">\n            <a\n                class=\"elements-gallery__more\"\n                href=\"https:\/\/elements.envato.com\/finance-wallet-mobile-app-ui-kit-template-S9QYKUA\"\n                target=\"_blank\"\n            >\n                View more\n            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<section class=\"elements-product-embed elements-product-embed--grid elements-product-embed--has-info\">\n            <div class=\"elements-product-embed__info\">\n                            <div class=\"elements-product-embed__info-left\">\n                    <h3 class=\"elements-product-embed__title\">\n                        Unlimited creative assets. Access to AI tools.                    <\/h3>\n                <\/div>\n            \n                            <div class=\"elements-product-embed__info-right\">\n                    <a\n                        class=\"elements-product-embed__more\"\n                        href=\"https:\/\/elements.envato.com\/\"\n                        target=\"_blank\"\n                    >View all<\/a>\n                <\/div>\n                    <\/div>\n    \n    <div class=\"elements-product-embed__grid-wrap\">\n            <div class=\"elements-product-embed__item\">\n    <a\n        class=\"elements-product-embed__link\"\n        href=\"https:\/\/elements.envato.com\/finance-wallet-mobile-app-ui-kit-template-S9QYKUA\"\n        target=\"_blank\"\n    ><\/a>\n\n    <div class=\"elements-product-embed__meta\">\n        <h3 class=\"elements-product-embed__meta-item elements-product-embed__meta-item--title\">\n            Finance Wallet Mobile App UI Kit Template        <\/h3>\n        <span class=\"elements-product-embed__meta-item elements-product-embed__meta-item--author\">\n            panoplystore        <\/span>\n    <\/div>\n\n            <img decoding=\"async\"\n            class=\"elements-product-embed__image\"\n            src=\"https:\/\/elements-resized.envatousercontent.com\/elements-cover-images\/45a36145-51fd-455f-b93c-2489811326a9?format=auto&#038;cf_fit=contain&#038;w=900&#038;s=d21d45a906c2a4488474c09eeebaf55583eac3ceea8ae0b564c31fbc205d4456\"\n            alt=\"Finance Wallet Mobile App UI Kit Template\"\n        >\n    <\/div>\n    <\/div>\n<\/section>\n\n\n\n<p>Skeuomorphism proved itself useful in the early days of computer interfaces. For many, it eased the transition to using a computer on a daily basis. It was a lot easier to grasp the concept of deleting a file if you simply had to drag it to the trash bin. In a similar way, files placed in folders that look like actual folders was easier to understand. It made different interfaces familiar.<\/p>\n\n\n\n<p>And for an older generation, it makes sense. There is no big learning curve to conquer and there is no reason for them to feel intimidated by computers, phones, and tablets. If apps look familiar to everyday objects, they are a lot more intuitive to use.<\/p>\n\n\n\n<p>In a nutshell, skeuomorphism aimed to get users familiar with the way computer software works. But, is it necessary nowadays when those same people are now thoroughly familiar with the concepts? And what about the new generation who practically grew up with computers and tablets?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The Demise of Skeuomorphism<\/strong><\/h3>\n\n\n\n<p>As users became familiar with the general concepts of working on a computer and interacting with the software, the need for a visual representation diminished. Drop shadows and gradients were phased out in favor of a flat design.<\/p>\n\n\n\n<p>This was most obvious when Microsoft launched Windows 8 which paved the way to fresh and flat interface look. Their Metro style introduced brightly colored tiles that show information in both written and graphical format. The user experience wasn\u2019t sacrificed as those tiles have the ability to deal with more complexity in the interface. This trend carried on to Windows 10.<\/p>\n\n\n\n<p>Even though the usability wasn\u2019t sacrificed, the Metro design received its fair share of outcry and initial rejection.<\/p>\n\n\n\n<p>Despite this, a year later, Apple ditched the skeuomorph design and did away with the faux stitched leather and notepad paper look. Their minimalist approach was, on the other hand, a welcome change and it was hailed as a work of a genius.<\/p>\n\n\n\n<p>And just like that, the design world saw the rise of a new trend. Even Google adopted the change and started using their material design, both in their web apps and Android\u2019s interface.<\/p>\n\n\n\n<p>Flat design wants the user interface to be free from clutter. Instead of gradients, bevels, and drop shadows, the GUI is dominated by bright colors and icons that are less realistic and often reduced to simple lines. It\u2019s about visual clarity and simplicity.<\/p>\n\n\n\n<p>In smart devices, skeuomorphism can often get in the way whereas flat design allows us to open the app, do what we need to with it, exit the app, and move on. The whole experience of using the app needs to be smooth and free of distractions. That\u2019s where flat design shines.<\/p>\n\n\n\n<p>When it comes to websites, there is another point in favor of flat design. Given the simplicity of icons and images, the coding behind it is simpler, which means websites using flat design load faster. This allows us to find the information we want quickly and perform actions without waiting for an eternity.<\/p>\n\n\n\n<p>Nowadays, we\u2019re used to clean interfaces and minimalistic icons. White backgrounds, easy to read fonts, and simple lines make it easier to focus on the task at hand and get the job done.<\/p>\n\n\n\n<p>The age of transition is long behind us. There is no need to get used to a new interface, a new way of doing things. The digital era has become the norm and, to most of us, it\u2019s almost unimaginable to use an actual address book or a paper calendar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Is Skeuomorphism Really Dead?<\/strong><\/h3>\n\n\n\n<p>On the whole, the future of skeuomorphism is grim. In fact, <a href=\"https:\/\/www.forbes.com\/sites\/timworstall\/2013\/09\/19\/apples-ios7-well-it-was-time-for-skeuomorphism-to-die\/#422fd0c0444b\" target=\"_blank\" rel=\"noopener\">it has even been declared dead<\/a>. But, just when everyone started getting used to the new flat trend, things changed yet again.<\/p>\n\n\n\n<p>The smartwatch arrived. Traditionally, the watch as we know it, has nothing to do with computing. You could even argue that there is a certain level of disrespect for digital watches. Even though they perform the same task as analog watches, passionate watch lovers will argue that digital watches just aren\u2019t as pretty. An analog watch makes a great fashion statement. I mean, have you ever seen a digital Rolex?<\/p>\n\n\n\n<p>When you take that into consideration, it\u2019s no wonder that smartwatch manufacturers silently turned to skeuomorphism. How else are they supposed to convince people to use the smartwatch instead of their beloved analog piece?<\/p>\n\n\n\n<p>Once more, the gap between familiar and new had to be bridged. The faces of smartwatches are designed to mimic the familiar analog watch experience. The smartwatch itself is in all actuality a mini computer that you wear on your wrist. It makes sense to use the same proven principle as before to get users on board, allowing them to familiarize themselves with the new technology.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Will Skeuomorphism Ever return?<\/strong><\/h3>\n\n\n\n<p>The design world changes pretty often. New trends emerge and old ones die out. Some are never to be seen again, yet some resurface with new vigor.<\/p>\n\n\n\n<p>With the rise of new technology in smart watches, skeuomorphism is seeing a brief return to its former glory.<\/p>\n\n\n\n<p>But, how long will it be until we get used to the smartwatch and the transition period ends? Does that mean that every time a new technology arises, we will inevitably default to skeuomorphism?<\/p>\n\n\n\n<p>Regardless of how you may feel about skeuomorphism, one thing is certain: it can be useful when used correctly and with measure. It helps us get accustomed to the next new technology. And as such, you shouldn\u2019t disregard skeuomorphism just yet.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>In this article, we\u2019ll discuss the reasons why skeuomorphism was once useful, why it died, and whether it will ever come back.<\/p>\n","protected":false},"author":11,"featured_media":77610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[207],"tags":[],"class_list":["post-69923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/69923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/comments?post=69923"}],"version-history":[{"count":0,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/69923\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/media\/77610"}],"wp:attachment":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/media?parent=69923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/categories?post=69923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/tags?post=69923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}