UI Design Aesthetic

Skeuomorphism

Apple wanted to create a similarity between the interaction of real life things and the iPhone apps. That was one of the reasons they decided to use skeuomorphism, and many designers followed the example. Example: The phone icon in apple emulates the phone receiver.

Flat Design

Flat design allows us to create more simplified designs as compared to skeuomorphism. It is a minimalistic approach to design and was first applied by Microsoft in its Windows system. Flat design creates icon like images to specify applications rather than trying to bring real life things to the layout.

Neumorphism

Neumorphism (from neo-skeuomorphism) originated by the combination of skeuomorphism and flat design. Neumorphism makes use of highlights as well as shadows to create really clean looking interfaces. Head over to Neumorphism.io to create some really cool buttons!

Further Information

There is an interesting video, oldy but goody, about skewmorphism vs flat design. It shows many interesting facts about the evolution of UI design.

Create a neuromorphic button

For this exercise we will work in Figma but feel free to use your favorite design tool. You will find the the Swift logo in the Figma file. Next to it, let's draw a circle sized 245 * 245 by pressing O.

Next, let's add a linear gradient to the circle. In the upper end we will use #F2F6FF and in the lower end #FFFFFF. Make sure that the gradient is diagonal from top left to bottom right.

Place the Swift logo in the middle of the oval. Now, give two drop shadows to the Swift logo so we can create a depth look. For the first drop shadow, put 20 for both X and Y, 40 on Blur and for color let's use #000000 with an opacity of 40%.

For the second drop shadow, add the following values: 250 for Blur, 0 for X and Y and for color #4037D8 with 61% of opacity.

Now, let's work on our oval. We will add four effects to it to create a sort of 3D visual. First, add a drop shadow with the following values: for X and Y -31, 62 for Blur and for the color #FFFFFF with 50% of opacity.

Next, add an Inner Shadow with -12 for X and Y, 12 for Blur, set the color to #BECCE5 with 100% opacity.

Then, add a new inner shadow with 6 for X and Y, 12 for Blur and #FFFFFF with 100% opacity.

Finally, add a new drop shadow for the circle, for X and Y let's put 62, for blur 124 and set the color to #D9E1F2 with 100% opacity. Once you add all these parameters, you will notice how beautifully we transform a simple circle to a neuromorphic button.

Conclusion

As designers we are responsible for understanding the evolution of the market and where exactly we need to point our efforts to. What to learn next? is the question that we need to ask ourselves constantly.