Jeremiah Owyang discusses how web tools and social media enable companies to connect with customers

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
Analyze
Design
Develop
Implement
Evaluate


A Design Process Revealed

No Smoke, No Mirrors
Research & Discovery
Competitive Analysis
Exploration
Thumbnail Sketching
Typography
Imagery
Composition
Execution & Implementation


The Seven Phases of Web Site development

Concept
Discovery
Content development
Design
Development
Launch
Post-launch


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.

    8 Comments so far

    1. Kris Patel March 19th, 2007 1:16 pm

      StandAside by Kris_Patel said
      “Was just reading through Jeremiah Owyang’s post on Web Design Workflow and Process Comparison. A very interesting read that as an amateur web designer myself would appreciate.

      When web design takes on different types of projects, the development process likes to change.”

    2. Rob Grady March 19th, 2007 2:47 pm

      It seems that all of the listed web design processes are steps or sub-steps in some variation of a standard waterfall software methodology. I’ve worked at companies that have had “Discover, Define, Design, Develop, Deploy” as well as “Envision, Architect, Deploy, Manage” which are all basically the same thing, just phrased differently. What I find more valuable is managing and developing a website with a product lifecycle approach instead of a single project.

      When it comes to the ‘right’ process, I give the lawyer answer, “it depends”. Every organization is different and if you have a dedicated web team then your methodology will differ greatly.
      While I admit my product bias (since I have a product management background), I’ve found that websites that aren’t managed as a product (with a lifecycle) can find themselves with unhappy stakeholders, a site that is always seems to be broken and a project that is never done. Every few years they may go through the upheaval of a new design and development that fixes some of the problems but may never find the balance of continuous improvement that a product lifecycle provides.

      A number web shops will show up at the door with a handy methodology (that is really the same as everyone else has) and the promise of a brand new world. Finding a firm that looks beyond the project but to the lifecycle of the website over the next few years and ties it to business objectives will be significantly more helpful and effective. While terminology differs from one firm to another having a roadmap (product backlog, prioritized list of features, etc) will help make website initiatives more successful over the long-term regardless of the process.

    3. […] Interesting post by Jeremiah that hit home regarding the multitude of processes that have been thrown around for web development for years. Having worked at a number of companies over the last 12+ years, they all have generally had the same process just organized and named differently (sometimes to the point of confusing their own teams).  I recall the mass confusion at a company I worked at ten years ago trying to teach the sales folks the difference between Discovery and Define stages of a project. Regardless of the implementation methodology and processes, failure to plan for the long-term product lifecycle can be problematic. […]

    4. Il workflow di un sito web « Cheat Sheet March 24th, 2007 12:15 pm

      […] Il recente Web design and workflow process comparison che presenta e riassume alcuni articoli sul workflow Posted by BC Filed in Internet […]

    5. […] While I’m not sure how a firm becomes a “featured design firm” there appears to be come good resources for those seeking to buy or sell web design services. I’d like to see them create a web design directory that lists many firms, maybe by customer rating. See their web design resources section as well. Have you read my comparison of all website design process and workflows? If you’re trying to price a web design project, here’s some resources I’ve collected. […]

    6. SEO Lincolnshire April 9th, 2008 5:22 am

      It is a great idea to have a system in place. This will save you time and money.

      Great post.

    7. Seattle Web Designers July 17th, 2008 12:01 pm

      Good guidelines for anyone seriously seeking a professional web design firm. As mentioned above, watch for “smoke and mirrors”. Make sure you really understand what they’re offering, since most companies only offer the design services without any of the backend components that make a site work.

    8. […] post by Jeremiah that hit home regarding the multitude of web development processes that have been […]

    Leave a reply