Exploring Neumorphism Through Code Snippets
The web design industry has always been great at throwing around buzzwords. One of the most recent examples is neumorphism – which is supposedly the “new skeuomorphic” for design elements.
It’s a UI trend where an element looks like it’s breaking free (or extruding) from its background. If you’re looking for a reference point, it seems reminiscent of that Star Wars scene where Han Solo is frozen in carbonite. But I digress.
As with any hot new idea, the web is teeming with examples of how this technique could be used in the real world. With that, here are some code snippets that bring neumorphism to life!
Push to Check
It’s an interesting concept: Checkboxes as buttons. Here, each option looks like a nicely-rounded button. Click it and the button looks “pressed”. This not only looks cool; it also adds a unique bit of interactivity to the form.
See the Pen Neuomorphic Checkboxes by Braydon Coyer
The Whole Form
Taking the trend a step further, this snippet imagines an entire form in this style. The text inputs look like they were carved out of the background, while the buttons are bursting forth.
See the Pen Neomorphic Form by Swapnil
Colorful Card
Card UIs are a popular trend in their own right. And they seem to be a perfect match with neumorphism, as they provide a subtle way for content to stand out. What makes this particular example interesting is the use of the gradient background.
See the Pen Neumorph card- soft ui by Cornelius Labuschagne
Neumorphism On the Menu
Icon-based navigation has been around for some time, but it’s been made somewhat new again with a dash of this technique. The hover effects make each button very intuitive, which is an absolute must with this type of low-contrast design.
See the Pen Neumorphism menu by Wouter
Collect Them All
This set of elements has just about everything you need to bring neumorphism to your own projects. There are buttons, form elements and, of particular interest: a loading bar. It just seems like a natural extension of the look.
See the Pen A bit of neumorphism by Damir
More Accessible Morphs
If there is a downside to this trend, it’s that interactive elements can be too subtle – which hurts accessibility. This snippet aims to fix that, with hover and click states that add high-contrast borders and color changes.
See the Pen Neumorphism Accessibility Example by Michael J. Fordham
Neu Calculations
One of neumorphism’s more logical use cases would be for app screens, like this calculator. It borrows several of the basic principles, but still keeps things both legible and intuitive.
See the Pen Neumorphic Calculator by Joseph R Miles
Table It
HTML tables wouldn’t seem to be the best fit for a neumorphic look, but see for yourself. Here, the table is super clean and the row/column hover effects are brilliant. A very creative solution.
See the Pen Nuemorphic Table by Abhishek Anil Deshmukh
Get It While It’s Hot
There’s a definite appeal to neumorphism. The look is rather seamless and, when cleverly implemented, quite smooth.
Judging from the examples above, it would appear that it’s best to use the style in combination with some higher contrasting elements. This provides the right vibe, but keeps the design accessible and user-friendly.
If you’d like to see even more neumorphic UI snippets, check out our CodePen collection!
The post Exploring Neumorphism Through Code Snippets appeared first on Speckyboy Design Magazine.