wejustblog

It’s Saturday and Saturday’s the day to catch the movie “L: Change The World” and write a blog post, it is my turn today.

I have received several emails from people asking me to write this article on what principles the design of the Widgeo.us Blog is based on and why I did certain things in certain ways. So here’s an attempt at a walkthrough with detailed explanations of the rationale behind the design elements you see on this blog.

The Brand

“wejustblog” is in fact a play of the phrase “Widgeo.us Blog”, if you have not noticed. Kah Wee came up with the name while we were going back to the office from lunch in U-Zyn’s car, some weeks ago. We all thought the name was good so I created a logo based on the typography of the original Widgeo.us logo and slapped in there, not too soft-spoken and not too loud.

Typography

I have chosen light, soft brown background colors and very dark grey text. Why not black text on a white background? Text on screen is unlike print. The white on print is paper, which appears neutral. The white on screen however, are illuminated phosphors. Thus the contrast on screen is much higher of that on print. High contrast black on white is highly readable but it also strains the eyes. By lowering the contrast to a more comfortable yet readable level with very dark grey text on light and soft background, you get text that is less migraine-inducing.

Which one is more likely to give you a migraine?

Fat Buttons are the Opposite of Fat Fingers

As the world move towards tiny buttons on mobile phones, web design has to go in the opposite direction. Tiny buttons are a usability disaster. Not only are do they take considerably more effort to aim and press, they are also more difficult to spot. The buttons here are large, colored and understood. The slight 3D effect of the buttons makes them true buttons. Some people have commented that the buttons are distracting. Considering that articles are read top down, the buttons are probably already out of sight by the time you scrolled to this paragraph. Design is usability not compromised by aesthetics.

An Icon is not a Picture

With the rise of Ajax, “loading” animated GIFs are becoming the norm for indicating the wait the user has to go through while requests are being processed. With services like Ajaxload and Load Info, web designers are only spoilt for choice. Instead of using animated GIFs, I opted a more minimalistic approach. As the French Writer Antoine de Saint-Exupery said, “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away”. Without the need for images, I simply change the submit button label to say “Loading…” instead. Yes a picture speaks a thousand words, but a icon is hardly able to speak even a hundred words.

Conclusions

That is all there is to it. I did not intend the blog to be complex so it is really that simple. No twenty-page documentations and fifty-page style guidelines. Simple is good design. Good design is as little design as possible. Do you think this blog was well-designed. I would love to have your opinions and criticisms.

Readers, both imaginary and non-existent. I am excited to be the first to write on this blog. No, actually the others are all too busy with their work and I had just finish mine — designing and coding the theme for this blog. I have even bought a WordPress Navy Blue Hoodie to reward myself for the time I have spent with WordPress for the past one week.

I think it’s a nice and good-looking thing to wear since it’s getting cold here and I get to show people how much I love WordPress. Another thing about WordPress that gives me a good feeling is how each release is named after a famous jazz musician. I believe developers who love music and jazz are able to build genuinely good products with a passion like the kind they have for music. I have been using WordPress since version 1 and prior to that, b2\cafelog, its precursor.

For a quick introduction, I am Aen, the Art Director and UI Designer of Widgeo.us. Being the creative guy and a WordPress junkie, I designed the blog and made myself its blogmaster and now this blog is like my flesh and blood.

What is Widgeo.us? In a nutshell, it is a tool we are building to allow people to build tools which unify multiple communication channels into one central core. I know this description sounds rather vague and geeky and you can barely picture the actual product in your mind. If you want to know more, this blog is where you should be checking for news and updates. Subscribing to our RSS Feed is a good idea. You can also hop on to Widgeo.us and sign up our newsletter for a chance to become a beta tester.

This is my short introduction of the Widgeo.us blog. As for other stuff like development updates and Widgeo.us related news, I’ll leave it to U-Zyn and Kah Wee, the programmer guys and Ridzuan, our man in the suit, metaphorically speaking… I have never seen him wear one.

Updates

[Dec 21, 2007] We are on Web Creme!
[Dec 23, 2007] We are featured on W3C Sites as “Editor’s Pick”
[Dec 26, 2007] Featured on CSS Mania
[Others] CSS Designed Gallery, CSS Mess, Most Inspired, Link Creme, Ultimate CSS Gallery, Ala Brasil, Web Doctrine, My3W CSS Genius, The Daily Slurp, CSS Vault