Jul 19

Tagged in: , Comments:Add

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:

  1. 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.

    concept 1

  2. 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.

    concept 2

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…

comp

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!

flower comp

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:

Delicious Stumbleupon Digg

Welcome to Web Designer Wall How to Design Mini Icons

Comments

Pages: 17 16 15 14 13 12 11 10 9 8 71 » Show All

There are 170 comments (+Add)

  • 170 Web designer cape town http://www.websitedesigncapetown.co.za/web-designers/cape-town.html

    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

    hi, nick… how you create a paper effect, i try that is so hard

  • 168 ina

    is a e very nice

  • 167 wildstylegrafix http://www.wildstylegrafix.com

    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/

    Looks really cool, thanks for the behind the scenes.

  • 165 Spike Rory Morris

    @ 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

    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

    How do you make the large flower background to download fast?

  • 162 Michael Garmahis http://garmahis.com

    Here are my thoughts about Web design process

  • 161 Bradpitt http://www.nedirbilgi.com/

    hello. hope you send many tutorial about illustrator…coz i want to learn anymore…thankz

Pages: 17 16 15 14 13 12 11 10 9 8 71 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

advertisement

Back to top