9 inspiring website login form pages
Login page designs should be easy to understand and require no thought from the user. Here are 9 to inspire your next design
Following our article on awesome sign up forms, we’re taking a closer look at inspiring login forms that have great UX and make signing in a cinch.
When it comes to a good login page design, you want to make it as easy for your users as possible to gain access to your product or service.
One hurdle too many and you’ll frustrate your users. To prevent frustration, here are 9 login page designs that we love. Use these as inspiration for when you prototype your own
Charles Schwab
Charles Schwab is a bank and brokerage firm.
Their login form page is simple — as are the majority of login forms — and is nothing out of the ordinary.
What’s nice about this form is the ‘4 quick tips to better protect your account’ copy. It shows the bank cares about you and your security. The advice is actionable meaning you can put it into practice as soon as you’ve read it.
We also really liked this login form’s Start Page drop down menu. You can do a lot with your bank and there’s a lot of information to digest when it comes to online banking and investing.
This feature allows the users to choose which page to start on. That means they’re less likely to get lost when navigating which has the potential to frustrate your users.
Headspace
Headspace is a meditation service. Their login page is what you might expect from a company that wants you to find inner peace.
It’s minimal and the colors are muted. The type and composition of the elements is well constructed and spacious. The login form breathes.
The login page gives us three ways to log in. One of those, interestingly, is Spotify. Headspace puts their audio material on Spotify so it makes sense that users can log in with those credentials — this shows Headspace knows and cares about their audience and wants to make life even more convenient for them.
Mailchimp
Mailchimp recently went through a rebrand as it begins to mature into a fully-fledged marketing platform.
Their login page is similar to their old one with a few minor changes.
One is the injection of personality. Their illustrations are weird, hand-drawn and fitting. What’s great about this login page is you can login as you would on any login page but there’s a chance to learn something new: how to build better relationships with your audience — something that many users of Mailchimp presumably want to do.
Even though the copy is minimal on this login page it’s still clear and consistent as you can see in the forgot password/username section.
Squarespace
Squarespace takes their login form to the limit of minimalism. It’s stripped-back with no distractions, kinda what you want in a login form.
With login forms, you don’t need to convince people in the same way as you do with a sign up form so creating an environment where people can sign in without any frustrations is essential.
Squarespace opts to use social media icons for their login instead of the usual call to action buttons that you see in other forms. They work well with the design and add to that minimal approach.
Skillshare
Social login is great because it lets people sign in to a service with one click. There’s no need to fill out any forms or type your password. Skillshare give their social login pride of place at the top of the login form.
But if you don’t want to do that then right below you can type in your email and password. This login form gets the job done.
National Geographic
National Geographic has a standard login form — no surprises here. There are few elements worth commenting on because it’s a good example of a login form.
Title case is common among American and Canadian businesses and National Geographic have gone with tradition.
As you can see from the other examples, there is a mix of title case and sentence case in the titles.
What we like about this page is the copy “I haven’t logged in before, but i’m a subscribing member.” Good copy uses language that’s familiar to its readers and we can imagine this line coming straight out of someone’s mouth.
Uber
Uber uses some cool, on-brand illustrations on their sign in page.
Users won’t be on a sign up page for long (if you’ve designed it well) but using illustrations add visual interest and give a little life to an otherwise bland screen.
Here users can sign in with either their email or mobile phone number. Easy!
PayPal
If you thought Squarespace was minimal, PayPal takes the prize. You wouldn’t know which site you were on if it wasn’t for the small PayPal logo at the top of the login.
What’s interesting and unusual about this login page is that it’s in two parts. You enter your email then hit next to go to a screen to change your password.
We don’t know the science behind why PayPal’s broken down their sign in process like this, especially since it takes longer than normal.
Diprella
We saw this sign in page on Dribble by Selecto and thought it looked awesome.
The animation combines both the sign up and the sign in pages which is a nice touch. As you’d expect, there are social login icons, a forgotten password link and indicative placeholder text — all helping the user do what they want to do.
9 inspiring website login form pages — the takeaway
Login forms are an exercise in making your users’ lives easy. Social logins, placeholder text, and clear labels are some of the ways you can create a user-friendly login form. Use the 9 above as inspiration. Now, start prototyping!
