Interesting Takes on Log in / Sign Up Forms
Log in forms are often just two fields: username and password. Sign up forms are often scarcely much more, perhaps asking for an email address as well and a repeated password.
These two types of forms are often tied at the hip. The links to get to them are often right next to each other. They often are styled similarly. And this makes sense… functionally, they are also often tied at the hip. An attempted sign up from an existing user might just log them in. A failed log in might suggest signing up. Social buttons might also work both ways.
All that to say, these forms don’t have to be boring! Designers have been taking the opportunity to do clever and interesting things with these forms.
Let’s gawk at some awesome ones.
Ian Hazelton’s Color Changing Field Sliders
The unused form fields sliding away is a nice transition, but the color change really locks in the idea that it is a different form with different functionality.
Tommaso Poletti’s Shuffling Cards
I might argue it’s not entirely clear that “Log In” button is going to shuffle the forms for you, but I love the interaction and how you can see unused form underneath.
Nikolay Talanov’s Slide Across the Canal
What looks like an innocent button that will take you to the page you actually need instead initiates a some major sliding action that reveals the new form. Most satisfying is how you can watch the image knockout slide by.
Mohan Khadka’s Flippy Form
No JavaScript whatsoever here. The flipping effect is of course CSS 3D transforms, but even the toggling between forms isn’t a class name change, but a hidden input combining labels, checkboxes, and the sibling ~ combinator.
Josh Sorosky Slide’n’Zoom
This one has a similar feel, only slides instead of flips. There are nice subtleties too, like an intuitive-feeling checkbox and how the background changes zoom level a little bit when changing between the two.
Jamie Coulter’s Flop Down Authenticator
Speaking of 3D transforms, this login form hits the deck (literally) while it is logging you in.
Anna Batura’s Slider
There are so many nice subtleties in this slider, like the moving background and how the form fields are sliding in a different direction than the white form area itself. Plus an interesting success state!
Riccardo Pasianotto’s Push-Through Fields
Hardly takes up any space at all when you’re using that Z axis!
