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: 19 18 17 16 15 14 13 12 11 10 9 … 1 » Show All
There are 181 comments (+Add)
Pages: 19 18 17 16 15 14 13 12 11 10 9 … 1 » Show All
Loading ...
181 söve http://www.sherayapi.com
February 8th, 2010 at 8:46 am
Great post.Thanks
180 vincentdresses http://www.hibirdal.com
January 5th, 2010 at 11:25 pm
The designs showed here show what simple and tasteful design is all about. Another one to consider
179 CristHoz
December 29th, 2009 at 9:51 pm
In spanish, Me gusta mucho el proceso que llevaste en el diseño. espectacular…. tanks
178 Mike http://www.comastore.com
October 31st, 2009 at 4:18 am
Wow, thanks for sharing.
177 Pol55 http://link
October 22nd, 2009 at 9:04 am
You are working with an erroneous premise and trying to make my words fit. ,
176 James http://www.vectormass.com
October 4th, 2009 at 10:00 am
Thanks for Share your idea
175 Cyrus
September 21st, 2009 at 12:33 pm
Great , Design Process of WDW
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
174 bagsin http://handbagsurf.com
September 10th, 2009 at 7:13 pm
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)
173 Aoobi http://fashionow.net
September 4th, 2009 at 10:09 pm
How do you make the large flower background to download fast?
172 cennet http://www.cennet.gen.tr
August 8th, 2009 at 5:56 am
Thanks Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.