The Adventures of Cindy Li
Redesign of DesignRabbit
May 19 , 2009
Once upon a time…
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. ;)
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.
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.
Portfolio Detail page:
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.
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.
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.
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. :)
The new live site : DesignRabbit.