Industry Analysis: Quicktake: What Google Buzz Means http://is.gd/81UpM 14 mins ago
« The Marriage of New and Old Media
YouTube awards are Insular, and why the Vloggies is better for the Online Video Industry »
Comments

Web Design Workflow and Process Comparison

Categories: Process, User Experience, Web Design, Web ToolsPosted on March 19th, 2007

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.

    Share This Post:
    • Digg
    • del.icio.us
    • Facebook
    • Google Bookmarks
    • Reddit
    • Technorati
    • LinkedIn
    • FriendFeed
    • StumbleUpon
    • Twitter

    This entry was posted on Monday, March 19th, 2007 at 7:11 am and is filed under Process, User Experience, Web Design, Web Tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    Comments
    • 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."
    • 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.
    • It is a great idea to have a system in place. This will save you time and money.

      Great post.
    • 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.
    • This is a great little resource. Exactly what I was looking for. Thanks.
    • Systems & Websites
      Nice post and can't agree more with Rob Grady. It really depends on the client's requirements. Sometimes, we have to find a way to fast track the entire process to meet (especially) deadlines. This is the case for a lot of our small-mid scale firms web projects.
    • Here are my thoughts about Web design process
    • I find your post very interesting. I have been working in web design for only a short period of time and I could never complete a single job without the planning and proceedures you refer to here.

      Knowing what to call them is not important but understanding what they do and what they can accomplish is more important. But if we all did follow the same proceedures then surely nobody will be different and nobody would have a competitve edge.

      Great post and valued information.
    blog comments powered by Disqus
    site design by studionashvegas proudly powered by WordPress