Jul 19
Design Process of WDW
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:
Welcome to Web Designer Wall How to Design Mini Icons
Comments
Pages: 17 16 15 14 13 12 11 10 9 8 7 … 1 » Show All
There are 170 comments (+Add)
Pages: 17 16 15 14 13 12 11 10 9 8 7 … 1 » Show All
Post Your Comments
Loading ...
170 Web designer cape town http://www.websitedesigncapetown.co.za/web-designers/cape-town.html
June 11th, 2009 at 7:43 am
Excellent techniques, you really inspire my to be more creative and with you showing the details I can sure try and apply them
169 hey nick
May 14th, 2009 at 9:51 am
hi, nick… how you create a paper effect, i try that is so hard
168 ina
May 8th, 2009 at 8:26 am
is a e very nice
167 wildstylegrafix http://www.wildstylegrafix.com
May 6th, 2009 at 5:45 am
I just came across this site through reading a ebook and am very glad I did cause your design work and tutorials are amazing and very informative.
Amazing work, keep it up !
166 Kp http://backcountrygeneration.com/
April 12th, 2009 at 11:32 am
Looks really cool, thanks for the behind the scenes.
165 Spike Rory Morris
April 8th, 2009 at 6:36 pm
@ Thomas,
I think you’re referring to a Javascript script called ‘Lightbox’. It’s a free, simple little script that you can run with a tag, providing you upload the free library files required (tiny) to your web server.
The Lightbox (2) homepage is at
http://www.lokeshdhakar.com/projects/lightbox2/
If you’re looking to use it with wordpress, then there is a wordpress plugin that has been adapted from the Lightbox script. You can find the plugin here:
http://wordpress.org/extend/plugins/lightbox-2-wordpress-plugin/
‘Lightbox 2′ Google
http://www.google.co.uk/search?q=lightbox%202
-Spike
164 Thomas
February 24th, 2009 at 3:47 am
i dont know if it’a a part of wordpress but could you post any tutorial how to make such thing: when you click on a photo it enlarges but not in other window but in the same (with dark background)
163 Paul Muyeshi
January 16th, 2009 at 9:36 am
How do you make the large flower background to download fast?
162 Michael Garmahis http://garmahis.com
January 5th, 2009 at 11:01 am
Here are my thoughts about Web design process
161 Bradpitt http://www.nedirbilgi.com/
December 27th, 2008 at 2:33 pm
hello. hope you send many tutorial about illustrator…coz i want to learn anymore…thankz