6c9cb8deabc71b3bb158f6ab7ca653ff

Art by OTAKOYI

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

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 📷 https://www.instagram.com/kedavra.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.

Book Subscription App 📖

Book Subscription App 📖

by Ariel Jędrzejczak for Riotters

Take a look at my latest app, which allows you to subscribe to the world's best books for an affordable price. I tried to add some neumorphic effect to add some modern look. Let me know what you think! 📖 Illustration made by https://dribbble.com/Komako...

View on Dribbble

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

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

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
  2. Neumorphic Ui Kit Components

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

Neumorphism UI Trend 2020

by OTAKOYI

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. Ne...

View on Dribbble

Neumorphism

Neumorphism

by sonal shah 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

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. 👉👉👉 https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

View on Dribbble

More UI resources:

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


Icon shot x light