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/

The idea of CSS, separet design from data
How CSS works

3 - Some inspiration: What people have been doing.

Lots of web 2.0 logos

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

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

My first digital tests
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
Font variations, colors and alignments

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

Trying some colors and opacities
Trying some colors and opacities

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

KISS = Keep it simple and stupid

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.