Component-based Design Systems with Drupal 8 & Paragraphs
In this video from New England Drupal Camp, November 17, 2018, Director of Design & UX J. Hogue reviews how we approach building a flexible set of components for our clients using Drupal 8 and the popular Paragraphs Module. These component-based design systems make it easier to administrate complex landing pages, quicker for the author to design with their content, all within a brand-aware design system that keeps the visuals consistent for the consumer.
Through five projects (and growing), our internal design framework allows our team to craft new design systems for clients that can grow with their content. The design systems we create offer variety within constraints — that is what Paragraphs does so well. Why is a design system so important for clients authoring new content? Because ideally, it removes the pressure from thinking about what the content should look like, and instead, allows the author to focus on which components should I use to tell the best story with my content?
Paragraphs offer the most visual flexibility for the client and the most design-system control for the development team. If you haven’t yet been convinced, this talk just might make you a believer, too.
Real-world Application
We’ve seen this be true for a client earlier this year. We were given about 10 weeks to design and implement two different reports that took the form of long scrolling pages. These reports needed to have some visual distinction from each other — they should have a “family” resemblance, but they also had different audiences so a certain amount of visual distinction was needed. And, oh by the way, the content was not entirely written yet. And they wanted to get started on design now.
How were we going to solve this? How were we going to get 2500 words with images, videos, and testimonials onto two different pages with different look-n-feels? A design system seemed like the best answer.
Myself and our Senior Drupal Architect got together and collaborate on a technical design solution. We whiteboarded some ideas, and what started to emerge was what I am presenting here today. We broke things down into an abstract system first — one that would work within Drupal and Paragraphs, and then applied a visual design on top. Along the way, we identified configuration options that should shift, expand, or contract. We added an animation system. We added custom CK Editor styles for greater typographic control and custom element support. In short, we developed, designed, prototyped, and received client approval in tandem. We met our 10 week deadline and learned a ton in the process.
Our Legos
The pieces we use to design a page are simple in that they have a minimum of configuration needed to work. Any embellishments become visual, not functional, and therefore the author has to only concentrate on their content and how best to present it.
Our system is row-based, with a basic Row and a Hero Row forming the basis of the organization. We then have content components — a WYSIWYG component, a Testimonial, an Accordion, and Media in the form of an Image and a Video.
Our design options are many — horizontal and vertical alignment, 18 different layouts, background colors, background images, borders, animations, and some extras. Don’t worry, the video goes over all of these options in a visual way to make it easier to understand how flexible this system really is.
Getting started with Oomph Paragraphs
For the developers in the audience, our team has rolled out this framework into a public Drupal Module that we have created for ourselves to achieve consistency between projects. Even though it is an internal project, we released it publicly and are working to follow all Module best practices because we think this is a great way to jumpstart development with a solid foundation for a design system. Contributions and feedback are welcome.
