It took me a while to understand what all the fuss was about. To me it is not immediately understandable that it's a mockup of a credit card's back. The reason? The proportions aren't right. The form is too wide and the corner radius is too short.
Having said that, it's a good concept.
Very nice. I'd suggest styling the select menus (even just giving them a background color, so they're drawn without the aqua). It'll probably let you bump the font size of them up too, which could push the billing zip in line with the CCV.
This is one of my favourite things I've seen on Dribbble. I hate that it seems so obvious now. I love when people think out of the box, but it ends up being something that we should have been doing all along.
39 Responses (page 1 of 2)
Working on some new payment UI.
over 2 years ago
Great implementation of a really common UI pattern. Well done. And welcome to Dribbble!
over 2 years ago
Thanks Jason! Happy to be here.
over 2 years ago
Yea this looks good Sean. I like how the labels are very subtle. People know what to do, no need to emphasize it.
over 2 years ago
Pro
Tim Van Damme
Brilliant concept!
over 2 years ago
I like how intuitive it is to fill out. welcome!
over 2 years ago
Pro
Brad Haynes
It feels like the back of a credit card, brilliant!
over 2 years ago
Wow, that's just genius!
over 2 years ago
Just echoing everyone else here. Great work. More forms should be this intuitive, copying the physical card is brilliant.
over 2 years ago
Yeah, what everyone else said. Great approach, man.
over 2 years ago
Pro
Iconfinder
That is just brilliant!
over 2 years ago
brilliant. seriously.
over 2 years ago
#win
over 2 years ago
Sean, this is by far the best credit card input form I've ever seen!
I'll definitely copycat your idea when I need it! :)
over 2 years ago
I see what you did there. win.
over 2 years ago
This looks awesome Sean! Think you just started a design trend.
great to see you on Dribbble, I just got drafted today!
over 2 years ago
It took me a while to understand what all the fuss was about. To me it is not immediately understandable that it's a mockup of a credit card's back. The reason? The proportions aren't right. The form is too wide and the corner radius is too short.
Having said that, it's a good concept.
over 2 years ago
Pro
Josh Hemsley
Wow yes... you my friend have just created a monster! Great concept!
over 2 years ago
Pro
Prekesh Chavda
i'm angry i didn't think of this,
brilliant!
over 2 years ago
Genius!
over 2 years ago
Pro
Clint Balcom
Very clever. There's a fair chance I, and others, will be <del>stealing</del> drawing inspiration from this in the future.
over 2 years ago
Pro
Jordan Singer
Sean, would you mind if I rebounded this with my mock-up of this awesome UI?
over 2 years ago
Rebound
Credit Card Form
by Jordan Singer
This is a mock-up of @seanami's Credit Card Form shot. Just added some text shadows, and other touchups.
over 2 years ago
Very nice. I'd suggest styling the select menus (even just giving them a background color, so they're drawn without the aqua). It'll probably let you bump the font size of them up too, which could push the billing zip in line with the CCV.
over 2 years ago
Pro
Jono Mallanyk
This is one of my favourite things I've seen on Dribbble. I hate that it seems so obvious now. I love when people think out of the box, but it ends up being something that we should have been doing all along.
over 2 years ago