UI Design Aesthetic

When Apple introduced the App Store in 2008, it created a revolution in the app industry. From that day on, anyone with a computer will be able to create and publish their app all over the world. In order to match the current default apps in iOS many designers mimic Apple's skeuomorphic aesthetics and that became the standard for many years.

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.
UI S19 01

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.
UI S19 02

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!
UI S19 03

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. UI S19 04

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. UI S19 05

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. UI S19 06

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%.
UI S19 07

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.
UI S19 08

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.
UI S19 09

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

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

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.

UI S19 12

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.