Login page design is a crucial part of your website’s UX journey. Good design helps drive visitors to your website and convert new visitors into leads. It also gives returning users an easy way to log in to your website.
You want it to be seamless, attractive, and simple to use.
We want to help. Let’s walk through the best tips and best practices for crafting a good login page design—and gives you plenty of examples of great ones to inspire you.
10 login page design tips and examples
We’ve included both what you should and shouldn’t do when it comes to your logo page design.
Not all tips and examples will apply to your website. The trick is to choose what’s right for you.
Tip 1. Make it obvious
You don’t want to make your user hunt around for the login area. The longer they have to look, the more frustrated they’ll be. The more frustrated they are, the less likely they’ll end up logging in.
A great example is Gmail’s login page.
Gmail’s login page.
Everything is front and center. You know exactly where you need to log in and what to put into the fields, and if you don’t have a Gmail account, it allows you to easily create one right by clicking “Create account.”
Make your login area obvious to make it as easy for your user as possible to log in.
Tip 2. Use social login
Social login is rapidly becoming the way users login to their web accounts.
In fact, 88% of users say that they have used social logins (Source) and 86% of users say that they’ve been bothered by having to create new accounts on websites (Source).
And for good reason. Creating multiple accounts for different websites is time-consuming and confusing. It’s difficult to remember a bunch of different passwords and usernames.
Social login cuts through all of that by allowing users to create an account using information from one of their social media accounts.
Here’s a great example from Medium. The blogging platform allows users to log in using Twitter, Facebook, or Google.
Medium’s login page.
Some only offer one social platform, such as the tabletop RPG store DM’s Guild:
DM’s Guild’s login page.
There are even social media sites that allow you to use a social login:
Pinterest’s login screen
Social login creates an easy and intuitive login page design for your user.
Want more posts like this in your inbox? Sign up for our weekly digest.
Tip 3. KISS (Keep it simple, stupid)
Your login page should be simple and straightforward for your users.
For example, check out Instagram’s login page design:
Instagram’s redesigned login page.
Two input fields along with the option to log in with Facebook. It’s simple, effective, and provides a great experience for their users.
So when you create your login page design, keep in mind that you want to KISS: Keep it simple, stupid.
Tip 4. Distinguish between sign up and sign in
If a user comes to your website to register—or if they’re returning to log in—you want them to be clear on where to go.
Help them by making your login field distinct from your registration field.
A great example is Facebook.
Facebook’s login page.
Notice how the signup field is front and center. New users can register right on the page, while returning users can use the fields right up top to log in. See how the “log in” section is marked by a dark blue border, completely separate from the rest of the page?
Using different colors, layouts, and copy are easy ways to make the login fields distinct from the registration fields. It doesn’t have to be complex.
Here’s an example from Dribbble of a simple change that makes all the difference.
Dribbble’s login page.
Again, the use of borders makes a subtle, but helpful, difference.
Tip 5. Skip the username
Save your user the headache of having to come up with and remember a username for your website. Instead, have them sign up using their email address or phone number.
Does your user really want to come up with a username? Or is it just another chore for them on the journey to register and login to your website?
LinkedIn gives users the opportunity to log in with either their phone number or email address.
LinkedIn’s login page.
This is double-also great because users might forget which email address they used to log in to your website. Give them the option of using their phone number and they’ll have an easy way to log in.
Tip 6. Show them the password
Giving your users the option to see their password as they type makes sure they can easily log in to your website on the first try—instead of making a bunch of typo-ridden attempts.
WordPress allows users to see their password as they type it in. All users have to do is click on the eye icon in the password field and they’ll be able to see it.
WordPress login page.
Sony also does the same with their Playstation Network login page design.
Sony PlayStation Network login page.
Alternatively, you can include a “Show Password” checkbox that accomplishes the same goal.
Source: FourthBottle
Tip 7. Remember your users
Is there anything more frustrating than returning to a website you logged into earlier only to find that you need to log in again?
When your user returns to your website, make sure they’re already logged in or that certain fields are prepopulated for them for easy login.
Google does an excellent job of this. Whenever users need to sign back into YouTube, Gmail, Google Drive, or any other Google brand, their information is remembered allowing for an easy login process.
Gmail’s “Choose an account” screen.
Ally Bank allows users to check a “Save username” box allowing the website to populate their username as soon as they arrive at the website. This is another great method of remembering your users.
Ally Bank’s login page.
Tip 8. Make password recovery painless
Sometimes your users are going to forget their login information. When that happens, make the recovery process as painless as possible.
Chase Bank includes a button at the bottom in case users forget their username and password.
Chase Bank’s login page.
The Illinois Tollway’s I-Pass website also includes two separate links for if users forget their username or password.
Illinois Tollway’s I-Pass login page.
Evernote does something clever with theirs and lets the user know how long ago they changed their password.
Evernote’s login page.
This small move can jog users’ memories and help them remember what their password is.
Make it obvious where users should go if they forget their login information. You’ll make a frustrating situation less frustrating—and your users will love you for it.
Tip 9. Let users know their caps lock is on
We’ve all been there: Frustratingly typing and retyping your password to no avail, only to find that you left your caps lock on the entire time.
Prevent that situation from arising by warning your user they have their caps lock on when they do.
A great example of this comes from WordPress. A small red warning symbol appears when a user’s caps lock is on.
WordPress lets you know when your caps lock is on while you’re trying to log in. Source: Jaspreet Chahal
Microsoft’s Edge browser also gives users the choice to turn on notifications for when their caps lock is on while they type.
Source: discourse.wicg.io
Tip 10. Log in without a password
Give your mobile users the opportunity to log in without having to remember or input their password.
For example, Charles Schwab Bank allows their users to log in using the fingerprint scanner on their phone.
Charles Schwab Bank’s login pages. Source: Charles Schwab
Similarly, Ally Bank allows iOS users to use their Face ID to log in to their accounts.
Ally’s login page. Source: iOS App Store
BONUS TIP: Make your login page design amazing with InVision
To really make a login page design that stands out, you need the right tools.
Luckily, we’re here to help.
Sign up for a free InVision account today and create your first login page design.
by Tony Ho Tran
Tony is a content marketing consultant and freelance writer. His work has been seen in Business Insider, MSNBC, Hootsuite, and GrowthLab.
