Lately I have been working with my brother on a promising project. Actually I shouldn’t even been talking about that now, but it’s necessary to say some things. Basically it’s all about CSS, it’s really cool, and it's called Wedeed.

Anyway, what he asked me to do was the logo and later its GUI.

“Well, you don't need to hire any creative designers for making those web 2.0 style logos for your blog - just follow any of these tutorials. And if you hate reading instructions in text, head straight to the video tutorial.“
http://labnol.blogspot.com/2006/11/logo-tutorials-design-web-20-style.html

It’s amazing the number of tutorials showing how to create a web 2.0 logo, actually, there are really good tutorials, but almost all of them showing us how to create those web 2.0 effects, rather than how to come up with a good idea, and that was I was looking for.

For this logo our goals was to create a really simple logo, easy to understand, web 2.0, and beautiful.

1 - We follow some ideas like:

• Cascading
• Pages
• Separate design from data
• Different Colors
• Simple typeface
• Flipping pages

   

2 - Definitions

A Cascading Style Sheet (CSS) provides the ability to separate the layout and styles of a web page from the data or information. Styles such as fonts, font sizes, margins, can be specified in one place, then the Web pages feed off this one master list, with the styles cascading throughout the page or an entire site.
www.liv.ac.uk/webteam/glossary/

How CSS works

3 - Some inspiration: What people have been doing.

• http://www.flickr.com/photos/stabilo-boss/93136022/
• http://www.flickr.com/photos/stabilo-boss/101793494/

3 - My ideas: The idea of layers perfectly represents the separation of the design from the data.

Looking for some references and inspiration, nothing like google images and flickr

Some of the initial digital tests

4 - Fonts of the web 2: There are really great sites showing examples, though I think the simplest the best.

Font variations, colors and alignments

• Great fonts for web 2.0
• Web 2.0 logos(fontshop)
• Andy Budd's SXSW keynote

6 - Adjustments: Some adjustments in the perspective, testing opacities and effects.

Trying some colors and opacities

5 - Final Result: Pretty much the simplest version of them all.