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

http://www.google.com

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

http://www.facebook.com

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

3. Youtube

http://www.youtube.com

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

http://www.twitter.com

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

http://www.wikipedia.org

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

http://www.live.com

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

7. MySpace

http://www.myspace.com

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

8. WordPress

http://www.wordpress.com

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

http://www.ebay.com

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

http://www.amazon.com

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

http://www.aol.com

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

http://www.linkedin.com

Functional, clean but definitely not an award winning design.

13. Yahoo

http://www.yahoo.com

Old school form but functional and clean.

14. HI5

http://hi5.com

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

15. Craigslist

http://www.craigslist.com

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

16. International Movie Database

http://www.imdb.com

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

http://www.photobucket.com

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

18. CNET

http://www.cnet.com

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

19. Adobe

http://www.adobe.com

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

http://www.espn.com

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

http://www.skyrock.com

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

22. Tumblr

http://www.tumblr.com

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

23. LiveJournal

http://www.livejournal.com

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

http://www.deviantart.com

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

http://www.tagged.com

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

http://www.netlog.com

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

27. Digg

http://www.digg.com

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

http://www.nytimes.com

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

29. Ning

http://www.ning.com

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

30. Answers

http://www.answers.com/

Compact and consistent. Really nice job.

31. Maktoob

http://www.maktoob.com

Nice one.

32. Metacafe

http://www.metacafe.com

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

33. Sourceforge

http://sourceforge.net/

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

34. eHow

http://www.ehow.com

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

http://www.stumbleupon.com

I think, it needs some more development.

36. Reddit

http://www.reddit.com

Simple and really neat… fit’s perfectly.

37. delicious

http://www.delicious.com

Very nice one, too.

38. Technorati

http://technorati.com

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

39. Habbo

http://www.habbo.com

Habbo-like!

40. Friendster

http://www.friendster.com

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

http://www.flixter.com

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

42. Paypal

http://www.paypal.com

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

Enjoy!

As you can see, we changed the style of our beloved site. The original WordPress theme can be found here:

http://fresh01.co.za/2008/01/25/arctic-free-wordpress-theme/

The idea was to create a nice “fluid” layout that adapts with the screen size. I somehow managed to do that making the main elements having an absolute position and not giving any width to the content div. Up until then, everything was fine and the most important part was done.

Now, I tried to integrate some really cool box shadows for the images and also for the main content div. It looked awesome considering that I was only using the CSS3 box shadow property for Mozilla and Webkit browsers. Since most of the visitors seem to use Mozilla, I thought, what the heck, IE doesn’t show it, doesn’t matter!

After I integrated all the changes and finished little design details, I noticed something that messed around with my mind all night: Scrolling with the mouse wheel in Mozilla became incredibly slow!

Thinking that it was because I was testing on my local machine, I was blaming XAMPP and Apache and thought this cannot be. But when I uploaded the whole to the server it was as slow as locally! What really made me go mad was the fact, that it just happened in Mozilla! The God of browsers!

After hours of removing CSS and script I finally found the guilty: although the box shadow is all neat and sweet, applied to 1. a lot of and 2. to big elements will overload Mozillas rendering of the page! Once you scrolled through the whole page it will be fine, but try doing it at a rate of 1 inch per minute :-D

So, I was forced to take out all the -moz-box-shadow and put again a boring 1999 styled gray border around all the elements I had the shadow on.

Long story short, be careful with CSS3 experiments, they are still in testing phase…

Anyway, I hope you like our new design, enjoy it and keep reading!

The jQuery Style Slider allows you to change the style of certain html elements in real time and save the style setting to a MySQL database table using PHP. This makes the script interesting for user personalization. The script is based on the jQuery UI Slider Widget and the Sexy Vertical Sliding Panel Using jQuery And CSS3. The RGB values for colors can be set using three sliders and additionally, some elements can be sized as well.

Click on the screenshot to test the Style Slider or get the source code at the end of this article.

To change the style of an element, click on its button over the div container. Open the style slider on the left and tune the RGB values or change the size (if applicable) on the 4th slider. You can also change the background pattern of the body by clicking on one of the stripe icons. By default on launch, the body is always selected.

If you refresh the page or come back later, you will see that your changes have been saved.

Download the source code: jQuery style slider ZIP

DEMO

Don’t forget to change the database details in the constants.php file in the folder styleslider/code/php.

The sql file for creating the table is in the root directory (tables.sql).

I still need to improve some details concerning the loading of the page, e.g. it flickers shortly without any style. Any suggestions are welcome! If you need any help, please comment.

Have fun!