Web Design Workflow
I’ve been reading a few articles recently about web design workflow, and I thought it would be interesting to analyze my own workflow. What is the process involved in designing and/or redesigning a website? What tools do I use to help me along the way?
The absolute first step is gathering as much information as possible about the project, usually through email or by phone. I send out a questionnaire which I adapted from the very excellent book Web Redesign 2.0: Workflow that Works, which helps me determine the scope of the project, target audience, purpose of the (re)design, goals for the project, site map, technical requirements, etc, etc. These questions help me determine how familiar the client is with their own brand, or whether or not they need guidance in that area. I determine how often the client plans to update the site, what the needs of the site are, and how a redesign can help meet new business objectives.
From there I put together an estimate of the project costs. If the client accepts my proposal, I begin to create a “communication brief,” which helps keep both myself and the client on target, and make sure that we’re both on the same page about the needs of the project. I also outline my needs as the designer/developer. I indicate what assets I will need in order to meet deadlines, whether it be images, content, feedback, etc. With the client I put together a work-back schedule so that we can ensure the website is launched in time.
I use freeagentcentral.com to send out my estimates, track time, log my client contact information, and invoice for my services. This is probably one of the single most important tools that I use as a freelancer in order to keep myself organized and prepared. When you have to juggle projects numbering in the double digits, you need certain tools to help keep you organized, and for me, this is number one. There is a small monthly fee, but to me, its worth every penny! I cannot say enough good things about this tool! They also have a free 30 day trial. Feel free to use my referral number to get a 10% discount: 33cp7rs2
Once the budget is set, my questions have been answered, and the communication brief is put together, I send out my first invoice, which is either 50 up front if the project has a tight deadline, otherwise, 25 up front, with 50% due during the project interim, and the remaining 25% due upon project completion.
Using my 15” Macbook Pro, I tend to collect inspiration from a variety of sources before I begin. I may collect magazine clippings and flickr images, bookmark websites, peruse my favourite CSS Galleries, and create moodboards using Kuler.
The next step is to build a sitemap, and then wireframes. I tend to use an adapted version of Google Blueprint CSS for rapid wireframe prototyping. I like to develop the wireframes and website structure before I begin designing in Photoshop, so that both myself and the client don’t get hung up on the design details. I use Dreamweaver mostly as a text-editor, in order to develop my CSS, and also for ftp. I use Firebug for development testing.
Then I create a subdomain for the client on my server where I install Textpattern, my favourite content management system, and I begin to integrate the textpattern tags into my XHTML and CSS, in order to create a functioning mockup of the site. Andy Clarke has an excellent article on why we should stop showing clients static design visuals, and I agree.
Once the structure and content is properly in place, I begin to skin the layout using Photoshop.
Other tools and tidbits I tend to use along the way: Things for task and time management, Google Reader for my RSS feeds, imgspark for creating moodboards and collecting image inspiration, Stumbleupon to collect web inspiration, Twitter, and CollabFinder to keep in touch with other designers/developers/friends.
Web Development Karachi
12 August 10
The blog was absolutely fantastic! Lots of great information and inspiration