Design for Drupal 2018, Boston D4D

Share this post

Beginning in 2009, members of the Drupal community seized on the notion of promoting Drupal design and theming. The leaders of this movement created a group called Design 4 Drupal, or D4D.

Fast forward to 2018 and now hundreds of Drupal designers, developers, and site builders descend on MIT’s Stata Center to share ideas, gather design inspiration, and learn new techniques in both design and workflow.

As the Creative Director of CommonPlaces Interactive I traveled to Cambridge for this year’s D4D Camp. The conference, is a three-day affair featuring lectures and seminars on a variety of design, UX and front-end development topics. The last day is hands on with a variety of workshops to work with others in the community to gain practical experience.

This year’s D4D touched on UX strategy and design as it always does but also on other important web trends that affect front end design. Topics included Accessibility, GDPR, Component-based theming, and the Indie web. They were not only interesting but addressed the rapid changes of the internet and how we need to keep up to provide the best client solutions.

my “Top 5 TakeAway list” from 2018 D4D

1) For the designer geek in me the Number 1 takeaway is Variable fonts. What is that you ask? As every designer knows typography is the foundation of graphic design and information design for that matter. Fonts are our paint and let us express emotion, hierarchy, importance, tone and so much more. The problem for anyone designing for the web is the performance hit you take to load a bunch of great fonts files to a browser to render your great design. 

With Variable fonts you can load one font file and manipulate the weight, width, height, angle and even add serifs via CSS code instead of loading individual files. This is a game changer for performance, design and user experience, a real win, win..win!

Check out https://v-fonts.com/ and play with the sliders on some of the variable fonts and you’ll get the idea. Another great source: https://medium.com/variable-fonts/one-year-in-an-update-on-variable-fonts-7e3b9b716e49 This has a trove of information links to fonts, videos and updates on the variable font revolution.

2) The importance of a Design System. This is a big topic that encompasses much of what we do as designers. It’s important to understand we are designing for a dynamic medium not static printed pages. Not only is that medium created dynamically by pulling together content, links, and images on the fly from various sources, but it’s also displayed on an ever-changing landscape of devices. The challenge is to create a design language that can translate huge volumes of content into a pleasing user experience. I like to use the atomic design principal for creating a design system, not a static design. If you’re not familiar with this concept it’s basically creating the simplest design assets like colors, typography and graphic treatments first and then using them to build more complex components. Finally, using these components to build templates and pages.

atoms

Similar to how the universe is built by atoms, we can design robust systems based on simple design styles to create predictive designs that are pleasing user experiences and are flexible enough for multiple devices.

No matter what size project you are designing for, a style guide or design system is a must. You can find free style guide templates for Sketch and other design software that will help you start to make the shift to think design system, not just designs. Trust me, your developers will give you a big hug. . . well that might not be the best thing but enjoy it while it lasts.

3) Accessibility. Thanks to technology and increased access there is growing segment of web users with a disability that may limit their online experience. The term accessibility has been used for years in reference to the design of products, devices, services, and environments for people who experience disabilities. Now that we all live as much online as in the physical world this is an important consideration for all companies regardless of size.

The best place to start with this subject is The World Wide Web Consortium (W3C) – an international community where member organizations, a full-time staff, and the public work together to develop Web standards to improve everyone’s online experiences.

Done right, Accessibility makes websites better for you and SEO. Since many people use screen readers the way a website is coded it is as critical as the UI and the design.

These aspects should be addressed in the code of your site: basic information structure, proper page titles, equivalent alternative text (alt text), transcripts for audio, the ability to navigate the site without a mouse.

Designers should think about design basics like contrast ratio: layout, color use, layering of typography and image, scalability of type and other elements via the browser. These are just the most basic things to think about and improve upon when building or rebuilding any website. I attended a few good sessions this year that might also shed some light on this ever-growing subject.

Accessibility: The Missing Session

Inclusive Design: Thinking Beyond Accessibility

4) Tool of the Trade. For us UI/UX designers at Commonplaces, Sketch is our go-to tool for designing apps, website and pretty much anything that will live in the digital world. For those of you not familiar with sketch you can try it for free at Sketch.

Sketch has become the standard UI design tool, migrating away from some of the standard Adobe products like Illustrator and Photoshop; for a few reasons. The main reasons are its singular focus on UI design. The interface and tools provide designer great control and ease of use.  The asset export features that make the developer handoff easier. Also 3rd party plugins are available to improve workflow within Sketch and the other software products like Zeplin and Invision that let you export directly from sketch to improve designer-to-developer workflow.

One notable improvement that is now standard is the ability to prototype within Sketch. This is a nice improvement to Sketch and increases its functionality so you can do User Experience testing within designs. Our design workflow is to use Sketch for design then export files to Zeplin using the Zeplin plugin which allows for a smooth transition of assets to the development team. Our sketch files include a style guide along with designed pages and components which gets translated nicely in Zeplin to CSS.

Sketch Zeplin

5) My last takeaway is the importance of having a Brand Strategy. Moreover, how a good one informs so much of the UI design and development of a design system, which is a critical component in website building.  This is a subject that is a bit more on the radar of those in marketing or a creative director but it should be more in forefront of designers as they propose user experiences to clients. As a Creative Director with a branding and advertising background this makes so much sense to me. I’m often asking marketing initiative and company objective questions when I approach my design work. A brand strategy informs the creative process when developing a website, a logo, identifying a color palette, utilizing icons and choosing key imagery.

To be effective in our user experiences we need to know how the company’s brand strategy objectives should be portrayed. What are the company’s messages? How does that play out as an objective on the website? What’s the tone of the writing and content?

Even working with smaller clients that don’t have the resources or a brand strategy, it doesn’t mean you’re off the hook. You need to step back and listen to what you’re being asked to deliver and start asking questions. For us to deliver solutions that connects to users in meaningful ways, we always ask how does what we are proposing Connect, Communicate and Convert? These seemingly simple questions open lines of communication straight to the heart of any business’s brand strategy and business objectives. This approach of the 3C’s is what we embrace at every stage of a project lifecycle to keep project’s focused on the big picture. Something that often gets lost in the details of a technical project like web development.

Overall I think this year’s D4D had lots of topical information of how design is helping shape better Drupal development and better customer experiences.

To view some of the sessions from this year’s sessions check out the Youtube channel

For more information on Commonplaces Design Services

Related Posts

Config Sync Overview

Config Sync Overview

When Drupal 8 was released, it came with Configuration Syncing functionality. This has been a staple ever since for Drupal 9, Drupal 10, and beyond. Configuration Syncing was a game changer and one of my favorite features in Drupal Core.The days before config sync...