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:
-
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.
-
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.
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...
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!
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:
Awesome design. Totally changed how i view the design process. Need to hone my illustrator skills. By the way, where did you study? or are you self taught? Thanks again for the inspiration.
good share, thanks
Lovely design (always loved your work).
Any advice on how to get into wordpress (I mean skinning it with your own design)?
Wonderfull theme! thanks for sharing..
Wonderful, I learned some things. Thanks
¿WHAT IS THE SOFTWARD FOR THIS, FOR DRAW? PHOTOSHOP?, IS NOT EASY DRAW IN PHOTOSHOP.
Hello nice blog! !!
pen
It’s my new page.about pens.
I love it!!! i could really use some help on my scholarship Design Contest!
I´m brazilian, and your site it´s incredible!Wonderfull!!!!!
very good
Wonderful, you really inspire me in my architectural design concept.
Thank you
Great work! Your design is simply fabulous.
Hello! nice blog!
boob
My sites
cool stuff!!!
Hi! I think that this design is awesome! :-D
I’m a blogger and I’d like to get a “stylish” design for my WordPress powered blog: could you help me please? We could discuss the details. Please tell me what do you think about this proposal.
Best regards
Wonderfull job Nick, I love all the little details, it’s fantastic.
Your site is breath taking awesome, i wish you could make a list of must read things to learn in Html and Css to do something like this brilliant design.
You’re highly creative and artsy. This design is beautiful, but you already knew that. Great job. =)
Hi, your site is awesome! really.. uhm I have one question if for example you were to design a “my computer desk” theme, is it legal to use a picture of a macbook (from Apple’s website) as an object in a design? or do we have to buy it from a stock site?
thanks in advance..
Best design I have seen in a a long time. See, now you make me want to learn how to do that to :) You are a true motivator. Keep those tutorials coming.