I’m not quite happy with the look and feel of the app just yet, but for this post let’s make the Random Card Button look similar to the card above it. I am aiming for a neomorphic design that is minimal, light, and still as easy to navigate as the old design but looks clean.

the carpet doesn’t match the drapes!

Neomorphism uses shadows and highlights instead of hard lines, which helps it mimic an actual button, but we need to be careful not to take it too far or it the contours will be too subtle and some people might not even see it at all.

We can achieve this effect by overlaying shadows with slightly different positioning and opacity.

much better!

The second little thing we can add to add to the realism to the button is the pushed response, using the configuration.isPressed we can say that the shadows show show in a certain way, and when the button is pressed we can show the shadows in opposite directions to complete the effect, like this.

Here is a fantastic post by Paul Hudson on how to build neumorphic designs with SwiftUI

Next up I would like to change the bottom menu bar to be clear and the font and colour need some work.

Other posts in this series:

Leave a Reply

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