design icon

Pinterest’s Component Based Design: Breaking Down Silos, Saving Time, and Empowering Content Editors

Evan Lovely, Software Architect
#Front-end Development | Posted

Agile developers are able to move quickly and adapt swiftly to changing project requirements, but issues can arise when design teams have a hard time keeping up with these rapid development cycles, or the designers require an unrealistic set of skills. Communication breaks down, project timelines have to be extended, and often stakeholders have a hard time getting visibility into the progress of development.

Pinterest teamed up with Phase2 to overcome the age old dilemma of inefficiencies and miscommunication that occur when projects move from design to development.

At this year’s DrupalCon in Baltimore, MD, I will be sharing Phase2’s new integrated build approach using Components integrated seamlessly into the Drupal 8 platform using Drupal’s flexible Paragraph system and Pattern Lab.

This approach turns the classic design-develop-theme methodology on its head: instead of backend development attempting to code to Photoshop, now frontend development happens much earlier by breaking designs into reusable components and patterns to be fed to Drupal 8. Starting work on front-end deliverables like Twig templates and styles allows frontend work to start earlier and progress in parallel with the backend build.

Pinterest’s design methodology combined with Phase2’s component focused build process not only speeds up the entire development cycle, but it also empowers content editors to create new page design layouts using the established component library without the help of additional development or design!

In my DrupalCon session you will learn:

  • How Phase2 and Pinterest uses components throughout the whole process
  • How to setup Phase2’s custom Pattern Lab powered theme, Pattern Lab Starter and use it to style design components
  • How to include the Pattern Lab components inside Drupal’s templates
  • How this approach enables Front-End and Back-End work to happen in parallel and the advantages of that approach

And, as a bonus, you’ll get an inside look at Pinterest’s design component library and how it integrates with it’s Drupal back end CMS, resulting in one of Pinterest’s new live site!

You can register for this DrupalCon session here. If you are going to be at DrupalCon Baltimore and would like to talk to me about Component based design and our work with Pinterest, please reach out and let me know: @EvanLovely

Evan Lovely

Software Architect