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: 15 14 13 12 11 10 9 8 7 6 5 … 1 » Show All
There are 144 comments (+Add)
Pages: 15 14 13 12 11 10 9 8 7 6 5 … 1 » Show All
Post Your Comments
Loading ...
144 Serenis
July 21st, 2008 at 10:56 pm
Nice! It’s always interesting to see the work processing. btw, i saw a site using this flower pattern that you use in your site. Just wonder did they get permission from you or not
http://www.yukishop.cn/
143 Webdesign - Henning Nielsen http://www.bravonet.dk
July 18th, 2008 at 1:13 pm
Very creative. Nice wall you got here… I like the color composition.
142 kral oyun http://aytugakdoganodulluseoyarismasi1.blogspot.com
July 13th, 2008 at 11:45 pm
Thanks for posting.
141 branding & design nottingham http://www.m360ltd.co.uk/
July 11th, 2008 at 9:42 am
It’s interesting to see the design and thought processes behind one of best sites around!
140 Romy http://adzarkaromy.com
July 8th, 2008 at 3:22 am
Great! I’ve seen your N.design studio, and learn a lot from it. But actually this site has more!
139 Kayseri Dostlar Emlak http://www.kayseridostlaremlak.com
June 28th, 2008 at 11:01 am
goood
138 Douglas Hsieh
June 24th, 2008 at 6:13 pm
Which tool do you use to trace an image on Illustrator?
137 Antonio Ferraioli http://www.antferr.com
June 18th, 2008 at 9:00 am
Fantastic
136 Svetlana
June 13th, 2008 at 2:40 pm
Very nice!!!
The flower drawings are very beautiful!!!I wish I could draw such things)))))
135 otantik mobilya http://www.otantik.biz
June 13th, 2008 at 6:57 am
thank you