Prajakta Godbole

I am redesigning and developing my portfolio website. This will be the 3rd live version. I decided to document my redesign approach.

My very first website (let’s call it version 0) was done using Drupal framework. I used an existing template and added my content as nodes. The website was not nice to look at, but I learned how to use Drupal.

My second version of website, let’s call it version 1, (which was live from Sept 2010 to Jan 2011) was entirely hand-coded. Here are some screenshots of that website version.

My design process for the version 2 website began with identifying what was wrong with this earlier version. The next step was drawing out the wireframes (sketches) on paper and mocking it up in HTML/ CSS. Here’s my html page. I used CSS fluid layout. I also used PHP to get the latest blog entry. I used JQuery to design the button. However, I wasn’t happy with the design.

So I did some mock-ups on Illustrator. With this new design, I also created my own icons. Here’s my html page.

However, I felt the design was not creative and clever enough. I drew some sketches and really liked the idea of a fish jumping from ‘development’ waters to ‘design’ waters. I then mocked it up in Illustrator. The waves with the bubbles were inspired by the ‘Book of Kells’ animated movie. The fish, the waves and the clouds were done using Illustrator. I felt the waves idea did not look as nice as I had expected, especially because of the ‘Design’ and ‘Development’ texts.

Then I thought of the jar idea, where I create the jars out of the texts, thus integrating the text into the design. I created the mockups in Illustrator.

I drew wireframes for the remaining pages and then started coding. I hand-coded version 2 website using HTML, CSS and JavaScript. I have used Illustrator and Photoshop for creating the graphics. The website was compliant with the web standards and WCAG guidelines.