New CSS Globe – a Great Redesign for 2009

css-globe-logoOne of the most important communities in the blogosphere regarding CSS and Web Development/Design is CSS Globe. Founded by Alen Grakalic, web standards designer and developer, CSS Globe is the home for good tutorials, news, great community and knowledge sharing. And the reason for this coverage is that CSS Globe has a brand new design with lots of interesting user interface elements.

No more coffee cup

While the glasses are still present in this new design, the coffee cup was left behind. I’m talking of course about visual differences between the previous version and the new one. The differences are major and the new design has mainly the name from the old one and some graphic elements. Apart from that, we deal with a brand new design with lots of different approaches.

New Refreshing User Interface

From the structural point of view, the new CSS Globe has 2 columns instead of 3. This thing will simplify user’s work in finding the desired resource. Now the topics are separated in 2: first are the articles from CSS Globe editors and below are listed the CSS Globe news from the community. This is a good way to separate these 2 sections and still have a normal reading behavior for the user. The sidebar is used in a standard way, for different actions, user account and advertising.

css-globe-new

What I like maybe the most in this new design is how the community news are displayed. For this Alen made a great choice by creating a box in the right side of the preview, where he placed basic information: user, date, comments and permalink. This approach is good first because it is easy to see the news and then it provides balance to the design by inserting proper space between the sidebar and content.

Also another thing that is on the positive side is the new color scheme. To be honest I wasn’t the biggest fan of the previous CSS Globe banner. And the overall orange-yellow aspect of the header was bad. Now we have instead a clean header with a strong new logo and a simple dark-red/gray color scheme. Additional to these new changes I like also how Alen managed to embed the dotted line into the design. It works perfectly with the logo and the overall theme of the site.

Conclusion

Overall the site looks great and it can stand now as a model for simple and clean designs. Hopefully this redesign will boost the number of visitors and it will consolidate CSS Globe’s position in the CSS community. It is definitely one of the best redesigns of 2009. Cheers!

User Interface ★★★★½
User Experience ★★★★☆
Design ★★★★½
——————–
Graphic ★★★★½

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

RSS User Experience Bookmarks