Login Form Showcase: 65+ Examples of Login Form Design
After putting together a registration form design showcase, the logical next step was to do the same for login forms.
MySpace's login form has a clean, elegant design
65+ examples later, it's been interesting to see the creative approaches that some designers have taken to this most basic but important element of a web site.
It's also been interesting to see what conventions stand out regarding the design of login forms.
For example, should it be login, log in or sign in? How should the forgot password link be written? What about including a cancel button? Should it be keep me signed in or remember me on this computer? Should the layout be horizontal or vertical?
I did notice that few sites laid their login forms out horizontally in order to fit into the masthead and enable users to log in from the home page or any other page.
Digg provides a horizontal login form in its masthead area
It seems that most web designers are happy to ask users to click on a link to get to the login form. This doesn't seem unreasonable to me, especially if it is combined with a 'remember me' cookie to keep you logged in for future visits.
If you're not sure how best to lay out your login form or what conventions to follow regarding labeling, then take a look through the showcase — hopefully you'll get some idea of what best practice looks like.
Posted on: June 23, 2008 | 15 Comments
Recent Entries in "Showcases"
Recent Posts
- What Type of Personality Does Your Web Site Have? (20)
- Experiment in Making an Article Sidebar More Readable and Visually Appealing (24)
- Login Form Showcase: 65+ Examples of Login Form Design (15)
- Vote for Your Favorite Typography Preferences (9)
- Conventions for Video and Audio RSS Feed Icons? (12)
- A Better Way to Create Information Architectures, Wireframes and Prototypes (11)
- Footer Design Showcase: 75+ Creative Footer Designs (21)
- Redesigning the TechCrunch Web Site Footer (18)
- Do Online Press Releases Serve a Useful Purpose? (3)
Popular Posts
- CSS Rounded Corners 'Roundup' (78)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (40)
- Blog Comment Form Design Showcase (15)
- Blog Comment Design Showcase (36)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- How to Style 'Author' Comments Differently on Your Blog (9)
- How to Style an A to Z Index with CSS (5)
15 Comments Posted (Add Yours)
really useful!
thanks Christian
1. Posted by David on June 24, 2008
Thanks, this is right in time for me. I am about to redesign my login and feel very inspired now by your collection. Additionally I will create a theme for Drupal 6 for my selected design and will gladly contribute that code back to the community :-)
2. Posted by Rainer on June 25, 2008
Hey Christian! Awesome post...thanks...you rock! :)
3. Posted by TrevorLee on June 26, 2008
How does everyone feel about making the username be the user's email address? Just seems people are always less likely to forget their email address than some randome 'username' they choose while registering for the site.
I also like how on some of the registration forms they put the example directly below the username box.
Great post and always attention to the details that are often overlooked! Great gallery of examples too. Thanks!
4. Posted by AtomicDC, Dallas web site design on June 26, 2008
wow...great idea and the great post as well.
5. Posted by An Jay on June 26, 2008
I like the Myspace approach. And I think it should be login because it is more international. The Germans would be a little bit confused about log in or sign in.
6. Posted by Web Designer Michael Janik on June 28, 2008
thanks that would be useful to us :)
7. Posted by Julievive Empasis on July 03, 2008
Interesting post. I think the most important things to keep in mind when designing a login box is to keep it simple and clear and easy to navigate - be it with mouse or tab key. There shouldn't be more than 2 or 3 clicks to sign in with password remembered.
8. Posted by Web Designer Evan Skuthorpe on July 03, 2008
Excellent looking login forms - what about using bit of css/javascript to show hide a login form. That is, have text that says login, and when click it opens a login form on the same page?
9. Posted by Jamessy on July 10, 2008
It really amazes me how many bad login forms you see still haunting the web, for somthing that takes so little time to get right.
10. Posted by Oliver Ridgway Web Designer on July 15, 2008
Wow, I like the look and feel of a few of those designs. However, I like them simple and sleek to be easily used.
11. Posted by Rexibit Web Services on July 22, 2008
Nice post or your article gaves us good knowledge about web design.
12. Posted by Nancy on July 29, 2008
Great post, login forms are hard design, they're so simple but they can be overdone.
13. Posted by allan Branch on August 14, 2008
To be honest, both are preferred. By that I mean, a simple universal login that can be contained easily within the masthead on every page makes it easier on the user and provides continuity.
Assuming the myspace approach above is not on every page (which I would find annoying and a waste of space) then the user must click a link and then be taken to a login page which is even more annoying. But if the option is provided: a simple horizontal login on every page and the ability to access an elegant login/registration page with that beautifully intuitive myspace design everyone is happy.
But I suppose if I have to pick one I default my login designs to the horizontal layout.
14. Posted by Mike - Elegance in Design on August 16, 2008
i would like to join in.
15. Posted by AKSHATA CHATELIER on August 28, 2008