Neumorphic Design / Soft Design
A new design trend?
With the end of 2019, we wrap up another year of design trends, a year marked by the rise of illustration, bold typographies, minimalism, vibrant colors, and surprisingly 3d element, but as the year approaches its end, a new design trend is already catching with designers: “Soft design” or better known as “Neumorphic Design”
The history behind Neumorphic design
The Neumorphic Design is based on another design approach called “Skeuomorphism or Skeuomorphic design” used when companies started prioritizing human-machine interactions.
basically, Skeuomorphism design is the idea to make a product feel and looks as close to real-life object as possible, as shown in the images below, this is a design for a remote control application, this is a great example of the use of Skeuomorphism, the buttons are designed in a way that gives the user that feeling of a false reality, with the use of light reflection, and the “OK” button that looks like as if its concaved.
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
Now that we acknowledged the history, let's examine the future, as we mentioned before Neumorphic design is believed to be based on the Skeuomorphic design, so…
What is Neumorphism / Neumorphic design
Neumorphism is a fairly new design trend, only getting attention in the past few weeks, so the name came from morphing the two words “New” + “Skeuomorphism” into “Neumorphism”.
Check out these designers who co-named this design trend: Michal Malewicz and Jason Kelley
It is a visual style, that uses cast inner and outer shadows to give the illusion of extruded shapes
So using the last example (the remote control app), we will try to apply the soft design and the result should roughly look like this.
How to design Neumorphic shapes
Here’s my approach to designing a Neumorphic shape:
1- Choose your background color because that would be the color of both the background and your shape, and it works for all colors not just soft white and black.
2- Select a lighter shade of your primary color, that will serve as the shadow cast on the side of the light source
3- Select a darker shade of your primary color, that would be the shadow opposite to the light source
4- Apply the shadows as follow to achieve a perfect soft effect: if the shape is 60px * 60px, the spread/blur is one-forth (60/4 = 15) and the offset is one-third of the blur (15/3 = 5), for the lighter side the offset is negative (x: -5, y:-5) and the darker side the offset would be positive (x: 5, y:5) to give the illusion that a light source is coming at a -45° angle.
use the values below to start your designs
Conclusion
Like most design trends, Neumorphism is yet another beautiful approach to design user interfaces that look soft and easy on the eye, but, I don’t think well be ever seeing it used in real-life product, since it is a bit of a challenge, and isn’t versatile enough to be adopted in professional projects, not as much as its counterpart “Skeuomorphic design” which was once a huge design approach used by big companies to develop user-friendly interfaced that mimics real life.
So my final verdict: I think it’s a fun new design approach, we’ll sure be seeing a lot of designs implementing the Neumorphic Design but I don’t this it’ll ever be used by professional designers.
Check my last story on interactions between designers & developers
