Redesign of DesignRabbit

May 19 , 2009

Once upon a time…

I needed a redesign and I started last year working on the logo for DesignRabbit. I created a logo that I really fell in love with but then I got busy with Yahoo! Buzz and some other projects.

Goals

My goal was to have the website showcase the designs I have been doing. I wanted people to see that my range included more than just illustrations. I’ve been designing on the web for a long time. I’ve been in the corporate world and can adapt my designs for the projects to have a consistent voice (that’ll be another post). :)  So the main focus of the redesign was to showcase the projects, setting a stage for it. The old site was hand coded in 2004 and was an exercise in coding from scratch but I should have used a content management system to keep my sanity. I wanted the website to animate and use the lightbox, be accessible and validate of course. ;)

Color Scheme

I wanted it to reflect my Cindy Li blog  but have a different palette to it. So I came up with this color scheme.

Designing the page

I started with the main page layout so it could be more of a slide show and it was framed.

DesignRabbit website redesign:Home DesignRabbit website redesign:Portfolio

I decided that the frames were too heavy but I loved the navigation. So I kept those and started over again. Plus the behavior wasn’t something that I was fond of. It was a bit too cumbersome.

Another version

I liked the lightbox javascript technique that’s been used on lots of websites lately but didn’t like the darkening out of the entire screen.So my thought was to use the advance method of the images within the page. Now with this version I wanted the work to stand on its own. I recently visited the University of Tennessee Chattanooga and spoke to the Leslie Jensen-Inman’s design students there. I spoke to them about the importance of their projects being on a clean white board so that the work was displayed as the emphasis. Realizing that I should apply what I was telling them to my own portfolio I put all my work on white backgrounds to showcase them.

Home page:

designrabbitsite_home

Portfolio page:

designrabbitsite_portfolio

Portfolio Detail page:

designrabbitsite_portfolio_detail_2

Everything so far was going fine except the “portfolio detail page” was a bit off. I decided to take out the listings of other projects because if the project list got longer then it would be scrolling further than I wanted.

Content Management System (CMS)

The site is created using WordPress.My friend Marianne Masculino was their “Happiness Engineer” and we were discussing how everyone thinks WordPress is only a blogging platform but I’ve created a few sites like Eggar’s School, that use the WordPress CMS to do more than just that.

Fonts

I used Chalet Comprime in my logo but when Matt and I started researching the usage (as he was putting it into SIFR) we read the requirements for usage. Last week I blogged about “font licensing and embedding” that it was $1700. I wasn’t kidding. So I opted for using dafonts.com’s font Lady Ice instead. It wasn’t my first choice but my budget can’t handle $1700 to use a font.

Flickr

I started putting up the designs into Flickr all on 500x500 white backgrounds.Why 500x500? The medium size for Flickr is 500x500.I decided to fit within Flickr’s image standard to make my life a bit easier. I tagged each of them portfolio and it also allows me to be found via another way on the web. The images are entered into the CMS and Matt wrote a caching system to accommodate for when there are Flickr hiccups plus improving the performance.
I’ve been using flickr to keep a repository of my work as I create it so it was easy to reuse them.

The code behind it

I roped in my boyfriend, Matt Harris into coding the website. For the geeks that want to know the details behind the site.It was written in HTML5, it uses JQuery for the animation and it is supported from IE6 and up. It is IE8 ready. It is using Cufon although we know it has accessibility issues.It uses Sprites for the navigation and the images are stored on Flickr but cached locally (in case Flickr has any hiccups) and it makes it accessible for those instances where you are prohibited from seeing Flickr (i.e. schools). The back-end uses customized WordPress plugins to handle all the custom fields required by the portfolio.

Finally

So with all the dns migration “fun” to the new space and checking on last minute bugs I hope you guys enjoy my new portfolio. :)

Design Rabbit: redesigned and launched

The new live site : DesignRabbit.

gravatar

Tue May 19, 2009 at 06.15 pm

Veerle Pieters

Really nice write up :) I really love the new Design Rabbit site. The colors are very well chosen, composition is perfect and it’s easy navigate through the portfolio. The whole site and its look is really ‘you’. It’s colorful and yet very professional. Congrats on a superb job!

gravatar

Tue May 19, 2009 at 06.29 pm

Brian

Awesome site. I enjoyed reading about your design process.

You might want to check the first page on the portfolio. I think I saw a couple of broken image icons. Could just be a Safari 4 bug though. I’ve noticed it do that on a few sites.

gravatar

Tue May 19, 2009 at 06.43 pm

Carolyn Wood

Ohh, nice! I was afraid you’d redesigned THIS site, which I have great affection for. LOL! I never want it to go away.

Then saw the new official Cindy Li site, which is so rich and displays such great work. Nicely organized, too. Love it! Thanks for the very interesting write-up on your decisions and choices.

gravatar

Tue May 19, 2009 at 06.51 pm

Cindy

@Veerle
Thanks :) I’m learning from your example as usual. :)

@Brian
Safari 4 does have a bug in it.It is a known bugin the browser. Even when you have direct referencing of images it doesn’t seem to want to render. :(


@Carolyn, no but I am working on an update to this design. :D

gravatar

Tue May 19, 2009 at 07.00 pm

BW

Hi Cindy,
DesignRabbit looks great, I really like that logo, very nicely done! The whole site is very well designed with a great choice of colors that work well together. + A Great portfolio that’s well presented.

I find It is very hard designing for yourself, I’ve been trying to do it for the last couple of weeks and i just keep scrapping it or changing direction, You have nailed it nicely ...so great job!

gravatar

Tue May 19, 2009 at 07.05 pm

Geert Leyseele

You did a nice job on this one. I like that you didn’t settle on first try and as a result it is now much better imho. Can’t wait to see what’s next :)

gravatar

Tue May 19, 2009 at 08.54 pm

shannon

I really enjoyed your write up because there is so much more that goes on behind the curtain and rarely to people take notice. There was a lot of thought process and integration for smooth sustainability and being the latest and greatest that represents you. Very well done.

gravatar

Tue May 19, 2009 at 09.16 pm

Erwin Heiser

I think your font remark is spot on, prices for fonts and font licensing are just absurd. The foundries are going to have to get real with licensing for websites or designers are going to leave them behind. As Mark Pilgrim put it quite succinct a while back: http://tinyurl.com/cyexkk

Commenting is not available in this section entry.

About

Constantly, trying to learn new things, and on the way I get to meet some amazing people with my camera by my side. XOXO!

on Flickr