♡ Drupal because of its flexibility and lean code
I fell in love with Drupal because of its modularity, lean code, and the amazing community whom I still have friendships with today. I can remember going to Boston Drupalcamp in 2008 and meeting some of the best and most dedicated Drupal developers including Dries Buytaert the original creator and project lead for Drupal. But Drupal events even back then were focused on development and the designers and themers in the community craved more focus on design. That's why in 2009 I founded Design 4 Drupal, Boston (D4D) at the Massachusetts Institute of Technology (MIT) to talk specifically about designing in Drupal. However, there's still a long way to go to make it easy to design for Drupal. But I think I found a good solution.
Why it's still hard to design for Drupal
Even with all the great conversations, practices, and talent, it's still hard to design in Drupal. As designers we are still forced to use Sketch or gasp, Photoshop, which is great at editing photos, but websites, not so much. Figma is fun but it's not actually making a website.
These days at D4D, much of the discussion is about design systems and rightly so. The good news is for designers there are things like Pattern Lab to speak our language of Design systems. I love the atomic concept of Pattern Lab as a design system but as a designer, it's virtually impossible to access Pattern Lab as a WYSIWYG design tool so we still work in Sketch and have a front-end developer translate for you.
A web design tool that writes HTML and CSS and makes beautiful, interactive prototypes and style guides
I loved Webflow the moment I opened it up and I can thank Chaz Chumley, one of the best Drupal front-end developers I know for showing Webflow to me. Webflow is essentially a user interface for writing HTML and CSS. The interface provides the designer with a suite of common elements to mark-up HTML and a control panel catering for every sort of CSS declaration you could ever want to use. And even better, it comes with an amazing content management system (CMS) that enables you to think like Drupal's Content Types and Views with Webflow Collection and Collection Lists and with a fast and secure hosting platform built in. Webflow comes into its own when you know how HTML and CSS work in tandem and how a design system works in Drupal.
Export code for Drupal front-end
Webflow also comes with a powerful code export feature that allows you to export the code that you are “writing” as you use it. Sure, there are big differences on how CSS selectors need to be coded for Drupal modules and core, but having clear CSS styles to start with is a dream for a lot of Drupal developers I know. There are other tools out there like Avocode that will convert Sketch file elements to CSS but that falls short when in comes to expressing interactions and animations which Webflow does beautifully,
I ♡ Webflow
I love Webflow because I can design, build, and launch lightning-fast websites with rich interactions on a state-of-the-art platform with ease. Perfect for organizations who do not want to compromise their website functionally, design, or security. I also prototype in Webflow for my projects when the solution needs to be built in Drupal. When the out-of-box website solutions like Squarespace, Wix, WordPress templates and hard to maintain plugins are just not cutting it, and you need a custom designed and built website in a secure, easy-to-maintain content management system, I think Webflow is perfect.
I ♡, ♡ Drupal, here's why
Drupal's sweetspot is sites or digital experiences that require a certain level of customization or flexibility. Drupal has great standard features, like easy content authoring, reliable performance, granular permission system, and excellent security. What I love about Drupal is modularity, one of it's core principles—perfect for building solid design systems customized for your organization. We are experts in Drupal and have a long-history of giving back to the Drupal community in many sustaining ways like founding Design 4 Drupal, Boston (D4D) at the Massachusetts Institute of Technology (MIT), an annual design conference dedicated to Drupal design.
Inspiration and some content for this post is from Aaron Thompson article How to Write Good HTML & CSS with Webflow
