Usually, I keep the sketches of every project I designed and use them as simple documentation. Sometime I might refer back to the old sketches for ideas and references. Here I would like to share my development process of Web Designer Wall with you. This article will show you how WDW is done - from start to finish.

Concepting

The design you see now is not my original concepts. I actually been through two versions before I finalized this one. Let's take a look at my original concepts:

  1. Computer desk
    My initial concept was to have a computer desk with an iMac or G5, bookshelves, magazines, plants, sticky notes, and a pull-down tag cloud. Then I thought it might look too similar to FreelanceSwitch, so I trashed it.

    concept 1

  2. Wall concept
    Then I came up this "wall" concept - a lot of sketches on the wall, a bookshelf, some design books & magazines, a Flash ticking clock (just to look cool), Ajax calendar on the sidebar, and some stickies.

    concept 2

Photoshop comp

Here was my first comp of the wall concept. I didn't like this comp at all. Somehow it didn't turn out as nice as on the concept sketch. Plus it looked too much like this site. Then I wanted to try another direction...

comp

Another direction

Later, I saw a flower sketch that I drew (for fun) long time ago and I thought it might work on my design. I quickly scanned it and put in my Photoshop comp. I like it a lot!

flower comp

Final

Finally, I decided to use the flower design and traced it in Illustrator. I chose watercolor style because I wanted the theme to look artsy and sketchy. The tag cloud actually took me a lot of time because I wanted to design a very unique cloud. I tried pull-down tag cloud, but I didn't like it. Then, I ended up with this plain and simple tag cloud. Here are some more development screenshots:

  • development image
  • development image
  • development image