Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

👩‍🎨 Neumorphism 2020 Web Design Trend

Mike Rees

Member
Joined
Feb 3, 2020
Messages
61
Reaction score
84
Points
30
Location
Leicester, UK
Local Time
Today, 08:31
Credits
93
I'm not a fan. It reminds me of Fisher Price crossed with the output of my Year 9 Graphic Products Adobe Illustrator module. Then again I'm a big fan of just black text on white background so I'm really not a good judge. Leave it up to the metrics to see where neumorphism goes, I guess.
 

Juliend

Member
Joined
Feb 24, 2020
Messages
4
Reaction score
5
Points
5
Website
provolonestudio.com
Credits
0
Hello everyone 👊

Following Adam's recommendation, I come here to share with you a free UI Kit dedicated to Neumorphism Design trend. I made it and I think it can be of interest for you guys.



You can use it to prototype any app you want. As you can see, I quickly redesigned Messenger with the UI Kit. I think it looks neat and stay good in terms of UX. What do you think?

I often read that Neumorphism is a design trend made for Dribbble, but I believe we can build real apps using it.

My challenge is to build a full UI kit allowing this and see Neumorphic apps come to life

The UI Kit is available here : Neumorphism UI Kit 1.0 [Free] - by Provolone Studio

This is just an MVP. It will be updated on a regular basis with new components, new screens and a better structure.

Any feedback is welcome! 🙏
 

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,156
Reaction score
1,180
Points
1,115
Location
United Kingdom
Local Time
Today, 08:31
Credits
10,581
Pronouns
he/him
Just found another good example of this trend on Reddit.

https://www.reddit.com/r/webdev/comments/gkwi18
Thanks for sharing Talia! That's the most complete example of it I've seen. After some time to reflect on this style, I'm still not a fan. 😅

Fortunately, this is the only site I've actually seen with it live: https://super.so/ I guess it's not so bad on such a simple landing page. I don't think I'd want to use an app made out of this.

What do you think?
 

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
1,068
Reaction score
893
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 09:31
Website
gummibeer.de
Credits
2,090
Real Name
Tom Witkowski
Thanks for sharing Talia! That's the most complete example of it I've seen. After some time to reflect on this style, I'm still not a fan. 😅

Fortunately, this is the only site I've actually seen with it live: https://super.so/ I guess it's not so bad on such a simple landing page. I don't think I'd want to use an app made out of this.

What do you think?
I even don't like this example page. For me this design is totally unusable and not accessible.
That everything is a white to gray shade means that there's nearly no contrast. So most of the "animations" are even hard to recognize for me without any visual impairment.
And I've also never seen a real/hardware dashboard like this. Even my silver-white Magic Keyboard has more contrast and clearly separated buttons.
 
  • Like
Reactions: Adam

sfcgeorge

Sonic the developer
Gold Member
Joined
Oct 5, 2019
Messages
122
Reaction score
135
Points
460
Location
London, England
Local Time
Today, 08:31
Website
www.sfcgeorge.co.uk
Credits
721
Pronouns
He/Him
Real Name
Simon George
I like the look in theory but haven't seen a single implementation I thought was passable.

The first issue is the hierarchy is all over the place. So much is outset with rounded corners that everything looks clickable. Boxes look like massive buttons. The design doesn't communicate the function.

The second issue is the implementation. The inset fields combined with the outset buttons makes my eyes go funny. It doesn't look "real". I think the only way to really pull this off without having this uncanny valley look would be to 3D render all of the components so the lighting and shadow is correct not just pretty. But then when combined on a page the perspective would be off. So to really get this right you'd have to use WebGL to render the whole page with the 3D buttons in realtime. Basically, I think the effect looks bad because it's fake, and doing it for real isn't feasible.

103386_ed0c7dc071d9f0a9_b.jpg


Overall the style looks inspired by Dieter Rams but missing his key insight of minimalism. Note his buttons stick out, but nothing else does. Everything is simple and flat unless it's absolutely necessary to do otherwise.

I'm tempted to "invent" a Dieter digital design language and yes do a prototype in WebGL. It would be fun but not practical ;)
 
Top