Faster & Better with Modular Design

The world around us is ever-changing and, as it ever changes, so are how we interact and exist in the world. Why should it be, then, that so many of our daily rituals and routines seem to be unflinching and unchanging as everything else moves around us? The answer is – they shouldn’t.

Photoshop and full-blown static website mockups have been a staple of website design for ages, but it’s time to shake loose from those shackles and embrace new, more efficient ways of providing our clients with visuals before we step into the browser.

We are now designing for a truly liquid web: an internet that alters its state to fit every differently shaped and sized container. How, then, can we expect a single graphical representation to capture all the ways a visitor might experience a website? The answer is, we can’t.

To this end, we’re going to spend some time digging into alternative ways that we can produce equally comprehensive deliverables for our clients that will better represent the overall look and feel of a functioning website. Instead of statically designed “paintings” of websites that are designed fully in Photoshop, we’re going to create more agile element collages.

We’re going to look at how we can take the most essential building blocks of a site and recompose them in a multitude of ways to more accurately represent the finished product. This has reverberating effects throughout the entire lifespan of a project and its benefits are numerous.

By adopting modular design we can improve client expectations, create more accurate representations of the final product, give us better tools and benchmarks for the QA process, and have a governing set of documents that best direct the future of a web property just as well as it does the current design phase.

Topics Covered

  • Introduction to modular development
  • The efficiencies of modular development
  • What is an element collage?
  • Transitioning from full-blown mockups to an element collage
  • How modular design can speed up the QA process
  • Changing client expectations
  • Putting it all together