The Website Development Process

9 Dec 2005 Category: Features, Graphics, Technology, Top Page 10

The Website Development Process

Our three characters: a programmer, a designer and a client.

A while ago I put this photo on my flickr page and it was chosen to go on the official flickr blog as the photo of that day (September 23rd). To date it has been viewed over 2000 times.

Written by Jon.

The photo was actually one in a whole series of photos I shot for a client presentation, detailing the website design / development process in a manner that was easily understandable and also fun to look at. This article takes you through that process, using the same photos. We hope you enjoy the pictures and if it also helps you to manage your workflow better if you are starting out as a web designer then that’s cool too :)

However, as is the organic nature of these things, there are an infinite amount of variables that can affect the project timeline. For that reason, projects are never ever as clear-cut as in this sequence of photos. Things may need to be done over and over, steps may get jiggled around, you may need more time for CMS / back-end development etc - so please think of this sequence as merely a basic example of the kind of process that I have grown comfortable with, speaking as a web designer/developer.

big pretty pic

Step 1: Discussion

Naturally you’re going to want to start your project with a client chit-chat. At the first meeting you need to establish the basic scope of the work - what needs to be done, roles and responsibilities, who is your point of contact for materials (text content, images) etc.

big pretty pic

Step 2: Brainstorming

Think about how you are going to structure things. What is important? What is not? What needs to be on every page? Depending on the scale of the project you might want to create a visual sitemap for your client. Preparing a sitemap is essential if you are reorganising content in any way.

big pretty pic

Step 3: Wireframe

A wireframe is a skeleton website, indicating all the navigation, function and content elements that will appear on the final website, but with no graphic design elements. It is used to iron out any problems or missing elements, and will act as the blueprint for the content, design and construction work that comes later.

How you create the wireframe is up to you - for small sites it might be fine to just line-draw it in Illustrator or Photoshop, but for larger, more complex sites, it might be necessary to actually code the wireframe into HTML so the client can click around to check everything is in the right place.

big pretty pic

Step 4: Planning the Content

Working from the sitemap and wireframe, you and the client get together to start planning the content - specifically the text. Content planning and writing is probably the biggest workload the client will have during the project - and it can really take some time.

big pretty pic

Step 5: Initial Design

Whilst all this is going on, the designer can be working on the base design - the homepage and main sub-level pages.

big pretty pic

Step 6: Client Feedback

When the base design is ready, the client needs to check that you are heading in the right direction and suggest adjustments to the design accordingly.

big pretty pic

Step 7: Design Rework

…which will probably involve going back and tweaking things…

big pretty pic

Step 8: Client Approval

…until everyone is happy.

This process of work-feedback-rework is repeated at various stages in the project. Besides preparing the content, this confirmation process is also one of the main responsibilities of the client.

big pretty pic

Step 9: Additional Page Design

Once the base design is agreed on, you can start working on the layout and design of each of the individual pages of the site.

big pretty pic

Step 10: Confirmation

And once again they are checked, reworked and then finally confirmed.

big pretty pic

Step 11: Build the HTML…

You can then begin to build the actual HTML pages…

big pretty pic

Step 12: …and the CSS

…and the CSS (I guess I could have put that all in one step, but I really like the little robot guy).

big pretty pic

Step 13: Present to Client

Feedback again. You and the client work together - work-feedback-rework - to polish and tweak things until you have a completed site.

big pretty pic

Step 14: Test

The final stage of production is the debug. The site needs to be tested across all platforms to iron out any technical problems, and checked thoroughly for content errors. Naturally, throughout the HTML & CSS development stage you should be checking cross-browser functionality anyway but you definitely need a big check at the end too - one that you actually set aside a decent amount of time for.

big pretty pic

Step 15: Launch

The picture says “The End” - but of course you don’t just grab the cheque and run for the door - you need to watch the site for at least around 10 days or so after launch in case of problems, and if necessary fix things.

Hope you enjoyed the pics! Visit our flickr page for larger versions.

Photos by Yongfook.

240 Comments

  1. As a wannabe designer I’ve got to say, this was really cool, very cute and a very nice way to present it to a client.

    Also, this is a very nice site you’ve got here. Came through flickr from my netvibes page which has a flickr module set to “colorful”.

    Posted by: Erik A. Drabløs on December 10th, 2005 at 12:21 am

  2. haha to cute!! LOVE IT!! So happy you included wireframe, then design, then html, in that order!! HEHE!

    Posted by: pixie on December 10th, 2005 at 3:08 am

  3. [...] PingMag es un magazine online japonés, me ha encantado la frescura con la que han ilustrado el proceso de desarrollo de una Web. ¡Simplemente genial!. [...]

    Posted by: Los textos de qweos.net » Blog Archive » El proceso de desarrollo de un sitio Web (según PingMag) on December 10th, 2005 at 5:38 am

  4. [...] at Ping Magazine [...]

    Posted by: The Soap Box » Blog Archive » Website development process on December 10th, 2005 at 6:09 am

  5. [...] This will make everyone that has to build or develope websites smile. PingMag Article. [...]

    Posted by: The 33King Network » Website Development Process on December 10th, 2005 at 7:18 am

  6. Funny but informative. Really digging the photos.

    BTW, there’s a link to Digg.com above, if you like the story give it a Digg. I did!

    Posted by: Richstyles on December 10th, 2005 at 7:52 am

  7. Oops, I meant click on my name…

    Posted by: Richstyles on December 10th, 2005 at 7:53 am

  8. Vraiment très sympa.

    Posted by: Joan on December 10th, 2005 at 8:23 am

  9. you have put a smile on my face :)
    thank you..!!

    Posted by: GRID8400 on December 10th, 2005 at 8:47 am

  10. [...] Leave it to a Japanese blog-zine to publish a nice high level overview of the web development process illustrated by little lego-like figures. [...]

    Posted by: fuzzz » Blog Archive » Web Dev basics as told by lego-like action figures on December 10th, 2005 at 12:05 pm

  11. [...] En realidad no es Proceso de Desarrollo para Dummies sino por dummies. Se trata de una simple y narración de cómo está compuesto el proceso de desarrollo de un sitio web, pero basada en fotografías de tres personajes representado al programador, al diseñador y al cliente. Claro, faltarían otros muñequitos para que esto estuviera completo, pero al menos es divertido. Mi preferido: el paso 12. Comentario irónico: faltó el muñequito experto en accesibilidad, porque todas las fotos del artículo tienen ALT con el mismo texto: big pretty pic. [...]

    Posted by: el factor humano » Archivo » Proceso de Desarrollo para Dummies on December 10th, 2005 at 12:31 pm

  12. [...] I love this! http://www.pingmag.jp/2005/12/09/the-website-development-process/ « Quick Tip: Using Photoshop to Produce a Color Palette   [...]

    Posted by: Take My Advice - I’m Not Using It! » The Website Development Process on December 10th, 2005 at 3:20 pm

  13. That’s awwwedorable! Informative and fun! Where are the little characters from? They look kinda like Lego… but not.

    Posted by: Torley Torgeson/Torley Wong on December 10th, 2005 at 5:57 pm

  14. It’s really very creative.. never been demonstrated better..
    Thanks Yongfook… :)

    Posted by: Rida Al Barazi on December 10th, 2005 at 6:39 pm

  15. wow..cute!

    Posted by: alay on December 10th, 2005 at 8:04 pm

  16. Very funny! But what happened to scope creep?

    Posted by: lk on December 10th, 2005 at 8:29 pm

  17. [...] This guide to building websites is lavishly illustrated with photographic tableaux of colorful plastic figurines acting out each step. Pictured here: storyboarding. Link [...]

    Posted by: Pandora’s jar of mixed nuts » Plastic figurines’ guide to building a website on December 10th, 2005 at 9:31 pm

  18. [...] The Website Development Process เป็นบทความสอนการพัฒนาเว็บ แต่นำเสนอโดยรูปแบบแปลกแหวกแนวชาวบ้าน เขาใช้ตุ๊กตาตุ๊กตุ่นพลาสติกตัวเล็กมาเป็นตัวละครครับ แล้วก็ถ่ายภาพมาโครกันเป็นฉากๆ ดูแล้วน่ารักดี บวกกับคำอธิบายที่ง่ายต่อการเข้าใจด้วย ลองเข้าไปอ่านดูนะครับ Tags: article, development, macro, present, web [...]

    Posted by: eb1og » Blog Archive » ตุ๊กตาสอนพัฒนาเว็บ on December 10th, 2005 at 10:16 pm

  19. [...] The Website Development Process is a cute way of guiding webmasters in developing websites. Cute, you asked? See it for yourself. [...]

    Posted by: hafizismail.com » Developing Website: The Process on December 10th, 2005 at 10:22 pm

  20. [...] Curiosa representacion explicada por muñecos de como hacer un sitio web.  « Las oficinas de Adobe     [...]

    Posted by: noticiasfrikis » Blog Archive » Como construir un sitio web on December 10th, 2005 at 11:08 pm

  21. Yongfook, you’ve been featured on BoingBoing.

    Torley: As mentioned in a comment on the original Flickr thread, they’re Medicom Kubrick figures.

    Posted by: codeman38 on December 11th, 2005 at 1:40 am

  22. [...] The Website Development Process in pictures [...]

    Posted by: Admit One / mental gymnasium » PingMag on December 11th, 2005 at 1:56 am

  23. [...] Being an internet developer myself, I found this very amusing and rather cool The Website Development Process [...]

    Posted by: OSBlues » Blog Archive » The website development process on December 11th, 2005 at 3:04 am

  24. [...] Great series of photos outlining how the process ’should’ work. In the past 7 or so years I’ve never seen one follow this process…whose fault is that? [...]

    Posted by: Michaewa » If only it worked this way… on December 11th, 2005 at 3:06 am

  25. As a programmer, I appreciate that the programmer guy gets to wear a helmet.

    Posted by: MrSquirrel on December 11th, 2005 at 3:09 am

  26. Why are there only three characters? Where’s the search engine optimization consultant (or team), doing the keyword research, usability studies, link building, etc?

    Yeah, I’m biased, but really I just want to see what an SEO would look like in a series like this.

    Posted by: Bob Gladstein on December 11th, 2005 at 3:13 am

  27. Yikes! You let the designer and programmer talk directly to the client?!? Crazy!!! You need a buffer so the client doesn’t have to see the designer cry when the designs are rejected (I’ve seen this many times), and be bored and confused by the tech persons’ nerd-speak ramblings. Although Project Managers spend 90% of their billable time playing solitare and shopping online, they are important.

    And where’s the usability engineer, the information architech or the writer?

    Posted by: Dan on December 11th, 2005 at 3:21 am

  28. Haha! Adorable & well put-together. Very nice. :)

    Posted by: Sanchez on December 11th, 2005 at 3:53 am

  29. Very nice & cute. My favorite pic is “Step 9: Additional Page Design”.

    Posted by: Gabor on December 11th, 2005 at 4:05 am

  30. Posted by: Digitaria Blog » Blog Archive » Plastic toys guide to web dev process on December 11th, 2005 at 4:14 am

  31. Now i get it!

    Posted by: Scott Offord on December 11th, 2005 at 4:45 am

  32. Web dev come alive

    PingMag uses plastic toys to show how web development process unfolds.

    Posted by: Linklog: Read My Antennæ on December 11th, 2005 at 4:49 am

  33. The designer’s skirt is so short, I can see her panties… slut.

    Posted by: dave on December 11th, 2005 at 5:36 am

  34. Well, this is a start. Many many steps and players are omitted, not the least of which is an analysis of the client’s needs and desires (called “requirements gathering”), BEFORE any sales pitch or design begins. This is absolutely key to the success of any project, IT or otherwise. You are nearly guaranteed to fail (time, scope, budget, or results quality) if these requirements are not well defined upfront.

    Posted by: Mary on December 11th, 2005 at 5:45 am

  35. [...] En PingMag nos amenizan el proceso de desarrollo básico de una web (considerando al diseñador, al programador y al cliente) a base de escenas realizadas con muñequitos tipo Lego. [...]

    Posted by: hugo.com.es // sólo otro blog infame » Hacer una web es cosa de niños on December 11th, 2005 at 5:46 am

  36. [...] Auf PingMag: The Website Development Process, dargestellt mit kleinen Figuren [...]

    Posted by: pixeldreamz::weblog » The website development process on December 11th, 2005 at 5:57 am

  37. [...] December 10th, 2005 in Links The Website Development Process, annotated with anime lego-people-like toys. [...]

    Posted by: warpedvisions.org » Blog Archive » Link: The Website Development Process on December 11th, 2005 at 6:01 am

  38. [...] PingMag - The Tokyo-based magazine about “Design and Making Things” » Archive » The Website Development Process - This is cute, and should be made into a book. I’d buy it. by Black Rim Glasses | posted in running Trackback URL | Comment RSS Feed Tag at del.icio.us | Incoming links [...]

    Posted by: blackrimglasses.com » PingMag - The Tokyo-based magazine about on December 11th, 2005 at 6:19 am

  39. [...] Denna underbara illustration förklarar på ett trevligt sätt hur det går till att producera en webbplats. Ligger rätt nära sättet jag jobbar på faktiskt. [Se här] [...]

    Posted by: Så funkar det! Att producera en webbplats » Nobel Prize Winner on December 11th, 2005 at 6:21 am

  40. Great m8 absolutly great stuff!

    Posted by: Marko on December 11th, 2005 at 6:34 am

  41. [...] В newsgroup по TYPO3 наткнулся на замечательное описание процесса разработки сайтов. Описание выполнено при пощи LEGO. Смотреть. [...]

    Posted by: Взгляд на жизнь » Веб-дизайн и LEGO on December 11th, 2005 at 6:41 am

  42. Like it ever happens like that.

    Posted by: Tim on December 11th, 2005 at 7:13 am

  43. Wow! Voll Fettisch.de!

    Posted by: karlo on December 11th, 2005 at 8:33 am

  44. [...] The Website Development Process A wireframe is a skeleton website, indicating all the navigation, function and content elements that will appear on the final website, but with no graphic design elements. It is used to iron out any problems or missing elements, and will act as the blueprint for the content, design and construction work that comes later. [...]

    Posted by: Voices from Catland » Archives » Web development process, in miniature on December 11th, 2005 at 9:16 am

  45. Very very funny and creative =D

    Posted by: Shawn on December 11th, 2005 at 9:23 am

  46. [...] The Website Development Process from PingMag [...]

    Posted by: soulsoup » » Plastic toy storyboarding: Website Development e-learning blog, elearning blog, knowledge management, e-learning strategy, learning experience design, usability on December 11th, 2005 at 12:41 pm

  47. [...] En Pingmag explican el proceso de desarrollo de un sitio web de manera sencilla y con muñequitos.Le pondria una imagen, pero el maldito copyright se interpuso Vía : El factor humano  [...]

    Posted by: backdraft » Archivo » El programador, el diseñador y el cliente on December 11th, 2005 at 1:21 pm

  48. Haha, very cute. Even someone with no interest in this subject would be compelled to read this article because of the pics.

    Posted by: Secure Steve on December 11th, 2005 at 2:06 pm

  49. For majority of our clients needing websites, it’s their first foray into taking their business online. The process of which can be overwhelming to say the least. Our goal is always to make them as comfortable as possible by explaing the details in simple, lay terms.

    Your use of humorius and interesting imagery helps make the process less tech, and more entertainment. The more fun the client has, the easier it is to build repoire and to communicate that a website design project can be fun and excting for both parties. And that’s good marketing.

    Posted by: Michael on December 11th, 2005 at 2:58 pm

  50. Posted by: Yongfook.com - the Japanese Food Blog, now with 42% more deathwish » Blog Archive » A quick meme on December 11th, 2005 at 3:40 pm

  51. [...] From PingMag, a Tokyo-based magazine about “Design and Making Things”, the cutest way to explain the web development process. (English/Japanese) [...]

    Posted by: siuyee.com » Blog Archive » PingMag on December 11th, 2005 at 3:45 pm

  52. To see more fun Lego stuff like this visit http://amigacam.net.tc

    Posted by: MiRRoRMaN on December 11th, 2005 at 7:00 pm

  53. Hey, I’m an amateur designer here. Really loved the down to earth explanation.

    Posted by: rolandog on December 11th, 2005 at 7:56 pm

  54. Thats so nice! Great job! :)

    Posted by: Gustavs on December 11th, 2005 at 10:26 pm

  55. [...] The Website Development Process at pingmag.jp describes an iterative product development life cycle through a presentation that is “fun to look at.” The presentation focuses on the interaction between a web design firm and a client, but the interaction can be generalized to cover all product development efforts. This is a useful resource for introducing the development process to clients. It can also serve as a guide for developers who might need a refresher on the basics. [...]

    Posted by: Development Process Illustrated on December 11th, 2005 at 10:32 pm

  56. Posted by: the accidental geek » The Website Development Process on December 11th, 2005 at 11:50 pm

  57. Good stuff.

    Posted by: cyber^2 on December 11th, 2005 at 11:51 pm

  58. Hi. I loved your simplistic way of presenting how websites are designed. Can I use this to illustrate it to my clients? I promise to include your website as a source…

    Posted by: Lewis on December 11th, 2005 at 11:58 pm

  59. [...] read more | digg story [...]

    Posted by: MiltyTech » Blog Archive » How to: Build a Webpage (cute!) on December 12th, 2005 at 12:00 am

  60. Adorable, and very generous of you to share it with the world x

    Posted by: bodnotbod on December 12th, 2005 at 12:22 am

  61. I liked this story a lot ;) And indeed I do resemble the robot guy a bit…

    Posted by: Andamios on December 12th, 2005 at 12:24 am

  62. [...] Schaut mal rein [...]

    Posted by: » Off Topic? The Website Development Process on December 12th, 2005 at 1:58 am

  63. [...] Step by step process on creating and designing a webpage with little dolls used as visual aids! Very cute (and accurate)! Click Here.. [...]

    Posted by: Blogging Around the Clock!! » Blog Archive » How to Build a Webpage (cute!!) :-) on December 12th, 2005 at 2:31 am

  64. [...] [...]

    Posted by: tech poetic » Blog Archive » How to Build a Website, the illustrated guide. on December 12th, 2005 at 3:22 am

  65. I adore the idea of using lego type toys to explain the web page building process…very cute.

    Posted by: shentall on December 12th, 2005 at 3:37 am

  66. Maybe you should make one that shows how the goverment works

    Posted by: donald on December 12th, 2005 at 3:44 am

  67. Posted by: The Web Development Process at Graphic Design For The Web - WEBD1015 on December 12th, 2005 at 3:48 am

  68. [...] Linky [...]

    Posted by: MATX COMPUTING » Blog Archive » Website Project development on December 12th, 2005 at 3:55 am

  69. [...] The photo was actually one in a whole series of photos I shot for a client presentation, detailing the website design / development process in a manner that was easily understandable and also fun to look at. This article takes you through that process, using the same photos. We hope you enjoy the pictures and if it also helps you to manage your workflow better if you are starting out as a web designer then that’s cool too [...]

    Posted by: Austoon Daily » The Website Development Process on December 12th, 2005 at 4:00 am

  70. that is so cute! i really like the robot picture when he starts talking in binary. lol

    Posted by: miscblogger on December 12th, 2005 at 4:01 am

  71. [...] Here is a short mockup of website design using lego characters. It’s hillarious and I’m considering how I could incorporate it into my frontpage class next spring . [...]

    Posted by: Notes from the terminal ward » Creating web pages on December 12th, 2005 at 4:07 am

  72. This was great! Ha ha, very creative, and very nicely put. Simple, to the point, I loved it. It was humorous and was a great teaching aid. A+

    Posted by: Nathan F. on December 12th, 2005 at 4:20 am

  73. [...] Web Dev Process [...]

    Posted by: Osmotic Web Construction » Blog Archive » Web Dev Process on December 12th, 2005 at 4:25 am

  74. Great piece of work here. I have one criticism and that is that the treatment of the programmer is a bit harsh. I’m alright with the robot-avatar but he seems depicted as being out to lunch (the upside down ABC sign in particular). Lots of programmers might fit this stereotype, but on my projects I try to bring programmers along for a lot of the project and engage them with the human and real world needs to be addressed. Their ideas and the quality of their work seems to go up when I do, and their perspective tends to build value rather than require correction. I’m sure that wasn’t the idea here, but I think some unfair stereotyping is going on.

    Posted by: Todd on December 12th, 2005 at 4:51 am

  75. [...] Wil je weten hoe het ontwerpproces voor een website zou moeten verlopen? Op zoek naar duidelijke uitleg? Kijk maar eens bij PingMag. [...]

    Posted by: Twan van Elk » Artikelen » Ontwerp website in beeld on December 12th, 2005 at 5:38 am

  76. Am I the only one that thinks it’s rather cool that they go Seiji Ozawa for a client?

    Posted by: Meg on December 12th, 2005 at 6:11 am

  77. [...] The Website Development Process This is a very funny take on designing a website that also happens to be really good advice. Oh yeah, it also happens to be told by lego characters in tableau. (tags: design web webdesign funny webdev business humor) [...]

    Posted by: GlitchNYC » Blog Archive » links for 2005-12-11 on December 12th, 2005 at 6:13 am

  78. Dont go crazy, this is meant to make it easy for the client to understand what it going on, theres no need to mention all these other people that will be hidden in this process.

    This is excellent work.

    Posted by: Sean Su on December 12th, 2005 at 6:25 am

  79. [...] Artikel pada PingMag ini, sebuah majalah di Tokyo yang membicarakan mengenai ”Mendisain dan Membuat Sesuatu” saya dapatkan dari Pak Andika di milis id-GMail. Artikel ini cukup lucu, proses pembuatan dan pengembangan situs web dijelaskan dalam bahasa yang santai, mudah dimengerti, juga disertai dengan gambar-gambar yang unik. Karena itu saya tuliskan ulang poin-poin utama artikel tersebut kedalam bahasa Indonesia. [...]

    Posted by: rasajeruk » Blog Archive » Proses Pembuatan dan Pengembangan Website on December 12th, 2005 at 6:28 am

  80. [...] A honlapk

    Posted by: Lanten Informatika on December 12th, 2005 at 7:04 am

  81. I think step #12 should include the programmer’s work on creating and implementing scripts for the website, especially on a big site with complicated scriptings. This is far too big to be ignored isn’t it?

    But I do like your way on simplifying this web developing process, it will be useful for both developers and clients, and thus I translated it into my language :D I hope you don’t mind, if you do then just say a word :D I of course put linkbacks and explanations.

    Posted by: azza on December 12th, 2005 at 7:14 am

  82. [...] richtig cool und auch f

    Posted by: blogotronic » learning by looking on December 12th, 2005 at 7:51 am

  83. hehe, that’s great :)))

    andras
    hungary

    Posted by: P. Tóth András on December 12th, 2005 at 7:55 am

  84. [...] Rewelacyjnie wytłumaczony proces tworzenia Przydać się może gdy klient niekumaty i niezorientowany w czym rzecz i na czym polegac ma webtworzenie. [...]

    Posted by: » Proces tworzenia łopatologicznie on December 12th, 2005 at 7:57 am

  85. [...] Une article amusant trouvé sur PingMag nous explique le processus de développement d’un site web. C’est ici. [...]

    Posted by: André-Francois Landry » Blog Archive » Le processus de développement web on December 12th, 2005 at 8:18 am

  86. Well, it’s really nice, but I’d like to see a next step called “maintaining the site up-to-date” too many projects die as they were born.

    Posted by: Bernardo on December 12th, 2005 at 8:24 am

  87. [...] This article on the web development process using Lego-like action figures for each functional role is just way too cute. My only complaint is that UX/IA is not represented. Not even as a frog. [...]

    Posted by: Small Multiples, a blog by Dmitry Nekrasovski » Blog Archive » The cutest process document ever on December 12th, 2005 at 10:12 am

  88. I want to show this to my newbie clients. A lego brick/claymation style video is currently being developed on similar theme. PS: What camera did you use?

    Posted by: Daniel on December 12th, 2005 at 10:21 am

  89. effin brilliant :)

    Posted by: forgetfoo on December 12th, 2005 at 11:59 am

  90. It’s so cute! Wonderful photos.

    Posted by: Alvin on December 12th, 2005 at 12:30 pm

  91. [...] K4 Rollout « Can’t Push a CLOB   [...]

    Posted by: cmurray » K4 Rollout on December 12th, 2005 at 12:36 pm

  92. [...] Si todo fuera tan f

    Posted by: Programador, Dise on December 12th, 2005 at 12:54 pm

  93. [...] update @ 12:22 fun links: cute illustration of the website development proccess [...]

    Posted by: blog.olya » coffee on December 12th, 2005 at 2:23 pm

  94. Haha to cute.. good creative job!

    Posted by: bonus on December 12th, 2005 at 2:49 pm

  95. Love this site! awesome!

    Posted by: raul on December 12th, 2005 at 3:54 pm

  96. Great article!

    Posted by: Ayalon on December 12th, 2005 at 4:53 pm

  97. Buena explicación,
    graciosa presentación,
    contigo hermano me río mogollón.

    Estoy inmerso en el aburrimiento
    por eso verso y no escarmiento

    Hijos de puta!!!!!!

    Posted by: Doto on December 12th, 2005 at 5:23 pm

  98. [...] The Website Development Process Alla RIKTIGA webdesignfirmor använder sig av specialtränade legofigurer för att utveckla sina projekt. [...]

    Posted by: Rymdimperiet » Blog Archive » links for 2005-12-12 on December 12th, 2005 at 6:23 pm

  99. Posted by: stef|lo|g » Blog Archive » The Website Development Process on December 12th, 2005 at 7:39 pm

  100. As you can clearly see, the customer is not involved in Steps 10 and 11. But there is more than 50% of time spent in these steps. Also technical problems always arise during the implementation. which have impact on the final product. The risk of failure is ridiculously high when you present your work to the customer in step 13. What if the customer is not as happy as on the picture? Then you have a serious problem! This kind of process was used 20 years ago already. And it has bee proven bad.

    Posted by: roadrunner on December 12th, 2005 at 9:44 pm

  101. This is very cute. I especially like the “test” picture.

    Posted by: Matt Whelan on December 12th, 2005 at 10:26 pm

  102. [...] PingMag - The Website Development Process - Some guy wrote about the web development process and illustrated it using Legos. This is awesome. [...]

    Posted by: Confessions of an Undercover Geek » What I am Reading - December 12, 2005 on December 12th, 2005 at 11:09 pm

  103. Love the characters, excellent way of getting through the processes involved, love the robot :)

    Posted by: Dave on December 12th, 2005 at 11:25 pm

  104. [...] Follow the link to read the story of The Website Development Process using the cutest little toy figures. I’m a bit upset the programmer is a robot since I’m a web developer at my job and I look more like the designer than the programmer, but whatevs. [...]

    Posted by: !!blue . weblog » Blog Archive » a web development story on December 12th, 2005 at 11:36 pm

  105. I love it when a topic can be informal, yet filled with the essentials. Reminds me of the Old “David and Goliath” show!

    Posted by: bigEz on December 13th, 2005 at 12:47 am

  106. cool :D

    Posted by: Fabio Peñafiel L. on December 13th, 2005 at 1:32 am

  107. Ace! That was a nice way of doing it (I’d never have thought that). Learning stuff about websites at the mo!

    Posted by: John on December 13th, 2005 at 1:46 am

  108. [...] PingMag - The Tokyo-based magazine about “Design and Making Things” » Archive » The Website Development Process [...]

    Posted by: Wheeee » Blog Archive » PingMag - The Tokyo-based magazine about on December 13th, 2005 at 1:47 am

  109. [...]Si alguna vez te has preguntado cuáles son los pasos a seguir para crear una website, estos simpáticos muñequitos te explicarán paso a paso este complejo proceso. Seguro que cuando hayas leído la historia tendrás mucho más claros los pasos a seguir.[...]

    Posted by: Razorbuzz on December 13th, 2005 at 2:05 am

  110. [...] Some people say they hve too much time on their hands, I say they’re damn near brillinat. Finally, someone made the website design process easy to understand. http://www.pingmag.jp/2005/12/09/the-website-development-process/ Posted by: Scott Abel on Dec 12, 05 | 11:25 am | Profile link [...]

    Posted by: The Content Wrangler on December 13th, 2005 at 2:27 am

  111. [...] How web development works. [...]

    Posted by: I Like Parentheses (so get used to ‘em) » This is surprisingly accurate on December 13th, 2005 at 3:47 am

  112. [...] Well, I’m about the thousandth person to link to this site, but it’s just so darn cute - and a good representation of the process - that I can’t help myself. Go check it out. PingMag - The Tokyo-based magazine about “Design and Making Things” » Archive » The Website Development Process [...]

    Posted by: 4M » Blog Archive » The website development process on December 13th, 2005 at 4:42 am

  113. Very good article. Illustrated brilliantly through the use of unique and colorful toys! Hats off to you guys :)

    Posted by: Greg on December 13th, 2005 at 4:50 am

  114. [...] El proceso de desarrollo de una p

    Posted by: otro blog m on December 13th, 2005 at 4:52 am

  115. [...] PingMag has writen a post that explains the website development process, illustrated with some cute toys. Educational and fun to read. Trackback · [...]

    Posted by: Corusca » Website Development Process Explained by Toys on December 13th, 2005 at 4:54 am

  116. [...] The Website Development Process via Snook. [...]

    Posted by: The Website Development Process on The uber geeks on December 13th, 2005 at 4:59 am

  117. Even Dilbert’s boss could understand this… I think.

    Posted by: Ricardo Stuven on December 13th, 2005 at 5:12 am

  118. афтар жжот

    Posted by: zumo on December 13th, 2005 at 6:03 am

  119. [...] Als u een idee wilt krijgen in welk vakgebied ik werk, en waar mijn studie zo’n beetje over gaat: The (web)design process. [...]

    Posted by: Altijd Fijn! » Blog Archive » The (web)design process on December 13th, 2005 at 6:20 am

  120. [...] I know you all have probably seen the sketch The Website Development Process over on PingMag. But if you have not, check it out, it is a funny, but in some respects true, take on the web design process. [...]

    Posted by: Flopi - just another web design blog » Blog Archive » Website Development Process Sketch on December 13th, 2005 at 6:50 am

  121. [...] I saw this on Memeorandum yesterday. [...]

    Posted by: Will’s Blog » Blog Archive » The Website Development Process on December 13th, 2005 at 7:11 am

  122. This is fun and to-the-point. You did a great job!

    Posted by: sundae on December 13th, 2005 at 8:12 am

  123. The client looks like Sephiroth.

    Posted by: Matt on December 13th, 2005 at 8:43 am

  124. [...] ok…this story HERE is all about the web development process. it is really well done with lego figures. One of the biggest points it points out is a term called “work-feedback-rework” This is pretty much self explanitory. you work…get feed back from the client and then rework untill perfection. but pretty much here are the steps… [...]

    Posted by: Danny Tech 3 » How to rebuild a website on December 13th, 2005 at 3:01 pm

  125. [...] Ecco una guida illustrata che spiega le varie fasi della nascita di un sito web. [...]

    Posted by: Totanus.net » Blog Archive » Come nasce un sito web on December 13th, 2005 at 4:50 pm

  126. [...] C’è chi ha fatto una classifica… [...]

    Posted by: Totanus.net » Blog Archive » Il meglio del web 2.0 per il 2005 on December 13th, 2005 at 4:54 pm

  127. Nice explanation about Web Development Process.
    Especially the “CHARACTERS”.

    Posted by: kari on December 13th, 2005 at 5:44 pm

  128. [...] A very amusing series of images illustrating the web dev process. The little robot bending the wire going 0101010101 is classic! [...]

    Posted by: Armageddon Zen » Blog Archive » The Development Process on December 13th, 2005 at 8:41 pm

  129. [...] PingMag - ウェブサイトが出来るまで Tuesday, 13 December 2005 20:56 | in Website PingMag - 東京発 「デザイン&ものづくり」 マガジン » Archive » ウェブサイトが出来るまで (英語版) 実はこの写真は、あるクライアントのプレゼン用に作ったんだけど、彼らがウェブサイトのデザイン過程を簡単に、しかも楽しく理解出来るように図解したものなんだ。今回、同じ写真を使って、「ウェブサイトが出来るまで」の過程を書いてみたいと思う。みんなに楽しんでもらえたらいいな。あと、ウェブ・デザイナーになりたい人の参考になれば嬉しい。:) [...]

    Posted by: MAET Blog » PingMag - ウェブサイトが出来るまで on December 13th, 2005 at 8:58 pm

  130. [...] PingMag - The Tokyo-based magazine about “Design and Making Things” � Archive � The Website Development Process [...]

    Posted by: The Daily Guzzter » Blog Archive » The Website Development Process on December 13th, 2005 at 9:52 pm

  131. maar wel geil zo’n desinger

    Posted by: Klaas on December 13th, 2005 at 10:24 pm

  132. [...] PingMag - The Tokyo-based magazine about “Design and Making Things” » Archive » The Website Development Process [...]

    Posted by: ben_lymer | » PingMag - The Website Dev. Process on December 13th, 2005 at 10:34 pm

  133. [...] Hoe wordt een website gemaakt? Hier de geweldige leken uitleg, met prachtige foto’s! Tags [...]

    Posted by: lydus, nogal wiedes » Een Website Ontwikkelen on December 14th, 2005 at 12:27 am

  134. Damn ive been involved in web design for the last six years i can honestly say my japanese schoolgirl fetish has never got so bad as to make me feel i should (as a designer) dress as one but if needs must.

    great article.

    Posted by: adrian on December 14th, 2005 at 1:28 am

  135. [...] Via Retecool: Op Retecool zag ik vandaag een link naar de website van PingMag, een magazine uit Tokyo over “Design en Making Things”. Daar staat een leuk artikel waarin beschreven wordt (d.m.v. tekst en Playmobil?) hoe een website tot stand komt. December 13th 2005 Posted to Algemeen [...]

    Posted by: ITrade | grafisch design en hosting » Stappenplan voor het ontwerpen van een website on December 14th, 2005 at 2:58 am

  136. Best. Process. Description. Ever. Period.

    Posted by: R on December 14th, 2005 at 3:21 am

  137. [...] [...]

    Posted by: Interactive Daily » Blog Archive » Website Development - As Demonstrated by Anime Characters on December 14th, 2005 at 3:46 am

  138. Yah, that’s about how it actually goes down.

    Are those Kid Robot toys? The client looks like he’s from of the Kubric sets.
    http://www.kidrobot.com/shop.php?sku=9326&Category=Kubricks%20%26%20Be%40rbricks

    Posted by: Ales on December 14th, 2005 at 3:47 am

  139. Wonderful job, congratulations.

    As an Information Architect (a guy who works drawing sitemaps and wireframes), I would only add a user testing phase, to test your design with users before going into production.

    Great job anyway, the pivtures are very cute.

    Posted by: mantruc on December 14th, 2005 at 4:22 am

  140. [...] This is very funny, and cute… if they had only included some sort of user testing or research, it would be purrfect! [...]

    Posted by: mantruc.com : Random Ideas » Blog Archive » The Website Development Process, by PingMagazine on December 14th, 2005 at 4:25 am

  141. [...] [...]

    Posted by: slackah » Blog Archive » How To Make a Website on December 14th, 2005 at 5:44 am

  142. Very good! I agree with one of the earlier comments -this shoujd be made into a book -i’d buy it and gift it to other people i know working in web development.

    There could be so many illustrated scenarios that we could all relate too.

    Posted by: 21st century girl on December 14th, 2005 at 6:10 am

  143. [...] In manchen Agenturen werden Websites so gebaut, in anderen so. 14. Dezember 2005 | In Netzkultur | [...]

    Posted by: Multiple Extase » Website Development Process on December 14th, 2005 at 7:27 am

  144. [...] [...]

    Posted by: The Website Development Process at The Phoenix Blog on December 14th, 2005 at 9:14 am

  145. Very creatively illutrsted.

    Posted by: Kala on December 14th, 2005 at 1:29 pm

  146. you want a book? good to hear ;-)
    i had some ideas about that already……

    Posted by: uleshka on December 14th, 2005 at 2:42 pm

  147. [...] PingMag features a cute comic of the website development process using Japanese lego-like figures. [...]

    Posted by: theory.isthereason » Today’s Links: Work Smart + Play Hard on December 14th, 2005 at 2:49 pm

  148. thanks - it’s too funny. Only the project-manager is missing - who makes enough trouble himself .-)

    Posted by: Projektmanagement von Web Projekten on December 14th, 2005 at 5:35 pm

  149. Very cute. I really loved the way you used the bulb to represent the website and the design process in which the bulb improved from the initial wireframe to the final testing by switching it on was wonderfully shown.
    Great improvisation and visualisation.

    • Shiva

    Posted by: Shiva on December 14th, 2005 at 6:05 pm

  150. And thats the cutest designer i have ever seen too. :)

    Posted by: Shiva on December 14th, 2005 at 6:09 pm

  151. Great!

    Posted by: Álex on December 14th, 2005 at 6:51 pm

  152. [...] Les non-initiés, comme ma personne, ont bien souvent du mal à maintenir une simple page html. Voilà un guide-photo qui devrait les aider.(12/20) [...]

    Posted by: I like your style » Blog Archive » The Hip Gahn on December 14th, 2005 at 7:10 pm

  153. Sometimes, putting together a presentation like this can really clear your thinking and get your creative juices flowing. Then, sharing it can bring extra value to community. THANKS!

    Posted by: Brian on December 14th, 2005 at 7:25 pm

  154. [...] Superklasse! Die Entstehung einer Webseite ganz einfach in Bildern erkl

    Posted by: …:::more than just a space:::… » Webseitenentwicklung on December 14th, 2005 at 11:53 pm

  155. [...] The Website Development Process (photo above) [...]

    Posted by: Poison Cloud at randomwire.com on December 15th, 2005 at 12:07 am

  156. [...] f

    Posted by: rootgrrls.de | inter_net_working business on December 15th, 2005 at 12:44 am

  157. [...] Flickr wird doch völlig überschätzt. A while ago I put this photo on my flickr page and it was chosen to go on the official flickr blog as the photo of that day (September 23rd). To date it has been viewed over 2000 times. Anm: Heute 6408 Views [...]

    Posted by: Geneva Information » Blog Archive » Flickr wird doch völlig überschätzt. on December 15th, 2005 at 12:50 am

  158. [...] Im PingMag werden anhand eines kleinen Comics mit Spielzeugfiguren die Entwicklungsphasen einer Website erläutert. Eines der Bilder wurde im September sogar zum Bild des Tages im Flickr Blog ernannt. [...]

    Posted by: christoph-hoerl.de | Weblog und Homepage von Christoph Hörl | Website-Entwicklung als Comic on December 15th, 2005 at 2:00 am

  159. [...] [...]

    Posted by: studieren-macht-sexy.de » Blog Archive » on December 15th, 2005 at 2:36 am

  160. [...] Un sito che consiglio a tutti quelli che lavorano nel settore e che da anni cercano di spiegare alle persone che tipo di lavoro fanno. Stupendo! [...]

    Posted by: Medianima Blog » Blog Archive » Site of the day: The Website Development Process on December 15th, 2005 at 3:33 am

  161. Bad.

    But is true. Incomplete teams: only designers do something. Developers are robots: just do it.

    Seems like the bot’s job isn’t thinking, but only ctrl c, ctrl v and create some code. What’s the difference between #09CDAF and #09BDAF ? WOW designers take care a lot for it.

    That team is a bad team.

    Very bad.

    Posted by: Ricardo on December 15th, 2005 at 8:36 am

  162. [...] 15 December 2005 What I do Obviously, I’m the robot!   http://www.pingmag.jp/2005/12/09/the-website-development-process/  Thx Craig for the link! posted on 12/15/2005 13:19:16 (AUS Eastern Daylight Time, UTC+11:00)      Comments [0] Trackback [...]

    Posted by: Ronald Widha - What I do on December 15th, 2005 at 11:19 am

  163. Hi:

    It’s Jerry Time (www.itsjerrytime.com) is one of the hottest new entertainment blogs this holiday season!

    Boing Boing says:

    It’s Jerry Time! is a wonderful video diary of the life of a sad sack named Jerry. The videos are a mash-up of photo collage and Terry Gilliam-esque animation. Some other blog…said that this reminded him of Harvey Pekar and I agree.

    Please see if you review the site and/or post a link to entertain your readers.

    Thanks,

    Jerry

    Posted by: jerry on December 15th, 2005 at 11:37 am

  164. [...] eine sch

    Posted by: q-pain anecdotes on q-pain.de » programmer, designer, client on December 15th, 2005 at 4:07 pm

  165. [...] El proceso básico para crear un website, y la relación entre el programador, diseñador y el cliente, explicados de una manera divertida y simple con monitos tipo Lego o Playmobil… [...]

    Posted by: Radiokrimen Blog » How to make a web site… on December 15th, 2005 at 5:55 pm

  166. [...] Harus diketahui oleh web designer dan // Used for showing and hiding user information in the comment form function ShowUtils() { document.getElementById(”authorinfo”).style.display = “”; document.getElementById(”showinfo”).style.display = “none”; document.getElementById(”hideinfo”).style.display = “”; } function HideUtils() { document.getElementById(”authorinfo”).style.display = “none”; document.getElementById(”showinfo”).style.display = “”; document.getElementById(”hideinfo”).style.display = “none”; } [...]

    Posted by: The Website Development Process at cinila’s journal on December 15th, 2005 at 7:06 pm

  167. [...] Wunderbare Bildergeschichte. D

    Posted by: TXT-JobBlog on December 15th, 2005 at 11:31 pm

  168. That’s a wonderful story ;-)

    Posted by: Michael H. Ragwitz on December 16th, 2005 at 12:55 am

  169. Great and funny work ;-)

    Posted by: stockfish on December 16th, 2005 at 1:58 am

  170. [...] Great little presentation about the process of developing websites from pingmag. You can be picky about some of the details if you want (which isn’t surprising since there are so many different development methodologies to choose from – UCD, Agile, XP, Waterfall etc). It’s so refreshing, though, to see something which is visually rich and captures the essence of human interaction. There’s also a lot of humour there too, which makes it even more engaging. These are the communication techniques that we need to be using with clients, rather than bullet lists and flowcharts. [...]

    Posted by: sensorydrive » Communicating with humans on December 16th, 2005 at 2:02 am

  171. [...] Ran across this on The Website Development Process. Clever stuff. « CHS Circus logos   [...]

    Posted by: sparkrobot » The Website Development Process on December 16th, 2005 at 4:09 am

  172. You forgot one photo at the end - where the client buys you a nice dinner for all your hard work. ;)

    Posted by: Anthony on December 16th, 2005 at 5:03 am

  173. [...] Sergio nos acerca un link a PingMag, donde explican los pasos requeridos para un correcto diseño e implementación de un proyecto web. Lo interesante de este caso, es que, dichos pasos están representados con personajes de juguete, lo que lo hace muy pedagógico y entretenido. [...]

    Posted by: Anotherblog » Proceso de desarrollo de un Website on December 16th, 2005 at 5:47 am

  174. [...] übertragen) Auto-BR (Zeilenumbrüche werden <br>-Tags)INFOÜber michLETZTE BEITRÄGEWebdesign als Fotogesc…Lernprozess beim Bloggene-learning in der Beru…Präsentationen zum Hin…Transkulturell pflegen…KATEGORIEN lernenVermischtesWebdesignGALERIENaktuell   [...]

    Posted by: simplekaywa - Webdesign als Fotogeschichte on December 16th, 2005 at 6:20 am

  175. [...] Eine schöne Bildergeschichte mit Lego-Figuren illustriert die Entstehung einer Website >>>> http://www.pingmag.jp/2005/12/09…; [...]

    Posted by: Wie entsteht eine Website? » Netzgurke| Nurdan Ergün on December 16th, 2005 at 6:26 pm

  176. [...]   从ID公社上看到这个网站,日本pingmag的一篇题为“The Website Development Process”文章。用生动的漫画图示,演示了web网站设计开发的整个过程。图片很美,值得一看。   这段计划学习w3c的网站重构,DIV+CSS的标准网站开发模式。习惯了Dreamweaver的table布局网页,现在才开始学习新的标准,要加油了。   另外,postshow发起“年度汉字”评选活动,号召大家选出认为可以反映今年社会形态的汉字,并写出理由。我感觉“博”字不错。 [...]

    Posted by: 17Vogue | 致力于珠宝品牌网络营销研究 » Blog Archive » 漫画:web网站开发流程 on December 17th, 2005 at 12:06 am

  177. [...] Daug žmonių norėtų sužinoti nuo ko pradėti puslapio kūrimą. Aš nekalbu apie mokymąsi – viską jau turėtum kaip ir mokėti. Čia kalbam apie puslapio kūrimą su idėjų atradimu, pritaikymu ir pateikimu. Taigi PingMag pristato – tinklapio kūrimo procesas (lego version). [...]

    Posted by: kartais piktas, kartais BLOGas… » Tinklapio kūrimo procesas. on December 17th, 2005 at 5:14 am

  178. iskam da imam koz mu na sekundata

    Posted by: rosen on December 17th, 2005 at 6:36 pm

  179. it’s great, really great!!

    Posted by: mostaqeu on December 17th, 2005 at 9:02 pm

  180. it’s really great….

    Posted by: mostaque on December 17th, 2005 at 9:03 pm

  181. hey! it’s simply great, an excellent and graphical article about this headache called Web Develeopment Process…

    Posted by: Aoyama on December 18th, 2005 at 4:19 am

  182. [...] Link [...]

    Posted by: Earth: Mostly Harmless :: Plastic figurines’ guide to building a website :: December :: 2005 on December 18th, 2005 at 4:52 am

  183. [...] - Designing Processnetzlernen.chnotizen zum cyber-learning18/12 Designing Process Kategorie: Online-Tipp    Von miriam um 15:37Web Design-Prozess Eine charmante Darstellung desAuto-BR (Zeilenumbrüche werden <br>-Tags) NEUESTER MOBLOG 2005-12-12 21:57:41LETZTE BEITRÄGEDesigning ProcessRundum 5 NachbierWeblog-Forum für KinderPodcast WikiParadigmenwechsel KATEGORIEN AlleArbeiten mitdem InternetBlogginge-Learninge-    [...]

    Posted by: netzlernen.ch - Designing Process on December 18th, 2005 at 11:47 pm

  184. [...] This guide to building websites is lavishly illustrated with photographic tableaux of colorful plastic figurines acting out each step.Link No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> [...]

    Posted by: Th!nk Blog on December 19th, 2005 at 12:43 am

  185. Very good concept and excellent explaination technique. A worth treasuring site. Thanks for sharing.

    Posted by: sonal nigam on December 19th, 2005 at 4:51 am

  186. hehe very cute :)

    Posted by: Anonymous on December 19th, 2005 at 7:47 am

  187. Muy bueno, espectacular. Muchisimas gracias, un saludo desde argentina.

    Posted by: Leo on December 19th, 2005 at 11:21 pm

  188. How cute is this!? Thanx. Make one about a movie or something. Like Star Wars! :) Hehe.

    Posted by: ClearBlueTears on December 20th, 2005 at 1:30 am

  189. [...] Es gibt verschiedenste Arten, etwas zu erklären. In Langweilig, in Unverständlich, in Nerdig(für 99% der Bevölkerung kein Unterschied zu Unverständlich) , oder mit niedlichen kleinen Plastikfigürchen. [...]

    Posted by: Einsichten » Website-Bau in niedlich on December 20th, 2005 at 5:51 am

  190. [...] PingMag - The Tokyo-based magazine about “Design and Making Things” » Archive » The Website Development Process Published in: Whatever | on December 19th, 2005 | [...]

    Posted by: Televisionmind » Blog Archive » PingMag - The Tokyo-based magazine about on December 20th, 2005 at 7:43 am

  191. Heel erg leuk!

    Posted by: Xelca on December 20th, 2005 at 9:26 pm

  192. [...] PingMag - The Tokyo-based magazine about “Design and Making Things” » Archive » The Website Development Process (tags: fun development web) [...]

    Posted by: Il Blog di Mauro Sagratella » links for 2005-12-13 on December 20th, 2005 at 11:27 pm

  193. [...] El mundo de la consultoría informática, es un entorno muy peculiar, que se parece poco a otros tipos de trabajos. Una ilustración de porque digo esto la teneis en esta historia. Fijaros en la cara de mala leche del cliente… [...]

    Posted by: Gueblog » Blog Archive » PingMag - The Tokyo-based magazine about on December 20th, 2005 at 11:44 pm

  194. we can use imagenes in blog?

    Posted by: richard on December 20th, 2005 at 11:57 pm

  195. Sehr hübsch ist das im PingMag illustriert. Ich frage mich nur – wo hat er die Texterin gelassen auf seinen Fotos gelassen ?!

    Posted by: bepixeld on December 21st, 2005 at 12:10 am

  196. [...] Es que ya lo que me faltaba a mi: el proceso de creación de una web para un cliente, pero explicado con figuritas de Lego! [...]

    Posted by: Ondas, cables, luces, cacharritos y cachivaches » Creacion de webs con Lego! on December 21st, 2005 at 5:13 am

  197. You Rock !

    Posted by: markus on December 21st, 2005 at 7:16 am

  198. [...] the-website-development-process [...]

    Posted by: Markus Orths´Blog » Blog Archive » Wie eine Website entsteht… on December 21st, 2005 at 7:19 am

  199. I love the little designer watching carefully the programmer while he is working. Very well done!

    Posted by: Pati @-;-- on December 21st, 2005 at 7:42 am

  200. [...] Check it out. The photos are fun, and the article is very enlightening. [...]

    Posted by: the irene | press » design and.. …make things. on December 21st, 2005 at 7:46 am

  201. [...] The website development proccess [...]

    Posted by: Abycom Weblog » ¿Cómo se diseña un sitio Web? on December 21st, 2005 at 8:54 am

  202. [...] Versión original (inglés) Versión traducida [...]

    Posted by: cabrera weblog » Blog Archive » Como se desarrolla un Sitio Web. on December 21st, 2005 at 11:11 am

  203. fome la wea

    Posted by: yo on December 21st, 2005 at 1:16 pm

  204. [...] La fotonovela, que debes de ver si eres programador! [...]

    Posted by: Diego Aranda » Blog Archive » Fotonovela on December 21st, 2005 at 2:16 pm

  205. Very Nice:)
    Learning and Fun, I love that,
    Abdul Qaiyoom..

    Posted by: Abdul Qaiyoom on December 21st, 2005 at 5:53 pm

  206. Posted by: stef|lo|g » Blog Archive » infodesign on December 21st, 2005 at 6:52 pm

  207. [...] Brilliant! This is the easiest way to explain how we do what we do to someone with no clue. [...]

    Posted by: A group of Web AddiCT(s); » Blog Archive » The Website Development Process Explained on December 21st, 2005 at 8:40 pm

  208. [...] PingMag - The Tokyo-based magazine about “Design and Making Things” » Archive » The Website Development Process What do you think? [...]

    Posted by: Moody Meow » Blog Archive » Hey Crackhead, and other stories on December 21st, 2005 at 9:17 pm

  209. WE ARE NOT ROBOTS

    Posted by: A Programer.... on December 22nd, 2005 at 5:10 am

  210. [...] El proceso de crear una web desde otro punto de vista (0 clics). (Vía Rudeworks (235 clics)) [...]

    Posted by: Criterion :: Diseño gráfico y editorial, recursos y enlaces de utilidad :: on December 22nd, 2005 at 5:48 am

  211. it’s very nice and right way develop ;)

    Posted by: Lynx on December 23rd, 2005 at 7:21 am

  212. ehhhh.. nice, but if every client-project will be so kind .. :-/
    thnx! %)

    Posted by: IM on December 23rd, 2005 at 7:23 am

  213. Absolutely fabulous. This should be required reading for all new documentation dept. managers, and their clients.

    Posted by: Surus on December 24th, 2005 at 9:29 am

  214. A pesar de los personajes antologicamente estereotipados, creo que la historia no se aleja mucho de la realidad, bueno y los personajes tampoco. Un genio fascista con buen gusto podria hacer todo el trabajo solo, se ahorraría mucha plata!!

    Posted by: Andres on December 24th, 2005 at 10:14 am

  215. [...] Paavani forwarded me this link by the PingMag team about their post on the Website Development Process. [...]

    Posted by: Ashish Kumar - Tekriti Software » Blog Archive » Funny post on the Website Development Process on December 26th, 2005 at 8:16 pm

  216. Great info! Maybe it’s offtopic, but i just wanted to say, that O, it’s really interesting to read
    everything this with comments… You,professionals, discuss here a lot of interesting things on different news =). Thanks =)

    Posted by: Kate on December 26th, 2005 at 9:51 pm

  217. swinger,capacitive,idem:scissors eloquent .

    Posted by: download texas hold um on December 26th, 2005 at 11:55 pm

  218. [...] En diseñorama (un excelente web Log acerca de diseño que deberían checar) encontré este articulo que me hizo pensar bastante, sobretodo por el intento de mecanizar el proceso de diseño, algo que por mucho tiempo las escuelas, teóricos, diseñadores y demás bicharracos han tratado de lograr, como el estudioso del diseño que me considero, después de haber leído bastante sobre el tema este articulo sintetiza y prioriza bastante bien, o por lo menos genera una alternativa a como debería estructurarse el proceso de diseñar, por favor léanlo y díganme que les parece, si esto les parece lectura muy densa o compleja, pueden ver otra alternativa, pero representada con personajes de lego. Link: El síndrome de la página en blanco. Via: Diseñorama [...]

    Posted by: Armando Torrealba » El sindrome de la página en blanco. on December 27th, 2005 at 5:57 am

  219. [...] Website Entwicklungsprozess mit Lego Figuren [...]

    Posted by: Der Website Entwicklungsprozess » Webdesignblog on December 27th, 2005 at 9:27 pm

  220. [...] The Website Development Process (PingMag). With pictures! Perfect for someone with my attention span. [...]

    Posted by: thatonegirl.net » blog. on December 28th, 2005 at 12:49 am

  221. Love the idea…and the pictures are AWESOME. thanks!

    Posted by: NeillHARMER on December 28th, 2005 at 5:30 am

  222. [...] Ecco qui per voi una graziosa storiellina che simula un po’ quanto accennato sopra… [...]

    Posted by: tommax1083’s blog » Working in progress… on December 28th, 2005 at 5:55 am

  223. [...] The Web Development Process can be a little confusing, if you dont know what you are really doing. For more information about the Web Development Process .. read more December 27th 2005 Posted to Web Development [...]

    Posted by: Aldo Lugo » The Website Development Process on December 28th, 2005 at 10:18 am

  224. I like picture #12.

    It shows the woman designer standing behind the robot programmer and she’s talking to him and he’s thinking aloud in 1’s and 0’s instead of words.

    Very Funny!!!

    Posted by: Freddo on December 29th, 2005 at 9:25 am

  225. I won’t comment about the process, because everyone and every Firm have different ways to work.

    I’m here ’cause the dedication, enthusiasm, creativity and heavy work is found here in this section. iT means you have an excellent comunication and professionalysm in your ambience. I was smiling enjoying this picture series. You are a good example to follow.

    To everyone reading this: “follow these steps witches!!! “

    Thanks for this space. | Yorch, México.

    Posted by: Yorch on December 29th, 2005 at 10:41 am

  226. yardsticks triggered hashed Londonizations cannel calfskin,hammering!smuggling Fahrenheit

    Posted by: franklin mint excalibur gold backgamon pieces on December 29th, 2005 at 3:21 pm

  227. superb

    Posted by: sri kalyan on December 29th, 2005 at 11:31 pm

  228. germane responds moves rebuke sweep:.

    Posted by: hot boys on December 30th, 2005 at 12:09 pm

  229. [...] Esto lo he leido en Alquimistas del Diseño. Es la evolucion de un diseño web contado con muñequitos. Solo se lo puede achacar a los japos estas historias. [...]

    Posted by: treceporciento.com Apuntes UAX y tonterias by TitoFer » Diseño en partes on December 30th, 2005 at 1:00 pm

  230. Molto carino!

    Posted by: MazDa on December 30th, 2005 at 8:42 pm

  231. [...] Damit man seinen Freunden, Bekannten oder Verwandten nicht immer erzählen muss, was man die ganze Nacht vor dem Rechner macht, gibt es diesen “Comic” zur Entstehenung einer Website. Mehr dazu: development process, webdesign [...]

    Posted by: NEXTNEXUS » Entwicklung einer Website on December 30th, 2005 at 11:08 pm

  232. [...] Das Blog ist lesenswert und sehr kreativ in seiner Art, vaD der Beitrag, wie man eine Webseite plant und erstellt :-)) [...]

    Posted by: Basic Thinking Blog » PingMag - interessantes Blog on December 30th, 2005 at 11:42 pm

  233. Well, really impressive.

    Posted by: Bellois(pl) on December 31st, 2005 at 6:13 am

  234. [...] Auf eine sehr anschauliche und interessante Weise illustriert diese Bildergeschichte den Prozess der Entstehung einer Website: The Website Development Process. Absolut klasse und witzig gemacht. [...]

    Posted by: DESIGN82 INTERACTIVE » Wie entsteht eine Website… on January 1st, 2006 at 6:01 pm

  235. [...] Ever wondered about how to build a shiny looking website from scratch? The dollies from Pingmag are here to help. [...]

    Posted by: deconstruct.me.uk - purrplicity 2006 on January 2nd, 2006 at 10:33 pm

  236. Not only a great story line, but also a very nicely shot photo series. Well done.

    Posted by: Bjorn Ruwald on January 2nd, 2006 at 11:24 pm

  237. [...] Ein wenig Nachhilfe in Methodik! Der “Website Development Process” wie wir ihn täglich leben. [...]

    Posted by: Intersmile :: Website Development Process :: January :: 2006 on January 3rd, 2006 at 2:26 am

  238. [...] The Website Development Process - visto no Cleiton.net. Que por sua vez foi visto algum site como CSS Beauty, que eu não lembro qual! [...]

    Posted by: Pendurando Links - Tableless on January 3rd, 2006 at 6:43 am

  239. [...] How to develop a website. [...]

    Posted by: More on finding mp3s at 1204 dot net on January 3rd, 2006 at 1:42 pm

  240. [...] Coming straight from Japan, this is an interesting analysis of the development process for creating a web site. The process I go through for kylelibra.com isn’t quite like this, but it is close. [...]

    Posted by: Kyle Libra’s kylelibra.com » Blog Archive » Website Developmental Process on January 4th, 2006 at 6:11 am

  • Share and Enjoy:
  • del.icio.us
  • digg
  • Fark
  • NewsVine
  • RawSugar
  • Reddit
  • YahooMyWeb
Previously on PingMag