I’ve gotten questions from a lot of people on my process from design to completion of a site, “How does it all work?” I use a fairly common workflow process, something that really works well for me, so I’m happy to share!
Before I design at all, I like to get an idea of competitors of the client I’m working for, and other like sites. I also look for sites that might inspire me, and give me some good ideas on where I want to take the design. This is after I’ve already gotten a pretty clear direction from the client, so I know what I’m looking for.
I start out in Photoshop, although my background is in print design and InDesign was my program of choice until about a year ago. Now that I’ve used both for initial site design, I’ve decided on Photoshop because it just can’t be beat for it’s ability to slice a site and put it online in the exact size and format that you designed it in. Photoshop deals with pixels, same as the web, and InDesign is vector based, meaning you have some exporting and moving around to do before it goes to the web, and it’s always more work than it’s worth, for me. So I start the initial design in Photoshop, coming up with the look, the layout and organization, color scheme and all that good stuff.
Then I send it off to the client and usually get a few changes, change the color here, move this there, etc, which is easy enough to complete in Photoshop. Upon complete approval, and possibly signing away your life (just kidding!) we are onto the next phase!
Coding. Now I mentioned slicing before and many of you are probably like, huh? The way I slice is to crop things like the background, header piece, content area background, images, etc so that they are the exact size that I want them on the site.
I like to code with Panic Coda, it’s lightweight, easy to use and has some really cool features that Dreamweaver lacks. But any plain html editor will do. I start off with a basic framework for html and css and then start plugging in everything, background, header, logo, navigation, content area, text, images, footer. After the coding is done, I show the client the proof, which looks pretty much the same as the design proof that they’ve already approved but people like to see it in action!
After that, I move on to anything else they would like implement, usually a content management system, maybe some flash, and make sure all the goodies are working. And then I hand it on over! It all sounds very easy but the process usually takes a couple weeks, with other work and such mixed in, these things don’t get built in a day! Hope you enjoyed my process, what are your tools of choice?
subscribe by rss feed
