1

I want to design an easy-to-use form for my users to sign in.

I have been looking for mockups as a first phase, but I have found more fully designed & live examples of login forms. It's great but I'd like to have mockups in order to abstract away any complexity or distraction.

I expected to find more resources on mockups of sign-in forms since it's such a recurrent component: it's on almost every website/web-app. So let's try to help solve this, that'd be great if you can share your creations here or link to relevant web page(s).

Improve this question
4
  • Isn't an easier sign-in process to use OAuth/OpenID?
    – Midas
    Commented May 4, 2016 at 9:48
  • OAuth is a protocol so I doubt it specifies anything about the UX. But maybe I'm wrong. Note that OpenID is built on top of OAuth. see also oauth.net/documentation and en.wikipedia.org/wiki/OAuth
    – Adriano
    Commented May 4, 2016 at 9:52
  • It inherently dictates the UX as it is a one click sign up/log in, and I personally find it preferable to having to create yet another username/password combination.
    – Midas
    Commented May 4, 2016 at 10:22
  • Too true. I added a section for this case in my answer.
    – Adriano
    Commented May 4, 2016 at 10:41

2 Answers 2

Reset to default
3

Common requirements:

I have identified common requirements/patterns for the "login form" concepts I came across.

  1. Use OAuth/OpenID for authentication
  2. have the login on overlay: removes the background image issue
    • as it is often hard to have a responsive background that does not get ugly overlaid by the login box in some resolutions
  3. username
    • input
    • label - optional
    • placeholder - optional
  4. password
    • input
    • label - optional
    • placeholder - optional
  5. show password checkbox
  6. remember-me checkbox
  7. password forgotten link
  8. register link

Mockups

I have "translated" to mockups some of those fully designed & live examples mentioned in the question & added some of the concepts from the "common requirements" mentioned above.

Feel free to add your contribution in an additional answer. Thanks.

Mockups for "username + password" login form

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Mockup for OAuth/OpenID authentication OR "username + password" login form

OAuth is used a lot these days for users to log in to third party websites: OpenID, Microsoft, Google, Facebook, Twitter, One Network etc.

In that case, it is "just" a button redirecting to the relevant authentication service.

Many websites present both the option of login in using OAuth or regular credentials. So you'd combine one of the mockup solutions shown above with the OAuth button(s), see example below.

mockup

download bmml source

Related:

iPhone - Password Forgotten - popup dialog or modal?

http://codepen.io/mweint/pen/aquez

http://codepen.io/oknoblich/pen/LfmGF

http://codecanyon.net/item/business-pro-css3-buttons-elements/1238832

http://oauth-io.github.io/oauth-js/

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.