Modular Design and what it means for our clients

Modular Design and what it means for our clients - Laura Elizabeth

  • A set of components we build up to something like a pattern library
  • move away from the classic linear process
    • PSD
    • sign off
    • build
    • deploy
  • Pattern Lab & Front-end Style Guides

what benefits can module design bring to our clients?

  • "As we designers we craft experiences for users, but we often overlook the need to design the experience that clients have during the web design process"
  • for a client
    • why?
    • how to sell it to them
    • deliverables
    • what's the business case?
    • assumes a working knowledge
    • to most clients, a website is just series of static pages, these are the deliverables they see

Educating the client

  • bring it up as early as possible
  • useless if it's made once and never looked at again
  • "applying the principles of modular design will save you time money and stress further down the line as your business grows"
  • consider it an investment
  • have a better working relationship
  • website can get updated faster
  • ability to update the website themselves better
  • working collaboratively, needs to start with the language, not the interface
    • one of the biggest issues is a lack of shared vocabulary
    • try explaining it like LEGO
    • involve the clients in the naming process of your modules, let them pick things that make sense for them


  • the practice of modular design isn't as simple and linear as it sounds at the start
  • three key phase

initial styling

  • traditionally a mood board with swatches, samples etc
  • the web very rarely uses this step
  • style tiles, creating a nice visualisation of what the feel of the site is
    • clients like the multiple options and mix/match
    • it's a deliverable
    • they feel okay tearing apart something that doesn't look like a finished product
  • get the client really involved


  • think about the different modules that you might be using
  • getting your ides down into something you can work with
  • there's nothing wrong with using tools like Photoshop, or even sketching or straight to browser
  • design a single page, the shell of the page gives context to the smaller modules
    • having the structure of the page can help you deconstruct it into modules
    • never show this page to the client, keep it internal, just for reference


  • work closely with design and development disciplines
  • the more the client is involved in this, the better
  • meetings need to be
    • more in depth
    • more practical
    • not necessarily more frequent
  • common goal
    • per section
    • per template
    • per user flow
    • make the goal well known
  • encourages more meaningful feedback
  • designing patterns side-by-side with page templates, then show both to the client

Key take aways

  • think about the client's perspective
  • show them the benefits relevant to them
  • create a shared vocabulary
  • provide a concrete process
  • design side-by-side