2020s new UI trend Neumorphism is here!
But is it just another short term trend?
What is Neumorphism? What is Neumorphic design?
Neumorphism is a new word for the new user interface trend. Since this is a hard word to pronounce, some people also say Soft UI.
Let us start with the root of the word “Neumorphic”. It is a combination of 2 words. Neu and Morphic: Neu: New + Morphic: a variant of Morphous, meaning having a specific shape or form. This word was also used in an old interface design trend called Skeumorphic.
1st feeling of this trend: Flat but realistic. In detail: Soft transition between UI elements (buttons, cards, inputfields, graphs, boxes, etc) and background.
Why Neumorphism come to light?
To understand this, we need to travel a bit in the history of UI trends. (Don’t worry I’ll keep it brief)
UI trends throughout history:
- 1995–2002: Text-based HTML (A clickable button is enough)
- 2003–2010: Web 2.0 (Dark times)
- 2010–2012: Skeuomorphic design (Full on realism era, become popular with iOS)
- 2012–2014: Flat design (Windows 8 and iOS7)
- 2014–2019: Material design + Motion (Google Design System)
- 2017–2019: Zero UI
- Late 2019–Now: Neumorphic design
Side note: I know these are not the exact dates these visual identities found but these are the time periods that they were trending. So don’t blame the messenger.
This new trend actually binds most of the old trends:
- You can feel the material feeling and realism almost like Skeuomorphic design
- There are flatness and repetition as flat design
- There are motion and shadows a bit like material design.
But the final product is quite different from all of them.
Personal note: I also think that clay mockups also triggered the Neumorphic design process. They are also so smooth and you can almost feel the material :)
Majority of the internet's opinion: Cool AF, the next big trend in UI.
My opinion: Cool AF but my further opinion is at the end. So please keep reading.
How to create Neumorphic design in Sketch? Or any other design software.
In 4 simple steps I will teach you:
1- Select a background color. Let us say Gray for example.
2- Create a basic design element: rectangle, square, circle, star, etc. with color: same grey with background
3- Apply 1st shadow x:-10 y:-10 Blur:20 Spread:0 Color: Lighter grey
4- Apply 2nd shadow x: 10 y: 10 Blur:20 Spread:0 Color: Darker grey
That’s it! You have your own homemade Neumorphic button.
For more visual explanation there is a video that shows tricks to use this trend!
Best examples of Neumorphic design in dribbble:
We also started to see this trend in different design mediums, such as advertisement or logo design. Yes, I am talking about the Samsung Galaxy new logo reveal campaign:
How to apply Neumorphic design to my website or app?
There are 2 possible ways.
1- Create as PNG and deliver it to your developer.
Chance of messing up the visual quality in a specific UI element: 0.
Chance of having to deal with UI bugs in different page sizes: Over 9000!
2- Ask your developers. They can always find a way to make it!
Let’s be honest, you don’t know what developers do and they are aware of this power. If a developer says, this can’t be done, that means this can’t be done in this time restrictions. So help them by finding code pieces, there are many online specimens. Just for this case, I found this cool website: https://neumorphism.io/
Chance of having a bad looking UI with this method: 0
Full-on personal opinion:
UI is just a tool to easily reach for information. Content is the real information, and UI helps you to create order, hierarchy, and readability.
Subtle UI is a destination that is really hard to reach because it is hidden to the users but has tons of systems build up behind the content.
My opinion: In order to have a timeless design, hide all unnecessary elements and be direct with users. Be as simple as possible (This worked for many years, and will work many years to come).
Sites and apps that step up with their unique UI elements will rise fast but eventually, a new trend will replace this.
I am currently loving this trend, it makes me feel like these screens more solid, heavy and smooth, but I don’t think this will last more than 1 year.
TLDR, Neumorphic combines realistic and flat approaches. Play with shadows 1 light 1 dark in 45degree angle to have it. No, it won’t last forever.
