{"id":2067,"date":"2021-02-10T14:17:56","date_gmt":"2021-02-10T19:17:56","guid":{"rendered":"https:\/\/www.sharpinnovations.com\/blog\/?p=2067"},"modified":"2021-02-11T12:11:51","modified_gmt":"2021-02-11T17:11:51","slug":"web-design-out-with-the-old-in-with-the-neu","status":"publish","type":"post","link":"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/","title":{"rendered":"Web Design: Out With the Old; In With the Neu"},"content":{"rendered":"\n<p>One of the most exciting aspects of web design, and design\nin general, is its ever-evolving nature. Sometimes best practices subtly refine\nover time, others see drastic changes to style and implementation. <\/p>\n\n\n\n<p>Throughout the \u201890s and early 2000s, while the internet was bursting at the seams with new websites, services, and entirely new devices like the iPhone, the go-to design style was <strong>Skeuomorphism.<\/strong> This refers to digital interfaces that mimic physical ones that people are already used to. This was important during the digital boom to make new digital interfaces as intuitive as possible.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Examples of Skeumorphism in Web Design<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Volume controls in the form of physical volume\nknobs you\u2019d see on a TV or radio<\/li><li>a phone app that looks like a physical phone\u2019s\ndial pad<\/li><li>website calendars that look like a paper\ncalendar<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.techhive.com\/images\/article\/2013\/06\/photo-jun-17-6-03-18-pm-100042568-orig.png\" alt=\"skeumorphism example in web design\" width=\"512\" height=\"384\"  \/> <figcaption>source: techhive.com<\/figcaption><\/figure>\n\n\n\n<p>Skeumorphism allows users to recognize what a design element is mimicking and immediately understand its function and how to use it.<\/p>\n\n\n\n<p>As technology continued to evolve and become more ubiquitous, the need to mimic physical interfaces diminished. For this reason, along with some digital interfaces not having a good physical association and design\u2019s inherent evolutionary cycle, skeuomorphism as a design philosophy started to go by the wayside. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flat Design Arrives on the Web Scene<\/h2>\n\n\n\n<p>In its place came <strong>Flat Design<\/strong>, a philosophy focused\non simplicity, color, and depth using shadows. Most sites and user interfaces\ntoday utilize some form of flat design. <\/p>\n\n\n\n<p>It is significantly easier to design responsive interfaces \u2013\ninterfaces that can adapt to a wide array of screen sizes from mobile phone to\nlarge desktop monitor \u2013 using flat design. This is useful for SEO purposes in\nkeeping your website as small and fast as possible, no matter your device or\ninternet speed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Today, It\u2019s Neumorphism<\/h2>\n\n\n\n<p><strong>Neumorphism<\/strong> is the marriage of both Skeuomorphism and\nFlat Design. When possible, elements should invoke a similarity to physical\nelements but with less texture and detail than what Skeuomorphism would have.<\/p>\n\n\n\n<p>Neumorphism in web design utilizes gradients and solid\ncolors to form depth. Rather than the sharp, angled shadows of flat design to\ncommunicate the depth of elements, Neumorphism utilizes soft, beveled shadows\non each element. <\/p>\n\n\n\n<p>The interface background then acts as a ground level, with\nevery element either being a smooth concave or convex change in height. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Examples of Neumorphism in Web Design<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Buttons appear as physically pressed-in when activated through color gradients.<\/li><li>Dials physically turn as you interact with them. <\/li><li>Create your own with a <a href=\"https:\/\/neumorphism.io\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"neumorphic CSS generator. (opens in a new tab)\">neumorphic CSS generator.<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/webp-express\/webp-images\/uploads\/2020\/04\/neumorphism-ui-design.png.webp\" alt=\"neurmorphism example in web design\" width=\"563\" height=\"360\"  \/> <figcaption>source: justinmind.com<\/figcaption><\/figure>\n\n\n\n<p>Neumorphism is the natural evolution combining the sound\nprinciples of Skeuomorphism with the more refined and technical aspects of Flat\nDesign. <\/p>\n\n\n\n<p>Designs utilizing this trend are starting to pop up\neverywhere. It seems like a natural evolution for websites and other digital\ninterfaces to make them more interesting and fun to interact with, while\nmaintaining the technical benefits that come along with the simplicity of Flat\nDesign.<\/p>\n\n\n\n<p>Interested in your new website or other design projects being on the cutting edge? <a href=\"https:\/\/www.sharpinnovations.com\/contact\/free-consultation\">Start a conversation with us<\/a> today! <\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most exciting aspects of web design, and design in general, is its ever-evolving nature. Sometimes best practices subtly refine over time, others see drastic changes to style and implementation. Throughout the \u201890s and early 2000s, while the internet was bursting at the seams with new websites, services, and entirely new devices like&#8230;<\/p>\n","protected":false},"author":8,"featured_media":2072,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[117,6,4,99],"tags":[424,427,53,426],"class_list":["post-2067","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-writing","category-mobile-web-design","category-website-design","category-websites","tag-neumorphism","tag-popular-web-design","tag-skeuomorphism","tag-web-design-trends"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Design: Out With the Old In With the Neu<\/title>\n<meta name=\"description\" content=\"Web designer Greg Lauver discusses neumorphism, the latest design trend, and looks back at previous creative web design approaches.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design: Out With the Old In With the Neu\" \/>\n<meta property=\"og:description\" content=\"Web designer Greg Lauver discusses neumorphism, the latest design trend, and looks back at previous creative web design approaches.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/\" \/>\n<meta property=\"og:site_name\" content=\"Sharp Innovations Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-10T19:17:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-11T17:11:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sharpinnovations.com\/blog\/wp-content\/uploads\/2021\/02\/Out-With-the-Old-In-With-the-Neu-Social.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Greg Lauver\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.sharpinnovations.com\/blog\/wp-content\/uploads\/2021\/02\/Out-With-the-Old-In-With-the-Neu-Social.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Greg Lauver\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/\",\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/\",\"name\":\"Web Design: Out With the Old In With the Neu\",\"isPartOf\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#website\"},\"datePublished\":\"2021-02-10T19:17:56+00:00\",\"dateModified\":\"2021-02-11T17:11:51+00:00\",\"author\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/7e285939a1a02b1249b1867935d1fc9e\"},\"description\":\"Web designer Greg Lauver discusses neumorphism, the latest design trend, and looks back at previous creative web design approaches.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sharpinnovations.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design: Out With the Old; In With the Neu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#website\",\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/\",\"name\":\"Sharp Innovations Blog\",\"description\":\"Web Design, Development, and Internet Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sharpinnovations.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/7e285939a1a02b1249b1867935d1fc9e\",\"name\":\"Greg Lauver\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a11a924abc1b8ead72da38dc75551eccc0f3dc5e5f6a060cc28bd84e671afab2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a11a924abc1b8ead72da38dc75551eccc0f3dc5e5f6a060cc28bd84e671afab2?s=96&d=mm&r=g\",\"caption\":\"Greg Lauver\"},\"description\":\"Greg started his career with Sharp Innovations in the Client Support Specialist role, evolving over the years into Account Management, Design, Project Management, Sales, and other duties, eventually becoming a partner in 2023. He is currently VP of Account Management &amp; Sales, focusing his energy on ensuring our top 20 clients are served with excellence. His dedication towards exceptional customer service and care for the clients he works with has been recognized time and time again. Greg appreciates the diverse nature of his role and continues to explore new ways he can serve Sharp Innovations and our clients.\",\"sameAs\":[\"https:\/\/plus.google.com\/112086464633132586125\"],\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/author\/glauver\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Design: Out With the Old In With the Neu","description":"Web designer Greg Lauver discusses neumorphism, the latest design trend, and looks back at previous creative web design approaches.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/","og_locale":"en_US","og_type":"article","og_title":"Web Design: Out With the Old In With the Neu","og_description":"Web designer Greg Lauver discusses neumorphism, the latest design trend, and looks back at previous creative web design approaches.","og_url":"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/","og_site_name":"Sharp Innovations Blog","article_published_time":"2021-02-10T19:17:56+00:00","article_modified_time":"2021-02-11T17:11:51+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.sharpinnovations.com\/blog\/wp-content\/uploads\/2021\/02\/Out-With-the-Old-In-With-the-Neu-Social.jpg","type":"image\/jpeg"}],"author":"Greg Lauver","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.sharpinnovations.com\/blog\/wp-content\/uploads\/2021\/02\/Out-With-the-Old-In-With-the-Neu-Social.jpg","twitter_misc":{"Written by":"Greg Lauver","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/","url":"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/","name":"Web Design: Out With the Old In With the Neu","isPartOf":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/#website"},"datePublished":"2021-02-10T19:17:56+00:00","dateModified":"2021-02-11T17:11:51+00:00","author":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/7e285939a1a02b1249b1867935d1fc9e"},"description":"Web designer Greg Lauver discusses neumorphism, the latest design trend, and looks back at previous creative web design approaches.","breadcrumb":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.sharpinnovations.com\/blog\/2021\/02\/web-design-out-with-the-old-in-with-the-neu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sharpinnovations.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design: Out With the Old; In With the Neu"}]},{"@type":"WebSite","@id":"https:\/\/www.sharpinnovations.com\/blog\/#website","url":"https:\/\/www.sharpinnovations.com\/blog\/","name":"Sharp Innovations Blog","description":"Web Design, Development, and Internet Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sharpinnovations.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/7e285939a1a02b1249b1867935d1fc9e","name":"Greg Lauver","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a11a924abc1b8ead72da38dc75551eccc0f3dc5e5f6a060cc28bd84e671afab2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a11a924abc1b8ead72da38dc75551eccc0f3dc5e5f6a060cc28bd84e671afab2?s=96&d=mm&r=g","caption":"Greg Lauver"},"description":"Greg started his career with Sharp Innovations in the Client Support Specialist role, evolving over the years into Account Management, Design, Project Management, Sales, and other duties, eventually becoming a partner in 2023. He is currently VP of Account Management &amp; Sales, focusing his energy on ensuring our top 20 clients are served with excellence. His dedication towards exceptional customer service and care for the clients he works with has been recognized time and time again. Greg appreciates the diverse nature of his role and continues to explore new ways he can serve Sharp Innovations and our clients.","sameAs":["https:\/\/plus.google.com\/112086464633132586125"],"url":"https:\/\/www.sharpinnovations.com\/blog\/author\/glauver\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/2067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/comments?post=2067"}],"version-history":[{"count":7,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/2067\/revisions"}],"predecessor-version":[{"id":2080,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/2067\/revisions\/2080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/media\/2072"}],"wp:attachment":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/media?parent=2067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/categories?post=2067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/tags?post=2067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}