Daily UI Challenge 010 - Social Share

Day 010 of the Daily UI Challenge: Social Share.
For this challenge, I create Popsicle, another concept app.

Next, in this description, you can read a complete explanation of my design creation.
___

Popsicle may be a recipe app which is all about sharing with partners, family or friends. Just like a popsicle!

The first screen represents the initial state of the design. It's just showing a recipe of a healthy crumble. Above the description card, there is a flat circle button with the popsicle button.

The next screen is where the design starts animating. Pressing the button will first raise it (I follow here the material design guidelines).
How I did that? I add a light shadow to the button background and use the auto-animate option between the two screens with the "wind up" easing effect and duration of 4ms.

All the share options appear on the last screen.
I increase the width of the button background to the left and decrease a little the bounds of its corners to have a rectangle aspect and cover all the icons.
Then I set the opacity of the social icons to 1. I also use a different init scale for each of these icons to have a progressive effect while animating.
The transition to this screen starts without any delay. The same previous easing effect is used but with a longer duration of 8ms.

__

Please tell me what do you think about this design and press "L" if you like it.

Thomas L.
“Everything you can imagine is real” — Pablo Picasso
Get in touch

More by Thomas L.

View profile