Beautiful Examples of Login Forms for Websites and Apps

• 7 minutes READ

I have here for you a collection of 20 awesome and great looking login forms shots from Dribbble. I do hope you check them out and learn from them for your next login design execution. I think login 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

Login Form

In the spirit of the release of iOS7, this login 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.

Newsletter Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

Once more in the spirit of iOS7, this login screen and accompanying interface, embrace blurry but colorful 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 colored 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 color 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 login.

Compared to the previous shots in this line-up, this one is fairly calm and simple. The color choices are wonderful. The page is very to the point; it does not have any unnecessary or, worse, distracting shenanigans as no login page ever should.

Create Websites with Our Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

Here we have another bold design for simple login. The dark login 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 login page?

Now we are presented with a dark login 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 the user will react to it not the color itself. I’m sure no one is going to freak out while pressing this login button.

This shot is definitely one of my favorites from this collection as it is so simple and clean but not boring. The color 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 login interface.

Here is a bit more complex and more extensive interface. As with many platforms today, you are allowed to login 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 color scheme is quite nice and different from the typical blue and silvers we see everywhere. At the same time, the background images are not a focal point like we see on every landing page nowadays either, it is a light login/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 login. 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 login 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 color choices are cohesive and work well together.

I really like this design as things are big, the login button is big, the text on the button is big, the icons are big; you get the picture. Additionally, the login button is a bright orange color 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 color choices between the input’s background and text colors but besides that, I think this is a good design monochromatic form. I do like how those 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 login 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 color 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 colors can often come off as friendly and character-filled and this login interface is exactly that!

I’d love to see more of these in the apps and website I login to 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 login UI. Against the darkened background the bright inputs just call for your attention and call for you to login right away!

Here we have a combination between a skeuomorphic 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 skeuomorphism, as well as the font choices and color scheme used in this design.

Once more we have a fascinating login the screen; it is actually more busy then some examples in this post but the color scheme used is well chosen and makes the whole thing come together pretty well actually.

Your own login shots

If you have a login shot from Dribbble you would like to share throw it in the comments below! I would love to check out your work!

Paula Borowska

Paula is a freelance web designer who documents her travels with photos and words.

Posts by Paula Borowska

Super-Intuitive Drag & Drop Template Generator

Create beautiful responsive emails and newsletters easily.

Learn more Try Free
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree