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:
hello. hope you send many tutorial about illustrator…coz i want to learn anymore…thankz
Here are my thoughts about Web design process
How do you make the large flower background to download fast?
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)
@ 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
Looks really cool, thanks for the behind the scenes.
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 !
is a e very nice
hi, nick… how you create a paper effect, i try that is so hard
Excellent techniques, you really inspire my to be more creative and with you showing the details I can sure try and apply them
i love you guys!!!! u’re so great..=)
Thanks Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.
How do you make the large flower background to download fast?
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)
Great , Design Process of WDW
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
Thanks for Share your idea
You are working with an erroneous premise and trying to make my words fit. ,
Wow, thanks for sharing.
In spanish, Me gusta mucho el proceso que llevaste en el diseño. espectacular…. tanks
The designs showed here show what simple and tasteful design is all about. Another one to consider