close
Shot by #<User:0x0000562f526d0a60>

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 song ux ui playlist shadow round orange neumorphism neumorphic player music mobile minimal iphone gradient digital design dark colors app

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.

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 soft ui neomorphic neomorphism ui micro interaction microinteractions microinteraction button neumorph skeumorphic skeuomorph skeuomorphism skeumorph skeumorphism design app animation neumorphic interaction neumorphism
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 ui kit neumorphism neumorphic mobile library
  2. Shot Link
  3. Neumorphic Ui Kit Components components neumorphic neumorphic ui kit web design library

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 soft ui dark theme guide skeuomorphism neomorphism skeuomorph clean figma typography illustration skeuo white light user interfaces tutorial design trend ui 2020 trend shadows ui trend
Shot Link

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

View on Dribbble

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

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 trand likes button neumorphism art figma ui design

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.


Previous
Next