I have here for you a collection of 20 awesome and great looking log in forms shots from Dribbble. I do hope you check them out and learn from them for your next log in design execution. I think log in forms are so simple to create yet many of the ones I have used are poorly executed and nothing to get excited about. However, this collection of Dribbble shots is exactly the opposite. I hope you enjoy all 20 of these, so without further ado, let's get to it!
Login Forms for Websites and Apps
In the spirit of the release of iOS7, this log in screen takes the subtle animation of iOS7 backgrounds to a new level. Here the background is a completely animated graphic – possible a gif even. Although the background is actually not too subtle, I think it is something else as you don't see this often; you don't see these types of app designs or splash screen often at all.
Once more in the spirit of iOS7, this log in screen and accompanying interface, embrace blurry but colourful background and keep things pretty damn simple. I must say both of these interfaces are actually quite minimal, with the thin lines and lack of actual input field backgrounds. But, the lusciously coloured background adds a bit of personality to make this interface friendly and awesome.
A lovely design if there ever was one; the blue background is very bold compared to the crisp white logo, text and input fields. The green button actually looks like a button – although rest of the UI is flat – and the hue works very well with the blue.
What a strong colour palette! And, of course, what a different way to think about logging in; the reason this is not a common sign up flow because it has its usability flaws. But, in terms of design we can all dream about this out of the box log in.
Compared to the previous shots in this line up, this one is fairly calm and simple. The colour choices are wonderful. The page is very to the point; it does not have any unnecessary or, worse, distracting shenanigans as no log in page ever should.
Here we have another bold design for a simple log in. The dark log in UI in addition to the dark and blurred background and the bright, slick and thin text has a very good essence of mystery and glamour going on. What else could you possibly want but a sexy log in page?
Now we are presented with a dark log in and an unconventional red text and red button. I'm not sure that the red on red works but let's go with it – it is different and daring, so let's applaud that. I think the fear of red in buttons is irrational as it is the context in which a red button is used that determines how user will react to it not the colour itself. I'm sure no one is going to freak out while pressing this log in button.
This shot is definitely one of my favorites from this collection as it is so simple and clean but not boring. The colour combination in this design is amazing as these three different shades work so well together. And, it looks so good! What a way to create a simple but good looking log in interface.
Here is a bit more complex and more extensive interface. As with many platforms today, you are allowed to log in with your preexisting account credentials form Google, Twitter or Facebook and forego creating another new account on another new website. But, if you want to you still can create your own account anyways.
I find this interface to be creative – it has some personality to it thanks to the handwritten notes and arrows, the colour scheme is quite nice and different form the typical blue and silvers we see everywhere. At the same time the background images is not a focal point like we see on every landing page now-a-days either, it is a light log in/register page and that is it.
I really enjoy the clutter free design that we have here. There is no navigation to distract you; there is no side content to annoy you either. The user flow is simple, and so are the user goals: you can choose between Platform and Opentag and just log in. If this is your first time here, you are welcome to check out the create an account link towards the bottom. I think this is a well organized and well executed log in interface.
This one too is one of my favorites as I enjoy the simplicity of this flat design. There are, once again, little distractions; the focus is on logging in. You have a clear logo present which is nice and if you don't have an account you have a way of creating one though here as well. On top of that, the colour choices are cohesive and work well together.
I really like this design as things are big, the log in button is big, the text on the button is big, the icons are big; you get the picture. Additionally, the log in button is a bright orange colour so you can't miss it; it does not blend in with its surroundings as no call to action ever should.
I'm not sure if I agree with the colour choices between the input's background and text colours but besides that I think this is a well design monochromatic form. I do like how that two input fields are attached together because they obviously belong with each other. I also like that the sign in button stands out.
The fact that the website remembers who you were before you were logged out is awesome; it is actually pretty cool. By the looks of it, this is meant to be a secure log in and it does feel as such thanks to the two logos – McAfee and VeriSign – below it. I also like the comical avatar used for this, it just makes this whole experience so pleasant even though it is supposed to be very serious.
This is the third favorite of mind here and that is thanks to the playful colour scheme. Yes, this is a flat design; yes, this is so elementary is can be boring, but it is not. I find that flat design with the well picked colours can often come off as friendly and character filled and this log in interface is exactly that! I'd love to see more of these in the apps and website I log into often.
Ah, one more blue interface! I am a bit skeptical about the shade of green here but the few various blue shades I see in this design work very well with the white text – that is very well done, indeed. I find that the informal lowercase text to give this interface some personality as well.
I like this form, I really do because it is obviously the focal point of the page and there is nothing distracting me from it. Sure there is a logo and a registration invitation link but they are nowhere as prominent as the big ass log in UI. Against the darkened background the bright inputs just call for your attention and call for you to log in right away!
Here we have a combination between a skeuomophic badge and flat UI. What do you think? I believe this is done quite well. Do not even think about insulting the shadows in the badge as they are not hurting the design, the design of this is actually quite cute thanks to the small amount of skeuomophism, as well as the font choices and colour scheme used in this design.
Once more we have a fascinating log in screen; it is actually more busy then some examples in this post but the colour scheme used is well chosen and makes the whole thing come together pretty well actually.
Your own log in shots
If you have a log in shot from Dribbble you would like to share throw it in the comments below! I would love to check out your work!
No comments:
Post a Comment