What is Neumorphism

Neumorphism is a style of design in which elements are pushed out or recessed in of the background.
It's starting to become popular in early 2020.

Cool 🥺.
I fell in love with it at first sight and decided to make some apps with Neumorphism design.
This is DDD (Design-Driven Development) (there is no such word).

I will create an AI recording app for talking in your sleep.
It's an app that records only sleep talks by applying voice recognition to sounds while you are sleeping.

Creating Neumorphism icon

In order to learn how to design Neumorphism, I'm going to start by building an app icon using Keynote.

1. Decide on a base color

I decided the base color to #C4D2E9.
Dye the background color with the base color.

2. Determine the color of the two shadows.

Change the brightness of the base color to determine the "light shadow" and "dark shadow".

light shadow: #ECF0F7
dark shadow: #0E1624

3. Place an object

Place the object you want to push out (or make a dent in).
In my case, I made it a balloon, like sleep talk.

4. Create an object with a dark shadow in the lower right corner

Erase the border and cast the dark shadow (#0E1624) that we decided on earlier in the lower right corner.

5. Create an object with a bright shadow in the upper left corner

Similarly, erase the border and cast the bright shadow (#0E1624) you just decided on in the upper left corner.

6. Stack the two objects

The two objects you made in steps 5 and 6 are stacked exactly on top of each other.
And then, oh my... I see...

7. Final touches to complete the icon.

I just put ZZZ on top, but this completes the icon.

Building Neumorphism app in Swift

Now that the icons are ready, everyone is waiting for you to implement the Neumorphism in Swift. Let's go!

Immediately I searched "Swift Neumorphism github".
And I found it! The library of our great predecessors!
https://github.com/hirokimu/EMTNeumorphicView

It's the best library for Neumorphism UIView.
Huh? Why not implement it full scratch? I do not.

Recording Screen

I used EMTNeumorphicView to create buttons.
The concave buttons are cute.

Playback Screen

It applies voice recognition to the recorded voice and displays only the sound that looks like a sleep mumble with the result of voice recognition.
It's not too noisy even if it's a list.

Source Code Release.

I'm not doing anything technically interesting, so I'll just publish the source code this time...
Code reviewers welcome! 🙇️
https://github.com/KitaharaMugiro/NegotoRecorder

"AI SleepTalk Recorder" is now available on the AppStore!

I also released it to the AppStore.
It's only 2$. Nothing is free. I'm planning to upgrade.
https://apps.apple.com/us/app/id1521147935