Divya Manian

RSS Feed Youtube Channel Github

Anatomy of nimbu.in

My activities as a web designer were becoming more prominent and my personal site did not express that sufficiently. Hence, I created nimbu.in (and I tweet about Web Design at http://twitter.com/nimbuin).

While this site is, ahem, very colourful, it does not have a unique brand (other than the effusive colours). So, I set about creating a memorable but offbeat logo. I love the designs from the late 20s-30s and I found a perfect poster from my scrapbook to base my color scheme on (#1):

Inspirations for the design of nimbu.in

I used the other two pictures to guide the aged and comics-like look of the logo. The text on the logo is customized from different serif fonts I found on early 20th century posters.

Nimbupani Designs Logo
The New Logo

Then, I wrote, and wrote, and wrote. I didn’t realise writing about myself would be such a difficult task. After about 3 re-writes, I arrived at the current text.

Two days ago, I started creating the website. Deepak Jois was consistently prodding me to design for vertical rhythm (he also asked me to “fix” the widows on the text, I refused — Web is not print).

This is my process to create a vertical rhythm in web pages:

  • Install and enable Pixel Perfect extension for Firefox Firebug.
  • Generate the grid and download the grid as an image.
  • Click on the Pixel Perfect tab on Firebug and overlay this image on the HTML page. You can position it exactly and also control the opacity.
  • Once positioned, use firebug to manipulate the CSS so that the text lines up vertically against the grid.

This site is the beginning of the switch to HTML 5 on my personal sites.

I want your feedback!

Please do write in the comments here what you like about the site, or what you think can be improved (or what needs to be deleted NOW!).