Simple Login form for the CertTime project.
The button took a couple of weeks of on and off experiments. Also if you have the screen calibrated, you may notice a subtle unevenly shaped drop shadow and the highlighting of the form edges. The "reset" link is initially dimmed and brightens up after a few seconds, so to attract the attention of users that hesitate (presumably because of not remembering the password).
(edit) Here is a live version if anyone wants to play with it.
over 3 years ago
Really, really nice. I like the effect around the submit button. It works really well. The only thing that strokes me, right off the bat, is that there seems to be a lot of padding. I definitely feel that the closing X should be closer to the top right corner.
I'm ok with the padding, thought I think the "Reset" is a little vague. Very nice overall, I love the button.
The fading of the background is nice. How about separating the top part (the the login text is) and the login info section. Then making the top part a slightly darker color?
@Bryant - Tried that actually (I did over two dozen variations of the form styling). It looked pretty decent, but in the end I decided against it. Nothing wrong with it, simply liked this style better.
@James - you are not the first one to say "reset" sounds ambiguous. The assumption here is that if user forgets the password, he will be looking for a way to reset it. The choice of the word and its positioning next to the password target those looking to reset the password.
@Matt - the "x" is right-aligned to the input boxes. If it sits closer to the right edge, it looks odd... sort of unrelated to any other form elements.
by Alex Pankratov
Error handling of the form inputs. Messages hang outside the form on a dimmed background, and once the field gets a focus its error message is faded out.
over 3 years ago
I love the style of this. The only thing I would suggest is just that there is a lot of font style variation, the reset button is all lower case, the login text is upper case and everything else is regular case, I would maybe eliminate one of those variations, maybe make the login text normal case. Just a thought.
Thanks, Jon. Never occurred to me to assess the design from this angle. One more thing to obsess about now.
BTW I am considering replacing the "reset" link with an icon embedded at the right end of the password entry field. This should make the whole form more consistent and compact.
by Bryant Maroney
As I had stated in my comment, how about something that cuts off the 'login' text from the fields?
Now that I look at it, it may look better to keep the top part dark and the bottom light.
Gotcha...I know what you mean. Just trying to help you out my friend ;)
Yummy. This reminds me of why I drafted you.
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