The Web Design Process Periodic Table [Infographic]

How many times have you had to placate your clients because they want to see their website live, and they want it NOW? Unfortunately too many of us have had this experience and frankly it’s usually because clients have no understanding of what happens behind the scenes when we develop websites.

And why should they? They are far too busy running their new company, and dynamic CEOs are used to clicking their fingers and getting a new brochure or billboard design within a week or two, or a brand new marketing campaign launched within a month. So they fail to see why they have to wait so long for their new website.

Luckily help is at hand. The folks at New Design Group produced a web design process infographic that you can share with your client to show them exactly what you need to do to produce a website that meets their needs on every front.

The Web Design Process Periodic Table

Click on the image to view the full-size version.

The Web Design Process Periodic Table Infographic

Using the Infographic

Use the infographic to explain the hoops you need to go through to clarify the project brief and plan the website structure and content navigation – and that’s before a visual mock-up can even be contemplated.

Once the client has agreed on the best mock-up and starts to get tetchy if the live website doesn’t swiftly follow, use the infographic to explain why the subsequent stages all take time:

  • The complexities of the design stage – how the artwork, typography and even the call to action buttons all have to be carefully chosen to fit in with the desired look.
  • The nitty-gritty of the development stage – getting the content right and implementing functionalities requested such as online forms and shopping carts, as well as making the website secure.
  • The importance of the launch stage – testing and quality assurance tasks to avoid the embarrassment of going live with a sub-standard website.

And once the client is delighted with their new website, the work of the infographic is not over – use it to explain the importance of ongoing maintenance to make updates, and to continually optimise the website to result in more conversions and more sales.

A client who fully understands what is going on behind the scenes is indeed a happier client.


  • cas

    I think there is a mistake in Planning stage where “PL – Page Layout” on the table block is represent by “La” which doesn’t make much sense when you look at other blocks and their explanation.

  • I can and do appreciate the effort, and thinking that went into this asset.

    Most of it is spot on.

    However, this appeals to designers not customers.

    If you need this much explanation something is broken in your design process.

    Good design is based on mutual taste level alignment and trust.

    If you need this type of infographic to explain yourself you’re working with the wrong types of customers (undervaluing your contribution) and are wasting time.

    Design for business is simple.

    How does design translate into economic value for customers?

    Answer that question, don’t waste your time on over-explaining processes customers will fail to grasp.

    Customers don’t want to know the intricacies of “how the car works” – they just wanna drive.

    Design should shoulder that elegance not hinder it.

    This will simply confuse customers.

  • Alex

    Cas, LA refers to Layout (page layout – PL) I think it’s a small typo, we corrected it in the original source article. Thanks for spotting it :)

  • Alex

    Jon, glad you appreciate this resource as a Designer!

    I agree that not all customers need to be involved so deep into the process, but there are some (especially small businesses who invest in their first website) who really want to know what every step involves – that’s when this might come in handy.

    Transparency is a good thing, hope you can get behind that :)

  • JesseWallace

    This is very cool! Is there a printable, hi-res PDF anywhere?

  • Alex
  • Sarah Mitchell

    I love this! As far as infographics go this is pretty spot on there is actually just enough information for both internal processes to be followed and for clients to understand the effort that is involved in making an outstanding website. Great work guys!

    As a project manager/producer making websites, my only suggestion would be To perhaps change make Page layout a product of the Wireframes and not a discrete point.

    Would SEO optimisation fall under Content or Site performance?

  • Alex

    Hey Sarah, thanks for the kind words! For us SEO would fall under Content, Site performance and Development :)

  • Very cool post. I think that having this periodic table is very organized and can be beneficial for both you and your clients.

  • JeTDoG

    Another discrepancy — the “Launch” column has PrL, where the sidebar for Launch refers to LS.