Concept for an iOS menu animation. The menu title changes depending on which screen you're on. The first screen you enter the app on will say MENU to provide a cue as to what the button is.
5 months ago
Interested to see it in practice!
Depending on the goals of the app, this approach may be backwards (no benefits over tap bar, etc).
But for the right UX it could apply nicely. Nice mockup. :D
Very nice! I think using ease-out on the closing animation might make it feel a bit more responsive.
I love the colours, the interaction, the button style. Love it all!
I'd say speed it up a bit on the opening, and when you select an option, have the initial speed be faster. I hate waiting because of the "loading of the content" so every second I can get counts. I really love how you shift the menu button to an "x" when it's activated
Agree with @Rik Schennink. Or maybe just make all animations go faster.
by Rik Schennink
Turned the menu concept by @jeremey into a codepen.
5 months ago
I agree with @Newar, I think it definitely depends on how it's used in a real-life instance. People are so accustomed to menus at the top left or anchored at the bottom with other navigation elements, but to have this float over the top of the content might be a bit distracting if you have a longer page of content.
Really nice concept !
@Anthony Fonte I like how in this setup the button is closer to your thumb.
Really like the 'tap' animation
very very cool!
I feel like the animations need to be a little faster. However, I still think it's a good concept for some apps (it's not for every app — for example, apps you need to navigate through quickly).
Cool work mate! Looks sick :)
Coded up a version using SCSS and Bourbon here: https://github.com/nc/menu-concept
@Rik Schennink very true... proximity to your thumb is key, but it doesn't give us a clear indication of how this will be handled when there is content on the screen that impedes on the menu.
what do you use to animate this stuff?
@Keenan Cummings After Effects for the animation
keyboard shortcuts: ← previous shot → next shot 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.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.