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).

  • Isn't an easier sign-in process to use OAuth/OpenID? – Midas May 4 '16 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 – Adrien Be May 4 '16 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 May 4 '16 at 10:22
  • Too true. I added a section for this case in my answer. – Adrien Be May 4 '16 at 10:41
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.