Used Flinto and After Effects, both, to create this. Source files in comment. (dribbble.com)
over 5 years ago from Sahil Dave, Designer+Dev
over 5 years ago from Sahil Dave, Designer+Dev
Give us a little more color … what is this for, what problem is it attempting to solve?
I would get so pissed off trying to fill this out.
What is the problem you're solving here?
Can we not design things just do design them sometimes? Maybe this was an experiment for him to just see if it could be done and improve his skills. And he decided to share. What's the big deal?
We can, but in order to get helpful feedback, the poster needs to tell us what we're evaluating and why it matters. Design is, by definition, a problem-solving process … are you looking for animation input? UX input? Someone to stroke you and tell you you're wonderful?
What was your thought process behind making the num pad 1 to 6, then 7 to 0 in two rows?
With the screen sizes increasing, in my opinion, the 3x4 layout can be too space taking and not that relevant. The size of keys is 36 dp/px in height which is a good enough size for typing.
Also, seeing that entering CVV is an important step, the user would stop, think and type to avoid typos, so give buttons with more height should not make that much of a difference.
I started with 3 rows with delete, submit and also a peek/show button. Eventually, I removed the peek button and unmasked the typed CVV.
Let me know your thoughts on this.
I get what your saying, but I think numpads are a pretty standard interface nowadays. Both physically and digitally. I think you can use screen space to keep this standard.
This approach would add a cognitive load that I don't think its necessary here. You are asking the user to re-learn something that has been pretty standard for decades.
I suspect this would make it more error prone. And it will make the task harder cognitively.
Nice explanation and thought process, just wanted to point out though that 36dp is good for the button but the tappable target should be 48dp on Android. Depending on density it's 44px for the web under a11y and Apple, 48px for Windows and 7mm on physical devices.
Flinto is amazing and under used haha. I think they need a more agressive communication about their product!
Although Flinto has its own quirks, it is overall a very good prototyping software.
Definitely major quirks. I would import stuff from Sketch into Flinto and have weird font flickering and size respect issues. However, when you use the tools straight from Flinto for rendering, it works pretty damn well (and really, really quick iteration). Still getting a hang of the tweening of animations and managing the timings as that can be an awkward interface. Lots of potential.
Source files are here - https://gum.co/Kgpx
I think the animation is well done.
That said, this would take way too long to fill out, the keyboard is weird, and credit cards all look different so this realistic graphic might confuse people.
The animation timing feels really frantic. The action isn't staged very clearly.
The overall weight of the motion is pretty heavy too. It requires a lot of optical effort to track all the flipping and sliding.
I think you could do better with the overall choreography.
I thought the same thing. It's really unnatural.
Yes, the motion felt a bit jerky / abrupt towards the end.
Would be great to see a quick motion 'wireframe' from you to see how you would do it differently - great for learning from a motion pro ;)
How much time did it take you to build this? Very cool!
Flinto is still my go-to app for more nuanced prototypes.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now