Shot by #<User:0x00005a95fe7227b8>


3 useful tips for designing neumorphic interfaces (soft UI)

You’ve probably seen it all over Dribbble lately—the latest trend in UI design—neumorphism, also called soft UI. The name comes from combining New + Skeuomorphism and it’s a style that relies heavily on using shadows to achieve an almost floating-like effect on the elements of your screen.

Fellow Dribbbler Samson Vowles recently finished designing a soft UI Kit, and today he’s sharing his top tips and best practices for experimenting with this style. Read on for Samson’s design tips then scroll to the end for some Dribbble Shots packed with helpful techniques and settings to apply in your design process.

1. Sprinkle lightly

Use neumorphism sparingly to highlight specific UI elements. It’s easy for screens to get swamped with gradient and shadow styles. Draw attention to the hierarchy of a screen rather than adding the effect to every component.

Playlists - Simple Music Player app colors dark design digital gradient iphone minimal mobile music neumorphic neumorphism orange player playlist round shadow song ui ux

Playlists - Simple Music Player

by Filip Legierski for Riotters

If you want to show some love, press L. ❤️ You can write a comment with your opinion too. 📝 Check my Instagram profile about design 📷 Have a nice day! 🍹☀️ --- We're available for new projects: design@riot...

View on Dribbble

2. Illustrations over photos

Neumorphism gives the illusion of a 3D interface. Photography doesn’t fit the style and breaks the illusion. Look to integrate illustrations instead of images for a more consistent look.

3. Animate for accessibility

One criticism of neumorphism is that it doesn’t meet specific accessibility guidelines. However, you can use animation to help create a more accessible experience. Animating the hover interaction of a button can help communicate that it’s a button. Look to describe functionality by animating the depth of elements.

Neumorphic button animation animation app button design interaction micro interaction microinteraction microinteractions neomorphic neomorphism neumorph neumorphic neumorphism skeumorph skeumorphic skeumorphism skeuomorph skeuomorphism soft ui ui
Shot Link

Neumorphic button animation

by Vadim Demenko

At first glance neumorphism seemed me too overrated and hopeless. However, this trend will require designers to rethink shadows and glows. It will also push us to improve our design tools. And that's good, mates! Follow me on Instagram and Behance

View on Dribbble

Keep experimenting!

Neumorphism is an emerging style and an opportunity to explore. I see potential in monochromatic color schemes, logo design, animation, and illustration. Take the opportunity to create original work that stands out, and keep experimenting.

  1. Neumorphic Smart Home App library mobile neumorphic neumorphism ui kit
  2. Shot Link
  3. Neumorphic Ui Kit Components components library neumorphic neumorphic ui kit web design

Want to keep up with Samson? Find him on Dribbble, and download his neumorphic UI Kit on Creative Market.

Shots to help you get started

Ready to try your hand at neumorphism? Here are a few Dribbble Shots that visualize specific techniques for achieving this style in UI. Click on each Shot to check out the details and explore which settings to experiment with!

Neumorphism UI Trend 2020 2020 trend clean dark theme design trend figma guide illustration light neomorphism shadows skeuo skeuomorph skeuomorphism soft ui tutorial typography ui ui trend user interfaces white
Shot Link

Neumorphism UI Trend 2020


Hello Everyone! Have you already heard about the recent UI trend called “New skeuomorphism” or Neumorphism? Skeuomorphism describes how interface objects imitate/mimic their real-world counterparts in how they look or how you can interact with them. Neu...

View on Dribbble

Neumorphism 2020 2020 trend cards clean designs freebie interface minimalist neomorphism neumorphism sketchapp skeumorphic trend tutorial ui ui design ui trend white
Shot Link


by sonal for Quovantis

Neumorphism, it is a modern take on Skeumorphism in 2020, you can try to create things look more real and still be minimal. Recently, I was working on this and created 2 posts which were focused on Neumorphic designs. I am really enjoying working on it...

View on Dribbble

Neumorphism in user interfaces art button design figma likes neumorphism trand ui

Neumorphism in user interfaces

by Susik Khangeldyan

How UI trends reach for inspiration into the real world and what problems do we have to solve to make those trends work. 👉👉👉

View on Dribbble

More UI resources:

Find more Process stories on our blog Courtside. Have a suggestion? Contact