My Web Design Workflow and Tools.

Lately, I've been reading a few posts about design workflow processes and the tools used. I personally find it very interesting to hear about other's workflows since it's a self-taught kind of job. So I thought I'll share mine too and would love to hear about yours as well.

The standard process starts by gathering information that determines the project’s cost. No design related questions are yet asked unless related to the price. Before a price range is mentioned, we tend to ask the client for a rough budget that he’s willing to spend on this project just so we know who and what we are dealing with.

After the first step, I begin with the usual; I gather as much design-related information as I’m able to in order to help me visualize a stable wireframe and overall design. I then analyze and write down the basic elements of the site that might have to take up room in the layout's space; that way I know which elements to include in the wireframes.

When all elements are written down, I go old-fashioned and take out my sketching notebook and pen and start sketching about four or five messy wireframes. I prefer doing it in the old fashion way since it lets me sketch faster and couple more wireframes with ease.

I choose two or three best sketches and translate them into JPGs in Adobe Photoshop. I send the wireframes with explanations to the client via email to choose the desired one (additionally, I always give my recommendation). In case the client wishes to add or remove some elements, I edit and resend for final confirmation. Even though I'm sure wireframes are almost meaningless to clients, I still manage to make them organized and clean so I can benefit from them later on. Important to mention that in these wireframes I already think of the final dimensions of the different elements such as the total width of the layout and the general dimensions of boxes.

When both, the client and myself confirm the final wireframe, I move into a phase I'd like to call colorwork. Just like a coloring book, I color the chosen wireframe. For color schemes I go into Kuler or ColorLovers and combine colors from different color palettes that fit well together. In case I get a designer's block, I like to surf for inspiration, which usually comes from my bookmark folders or the wonderful CSS galleries out there. I make as much color mockups needed until I am satisfied of at least two and then I send to the client for confirmation. Important to mention that these mockups have nothing more than a couple of boxes with color and aren’t even close to the final design; I find it easier to design as I code, so there is no need to waste time on the PSD. I keep reminding that to the client to avoid misunderstandings in the design.

When the color work well satisfies both sides, I open up one of my favorite text editors, Smultron, a very simple and powerful text editor for Mac users. Pointless to mention, but I used to code in Dreamweaver for a long time until it started to lag and crash. Even though I stopped using it, I must admit that it’s one of the best code editors out there unlike others who think it’s for newbies. The only cons I see are the size and the complexity of the program, even if I used it for coding only. The same PSD file for the wireframe and colorwork is used until the end of the project for color-codes, dimensions, typography and general reference.

For initial testing, I use Firefox 3. During the project I use whatever browsers I got on the Mac which are Safari and Opera. When the testing phase on my Mac is finished, I move into my PC for further testing (all kinds of versions of Internet Explorer). After all the bugs have been fixed and well compatible with the different browsers, I begin to clean, organize and optimize the code.

That's basically my design process in most projects I've worked on. Other tools I use around the workflow include iCal for deadlines and to do lists, Adium as my IM program, Fetch as my FTP application, Adobe Lightroom as my photo editor, Illustrator or Photoshop for logo and graphic design, Apple Spaces as my desktop organizer, TextEdit or Microsoft Word for any kind of content, and finally iTunes as my friend who never gets me bored.


entry info

The entry "My Web Design Workflow and Tools." was posted on October 16, 2008 at 00:05 by Dor Dan.

categorized in

Design, Development, Miscellaneous.


7 Comments so far.
What's yours?

previous entries
Say hello to a whole new Thuiven!
C.S.I in XHTML and CSS coding.
8 signs to when and why you need to redesign your portfolio website.
Sleeping for creativity.


Have a nice day. From

May 15, 2009

I am a colourlover too that site is inspiration in itself, the menu system is really nice.

As for Dreamweaver being for newbies - I don't share this opinion nor do I use it. I think it is a tool and it should only be used if you are willing to learnits shortcomings (the way it rewrite code - at leat it used to do this version 2/3); due to this I got in to the habit of using basic color coding text editors with ability to previe win browser (with intergration into loaclhost - editplus for example or notepad++ - intype (by Martin Cohen) looks great but is not ready yet)

As for my workflow - I have base set which is a plain basic site; loose stuff skeletal markup typographical ocnventsion minimal layout (recently I am using OO CSS by Nicole Sulllivian; prior Nathan Borror's Bolierplate) and a blank common.js The design brief is noted on paper (want a white board too) from emails sent by client (organised in gmail using labels - filtering future emails from client) - I am interested in the github project polypage by Andy Kent (have not got round to using it yet) - for future I am making use of cakephp and looking to get into Django -python in genral.

I have gleened some useful insight from this post -also from Sarah P's post which linked to this

thx for sharing

ps: it looks like comments could do with striping slashes :)

March 31, 2009

I feel somewhat obligated to tell you about Coda. You mentioned Smultron, and it has some of the simplicity of Coda, but I've fallen in love I think... it's got a local file management system that works identically for remote file management through FTP connections. It's just a solidly clean, intuitive program, with a big workspace for coding, letting you get right down to work. Down side's a hundred bucks. But still...the trial's gonna be 15 days of gorgeousness :P.

Cool to read this though. I wondered about how you typically went about your work. Gonna try out Smultron and Fetch soon :P.

February 24, 2009

Yes, indeed. Smultron is an outstanding program - so simple yet does anything I need.

Dor Dan
November 02, 2008

Sounds a pretty thorough workflow. I also used to use dreamweaver but moved to Smultron as it has all the features that I need without the bloat that Dreamweaver brings.

Will Speak
November 02, 2008

Excellent, I love being nosey and seeing other peoples workflow - thanks for sharing.

Sarah Parmenter
October 16, 2008

Very nice site - I found it on and not because I click every site that I see there, just because it attracted me somehow - it was really warm:) Of course like you said it needs a little more. In my opinion the header it\\\'s a little...chaotic - I don\\\'t see an idea in it and what means Thuiven anyway? - notebook in hebrew? The desert color remind me of Israel and the hot weather but the lines even though they are pretty nice they doesn\\\'t make me think of anything connected with your personality :) I hope this is a good type of critic and you don\\\'t take it bad cause I really like your site.

October 12, 2008

Have your say!

Opinions, Thoughts & Feedbacks