A year or so ago I wrote a blog post, “Design Systems, Not Pages“, that outlines how our design process has evolved over the last few years.  Our primarily design deliverables are now style guides and reusable components, instead of page templates.  As an extension of this new process, we built a Drupal module called Stacks that allows for content mangers to create robust, beautiful pages using the reusable components we design.

At this year’s MidCamp in Chicago, my colleague Dan Knisley and I had the pleasure of giving a talk about how our design process has evolved.  In the presentation we explain why page-based design doesn’t work and walk through our new approach.  We share real-world examples of the design deliverables we now produce from a recent project.

Below is a video of the presentation and the abstract of the talk.  Would love to hear any feedback you may have!

Talk Abstract

For most of the web’s short lifetime, the primary way to design a website has been to create wireframes and comps (design compositions) of a site’s key pages. This page-based approach is clearly broken. The proliferation of smartphones and the increasing complexity of the interfaces we create make page-based design extremely time-consuming. A relatively simple site can require 25+ page comps.

The last few years have seen designers move to a process that is more in tune with the way websites are actually built and function. They design overall styles and repeating elements that make up pages, instead of the pages themselves. This process is quicker, easier for front-end developers to implement, and provides maximum flexibility.

• Introduce the concept of design systems
• Walk through real world examples of sites using this approach
• Explain the design process for system-based projects
• Walk through ways to implement the completed designs in Drupal