Learning2.0 : Journey to about2findout.com

The development site about3findout.com is 6 weeks old, and already got its third major user interface redesign. This time I tried to apply the most common principles of web 2.0 interfaces. Hope you like it and find it easier and more intuitive to navigate. It's still not done completely, but hey, it's 2.0 so perpetual beta :-) .

In this article I want to point you to the various places on the Internet that helped me to reshape the site.

First of all I redefined the color schemes for the site. I still have four separate color coded zones Quiz zone, Author zone, Club zone and Help zone. But the very bright and painful pink and green colors have been replaced. I went from a 3-color scheme to a 2-color scheme. For every zone there is one color 'letter' for the characters, and one softer color 'lightshade' for the background. There are a lot of color sites out there on the mighty Internet, and these were most helpful to me:

• The color toolbox lists useful sites that will learn you about colors on the web
• Color combos: this is the site I used to get matching color pairs in pink, blue, green and yellow. You can create and share color palettes on this site. Nice initiative.

The next site that helped me a lot was the 'Web 2.0 How-do-design Guide' on webdesignfromscratch.com. It inspired me into applying the following design principles:

• Simplicity: (As good as it gets - don't think users won't find their way and clutter the screen with useless information)
• Central design: My previous interface could scale across the screen. This one has a fixed body of 800 pixels so it should fit on 800*600 screens. Larger screens will have white margins.
• Two columns: one main body and one navigation and command column on the right
• Separate and clearly visible top section: I now have a big black belt on top so the body stands out from the header. The logo is always 'in your face'.
• Navigation: clear navigation sections in the colored boxes on the right.
• Big text: average font sizes have increased on the Internet since web 2.0
• And then things like the 'beta' star, the rounded corners, the gradient backgrounds,...

And luckily these days you don't need to be a graphical artist yourself to create nice logo's, boxes, gradients, backgrounds or tabs. All that is available for free on the net. Here is what I used and recommend:

• Tabsgenerator.com : nice site to generate tabs in various formats and colors
• Stripegenerator.com : from the same makers as tabsgenerator.com, this site lets you very easily create the o so popular striped backgrounds
• Web20badges.com : didn't use them yet, but if I ever need a badge or 'new' star sign, this is the place to get it
• LogoCreatr : the web 2.0 logo was created with the logo creatr. There is another popular logo creator site here, but I found the logocreatr better because it allows for multiple designs and more configuration options such as colors, size and transparency.

Labels: about2findout, design, interface, web2.0