Today, I want to showcase some of the most famous login and registration forms on the web. As a web developer you might be interested in having a compact overview of the different designs of these essential website elements.
For your design, what would you do better? Do you think being a top site gives you trend setter status? Or should some sites rather be ashamed of their poor design skills?
Share your opinion and maybe you have some interesting showcases to add?
I hope you enjoy it!
1. Google
Well, Google is Google, so fancy design is never a really big topic. It definitely follows major usability guidelines which is also shown here: http://www.boxesandarrows.com/view/getting-a-forms98
2. Facebook
Flawless in functionality, I would say. I don’t know about the positioning of some elements, like the “Remember me” checkbox…
3. Youtube
Now, what I don’t really get, are these changes of style within Google. YouTube belongs to Google and the design of this registration form clearly shows this. But why not use the same style through all the pages?
4. Twitter
Although Twitter is one of my personal favorites, it could still need some more consistency. Using rounded input boxes in one place, and then plain old inputs in another place, makes it look a little bit inconsitent.
5. Wikipedia
The strong focus on content is also reflected in the design of Wikipedia’s login and registration form: it is plain and simple.
6. Windows Live
Again, an example of inconsistent design. Why not use the same kind of buttons and the same sizes for inputs?
7. MySpace
A clean design, that I would tweak only in the alignment of the labels in the registration…
8. WordPress
It might seem, that there is a lot of different styling happening here, but actually it all somehow fits together: the color choices, the sizes and the “special effects”.
9. Ebay
Ebay’s form design is a nice example of optimizing design for usability. Elements are used consistently throughout the site. Here is a really great article on the main changes that happened and why: http://www.digital-web.com/articles/redesigning_ebay_registration/
10. Amazon
A very clean design. What I never liked though, was this “let’s spare” login form that also serves as an entry for a new user to register. I mean, if I want to login, I am a registered user and have a password, right?
11. AOL
Sometimes, I feel like, I am back in 1999… That “Forgot Password” seems like the designer went “oh, damn, I forgot to add Forgot Password to the login” …
12. LinkedIn
Functional, clean but definitely not an award winning design.
13. Yahoo
Old school form but functional and clean.
14. HI5
Another example of completely inconsistent design: the colors, the buttons, the framing…
15. Craigslist
Very strange (almost styleless) form design, but it somehow fits to Craigslist.
16. International Movie Database
Besides fitting to the 1994 style of the whole page, it really is a disaster! For God’s sake, get a web designer…
17. Photobucket
Not the creme de la creme: colors, sizes, hello?
18. CNET
This is what I call consistency! A pair that goes along and reflects the overall design of the page.
19. Adobe
Good that most members are indeed returning. It’s clean and the user has a good overview…it’s Adobe that did Photoshop right? :-O
20. ESPN
Ok, I know the error messages have to appear somewhere, but is it necessary to have such huge spaces between the inputs? I mean, the spaces are bigger than the inputs! And I really think this combination of “select with one style” and “normal input with another” doesn’t go together… Why not having the same border for all of them?
21. Skyrock
Nice registration form. Just the login looks like from another site (planet)…
22. Tumblr
Now, this is fun: big form, simple input and beautiful design. I just wanna sign up!
23. LiveJournal
Clean, yes. Functional, yes. Ehm, what happened to the password field? Is it always “shorter” than the username or is it just another case of “damn, I knew I forgot something in this from”…the LOGIN BUTTON!
24. deviantART
It’s a nice set of colors although it could use a little bit more contrast. And if it’s just allowed to put 20 characters in the input, e.g. for the name, why giving it double the size then? Oh, and by the way, the email can be 255 characters long!
25. Tagged
Pure CSS! But there is a lot more you can do with CSS, you know…like creating nice shadows on the buttons with borders…
26. NETLOG
Nice one, but the position of the register buttons seems weird…
27. Digg
I like Digg’s forms, I really do. But you know guys, at least for Firefox you could give the select the same style like to the input: “border: 1px solid #ccc”… looks sooo much better!
28. The New York Times
Old fashioned but fitting. But why not adapting the other inputs to the select?
29. Ning
Now, I must admit: this is definitely my personal favorite – almost impecable. Just, you know, Firefox, select, borders…
30. Answers
Compact and consistent. Really nice job.
31. Maktoob
Nice one.
32. Metacafe
A lot of blue going on here, but it still fits.
33. Sourceforge
Not really consistent and I would suggest using “display: block” in the registration, gives a less “stairs” like effect…
34. eHow
I love this registration form, it’s beautiful, but the login doesn’t really look finished. What’s with that “SIGN IN” position?
35. StumbleUpon
I think, it needs some more development.
36. Reddit
Simple and really neat… fit’s perfectly.
37. delicious
Very nice one, too.
38. Technorati
Very elaborated and stylish… but still functional and user friendly.
39. Habbo
Habbo-like!
40. Friendster
So, “Keep me logged in” is like what? Compulsory? Ah no, after all it’s not recommended for shared computers… But a nice registration form.
41. Flixter
Clean and consistent. But 8 captcha letters? Come on!
42. Paypal
Not really a nice login. What’s with that “I am a tube” background anyway?
Ok, enough from me, now it’s your turn!
Enjoy!
Pingback: links for 2009-09-22 - sashidhar.com
Pingback: Tweets that mention 42 Famous Login and Registration Forms | Codrops -- Topsy.com
I think Facebook should change the “Select Sex:” choice to “Select Gender:”.
Demogeek, I’m agree with your comment. . To make the sign up form more formal in Facebook. “Select Sex:” must be change to “Select Gender:”
Pingback: The "new" design of IMDb | Codrops
They are wonderful forms, but somes updated.
Thanks you for all.
Thanks, I was looking for something like this
Nice list, but I would rather know how to code them.
By the way I have been using your Registration form for a few weeks, and I think it rocks.
Thanks