Designing websites at Brown Bag Marketing is changing. As mentioned in our earlier post about the modular web, the pixel-perfect full page comps for every page (or at least every template) on a website days are numbered in our industry. The writing has been on the wall for a while, and the last straw has been mobile devices. The need to have multiple template designs for multiple breakpoints is simply not scalable. It’s not too bad for a single page site or even a relatively small 3 page site, but get any bigger and the number of design files a team has to manage skyrockets. This old process also tends to silo the work into different departments at different times, without any overlap other than the handoff where the next department takes deliverables from the previous and does their best to make sense of it. The inevitably have a slew of questions or things the previous teams didn’t think through – only because it wasn’t their job to think through it.

typical-web-design-process

Since this process has pain points, we decided to proactively make a new process that shines with all the new constraints we have as well as takes advantage of the great minds we have on our teams. We found that other agencies were experiencing the same problems.

responsive-design-workflow-breaking-development-conference-2012-orlando-4-728

There have been a number of changes we’ve implemented in our process and mindset that have greatly improved our teamwork and our end product, the websites we make.

One of the most impactful changes has been the focus on modules and systems rather than pages.

Not surprisingly, many in the industry were also coming to some of the same conclusions:

Build a System, Not a collection of Pages

This isn’t a new sentiment in the industry and more and more have been getting behind it by these mantras from some great presentations on the subject.

Designing a system, not a page
Designing a system, not a page – Andy Clarke
We're not designing pages, we're designing systems of components.
We’re not designing pages, we’re designing systems of components – From Stephen Hay by way of Brad Frost.

We don’t want to bottleneck our sites by requiring designers to comp a layout (or 3) for every page on a site. That’s just irresponsible! Instead we work on designing a system that defines all pages and then it’s a matter of arranging modules per page. This is quite a different process than the design industry is used to and there is a slight learning curve, but mostly I’ve found it’s really just a paradigm shift. It does take some effort, but then the way we see everything changes.

Duck Rabvbit Illusion to illustrate a paradigm shift
Thomas Kuhn used the duck-rabbit optical illusion to demonstrate the way in which a paradigm shift could cause one to see the same information in an entirely different way.

Once we’re past the paradigm shift though and get the whole team thinking about modules, we’re able to focus on designing modules (which are reused on much of the site) and can focus on making great content for these modules. With this system of modules, we end up building sites that are much more flexible in the end and much more future friendly.

Leave a Reply