3 useful tips for designing neumorphic interfaces (soft UI)

view views 52

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

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.

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!

More UI resources:

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

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *