Yelp now has Facebook Connect: reviews publish to your newsfeed. What we *need* is to see reviews of Facebook friends in Yelp =higher trust 21 hrs ago
« The Marriage of New and Old Media
YouTube awards are Insular, and why the Vloggies is better for the Online Video Industry »
45

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
    • Sphinn
    • del.icio.us
    • Facebook
    • Google
    • Reddit
    • Technorati
    • LinkedIn
    • TwitThis

    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.

    45 Responses to “Web Design Workflow and Process Comparison”

    1. 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. Posted by Kris Patel on March 19th, 2007 at 1:16 pm

    2. 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. Posted by Rob Grady on March 19th, 2007 at 2:47 pm

    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. Posted by RobGrady.com » Blog Archive » The never-ending permutations of the web development process on March 19th, 2007 at 3:13 pm

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



      5. Posted by Il workflow di un sito web « Cheat Sheet on March 24th, 2007 at 12:15 pm

    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. Posted by Web Strategy by Jeremiah » Community Resource for Web Designers: Edezines on May 31st, 2007 at 6:47 am

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

      Great post.



      7. Posted by SEO Lincolnshire on April 9th, 2008 at 5:22 am

    7. 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. Posted by Seattle Web Designers on July 17th, 2008 at 12:01 pm

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



      9. Posted by The never-ending permutations of the web development process | Rob Grady on July 20th, 2008 at 6:42 pm

    9. [...] mood-boards @ Stuff and Nonsense The Four-Day Week Challenge @ A list apart Web Design Workflow and Process Comparison @ [...]



      10. Posted by Заметки о дизайне - Workflow on September 22nd, 2008 at 4:16 am

    10. This is a great little resource. Exactly what I was looking for. Thanks.



      11. Posted by Paris Vega on December 11th, 2008 at 12:26 pm

    11. 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.



      12. Posted by Systems & Websites on December 31st, 2008 at 5:48 pm

    12. Here are my thoughts about Web design process



      13. Posted by Michael Garmahis on January 5th, 2009 at 8:33 am

    13. [...] Web Design Workflow and Process Comparison Web dizajn proces i komparacija (tags: webdesign design resources graphicdesign webdevelopment) Podelite ovaj sadržaj sa drugima: [...]



      14. Posted by links for 2009-02-28 | Svakodnevnica blog on February 28th, 2009 at 2:09 pm

    14. [...] read about webdesign process article and write what you think about it. http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      15. Posted by More questions. « Ruyi’s Blog on April 28th, 2009 at 9:54 am

    15. [...] http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison Read about web design process article above and write what you think about [...]



      16. Posted by Week 2 answers « ~Annie’s Space~ on April 28th, 2009 at 9:56 pm

    16. [...] http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      17. Posted by Qns and ans for week 2 « Blogzzz on April 28th, 2009 at 9:58 pm

    17. [...] Read about webdesign process article and write what you think about it. http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      18. Posted by Lecture 2 Blog homework « Monstarleong’s Blog on April 29th, 2009 at 5:23 am

    18. [...] 5) What I think about the web-design process article below?http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      19. Posted by Web-Design Work 2 « The Art of Soon on April 29th, 2009 at 7:42 am

    19. [...] 5) Read about web design article and write what you think about it. (http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/) [...]



      20. Posted by WebDesign HomeWork 2 « Garykyle’s Blog on April 29th, 2009 at 9:14 am

    20. [...] fonts face found o PC & Mac?  5. What is page loading time? How it influence your design? 6. http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ Read about Web design process article above and write what you think about [...]



      21. Posted by Dm1232 Web Design Exercise 2 « Markerseen’s Blog on April 30th, 2009 at 2:43 am

    21. [...] http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/   Read about Web Design Process articles above and write what you think about it(at least 150 words). [...]



      22. Posted by Wk 2 Exercise « PrinceRyu’s Blog on April 30th, 2009 at 8:01 am

    22. [...] 5)      http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/                       [...]



      23. Posted by week 2 questions « My Blog on April 30th, 2009 at 9:38 am

    23. [...] [...]



      24. Posted by Webby 102 « Flawed Impressions on April 30th, 2009 at 10:45 am

    24. [...]   5.Read about Web Design Process artical above and write what you think about it (at least 150 words) http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      25. Posted by Guoxiong’s Blog on April 30th, 2009 at 11:53 am

    25. [...] http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ Read about Web design process article above and write what you think about [...]



      26. Posted by Week 2 Homework « (insert emo blog title) on April 30th, 2009 at 12:41 pm

    26. [...] http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ ( Read about Web Design Process article above and write what you think about it “at least 150 [...]



      27. Posted by Week2_homework_DM1232 web design1 « Ms_Rabbit’s Blog on April 30th, 2009 at 9:55 pm

    27. [...] Read this & write about what you [...]



      28. Posted by Week 2 Questions « Melvyn’s Blog on April 30th, 2009 at 9:59 pm

    28. [...] Read about Web Design Process article and write what you think about it (at least 150 words) [...]



      29. Posted by DM1232 WDES Wk 2 « 「花の夢」 on April 30th, 2009 at 10:41 pm

    29. [...] read about webdesign process article and write what you think about it. http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      30. Posted by Web Design Questions -2 « paper_drool on April 30th, 2009 at 10:44 pm

    30. [...]  (http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/)    [...]



      31. Posted by QnA For Web Design Week 2 ~~~ « Howly’s Blog on May 1st, 2009 at 12:09 am

    31. [...] Q:http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ Read about Web Design Process article above and write what you think about it (at least 150 [...]



      32. Posted by Q and A week 2 « eL on May 1st, 2009 at 1:01 am

    32. [...] May 1, 2009 review for this webpage [...]



      33. Posted by review « royale cat on May 1st, 2009 at 1:04 am

    33. [...] about Web Design Progress and write at least 150 words about what you think about [...]



      34. Posted by Week 2 « A Life’s Tale on May 1st, 2009 at 1:05 am

    34. [...] Q:  Read about Web Design Process article  and write what you think about it (at least 150 [...]



      35. Posted by Q and A week 02 « eL on May 1st, 2009 at 1:17 am

    35. [...] 5) http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      36. Posted by Week 2 Qns « Shawtybonch’s Blog on May 1st, 2009 at 1:19 am

    36. [...] Web Strategist Blog (link) [...]



      37. Posted by I ♥ Homework Part 2 « Veronicavalentina’s Blog on May 1st, 2009 at 1:23 am

    37. [...] Q5. http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      38. Posted by week 2 homework « JW’s Blog on May 1st, 2009 at 1:43 am

    38. [...] http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ [...]



      39. Posted by Week2 Exercise ah!! time to Chiong Sua!!! LOL « Clemon’s Blog on May 1st, 2009 at 1:52 am

    39. [...] five : (http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison) after reading this,write what you think about [...]



      40. Posted by the five interesting questions « ler-knees’s on May 1st, 2009 at 1:53 am

    40. [...] Hmm..Just read the article about web design process,http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/. [...]



      41. Posted by yummy. on May 1st, 2009 at 1:54 am

    41. [...] about Web Design Process article and write what you think about it (at least 150 [...]



      42. Posted by DM1232 Week 2 « airdobe @ wordpress on May 1st, 2009 at 2:43 am

    42. [...] 1, 2009 at 4:01 pm (Uncategorized) http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/ Read about Web Design Process article above and write what you think about it (at least 150 [...]



      43. Posted by Web Design homwork wk 2 cont. « zxgameworks’s Blog on May 1st, 2009 at 3:01 am

    43. [...] Read about Web Design Process article and write what you think about it. The article is a well organized and also quite helpful for [...]



      44. Posted by This is sparta! No wait… it isn’t. « Stolentwilight’s Blog on May 1st, 2009 at 5:30 am

    44. [...] Web Design Workflow and Process Comparison Read the web process article above and write what you think about it.(150 min words) -Too be continued! [...]



      45. Posted by paper dreams » DM1232 2nd task: on May 3rd, 2009 at 6:53 am

    45. 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.



      46. Posted by Shaun McCallum on May 14th, 2009 at 6:03 am

    Leave a Reply

    Or enter your details below:




    site design by studionashvegas proudly powered by WordPress