Neumorphism Design in SwiftUI

Share on facebook
Share on twitter
Share on pinterest

In this tutorial, we’ll talk about implement Neumorphism Interface Design into your SwiftUI app. You’ll get to know the biggest trend in user interface design in 2020 and how you can use it for your SwiftUI apps.

At the end of this tutorial, you’ll be able to create Neumorphism views like this in your SwiftUI app:

Example of a neumorphic design (dark appearance)

What is Neumorphism? 🔦

First of all, what is Neumorphism design? Neumorphism (also called Soft Design) is a combination of the current flat design approach and skeuomorphic principles. 

Skeuomorphic Design was really popular in the old days of mobile app development. Skeuomorphism basically means that visual elements are designed in such a way that they mimic their real-life counterparts.

Contrary to that, Flat Design follows a way more minimalistic approach. A realistic and three-dimensional representation of objects is avoided as far as possible.

The evolution of the iOS calculator app is a great example for comparing skeuomorphic design and flat design

Neumorphism (also called Soft Design) combines these two principles. Neumorphism follows a minimalistic approach as well, but while flat designed elements are “floating” on a perceived background by casting a simple shadow onto it, neomorphic elements seem to be “stamped out” from the background. This creates a smooth 3D-look which reminds us of the skeuomorphic days.

How can we achieve this Neumorphism effect in SwiftUI? First of all, the element itself needs to have the same color as its background. Note that neither the background nor the element should be purely white or black. Next, you need to cast a light shadow from the top left onto it. Finally, you cast a dark shadow from the bottom right onto it.

Creating the color sets 🎨

To implement the Neumorphism approach in SwiftUI, we recommend you to create the corresponding color sets first. To do this, go to your Xcode project’s Assets catalog and right-click to create a new color set.

You have to create three color sets in total. One for the background/element, one for the light shadow, and one for the dark shadow.

Make sure you create a dark mode alternative color every color set.

Make sure you also create an alternative color for the dark appearance of each color set

Here are suggestions of HEX colors you can use for your Neumorphism Design:

Light Mode Colors:

  • Background/Element: #DEEAF6
  • Light shadow: #F3F9FF
  • Dark shadow: #BECBD8

Dark Mode Colors:

  • Background/Element: #1A1B1E
  • Light shadow: #242529
  • Dark shadow: #151518

Tip: You can enter HEX values, by clicking on the specific color in your color set and clicking on “Show Color panel” in your attributes inspector.

When you’re finished with creating all three color sets, move on to creating the neomorphic SwitUI views.

Creating neumorphic SwiftUI views 💡

In your SwiftUI ContentView, start creating the colored background by creating a Rectangle that covers the whole screen like this:

struct Comparison: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color("Background"))
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .edgesIgnoringSafeArea(.all)
        }
    }
}

Then, create your element and give it the same color as the background. In this example, we create a simple card by using a RoundedRectangle.

ZStack {
            Rectangle()
                .fill(Color("Background"))
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .edgesIgnoringSafeArea(.all)
            RoundedRectangle(cornerRadius: 20)
                .fill(Color("Background"))
                .frame(width: 300, height: 180)
        }

Finally, apply the light and the dark shadow by using the .shadow modifier with different colors and offset positions.

RoundedRectangle(cornerRadius: 20)
                .fill(Color("Background"))
                .frame(width: 300, height: 180)
                .shadow(color: Color("LightShadow"), radius: 8, x: -8, y: -8)
                .shadow(color: Color("DarkShadow"), radius: 8, x: 8, y: 8)


And that’s it! This is how your SwiftUI view should look now:

Conclusion 🎊

And that’s all! You can apply the technique used in this Tutorial to basically every element in your SwiftUI app to create that neumorphic look! ✨

I hope you enjoyed this tutorial! If you want to learn more about SwiftUI, make sure you check out our free SwiftUI Basics eBook and our other tutorials! Also make sure you follow us on Instagram and subscribe to our newsletter to not miss any updates, tutorials and tips about SwiftUI and more!

2 replies on “Neumorphism Design in SwiftUI”

Leave a Reply

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

small_c_popup.png

Covid-19 Forces you into quarantine?

Start Mastering swiftUI Today save your 33% discount

small_c_popup.png

Are you ready for a new era of iOS development?

Start learning swiftUI today - download our free e-book