Web Design Workflow and Process Comparison

This blog is intended as a resource for professionals that are responsible for the long-term planning of a website (How to find out if you a Web Strategist at your company). While not a Web Design blog, web strategists need to make decisions, dictate budget, or approve web design projects. A client recently asked me for some resources for Web redesign for their website, well actually, they wanted to know of some firms that do this, I have started a voluntary list, but realize there’s quite a few steps that occur before and after dealing with a web design services company.

A Comparison of various Web Design Processes:

It’s interesting to note the differences in Web Design process (which is arguably different from Software Design) from a variety of different industries and focuses.

Instructional Design Process


A Design Process Revealed

No Smoke, No Mirrors
Research & Discovery
Competitive Analysis
Thumbnail Sketching
Execution & Implementation

The Seven Phases of Web Site development

Content development

Web Design Workflow, Complete Process

1. Client Consultation
2. Initial Drafts And Sketches
3. Photoshop Mock Up
4. Finalize The Design
5. Code Into XHTML/CSS

Breakdown of the ideal web design process

1. Know what you’re doing
2. Know what the site needs to do
3. Know what the site’s visitors want
4. Get a good picture of the personality and style of the web site
5. Sketch out highly successful scenarios
6. Organise views into a site map
7. Sketch the essential features & look
8. Map your visitors’ attention
9. Arrange the visual elements to work together

Web Style Guide Process

Before you begin

* Planning
* Developing a site specification

The site development process

* Site definition and planning
* Information architecture
* Site design
* Site construction
* Site marketing
* Tracking, evaluation, & maintenance

Web Design Workflow 2.0

  • Step 1–Defining the Core Process: discovery, planning, and clarification
  • Step 2–Developing site structure: content-view, site-view, and page-view
  • Step 3–Visual design and testing: creating, confirming, and handing off
  • Step 4–Production and QA: prepping, building, and testing
  • Step 5–Launch and beyond: delivery, launch, and maintenance

  • Analysis
    Most of these processes have a common theme that are broken down to Design, Production. A few of these processes don’t include the analysis before any work is done, while some have various stages of design mockups. Some of these processes don’t include post launch activity, such as testing or evaluation.

    Of course, every process depends on the project at hand, however this is a good start to understand some common methods.

    Learn more
    Kelly and Emily have released some additional resources for your planning needs. Also see the top resources sites for Web Designers. Lastly, there are tons of sites tagged in delicious with the terms web design process. If you’re shopping around, Understand Web Design Pricing, or see a list of web design firms (add your own or favorite firm).

    Update: Robyn Baker emailed me this interesting resource directory for Web Design and Web Designers called edezines,it’s worth a look.