Learning2.0 : Journey to about2findout.com

There have been updates to the question and quiz screens.

- The 'more information' and 'share' links are now moved to the navigation box on the right.
- The share link shows the QuickCode as well as the direct URL to the question or quiz
- Quizzes also get scored for anonymous users now.
- The tags are always visible and moved to the central part, under the question information.
- The quiz page only shows the green score box, not the red one and the question backgrounds
have been updated.

- There is a new part that shows the last three people who succesfully made the question or the last three people who scored 7 or more on the quiz.
- The links to post the question or quiz to Blink, Digg, Furl, Google, Magnolia, NewsVine, Reddit, Spurl, Technorati and Delicious now work.
- Three random other questions or quizzes are suggested in the right bar.

Another small improvement is on the search page, that now also searches quizzes. But best of all, when you click on one of the questions on the search page, you can navigate to the next on the list without having to search again. And on popular demand you now get an indication if you have already answered a question recently. Recently means in the last 30 days.

Labels: about2findout, design, new

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