Neumorphism vs. Flat & Material vs. Skeuomorphism
By: Mutaz Al Hawash
Tags: UI Design, Visual Design, Resources, UI, Neumorphism

12 months ago, on a warm Christmas’ period day. I was introduced to a new concept in UI Elements Design.

NEUMORPHISM

the name was a bit hard but once you hear the name — or even read it — you can find a tone of a neutral harmony that could attach to your brain's networks of neurons.

THE NEW DESIGN TREND OF 2020

To the left:

A Neumorphic circle to prove the concept on a background of #fff as seen on Medium website (accessed on Dec/12/2020)

Luckily, I was one of the first to experience the design and practice it on Adobe Illustrator, Photoshop, and CSS as well as a blog. The interface was designed and rethemed to match the Neumorphic design trend. to write about it earlier at oigency’s blog (bloigency — بلوغجنسي), where I have started to introduce the new design trend of Neumorphism through a tiny journey of time to walk through User Interface (UI) design of apps. “ The term itself means to represent a specif element as if it was iron or metal. ” (oigency, 2020, neumorphism vs flat vs skeuomorphism, the new UI design trend of 2020, Neumorphism or soft UI explained with examples, Accessed on click me). These designs that we used to see everywhere back in 2006–2009. through our mobile screens (Nokia 5800 XpressMusic) or even our PCs. in games, desktop computer programs, and even websites.

BACK THEN

when image strips (sprite-sheets) took its crown on a thrown of designing the web or interfaces.

UTIL.

CSS3 and flat design were vastly used and supported by the leading companies in Mobile Devices Manufacturing, Operating Systems Development especially the three giants that adopted to re-design their systems to match up with the new trendy design (FLAT): Apple, Microsoft, Google.

Thanks to the massive technological expansion in the field of CPUs and GPUs, nowadays we are capable of rendering the web and applications and programs’ User Interfaces that is full of details in 41.6666667 milliseconds * (estimating that the system is running on 24 frames per second : 1 second / 24 = 41.6666667 milliseconds)

the article also contained a mini tutorial for choosing the colors to apply the new design and a how-to-GIF going through using photoshop creation process as well as 2 CSS live sample codes hosted on code pen, Neumorphism UI Button, oigency Neumorphism UI Test.

The design trend become very popular through the days, you can navigate through this blog thread, published at the end of March this year (2020) on easeout.co, 25 Top Neumorphism UI Design Examples

UI Designs by various Designers. (Accessed on: 25 Top Neumorphism UI Design Examples)

The Trend was like a race for the designers and UI/UX professionals.

a screen-capture for bloigency — بلوغجنسي (Accessed on 10 / Dec / 2020)

visit https://bl.oigency.com (bloigency — بلوغجنسي) the official blog of oigency to experience the neumorphic UI Now. and check some of the published articles about topics related to creativity, Innovation, and Entertainment. as well as some of the essential tips when starting the SEO journey of your personal or business website.

at the End.

today, we are living and aiming for a better year in 2021 after the miserable 2020. with a new design trend in UI Elements Design. stay tuned for the upcoming series about glassmorphism. as well as announcing the brand new yearly colors of Pantone. Gray and Yellow (“Color of the Year 2021″ — Ultimate Gray and Illuminating yellow). I believe that these aspects are going to play a significant role in defining the trend in upcoming designs we are going to witness in the upcoming days of the new year (2021) in a variety of majors in design. Such as printables, UI, and of course a lot more.

10 / Dec / 2020

Mutaz E. G. Alhawash

founder & technical artist — oigency — Amman, Jordan