{"id":5923,"date":"2021-06-02T15:59:15","date_gmt":"2021-06-02T15:59:15","guid":{"rendered":"http:\/\/desres20.netornot.at\/?p=5923"},"modified":"2021-06-02T15:59:15","modified_gmt":"2021-06-02T15:59:15","slug":"how-to-neumorphism","status":"publish","type":"post","link":"http:\/\/desres20.netornot.at\/?p=5923","title":{"rendered":"How to Neumorphism"},"content":{"rendered":"\n<p>When designing User Interfaces, there are several ways to implement Neumorphism or Glassmorphism. In this blog post, I will look at how to develop neumorphic elements like cards and Icons in interface design tools like <em>figma<\/em> but also briefly in code.<\/p>\n\n\n\n<p>First, let\u2019s start with Neumorphism by looking at card elements, which is the most present UI element of this style. The factors that have to be considered are the size, radius, distance, intensity and blur. It has all to do with the shadows, that generate the look of \u201eattaching to the ground\u201c. Due to its reduced color scheme it works best, if the neumorphic card has the same color as the background. Also rounded borders help the effect to stand out more. I tried it out myself in <em>figma<\/em>, it is very easy to do and by playing around with the blur value, the distance to the background seems to change. The more blur, the farer away from the background the neumorphic card seems to be. <\/p>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-1 wp-block-gallery columns-2 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1001\" height=\"1024\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_01-1001x1024.png\" alt=\"\" data-id=\"5953\" data-full-url=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_01.png\" data-link=\"http:\/\/desres20.netornot.at\/?attachment_id=5953\" class=\"wp-image-5953\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_01-1001x1024.png 1001w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_01-293x300.png 293w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_01-768x786.png 768w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_01-1501x1536.png 1501w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_01-2002x2048.png 2002w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1001\" height=\"1024\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_02-2-1001x1024.png\" alt=\"\" data-id=\"5954\" data-full-url=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_02-2.png\" data-link=\"http:\/\/desres20.netornot.at\/?attachment_id=5954\" class=\"wp-image-5954\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_02-2-1001x1024.png 1001w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_02-2-293x300.png 293w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_02-2-768x786.png 768w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_02-2-1501x1536.png 1501w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_02-2-2002x2048.png 2002w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>By adding gradients, it makes the card element seem to become convex or concarv. Adding the shadows within the card instead of outside has the effect that the card generates kind of hole or window in the interface. &nbsp;<\/p>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-3 wp-block-gallery columns-2 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1001\" height=\"1024\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_03-4-1001x1024.png\" alt=\"\" data-id=\"5957\" data-full-url=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_03-4.png\" data-link=\"http:\/\/desres20.netornot.at\/?attachment_id=5957\" class=\"wp-image-5957\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_03-4-1001x1024.png 1001w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_03-4-293x300.png 293w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_03-4-768x786.png 768w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_03-4-1501x1536.png 1501w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_03-4-2002x2048.png 2002w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1001\" height=\"1024\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_04-2-1001x1024.png\" alt=\"\" data-id=\"5958\" data-full-url=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_04-2.png\" data-link=\"http:\/\/desres20.netornot.at\/?attachment_id=5958\" class=\"wp-image-5958\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_04-2-1001x1024.png 1001w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_04-2-293x300.png 293w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_04-2-768x786.png 768w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_04-2-1501x1536.png 1501w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Cards_04-2-2002x2048.png 2002w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>One of the goals of Neumorphism is to include the skeuomorphic approach, which means to combine the minimalistic design style with familiar objects of the analog world not only in the design aspect but also in their function, as I already analyzed in previous blog posts. The skeuomorphic approach also can be part of the icons. All the icon parts themselves have adjusted background shadows and lie on card elements with shadows, which gives them a 3D look and complete their connection to their real world counterparts. For realization in <em>figma<\/em>, the same rules as for the cards are implemented onto the icon elements.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"768\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Icons-1-1024x768.png\" alt=\"\" class=\"wp-image-5962\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Icons-1-1024x768.png 1024w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Icons-1-300x225.png 300w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Icons-1-768x576.png 768w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Icons-1-1536x1152.png 1536w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Icons-1-360x270.png 360w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Icons-1.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>For a button, you can also apply the rules mentioned before. The default button can simply stay in the normal or concarv mode, while the active button should seem like it is really pressed and attaches itself deeper into the interface, for which the inner shadows should be used. Additionally to imply the \u201eactive status\u201c, the color can also change when pressed. It is important to keep an eye on the contrast and differences between the states of the buttons. It has to be very clear to e functional.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Icons.mp4\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"991\" height=\"190\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Buttons-1.jpeg\" alt=\"\" class=\"wp-image-5965\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Buttons-1.jpeg 991w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Buttons-1-300x58.jpeg 300w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphic-Buttons-1-768x147.jpeg 768w\" sizes=\"(max-width: 991px) 100vw, 991px\" \/><\/figure>\n\n\n\n<p>There are several tutorials how to do Neumorphism, there even is a Neumorphism card generator available online, where you can try out yourself and also see how it should be implemented in css code. You also can do this easily in code and don\u2019t need a lot of lines. It is basically the same principle as it is in figma just translated.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"587\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphism-Generator-1024x587.png\" alt=\"\" class=\"wp-image-5960\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphism-Generator-1024x587.png 1024w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphism-Generator-300x172.png 300w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphism-Generator-768x441.png 768w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphism-Generator-1536x881.png 1536w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/06\/Neumorphism-Generator-2048x1175.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><a href=\"https:\/\/neumorphism.io\/#e0e0e0\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/neumorphism.io\/#e0e0e0<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Could this be the BIGGEST UI Design Trend of 2020? #Neumorphism\" width=\"780\" height=\"439\" src=\"https:\/\/www.youtube.com\/embed\/KlSLdEB3lzg?start=485&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Sources<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\"><a rel=\"noreferrer noopener\" href=\"https:\/\/uxdesign.cc\/neumorphism-in-user-interfaces-b47cef3bf3a6\" target=\"_blank\">https:\/\/uxdesign.cc\/neumorphism-in-user-interfaces-b47cef3bf3a6<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/lukasckuehne.medium.com\/trying-out-soft-ui-12153537dc50\" target=\"_blank\">https:\/\/lukasckuehne.medium.com\/trying-out-soft-ui-12153537dc50<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/www.simpleguides.de\/soft-ui-neumorphism\/\" target=\"_blank\">https:\/\/www.simpleguides.de\/soft-ui-neumorphism\/<\/a><br><a rel=\"noreferrer noopener\" href=\"https:\/\/youtu.be\/KlSLdEB3lzg\" target=\"_blank\">https:\/\/youtu.be\/KlSLdEB3lzg<\/a><br>Neumorphism CSS Generator: <a rel=\"noreferrer noopener\" href=\"https:\/\/neumorphism.io\/#e0e0e0\" target=\"_blank\">https:\/\/neumorphism.io\/#e0e0e0<\/a><\/p>\n\n\n\n<p><strong>Images and Videos<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\">Image 01 &#8211; 04: Neumorphic cards &#8211; own creation<br>Image 05: Neumorphic-Icons<br><a rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/shots\/11473239\/attachments\/1509448?mode=media\" target=\"_blank\">https:\/\/dribbble.com\/shots\/11473239\/attachments\/1509448?mode=media<\/a><br>Video 01: Neumorphic Icons <br><a rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/shots\/10746021-Neumorphism-Social-Buttons\" target=\"_blank\">https:\/\/dribbble.com\/shots\/10746021-Neumorphism-Social-Buttons<\/a><br>Image 06: Neumorphic Buttons<br><a rel=\"noreferrer noopener\" href=\"https:\/\/uxdesign.cc\/neumorphism-in-user-interfaces-b47cef3bf3a6\" target=\"_blank\">https:\/\/uxdesign.cc\/neumorphism-in-user-interfaces-b47cef3bf3a6<\/a><\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When designing User Interfaces, there are several ways to implement Neumorphism or Glassmorphism. In this blog post, I will look at how to develop neumorphic elements like cards and Icons in interface design tools like figma but also briefly in code. First, let\u2019s start with Neumorphism by looking at card elements, which is the most<\/p>\n<footer class=\"entry-footer index-entry\">\n<div class=\"post-social pull-left\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D5923\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-facebook\" aria-hidden=\"true\"><\/i><\/a><a href=\"https:\/\/twitter.com\/home?status=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D5923\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"><\/i><\/a><a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D5923&#038;title=How+to+Neumorphism\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-linkedin\" aria-hidden=\"true\"><\/i><\/a><\/div>\n<p class=\"link-more\"><a href=\"http:\/\/desres20.netornot.at\/?p=5923\" class=\"more-link\">Continue reading <span class=\"meta-nav\">\u2192<\/span><\/a><\/p>\n<\/footer>\n","protected":false},"author":56,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[394,366,315,70,111,110,250],"_links":{"self":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/5923"}],"collection":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5923"}],"version-history":[{"count":30,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/5923\/revisions"}],"predecessor-version":[{"id":5979,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/5923\/revisions\/5979"}],"wp:attachment":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5923"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}