{"id":89,"date":"2021-10-22T06:41:59","date_gmt":"2021-10-22T06:41:59","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/craftb\/?p=89"},"modified":"2021-10-22T06:58:39","modified_gmt":"2021-10-22T06:58:39","slug":"week-3-neumorphism-what-in-the-world","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/craftb\/2021\/10\/22\/week-3-neumorphism-what-in-the-world\/","title":{"rendered":"Week 3: Neumorphism: what in the world…"},"content":{"rendered":"\n

This week was h3ll<\/s> character-building and a 2019 vintage Malbec is presently doing a rapid tango in my head. So, I will try to keep it short and sweet.

<\/p>\n\n\n\n

I am now working on the layout implementation and design. Being that UI\/UX is slightly foreign soil to me, I’ve been researching various sources to get a better handle on the science of it.
<\/p>\n\n\n\n


While in my quest to become more “industry” proficient in design, I stumbled across an interesting concept that was very strange, yet so familiar. It’s so cool…

This concept that I speak of is called neumorphism<\/strong>.

I know. It sounds like dialect from Matrix Reloaded<\/em>, but in actuality it is a type of visual design that has gained significant traction and become a popular aesthetic choice for contemporary software, website, and mobile app design throughout the years.

Drawing on aspects of photorealism and 3D design, neumorphism brings simulated physical attributes, such as shadows and texture, to make more lifelike digital interfaces. In other words, it keeps it real – sort of .

Striking a balance between hyperrealism and minimalism, neumorphism uses colors, textures, and shadows in a way that feels true to life without being overly detailed. It is typically associated with three common design characteristics: monochromatic color schemes, low contrast, and subtle shadows. Let\u2019s at some examples to get a better idea:

<\/p>\n\n\n\n

\"\"<\/a>
Source: Gavrisov Dmitri, Tesla Concept<\/a>
<\/figcaption><\/figure>\n\n\n\n
\"what
Source: Filip Legierski<\/a>. <\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
Source: Filip Legierski, Bank App Concept<\/a><\/figcaption><\/figure>\n\n\n\n

See, I told you it was cool; However, like with everything, there are pros and cons to consider with using this design style. I’m not going to get into that part. That’s another discussion. I’ll leave that for you to look into and decide. What I will leave you with, though, are three free neumorphism UI kits to try out. Why? Because sharing is caring:
<\/p>\n\n\n\n


1. Neumorphic elements<\/a><\/h4>\n\n\n\n

This UI tester comes with radio buttons, regular buttons, tabs, a search bar, a volume bar as well as a few others and is available in HTML right on the spot. <\/p>\n\n\n\n

\"neumorphic<\/figure>\n\n\n\n

<\/p>\n\n\n\n


2. Neumorph UI kit<\/a><\/h4>\n\n\n\n

The Neumorph UI kit already comes with quite a bit of basic interaction, such as the expanding dropdown menu, and offers the components directly in code. <\/p>\n\n\n\n

\"free<\/figure>\n\n\n\n

<\/p>\n\n\n\n



3. Neumorphic UI elements<\/a><\/h4>\n\n\n\n

Neumorphic UI elements is simple and focused on the concept of a music player UI design, including components like play and fast forward buttons, as well as progression bars, radio buttons and checkboxes.<\/p>\n\n\n\n

\"free<\/figure>\n\n\n\n

<\/p>\n\n\n\n

So much for short. I couldn’t help it. <\/p>\n\n\n\n


See you next week. Now where are those Advil.<\/p>\n","protected":false},"excerpt":{"rendered":"

This week was h3ll character-building and a 2019 vintage Malbec is presently doing a rapid tango in my head. So, I will try to keep it short and sweet. I am now working on the layout implementation and design. Being that UI\/UX is slightly foreign soil to me, I’ve been researching various sources to get… Continue reading Week 3: Neumorphism: what in the world…<\/span><\/a><\/p>\n","protected":false},"author":11697,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/posts\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/users\/11697"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":33,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/posts\/89\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/posts\/89\/revisions\/123"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/craftb\/wp-json\/wp\/v2\/tags?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}