Inspired by the iOS7's transitional experience, I crafted the Carshare's signup experience around that.
Check out the Full-view
1) The background interface blurs with a 50% black overlay and make way for the signup modal which drops from the top using a rubber band effect.
2) The user then selects if he wants to rent cars or list his car for rental. From there, the UI transitions without reloading to a larger UI (window becomes taller, top photo becomes larger, red button slides down and content appears in the middle).
3) The icons are slightly animated and show information based on the type of user you are. Visual design-wise, those icons are basic Symbolicons Line icons separated in Sketch and each layer was given a different colour to match the Carshare style. An overall drop shadow was given to the icon to add a little bit of depth.
4) The user confirms his basic info and is given an option to skip the email verification by connecting with Facebook.
5) Since Carshare depends on a trustable network, the user is given the option to verify his phone, insurance, etc. in a 3-step process.
Sorry for the long description. I'm trying to explain more my thinking process behind my projects and bring a little bit of UX to the UI on Dribbble. :)
3 months ago
NICE, I like icons~
@Rex Z Thanks Rex, glad you like the icons as they are the main heroes of each page. :)
Awesome... Sir, in the second screen under List your car would you consider making text center aligned with the icons?
This is great! Love to see more detailed explanations behind designs. Have you thought about showing the animation with After Effects or similar program?
@Avinash Tripathi Yep, that makes sense. Thanks for pointing that out!
@Jay Robinson I'm dying to learn an application like After Effects to lay out the UX/animations more. I wish there was an effortless way to do and easily share. For now, I'll have to learn those intensive applications.
@KhurramButt Thanks for leaving a comment!
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–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter