Flat design was introduced and existed around us in the period of time post to the year 2007, (IDT) 
We all have liked the type of gradient buttons that used to be implemented everywhere. in the games we play, the websites we visit and the computer "programs" we are using on our PCs or Consoles.
some of us (including myself) starved for these kinds of interfaces, which looks and feels like metal, liquid, or other real elements of life. including liquids such as magical potions. 
M. E. G. H.

History of neumorphism:
1.0 What is skeuomorphism?

it has all started,

since we started to interact with a computer through Graphical User Interface (GUI). the unstoppable computer evolution which we have witnessed since the late 80s was fast. but full of milestones and experiments. starting from using simple bitmap images which consist of 16 pixels (at most*), walking through images strips we used to call Spritesheets and other types of interface designs and development which was forced indeed to match up the human behavior with these trendy geeky toys and gadgets.

The term itself (skeuomorphism) means to represent a specific element as if it was iron or metal. a controversial approach of the outdated design is still on the debate among those who like it vs. those who use other types such as flat design. especially after we are used to wearing and interacting with computing devices that look or feel like our daily tools, or experiences. including Virtual Reality/Augmented Reality (VR/AR), IoT (Internet of Things) which made humanity again producers and inventors especially among the young ones among us, and of course the Wearable Devices (watches, clothes, jewelry, etc.). 

Mostly, the metal looking interfaces are associated with watches, or sound engineering programs, and virtual DJ programs.

The ultra-realistic features of concept in User Interface Design (UI) that implements metal or other types of matter (such as liquids or gas) are highly detailed as pieces of art which consist of highlights, lights, darks, and shadows to make it look as almost typical to the real device the interface is representing. 

nevertheless, some of the UIs did not implement it in that way, though they have used the gradients, shadows, and highlights, showing the influence of a shiny button on another solid. observe the following image showing a game options menu that has influenced a glowy effect on the metal (most probably old brass) through giving a tone of greenish-yellowish color.

 after a while. and after the introduction of cloud computing as a relative and better solution over the standalone applications and programs. technical developers saw the high-quality images which are full of details as "expensive elements" on the memory, loading, and buffering time. regarding the vast size (per file) compared to the newest design trend (Flat or Material) which was also widely used by mobile apps developers, and web apps developers.

Interaction design is an art. It is the art of creating experiences that encourage human interaction and map behavior to expected outcomes. 

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them (IDF).

When computer interfaces were first introduced, skeuomorphism was very important — as it allowed people to easily transition to using digital devices.

(Baker J., 2020)

History of neumorphism:

2.0 The Flat Design & Material Design Era

The Designs were minimal, with No Gradients. using Basic Shapes. and ~of course~ solid color. This style was absolutely a replacer for the old styles in UI. not forgetting that it was a game-changer in implementing the UI itself. regarding the different methodology of creating User Interface Elements using the coding instead of loading a various number of images for each button or UI element or simply by using what we call a button sprite sheet.

The Rise of Flat Design

In 2007, Forbes magazine announced the death of skeuomorphism. Apple (to be followed quickly by Google) had settled on a new form of design – flat design

(IDF, 2020)

After it (flat) was highly used by designers around the globe. Google liked the idea and the concept of design and tried to develop the concept of UI Design by giving it a touch of Google by introducing a bit different approach which was called material design. Which might look the same as flat at the first impression stage, for those who did not look a little bit deeper to find the very slight difference between them, but mainly; they are different in:

• the third dimension,
• shadows, highlights, and gradients: 
  The implementation of shadows, a slight gradient, and sizing to show the depth. which was later developed to be an actual depth (transformation on the z-axis)
   

Material is a bit more complex approach comparing to flat

below is a Comparison of Brands implementations for flat and skeuomorphism user-interface elements design by Apple and Google

After a decade, now (2020):
We are here to witness another change in the design look, feel, and experience, as well as the overall standards in the User Interface/User Experience (UI/UX) fields. as sciences that study human behavior and interaction with a computer or an interface, through experiments and trails, theories, and guidelines. but on the other hand, when talking about these concepts of design. the value is in the art of neumorphism ?app? design (neumorphism app OR neumorphism web design).

What is Neumorphism design?

neumorphism meaning: the term itself could reflect that it is NEW and NEUTRAL (natural), as the buttons have a solid color that 100% matches the background color of the interface. but with a requirement of using two shadows instead of one. and the purpose is to show and emphasize the effect of extrusion. as you might think that the buttons are extruded in or out of the background towards the screen or vise versa. check the following designed by a variety of awesome designers:

After witnessing the examples. the double shadows are now clear to you. as any element popping but a clicked or active element has a slightly lighter border. remember that it is a must for a designer to trust our own feelings toward design theories and art in general. as rules in the world do not exist. instead, they are commonly known as guides.

But how to do neomorphism?
the technique:

A quick neumorphism tutorial describing how to achieve the technique
It is very simple. All you need to do is to choose a color for your background. and then two more colors as shades. 
a darker one and a lighter one.  

In this example, I have chosen ( the brand secondary color of oigency ) to set as the background in the upcoming designs of the neumorphism UI. On the other hand, the two other shades have been chosen as pure white for lighter and a darker tone of the background color to set as the darker shade which going to be used as a shadow for the UI element.

Now, after choosing the right match for you. it is quite simple to create using photoshop, the following is a GIF image for a tutorial creating a button using photoshop in neumorphism technique.

the technique could also be implemented on other Adobe Products such as Illustrator, Indesign, and XD. but using two elements instead of one and a bit of masking. and it also could be used and implemented easily using CSS for styling web HTML elements by using 

1. box-shadow property
2. filter: drop-shadow property

the following is a codepen sample which you can view through >>> this link <<<
 

>>> or download it as a zip file and view it on your browser <<<

The following are:

Some Living Samples for implementing the neumorphism concept in user interface design by myself (Mutaz E. G. Alhawash) as oigency, 
 

A test for the concept using the brand colors of oigency (white & light) and (black & dark)
Click on this link to view the oigency neumorphism CSS on codepen.io

from there please hover over the buttons, as well as trying to switch the mode of shading the cards between (gradient and flat)

after applying the style on the official blog of oigency (2020), A year was almost enough to build up my skills to use this concept on adobe illustrator, adobe XD as well as using CSS for web implementations. nevertheless collecting a fair amount of data for the visitors experience using the new style.  the visual is quite simple and out of color; therefore I have used the saturated tone for the primary buttons as gradients to start from: (main-color), to:(main-color. darker). and give more influence to the button or the active form field using a border of the active field in a form describing its state. 

(active, primary: purple) , (success: green), (warning: Yellow), (Danger, Alert, Wrong Entry: red), (informative: Teal -- a variation of blue teal ~we call in Arabic فيروزي fairouzy~)

Sadly, I am the only team player (so far) who is handling all the technical tasks as a full stack developer using NATIVE PHP. the on-air development was focusing on many fields. from creating and managing the databases and user sessions to creating visual design and implementing them using HTML, CSS, JS. on the other hand create all the media and snippets needed to go through the researches and resources to deliver high-quality rich content. and enhance it to match global SEO standards.

The following are some of the enhanced experiences which gonna be used and published in (2021).  [announced: 29 / 12 / 2020]

This bottom tabs bar was designed and developed to serve its purpose of usage for bloigencyبلوغجنسي 
see it working on a pen named as navigation tab bar  - nuemorphism - bloigency بلوغجنسي
https://codepen.io/mutazalhawash/pen/oNzpzGG

A Nuemorphic design for an action menu button using CSS JS JQUERY Matching the current theme used now (2020) on bloigencyبلوغجنسي website. 

The previous figure is showing the usage of A bottom tabs bar which was designed and developed to serve its purpose of usage for this blog(bloigencyبلوغجنسي).  a sample actions menu triggering button of the concept design inspired from the "Skeuomorph Button Interaction" by  Yash Bhagat combined with the previously described navigation bottom tabs bar.

You could also see it working on codepen using CSS, JS, HTML:

https://codepen.io/mutazalhawash/pen/BaLmLJe

I do not have a fixed income,
   would you buy me a coffee?   

Conclusion

At the End:

Through the epidemic year of 2020. many designers and UI/UX experts have shifted (or at least tried) to participate in the design trend race. It was a race for creative designers and UI/UX professionals. as well as web developers who have started to share their free templates including (AI templates, XD templates, HTML templates and HTML templates using Bootstrap). some of them have made huge efforts coding CSS code blocks to get the style customized easily using a neat and straight forward UI. Thank neumorphism.io (by Adam Giebl ) for effort delivering the amazing CSS generator to the world, Adam who has always been trying to make cool websites, with amazing free features.  this website would help you tweak the settings in realtime using a cool interface which after all generates the CSS combination that you need for your website.

I would love to thank all the designers who have made this article possible by contributing to the global content of UI interface design. those who have inspired me(Mutaz E. G. Alhawash). all who have helped me reach new audiences and opportunities by sharing this article on their social networks. or publishing it in their journals and mentioning this article in their references list.
People, You are awesome!

Backlinks:

•  thanks to the great Korean buddy who have shared this article on his blog. you can find it at Design trend that gives a three-dimensional effect with light and shadow, Mango Design 빛과 그림자로 입체효과를 주는 디자인 트렌드, 뉴모피즘 
   
• thanks to Fabricio Teixeira and Design Bootcamp (The best resources for designers starting in Design, UX, and UI.) by the team behind the UX Collective for sharing the story of my experience with Neumorphism which was written as a medium story titled Neumorphism vs. Flat & Material vs. Skeuomorphism

TAGS:
элементы интерфейса, дизайн, ديزاين, تصميم, عناصر اللوائح, 디자인,  skeuomorphism, material, flat,  neumorphism, 디자이너, 디자인스킨, 디자인 패턴, 디자인씽킹, تصميم واجهات, تصميم هوية, تصميم وتكنولوجيا, تصميم مواقع, conception, تصميم هوية بصرية, design Bootcamp

Reference List:

1. Justin Baker,  2020, Muzli - Design Inspiration, Skeuomorphic Design — A controversial UX approach that is making a comeback, available at https://medium.muz.li/skeuomorphic-design-a-controversial-ux-approach-that-is-making-a-comeback-a0b6e93eb4bb [accessed on 29 / 12 / 2020]
    
2. Interaction Design Foundation (IDF), 2020, Skeuomorphism - The Rise of Flat Design, available at https://www.interaction-design.org/literature/topics/skeuomorphism [accessed on 29 / 12 / 2020]