DrupalCon Baltimore 2017: Pinterest’s Component Based Design
Pinterest adopts component based design practices and best in class technology with Drupal 8.
Pinterest is the world’s catalogue of ideas, known for creativity and inspiration. When it comes to their web platform, this manifests itself in their dedication to best in class Design and user experience.
Pinterest teamed up with Phase2 to overcome the age old dilemma of inefficiencies and miscommunication that occur when projects move from design to development. Because Agile developers are able to move quickly and adapt swiftly to changing project requirements, 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.
Enter Pinterest’s new integrated design approach using Component based libraries integrated seamlessly into the Drupal 8 platform using Drupal’s flexible Paragraph system.
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 frontend deliverables like Twig templates and styles allows frontend work to start earlier and progress in parallel with the backend build.
Pinterest’s new design methodology 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 this session you will learn:
How 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
Bonus:
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 final live pages!
Pinterest is the world’s catalogue of ideas, known for creativity and inspiration. When it comes to their web platform, this manifests itself in their dedication to best in class Design and user experience.
Pinterest teamed up with Phase2 to overcome the age old dilemma of inefficiencies and miscommunication that occur when projects move from design to development. Because Agile developers are able to move quickly and adapt swiftly to changing project requirements, 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.
Enter Pinterest’s new integrated design approach using Component based libraries integrated seamlessly into the Drupal 8 platform using Drupal’s flexible Paragraph system.
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 frontend deliverables like Twig templates and styles allows frontend work to start earlier and progress in parallel with the backend build.
Pinterest’s new design methodology 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 this session you will learn:
How 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
Bonus:
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 final live pages!