Having a keen understanding of Web Design Project Planning Process is invaluable. With a clear organization, you’ll be able to work better and more efficiently. Moreover, with this document you’ll be able to show your clients what they are paying for.

Here are the different steps of Web Design Project Planning Process.

Quick legend

  • (M) stands for “Milestone”. It shows crucial moments of the Web Design Project Planning and Process.
  • ($) shows where you may have to spend money to get the things done.

Preparation

  1. Study client and job specificities
  2. Appraisal of existing web site, IT systems
  3. Check competition
  4. Define site goals and overall strategy
  5. Web design client questionnaire (M)

Quote submission

  1. Confirmation of site objectives (corporate, marketing, etc.)
  2. Choose business model & Marketing plan
  3. Plan interactions, technologies & functionalities
  4. Choose content management system
  5. Choose data delivery model and backup
  6. Roles and responsibilities
  7. Initial timetable
  8. Quote submission
  9. Project validation & deposit paid (M)

Planning

  1. Website title
  2. Host selection & registration ($)
  3. Domain name selection & registration ($)
  4. Mirrors & other domain-related registrations ($)
  5. Website structure & information architecture
  6. Validate wireframe (M)

Layout

  1. Overall look and feel
  2. Choose fonts
  3. Color scheme research
  4. Make sure your color scheme is accessible to colorblind and visually impaired people (or provide an alternative)
  5. Standards and templates (usability, accessibility, etc.)
  6. Basic layout creation – (X)HTML/CSS
  7. Validate Mockup (M)

Content preparation

  1. Review content providers (copy-writers, illustrators, etc.)
  2. Text reception/update/creation ($)
  3. Art reception/update/creation (photos, illustrations, etc.) ($)
  4. Add web specific content (text, art, music, etc.) ($)
  5. Distribute content quantity – Keep home-page light and effective
  6. Provide a call to action for every page (avoid dead ends)
  7. Copyrights, terms of use, and privacy policy
  8. Contact details
  9. About page (with author(s), company information, credits, etc.)
  10. Testimonials, reviews and awards
  11. Products description
  12. FAQs
  13. Other content
  14. Optimize target keywords usage in content
  15. Proofread
  16. Validate content (if you provide site copy) (M)

Content integration

  1. Merge mockup and content
  2. Pay special attention to content layout and hierarchy (try to meet the user “Z” reading pattern)
  3. Define headers (h1, h2, etc.) and paragraphs
  4. Adapt font size, leading, spacing… to improve legibility
  5. Chose if you want to allow/disable text to be resized through the browser
  6. Identify and add meta tags, meta descriptions and descriptive titles
  7. Label links with anchor tags which show where they lead
  8. Make links consistent and easy to identify (style special links, like feeds or emails)
  9. Add “alt” tags on all significant images (keep “alt” tags empty on other images)
  10. Provide text-based alternatives for all significant medias without “alt” tags

Design

  1. Artworks reception/update/creation (photos, illustrations, etc.)
  2. Logo reception/update/creation
  3. Design header with clear statement of the site purpose & and prominently placed logo linked to home-page
  4. Add visible search form to the header or to the top of right column
  5. Design clear navigation (if in JavaScript/Flash, provide a text-based alternative)
  6. Design main section (columns and sidebars) and footer now or later
  7. Make sure that important content is above the fold at least for home-page
  8. Balance illustrations/photo and text importance according to the site purpose
  9. Advertising-ready design & link page set up
  10. Design visible testimonials, reviews and awards
  11. Make sure content and/or design elements encourage future visitation or viral sharing
  12. Make sure company information and contact (email or form) are immediately accessible (address, phone number, etc.) so that your visitors know that you are a “real” company
  13. If many choices are available (example: different products of the same kind) clearly highlight one to help your visitors choose (don’t make them think!)
  14. Style lists and special text fields (error, validation, etc.)
  15. Design buttons, sprites, etc. Make sure they change on hover if they are clickable.
  16. If (really) necessary, create a splash screen in JavaScript/Flash with text-based alternative
  17. Design Favicon
  18. Details, details, and… details
  19. Validate design (M) and send files to client if needed ($)

Functionalities

  1. Build database
  2. CMS/Blog/E-commerce implementation
  3. Forms/scripts (keep required information from the visitor to a minimum and make sure that your forms handle special characters correctly)
  4. Newsletter (site functionality & email format)
  5. Custom applications & Functionalities development
  6. Restricted areas (backend and password protected pages)
  7. Account login/registration pages (ask for registration late)
  8. Other special functionalities
  9. First timetable update

Technical & Usability

  1. Make URLs meaningful & user-friendly
  2. Ensure that URLs are always consistent (www.woobzine.com or woobzine.com)
  3. If navigation or design breaks a browser’s back button, provide an alternative
  4. Cross-browser optimization
  5. Create custom 404 error page
  6. Ensure that visitors receive confirmation after every action
  7. Make site print-friendly
  8. (X)HTML validation & optimization
  9. CSS validation & optimization
  10. JavaScript validation & optimization
  11. Optimize the site for graceful degradation
  12. Optimize images & files weight
  13. Protections & .htaccess functions (anti-spam, compression, caching, anti-hotlinks, etc.)
  14. Further website security (database, cgi-bin, etc.)

Testing (first round)

  1. Web standards testing
  2. Usability testing ($)
  3. Accessibility testing
  4. Typography testing
  5. Content testing ($)
  6. Design & Identity testing ($)
  7. Links testing
  8. Transaction testing
  9. Second timetable update
  10. Correcting errors and overall optimization
  11. Complete offline testing
  12. Site validation (M)

Going live

  1. Documentation
  2. Upload site
  3. Statistics and optimization programs set up (Analytics, Feedburner, etc.) ($)
  4. Configure backup schedule and test recovery from backup

Training of staff

  1. CMS, Blog training
  2. (X)HTML/CSS training
  3. PHP training
  4. Community building training
  5. SEO training
  6. Web marketing training
  7. Others if necessary

Marketing & SEO

  1. Create an XML Sitemap
  2. Configure robot.txt
  3. Submit site to Search Engines
  4. Submit sitemap
  5. Check formatting of site results in SERPs
  6. Galleries and Web Standard submissions
  7. Ads buying/selling ($)
  8. Newsletter & Mail campaign ($)
  9. Auto-responses
  10. Set-up email monitoring & alerts
  11. Get referrals & testimonials
  12. Link negotiation ($)
  13. Offline marketing ($)
  14. Social networking & marketing ready for launch (Twitter, MySpace, Digg, etc.). It’s buzz time! ($)
  15. Launch special events/promotions ready ($)

Testing (second round)

  1. SEO testing
  2. Marketing testing
  3. Optimization testing
  4. Database testing
  5. Security testing
  6. Complete online testing
  7. Site validation and invoice paid (M)

Launch

  1. Write completion report & recommendations
  2. Burn CD with site and files (pictures, flash, etc.)
  3. Page with all accounts information (ftp, admin, etc.)
  4. Copyright transfer documents
  5. Wrap all this in a portfolio and send with a gift
  6. Launch special events/promotions
  7. Have a big party!!! (yes, you deserve it!)

Maintenance & Optimization

  1. Webmaster activities (content feedback & update, new products, calendar updates, etc.)
  2. QA sessions
  3. Adding new functionalities (newsletter, gallery, etc.)
  4. Periodic strategic audits and reviews.
  5. Build, monitor, respond to community and feedback
  6. Data Collection (e.g. web stats) and Analysis
  7. Links (optimization, negotiation, dead links, etc.)
  8. SEO & Pagerank (update titles, keywords, tags, etc.)
  9. New submission to search engines
  10. Sitemap update
  11. Social networking & marketing
  12. Security Backups
  13. Site redesigns and makeovers

Management Processes

  1. Project evaluation (results/plan, goals achievement, etc.)
  2. SEO review (2-4 months after going live)
  3. Revised marketing plan & budgeting
  4. Documentation updates
  5. Ongoing roles and responsibilities
  6. Last recommendations

What now?

I hope this list was helpful. I spent hours working on it. But you know what? I can make it even better!

If 100 readers or more decide to follow me on twitter before the 20 october, I’ll refine it even more and add links to many resources for every steps of this process.

OMG! I reached the 100 more followers in 3 days! Thank you all. As promised here is the next article, with many new links and resources :  All you need to know about Web Design Project Preparation. It’s HUGE, with almost 500 lines worth of advice and 23 quotations!

Beside that promise, I wanted to give you all a small gift. That’s why I released a powerful 960px grid template for photoshop. It’s free and I hope you’ll like it!

Thank you again!

Interesting links

An awesome Gantt Chart Software

Tom’s Planner is an awesome Gantt Chart Software. And you know what? They decided to use this post for their web design template. If you have at least 10 minutes, be sure to try it it’ll make your web design life a lot easier!