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.
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 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 (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!
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.
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.