View demoDownload source

Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.

We will be applying the -webkit and -moz gradients for creating a great look without images and learn how to insert content into elements with a specific class.

Let’s start with the markup.

The Markup

The following will be our basic table structure:

<table class="table1">
	<thead>
		<tr>
			<th></th>
			<th scope="col" abbr="Starter">Smart Starter</th>
			<th scope="col" abbr="Medium">Smart Medium</th>
			<th scope="col" abbr="Business">Smart Business</th>
			<th scope="col" abbr="Deluxe">Smart Deluxe</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th scope="row">Price per month</th>
			<td>$ 2.90</td>
			<td>$ 5.90</td>
			<td>$ 9.90</td>
			<td>$ 14.90</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="row">Storage Space</th>
			<td>512 MB</td>
			<td>1 GB</td>
			<td>2 GB</td>
			<td>4 GB</td>
		</tr>
		<tr>
			<th scope="row">Bandwidth</th>
			<td>50 GB</td>
			<td>100 GB</td>
			<td>150 GB</td>
			<td>Unlimited</td>
		</tr>
		<tr>
			<th scope="row">MySQL Databases</th>
			<td>Unlimited</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
		</tr>
		<tr>
			<th scope="row">Setup</th>
			<td>19.90 $</td>
			<td>12.90 $</td>
			<td>free</td>
			<td>free</td>
		</tr>
		<tr>
			<th scope="row">PHP 5</th>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
		</tr>
		<tr>
			<th scope="row">Ruby on Rails</th>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
		</tr>
	</tbody>
</table

We have all the elements a table needs, a header, a body and a footer. In this tutorial we will use a hosting plan comparison table as example. The three following styles can be applied to this table by changing the class to table1, table2 or table3.

CSS Table 1

The first table will be in green tones with some gradients for the descriptive cells, the “th” elements. Let’s start with the general style for the table:

table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    border-collapse:separate;
}

We want to have some space between the table cells, so we will make the border-collapse separate.

I usually take the style for the font from Typechart, a really useful site with nice font examples and the CSS code ready for copy.

The th elements of the head will have the following style:

.table1 thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

We use the gradient property for Firefox and for Webkit browsers (Safari and Chrome) to create a beautiful gradient with three colors. The border-radius property rounds the top left and top right border of the cells.

Now, we need to take care of that on th that is empty. With CSS3 selectors we can do some incredible things, and this is one of them: select the th that is empty. And this is how:

.table1 thead th:empty{
    background:transparent;
    border:none;
}

The footer of the table will have the following style:

.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}

Nothing special about that, just some text shadow to enhance the font.

The inner table cells will have a light green background and a white text shadow for an engraved effect:

.table1 tbody td{
    padding:10px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

We also add some very subtle border and border radius to the cells. This will invoke a slight glowing effect. We could also use some box shadow to create a similar effect.

Now, we want to add an icon to all the cells that have a span with the class “check”. With the following CSS with can achieve that:

.table1 tbody span.check::before{
    content : url(../images/check0.png)
}

This property allows us to add some specific content (in this case it is an image) inside of the element. We could have also added some text here. We can say “::before” or “::after” which would insert it after the content.

And that’s all the style for the first table! Let’s take a look at the second one.

CSS Table 2

The second table will be more of the elegant type, with a black header and footer.

This table will not have any space in between the cells, so we collapse it:

table.table2{
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.2em;
    border-collapse:collapse;
    text-align:center;
}

The footer and the header are going to have a similar style, so we can define the common properties as follows:

.table2 thead th, .table2 tfoot td{
    padding:20px 10px 40px 10px;
    color:#fff;
    font-size: 26px;
    background-color:#222;
    font-weight:normal;
    border-right:1px dotted #666;
    border-top:3px solid #666;
    -moz-box-shadow:0px -1px 4px #000;
    -webkit-box-shadow:0px -1px 4px #000;
    box-shadow:0px -1px 4px #000;
    text-shadow:0px 0px 1px #fff;
    text-shadow:1px 1px 1px #000;
}

The th of the footer will have this style:

.table2 tfoot th{
    padding:10px;
    font-size:18px;
    text-transform:uppercase;
    color:#888;
}

The footer cells which we already defined together with the header cells, will need a different box shadow. The header box shadow points to the top and the footer one should point to the bottom. We also want to change the color of the text:

.table2 tfoot td{
    font-size:36px;
    color:#EF870E;
    border-top:none;
    border-bottom:3px solid #666;
    -moz-box-shadow:0px 1px 4px #000;
    -webkit-box-shadow:0px 1px 4px #000;
    box-shadow:0px 1px 4px #000;
}

Let’s get back to the header where we still need to define that the empty cell should not have any style:

.table2 thead th:empty{
    background:transparent;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

We also need to remove the box shadow that we defined for the header elements before.

With the :nth-last-child selector we can select the last cell element in our header and say that it should not have a right border, like the other ones:

.table2 thead :nth-last-child(1){
    border-right:none;
}

With the :first-child selector we can address the first cell in the header, which is empty and we don’t want it to have a border. We also want to remove the border from the last td elements in our table body:

.table2 thead :first-child,
.table2 tbody :nth-last-child(1){
    border:none;
}

Now, lets add some style to the outer left descriptions, the th elements of the table body:

.table2 tbody th{
    text-align:right;
    padding:10px;
    color:#333;
    text-shadow:1px 1px 1px #ccc;
    background-color:#f9f9f9;
}

And the following style will be applied to the other cells:

.table2 tbody td{
    padding:10px;
    background-color:#f0f0f0;
    border-right:1px dotted #999;
    text-shadow:-1px 1px 1px #fff;
    text-transform:uppercase;
    color:#333;
}

Now we just need to insert an icon for the check spans:

.table2 tbody span.check::before{
    content : url(../images/check1.png)
}

CSS Table 3

The third table will have a few more CSS properties since we want all the column headers to have a different color. I will show you how to do that by using selectors only.

The general table style will be the following:

table.table3{
    font-family:Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.7em;
    text-align:center;
    border-collapse:collapse;
}

The common style for all th cells in the header will be:

.table3 thead th{
    padding:6px 10px;
    text-transform:uppercase;
    color:#444;
    font-weight:bold;
    text-shadow:1px 1px 1px #fff;
    border-bottom:5px solid #444;
}

The empty cell will be treated as follows:

.table3 thead th:empty{
    background:transparent;
    border:none;
}

Now we want to select specific th cells in the header and td cells in the footer to give them a unique color. With the :nth-child(number) we can select the exact child:

.table3 thead :nth-child(2),
.table3 tfoot :nth-child(2){
    background-color: #7FD2FF;
}
.table3 tfoot :nth-child(2){
    -moz-border-radius:0px 0px 0px 5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table3 thead :nth-child(2){
    -moz-border-radius:5px 0px 0px 0px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
}
.table3 thead :nth-child(3),
.table3 tfoot :nth-child(3){
    background-color: #45A8DF;
}
.table3 thead :nth-child(4),
.table3 tfoot :nth-child(4){
    background-color: #2388BF;
}
.table3 thead :nth-child(5),
.table3 tfoot :nth-child(5){
    background-color: #096A9F;
}
.table3 thead :nth-child(5){
    -moz-border-radius:0px 5px 0px 0px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
}
.table3 tfoot :nth-child(5){
    -moz-border-radius:0px 0px 5px 0px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
}

We also added a border radius to the selected corner cells.

The common style for all the td cells in the footer will be:

.table3 tfoot td{
    font-size:38px;
    font-weight:bold;
    padding:15px 0px;
    text-shadow:1px 1px 1px #fff;
}

Let’s add some padding to the cells:

.table3 tbody td{
    padding:10px;
}

We want the row of the prices for the setup to have a stronger font:

.table3 tbody tr:nth-child(4) td{
    font-size:26px;
    font-weight:bold;
}

The columns of the body of the table should have altering styles, so we will use again the :nth-child selector but this time with the values “even” and “odd”:

.table3 tbody td:nth-child(even){
    background-color:#444;
    color:#444;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(189,189,189)),
        color-stop(0.7, rgb(224,224,224))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 39%,
        rgb(224,224,224) 70%
        );
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td:nth-child(odd){
    background-color:#555;
    color:#f0f0f0;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(85,85,85)),
        color-stop(0.7, rgb(105,105,105))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(85,85,85) 39%,
        rgb(105,105,105) 70%
        );
    text-shadow:1px 1px 1px #000;
}

We also add a right border to the last tds in a row:

.table3 tbody td:nth-last-child(1){
    border-right:1px solid #222;
}

The left description is going to have the following style:

.table3 tbody th{
    color:#696969;
    text-align:right;
    padding:0px 10px;
    border-right:1px solid #aaa;
}

Just the check icon is left:

.table3 tbody span.check::before{
    content : url(../images/check2.png)
}

And that’s it! Three differently styled tables with pure CSS!

I hope you enjoyed the tutorial!

Here are some very useful related links:

Create CSS3 Gradients: http://gradients.glrzad.com/

W3C Selectors Level 3: http://www.w3.org/TR/css3-selectors/

View demoDownload source

When it comes to blogging, WordPress is the 1st word which comes in my mind. And I have reasons for that: WordPress is the most flexible easy to use and customize CMS platform among all.

Premium WordPress Themes are the first solution when building a blog. Are fully supported, fully featured, perfectly coded and way too visual appealing, so choosing a premium wordpress theme is a no-brainer for the majority of bloggers.

Take a look at these 35 fresh Premium WordPress Themes. If your website needs a facelift, you probably don’t want to miss this showcase.

Source

http://www.ourtuts.com/35-amazing-premium-wordpress-themes-of-april-2010/

It is interesting to explore the design of websites associated to a certain category. There are many collections out there that showcase websites from certain areas, and today I want to share a couple of designs of websites from the interior design category.

As one might assume, the level of design might be pretty interesting since there should be a tight connection between the sense of design applied in interior design or architecture and web design. The fundamental design principles that come with the knowledge of an interior designer can only be helpful when used in designing a page (or letting a page be designed).

I was curious to which extend designers of real objects and interior designers let their skill be reflected in their websites. One would expect that especially in this category, designs would be expressive and unique.

Unfortunately, not many designers seem to recognize the importance of an intriguing web presence. Most of the websites of interior designers seem outdated and don’t show much of a design spirit. But there are also some that show a reflection of style and do that in a quite fashionable and interesting way.

This collection consists of some furniture store websites, portfolios and interior design blogs. Take a look:

http://www.moderndigsfurniture.com/

A beautiful example of a contemporary and uncluttered look with the focus on the design elements with an elegant product catalogue.

http://www.atelierid.com/

Atelier expresses it’s design direction beautifully with it’s website. Note, how the soft green complements the warm colors of the photos that represent the design choices. Also, a lot of black element are used which get’s reflected in the main color choice of the website. And check out that smooth fade in effect of the menu.

http://www.bentheim.co.uk/

The website of Bentheim is a nice example of a minimalistic style that focuses on representing the design direction by it’s images.

http://www.amok.co.uk/

Flash with nice usage example of pattern and light fonts.

http://www.noraschneider.com/

This one has some interesting navigation animations.

http://www.francelavin.com/

http://www.design4space.com.au/

Flash used very nicely, check out the navigation as part of the room.

http://www.geoform.com.au/

Entirely flash as well. The geoform banner is following the mouse movements vertically.

http://www.acosdesign.com/

Interesting use of round bubbles that keep moving around…

http://berlinrodeo.com/

Slick design with change of color when choosing one from the palette.

http://www.rgrdesignassociates.com/

http://www.jdesigngroup.com/

Another page where the design used seems to reflect the interior design direction. I like the color choice.

http://www.tommasoziffer.it/

Very interesting navigation with focus on the photos. The color choices fit the taste of the designer.

http://www.betterlivingthroughdesign.com/

I really like the clean design of this one.

http://www.wellylai.com/

http://www.amandanisbetdesign.com/

http://www.shawnhenderson.com/

http://www.willeydesign.com/

http://mocoloco.com/

MoCo Loco has a really fresh design and the website is scrolled horizontally. Each area (Design, Art, Fresh) has it’s own complement color.

http://www.browndesigninc.com/

Interesting stacking of the menu items. Brown really seems to be their color.

http://www.architonic.com/

I really like the style of the columns in this website. It is very unusual and it makes the site very interesting while keeping functionality and readability.

http://www.kelloggcollection.com/

http://www.ethanallen.com/

Great way of complementing pattern with font, just check out how the big type fits to the patterns. Love the palette  choice.

http://www.orsonandblake.com.au/

http://www.bonluxat.com/

http://www.boconcept.us/

http://www.ozdesignfurniture.com.au/

Very nice color choices here.

http://www.leighharmer.co.uk/

http://www.beyondfurniture.com.au/

http://www.heals.co.uk/

http://www.bebitalia.it/

http://www.galeriedowntown.com/

http://baker.kohlerinteriors.com/

I like how the background pattern changes over time. And it always looks awesome.

http://www.whos-perfect.de/

http://www.sixay.com/

http://www.gabrielabellon.com/

http://www.bestofbauhaus.com/

Very light color choice which actually enhances the products shown. Structures are kept very simple.

http://www.wogg.ch/

The website logo does not always have to be on the top left – it looks pretty nice at the bottom, too.

http://www.proformshop.com/

http://www.domainefurniture.com.cn/

http://www.kmpfurniture.com/

http://www.westelm.com/

http://www.modernfurniture4home.com/

http://www.inmod.com/

http://www.laflat.com/

http://www.broyhillfurniture.com/

http://www.modusfurniture.co.uk/

http://www.conranusa.com/

http://www.moderncollections.com/

http://www.modernlinefurniture.com/

http://www.707.com.au/

http://www.spacify.com/

http://www.dwr.com/

http://www.gomodern.co.uk/

http://www.plushpod.com/

http://www.designpublic.com/

http://www.ikea.com/

I can’t stop hovering over “All departments” – I love the way the menu slides out! I would like to see more contrast in the website in general, though.

http://www.zarahome.com/

If you ever visited a Zara Home store you will notice that their website fits very nicely to the feeling you get in the store: lots of light colors and romantic shapes.

http://www.the-store-designers.com/

http://www.yourhome.de/

Although many furniture websites sell furniture out of wood, you don’t see wood textures on the websites very often. I liked this one because it makes use of this obvious connection.

http://www.fashion4home.de/

Conclusions

Many contemporary furniture websites and interior designer websites make use of light structures and colors. Some websites make use of interesting navigation techniques and color palette choices.

This is not an entirely beautiful collection which is sad since one would expect more of a website of that category. I would expect to see more daring styles and ways to express ones creativity. Website design can conceptually be seen as decorating a room: you have some structure and you want to fill the white room with color and content for a purpose, with personal traces and lots of creative beauty.

What do you think? Do you know some websites in this category that you believe express their designers’ style?

The other day it came to my attention that there are so many beautiful social bookmark icon sets around but no blog seems to use them. Now, that has to do a lot with the fact that many publishing platforms require a certain amount of programming knowledge in order to personalize the sharing buttons.

We use the Sexy Bookmarks WordPress Plugin, simply because it is really nice and it works well. For the Retweet Button we use the Digg Digg Plugin which is easy to integrate but not really stylable.

It would be really great to have some kind of plugin, that let’s you just add your own buttons, I bet that would increase the creativity of the social bookmarking designs found in blogs.

During my search for some examples of designs, I found this set that I thought, shows some nice ways of engaging the reader to share the post or bookmark it. Although the opinions about in which way the user should be engaged to share a post at all might differ (some blogs don’t offer any social bookmarking options), I think that it is ultimately a very important tool for any blog.

Before I start with the collection, I would like to share one more thing with all of you that use the Digg Digg Plugin for the integration of the TweetMeme Button. It took my some time to find out, why the retweet would contain @tweetmeme instead of our Twitter name “codrops”. Ultimately I found the solution:  in the settings we chose the “Integration Type” to be “none” because we called the PHP function manually. Even if you put your TweetMeme source RT name, this will cause the retweet to contain the @tweetmeme instead of your name. (I actually don’t know if that issue is fixed by now, I just noticed that a lot of blogs seem to have that problem.)

And here comes the collection! Enjoy!

http://www.blog.spoongraphics.co.uk

This is a really nice way to show those quite “ugly” sharing buttons: wrap them in a box so that they look similar and homogeneous.

http://www.hongkiat.com

I really like the big type, fits nicely to the blog.

http://cellphones.org

This one is definitely my favorite, it is very unique and it is completely adapted to the style of the blog.

http://designinformer.com

http://buildinternet.com

http://10steps.sg

Although we are stuck to the designs and “identities” of the sharing buttons, we can make the them interesting by surrounding the buttons with some nice design. This is a good example of how to do it.

http://www.9lessons.info

http://www.minervity.com

http://creativeoverflow.net

http://desizntech.info

http://designora.com

http://www.sitesketch101.com

http://www.hairstylesdesign.com/blog

http://www.tutorialboard.net

http://www.outlawdesignblog.com

http://www.fuelyourcreativity.com

Now, this one is really nice. You have to try it out by hovering, it makes a really nice effect.

http://www.clickonf5.org

http://www.onextrapixel.com

http://www.threestyles.com

http://blogof.francescomugnai.com

http://www.inspiredm.com

Here we have an alternative way of showing the social bookmarking options. It saves space in the blog and it is always accessible.

http://d-lists.co.uk

http://www.littleboxofideas.com

This one is charming, but it also shows the problems many of us face: using different plugins and manual insertions do not let us adapt the style like we would like to.

http://www.designussion.com

http://www.psdeluxe.com

http://designmess.com

I like the approach of integrating the social bookmarking options as part of the post, like the comment section. It looks clean and it gives the sharing buttons a functional appearance.

http://www.dezinerfolio.com

Here we have a really nice and clean sharing “button”. When clicked, a sharing box pops out. This is a good example on how to integrate the social bookmarking option elegantly and discretely.

http://www.tutorial9.net

http://games.venturebeat.com

http://www.geeksucks.com

http://www.webresourcesdepot.com

This one is beautifully integrated under the title of the blog post.

And that’s it!

These were the designs that I found nicely fitting to their blog styles. Although I am not terribly excited about the level of creativity used, I understand why it is so hard to adapt this very crucial part of a post to our design needs.

What do you think? Is it important to bring some attention on the social bookmarking option in a blog? Would you as well like to have some more freedom in adapting the style of sharing buttons? Or do you think it should not be obtrusive in any way? Have you seen some interesting sharing button styles that you would like to add to this list?

I hope you liked it and got inspired!

You might be interested in some sets of social bookmarking icons:
21 Sets of Free Social Bookmarking Icons for Your Blog
72 Sets of Free Social Bookmarking Icons
75 Beautiful Free Social Bookmarking Icon Sets
Social Bookmarking Icons Collection
70 Free Social Media Icon Sets
30 Amazingly Creative Social Bookmarks Icon Sets
108 Free Black Magic Marker Social Bookmarking Icons
40 New and Trendy Free Social Media Bookmark Icon Sets

Dear Design Community,

I don’t really know if I can consider myself a part of you, but I have the strong urge to tell you how I feel about you.

About six month ago, when I first met you, I was completely overwhelmed – your creativity and beauty struck me and I felt that this would be the place where I would finally feel at home! Coming from a place where rationality and the workings of the brain were center of my live, I could ultimately see the holistic functioning of all that inside of you.

After I had spend some cozy moments with you, I began to hear some criticism about you. Some of your members started to impose on you! They claimed that you became shallow and lost your old charm, that your discussions and post were becoming dull. You became greedy, they said, and you transformed into a business oriented capitalist who just wanted to grow to increase profit, no … I mean traffic.

Your critics blamed the list makers and wannabe designers of destroying you and seducing you to become a tool for their foolery. I was shocked at first, but then I started to see their points. I must admit, I became one of the critics. My heart broke that moment because I saw your ugly sides, your repetitive behavior, your boring arguments, your endless lists…

After I fell into a hole of grief and anger, I decided to give you another chance. I felt that I would just need to look at your beautiful sides and ignore your ugly ones in order to fall in love with you again. So I began to turn to your talented, well established members, their fruitful posts and discussions, their oh-so in-depth analysis of design processes and incredible helpful tips on how to get creative.

After a while, I got completely confused: where was the so proclaimed value and where were the insightful elaborations on web design and design theory? Where were the unique and different stories and inventions that everybody was hailing so much? Where were the design bloggers that don’t care about traffic, money and spreading their wisdom instead of just their words (and lists… and thoughtful comments)? Was your modest and decorous side full of shit after all?

And then it hit me.

I don’t love you because of your beauty, your intelligence and merit. I don’t love you because of your fruitful discussions and in-depth analysis of design processes and tips on getting inspired. I don’t love you because of your wit, your arrogance and your pride.

I love you for being a shelter to so many different opinions and strong, creative and passionate minds.

I love you for being a cultural and social tool, a capitalist opportunity and a tool for hearing tiny voices.

I love you for having so many facets and sides, so many wannabes and so many geeks.

I love you for making it difficult to discover the gems, but once they are found, you make them timeless.

I love you for giving me incredible inspiration each single day from all across the globe in so many languages.

I love you unconditionally, design community!

Dive into the community:

• How to Kill the Design Community
• Understanding the Value of Constructive Discussion in the Design Community
• On Giving Back to the Design Community
• Killing The List Post
• Should you write “List posts” on your blog?
• Some People Actually Read: Sparing a Thought for ‘Readers’ in the Design Community
• Smashing Magazine Killed The Community (Or Maybe It Was Me)
• A “Bystander’s Perspective” on the Design Community
• Valuing Your Design Community

The blue boxes and the blue button link units in the header that formed the upper row of a 3 (!) row navigation have disappeared. In fact, the only blue thing (slightly darker than before) that is left, are the links.

Here is an old screenshot of the site back in 2007:

And here is the new design:

Nothing was changed dramatically, but the impact of just changing details can be enormous. It is toned down in clutter and it looks more functional, and they  actually gave it a touch of glamor and “Oscar’s” which really fits well.

Unfortunately, they did not change the registration form… which has a good side to it: I don’t need to update my previous post on Famous Login and Registration Forms ;-)

What do you think about the new style?

Enjoy!

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!