Limited space require decisive component layout. To explain this concept I am demonstrating the various layout of calendar component.
How to decide each layout?
I start with signifier to most spacious layout, higher chances of accommodate all necessary component. Intermediate states are mostly dependant on one another. I think three types of component breakdown is enough to utilise it for mobile and web.
Use physics and natural motions
What if I squash and squeeze the component?
That's exactly what I do with my animation. It is step by step process. I really don't have exact plan of exciting such animation however process itself drawing that line, just keep working on it until I find it perfect.
Actual implementation is possible through React.js. Trigger points are Height and Width of entire component. Developer render the new layout and also add effect like Opacity, Position and Scale to give natural feel.
What is your take on this?
P.S. Alignment. :(
UI/UX Interaction Collections
Subtle Animation Collection
Vol 1.0⌇Vol 2.0
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2019 Dribbble. All rights reserved.
Save $200 through April 15 on Early Bird Tickets for Hang Time NYC!
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.