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.