The login page is the most visited and least designed screen in most products. Every user sees it, often daily, and every second of friction there is multiplied by every session. The best products treat it as a real design problem. Here is what they do.
Lead with the fastest method
Most users have a Google or Apple account open in the browser. Put those buttons first and make them large. Email and password or a magic link comes below. If you support passkeys, offer them clearly: "Sign in with a passkey" with a short explanation for anyone who has not used one.
One goal per screen
A login page has one job. Remove the marketing, the feature tour and the newsletter checkbox. A logo, a heading, the sign-in options and two links: "Create an account" and "Forgot password". That is the whole page.
Sign up should feel shorter than login
Ask for the minimum: email, or a social account. Collect name, role and company after the user is inside, ideally while they set up something useful. Every field on a sign-up form costs completions.
Error states that help
- Say what went wrong in plain words: "That password does not match this email."
- Keep what the user typed.
- Offer the fix: a reset link right next to the error.
- Never clear the form on error.
Error states are where most login pages are weakest. When you collect examples, look for these specifically.
Small details that matter
- Show and hide password toggle.
- Correct input types so phones show the email keyboard.
- Autofill that works with password managers.
- Remember the method the user chose last time.
- Readable contrast on placeholder and helper text; check it with the free contrast checker.
Where to find examples
Mobbin and Refero have large sets of real login and sign-up flows from shipped apps. Your own browser is full of them too: every product you sign in to this week is a reference. Screenshot the ones that feel effortless, and the ones that annoy you, with a line on why.
Save the flow, not the screen
A login reference is most useful as a sequence: the entry screen, the error, the reset email, the success. Save three or four screens together in one record. In GetRef, text on each screen is read automatically, so a search for "magic link" or "passkey" finds the flows that use them.
For the screens that come right after sign-in, see onboarding UX best practices and empty state design.
Common questions
- What should a login page include?
- The fastest sign-in methods your users have, usually Google or Apple plus email; a clear link to sign up and to reset a password; helpful error messages; and nothing else competing for attention.
- Are passkeys worth offering?
- Yes, as an option alongside your existing methods. They are faster and more secure, and adoption is growing quickly, but most users still expect a familiar fallback.
- Should sign up and login be on the same page?
- They can be, with a clear toggle, or separate with obvious links between them. What matters is that a user who lands on the wrong one gets to the right one in one click.
