Monday 1 April 2013

42 FAMOUS LOGIN AND REGISTRATION FORMS


42 FAMOUS LOGIN AND REGISTRATION FORMS

1. GOOGLE

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

Facebook
Flawless in functionality, I would say. I don’t know about the positioning of some elements, like the “Remember me” checkbox…

3. YOUTUBE

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

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

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

WindowsLive
Again, an example of inconsistent design. Why not use the same kind of buttons and the same sizes for inputs?

7. MYSPACE

MySpace
A clean design, that I would tweak only in the alignment of the labels in the registration…

8. WORDPRESS

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

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

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

LinkedIn
Functional, clean but definitely not an award winning design.

13. YAHOO

Yahoo
Old school form but functional and clean.

14. HI5

Hi5
Another example of completely inconsistent design: the colors, the buttons, the framing…

15. CRAIGSLIST

Craigslist
Very strange (almost styleless) form design, but it somehow fits to Craigslist.

16. INTERNATIONAL MOVIE DATABASE

IMDB
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

Photobucket
Not the creme de la creme: colors, sizes, hello?

18. CNET

CNET
This is what I call consistency! A pair that goes along and reflects the overall design of the page.

19. ADOBE

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

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

Skyrock
Nice registration form. Just the login looks like from another site (planet)…

22. TUMBLR

Tumblr
Now, this is fun: big form, simple input and beautiful design. I just wanna sign up!

23. LIVEJOURNAL

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

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

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

Netlog
Nice one, but the position of the register buttons seems weird…

27. DIGG

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

NyTimes
Old fashioned but fitting. But why not adapting the other inputs to the select?

29. NING

Ning
Now, I must admit: this is definitely my personal favorite – almost impecable. Just, you know, Firefox, select, borders…

30. ANSWERS

Answers
Compact and consistent. Really nice job.

31. MAKTOOB

Maktoob
Nice one.

32. METACAFE

Metacafe
A lot of blue going on here, but it still fits.

33. SOURCEFORGE

Sourceforge
Not really consistent and I would suggest using “display: block” in the registration, gives a less “stairs” like effect…

34. EHOW

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

StumbleUpon
I think, it needs some more development.

36. REDDIT

Reddit
Simple and really neat… fit’s perfectly.

37. DELICIOUS

delicious
Very nice one, too.

38. TECHNORATI

Technorati
Very elaborated and stylish… but still functional and user friendly.

39. HABBO

Habbo
Habbo-like!

40. FRIENDSTER

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

Flixter
Clean and consistent. But 8 captcha letters? Come on!

42. PAYPAL

Paypal
Not really a nice login. What’s with that “I am a tube” background anyway?

1 comment:

  1. This blog tells about different programming languages , thanks for sharing this information.


    dotnet training in chennai

    ReplyDelete