Building "Neumorphism" iOS app
Tags: ios, swift, neumorphism
Published: 2020-07-02 11:30:42


![ニューモフィズム](https://webdesign-trends.net/wp/wp-content/uploads/2020/05/Freebie-Neumorphic-UX-UI-Elements-1024x768.png)

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

![アイコン作成イメージ.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/7912ecb5-984e-fe6d-d3bf-b22511604afe.jpeg)

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

![アイコン作成イメージ.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/d2b78495-0378-fd68-9aa4-fd72a98f28d1.jpeg)

## 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.
![アイコン作成イメージ.003.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/87b6e62c-52f3-c78f-63bb-21594b78bb53.jpeg)

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

![アイコン作成イメージ.004.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/67bb1efa-00bd-3093-7eeb-c149fd5e2029.jpeg)

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


![アイコン作成イメージ.005.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/a621c9f3-8cfd-67c5-6cdf-1711c236af79.jpeg)

## 7. Final touches to complete the icon.
I just put ZZZ on top, but this completes the icon.

![アイコン作成イメージ.006.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/7d3bb9a5-6556-b7e4-7375-c61a53ed108f.jpeg)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f7s6y0phokmdcbjhvei5.jpeg)


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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3akljrnu5nup0thcl6r4.jpeg)

# 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