One of the hottest topics in Drupal circles this past year is the concept of Component Driven Design to streamline front-end development and theming. While atomic design principles are not new to the design community, the introduction of twig in D8 provides those of us designing for Drupal an interesting set of tools, like PatternLab and KSS-Node, to help continue our march towards a world that’s free of the flat PSD. Awesome, right? Well… now what?
I think to see the real value, and why the community is so excited about the integration of these tools into our design and development processes, you must go back to what makes up a website in the first place. Patterns.
Patterns are all around us, and that is particularly true when it comes to the building blocks (or components) that make up modern websites. To define a pattern, you simply need to look for a couple of things: 1) Can it be given a name? 2) Does it solve a problem? 3) Is it repeatable? And 4) Can it be combined to make other more complex patterns?
Let’s think about an image. While this may feel very granular, when you look more deeply, it becomes clear that it meets all the criteria one needs to define it as a pattern. Image is the name of an element that solves the problem of helping your users to visualize something. This could be a product or service, an event, or even a feeling you want to elicit when users visit your site. We reuse images throughout the site with variations, as well as combine it with other small patterns (for example headings, dates and paragraphs) to create this slightly larger pattern.
Managing all of these patterns is where tools like PatternLab and KSS-node come into play. They help to organize all of our newly declared patterns into logical buckets and build a living style guide to use code to communicate the visual language of a new website. As a designer who is also a coder, I can illustrate to our clients exactly how the team envisions these components working — not just how they will look. And yes, before you point it out, there are other tools designers use that do this effectively, but, as far as I have seen, they rarely provide production-ready code that can be leveraged directly by the CMS to jumpstart development. This is the real beauty of the twig-based relationship between D8 and PatternLab.
Now, as I hand off the designs to the remainder of the development team, there is little ambiguity yet greater flexibility to implement the remainder of the templates/pages throughout the site. By using a module, aptly named components, developers can reach over into PatternLab and import the code, classes, and styles associated with a specific pattern anywhere it is needed. This assures consistency, and even a modularity, which is something every developer strives for during the development process.
So, is the PSD dead? As much as I would love to say yes, I highly doubt it. Designers will always have a need to benchmark certain aspects of a project in static format to gain buy-in on direction. In-browser design is yet another tool in our ever-deepening toolbox to help gain efficiencies during build projects, allow us to meet project timelines, and better set client expectations, ultimately leading to happier clients and teams alike.
If you would like to learn more about how D8 and PatternLab could be implemented on your next website build, please do not hesitate to reach out to us here at Kanopi Studios.
