Design 4 Drupal, Boston is celebrating its 10th Anniversary this year and we have a great lineup of sessions for all attendees.  An incredible selection of design-focused sessions over the years have helped keep D4D, Boston on people's list of must-attend Drupal events each year.  

 

Keynotes

Exploring the New Drupal Front-end with JavaScript

Dries will give an update on the evolving role and exciting future of JavaScript in Drupal. He’ll discuss the merits of API-first vs. API-only approaches, give behind-the-scenes insights into the JavaScript modernization initiative, and tell the story of the past, present and future of JavaScript across the stack.

The Building Blocks Of The Indie Web

In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!

UI/Visual Design

5 Essential Lessons You Can Learn From Art History

Discover how you can take the stress out of building website and app designs by understanding design concepts and principles from the past. Starting in the early 1900’s design principles were established to help those dealing with usability and information design. See how you can take those same principles and apply them to modern visual art and design.

Designing and maintaining a .gov

Drupal has become a standard for dot gov. Designing such large sites is no small task. Learn best practices in how to work with governments, from first designs to continued support.

Ditching Templates for Legos: Using a Component-Based Architecture to Boost Efficiency

Join us as we explore the use of a component-based architecture in your Drupal designs and development. This Lego-like approach allows you repurpose wireframes, specs and components across client accounts for boosted efficiency. You’ll learn how to promote better communication and collaboration between your UX, design and development teams, so you can complete Drupal projects with ease.

Drupal: Design SOS

Save Our Software! Drupal desperately needs some design help.

This session is basically a plea for help from a developer and member of the Drupal UX team.

There is no denying it: Drupal was originally built by and for developers, without much input from designers. A few adventurous designers are trying to make up for lost time. Would you like to join them?

Let's look at some recent improvements, some ongoing work, and some blue-sky ideas for improving the Drupal admin UI

Maintaining Design Consistency Across Every Channel

With the growing shift towards a decoupled future a company’s presence is going to be represented by an ever-expanding collection of websites, apps, and talking speakers.

Maintaining design and tone consistency across those channels will be challenging but if done right, it can allow you to enter markets more quickly while keeping the style and tone of your company aligned.

Sketch For All

Have you ever been handed a Sketch file and immediately needed a coffee break? Are you tired of running to your designer for images, fonts, and sizing? Do you want to wield the power of the SVG?

Sketch is a powerful tool for not only designers, but developers. This session will demystify Sketch, help you to leave a Sketch file with what you were looking for, and reveal some of the secrets of design that enable you to start thinking and working like a designer.

Storybook: An Interactive Pattern Library for Your Decoupled Applications

Storybook is a development environment for UI components built using JavaScript frameworks including React, Vue, and Angular. While it does share some similarities to projects like Pattern Lab, it also provides some unique options for visualizing the interactive state of your application, along with an extensive set of addons. A small set of React components will be used as an example in this session

Variable Fonts and Our New Typography

Now, beautiful web typography can be crafted to respond to screen size, language setting, even ambient light. We’ll also look at how variable fonts and other modern CSS capabilities like grid can work together to enable better art direction and more interesting and unique design than every before possible on the web.

In a detail-packed hour, Jason will show you not just how far the new capabilities can take us, but how to make use of them right away.

UX/Project Strategy

10 Vital Lessons For Running A Successful Digital Agency

MaryAnn is a 17 year veteran of the web agency world, and in that time has learned valuable lessons that can help every new or small agency owner and development shop build a better, stronger, more successful business.

Delivered in a casual style, with anecdotes that accompany each of her ten tips, this session will leave attendees better prepared for their next client interaction and provide planning ideas for building a better business.

Accessibility: The Missing Session

Themers and site builders often bear the burden of meeting accessibility guidelines; however, that should not be the case. Stakeholders at each phase of a project should take accessibility into consideration. In this sessions we'll walk through the discover / strategy , design, and development phases and show how to accessibility needs to factored in at each level. We'll also identify tools that will help your Drupal site meet the WCAG guidelines.

Brand Strategy: The Key to Designing and Developing a Highly Effective Website

Building a website without a brand strategy is like building a house without a blueprint.

The end-result may look good and work great, but is it what the client wants or actually needs?

In this educative, interactive, and entertaining presentation you will learn how a brand strategist, creative director, and web developer collaborate to produce high impact, and very successful websites.

Creating a Single Face of Government Across Multiple Sites and Technologies

The team that reinvented Mass.gov is now charged with bringing a data-driven, constituent-centric, “digital first”, approach to all of the state’s web properties. Our vision is to stitch together a coherent experience across the diverse constellation of websites and technology stacks.

Whether you’re renewing your driver’s license, checking eligibility for food assistance, or starting a new business, we want your experience to be as seamless as it would be on a banking or e-commerce website. Even if you have to interact with four different government agencies, it should all feel like one government organization with a consistent look and feel.

Drupalized Design Sprints

In recent years Design Thinking has made its way to the forefront of business development practices. In particular it has gained great support in product oriented companies. At its core, Design Sprints are a process technique to solve important business questions and solve real problems with a user centric approach.

In this talk I will introduce the Design Thinking model through the Design Sprints Process. In particular I will discuss how these principles can be successfully applied in typical Drupal Development Projects. I discuss the challenges in the context of Drupal project implementations, giving practical advice on how to get started with Design Sprints and adapt its principles so you can apply them in your next project.

Effective Cross-Functional Communication

When design and engineering teams communicate poorly, projects get challenging and the end results suffer. A designer and a solution architect will teach attendees how to improve communication and results by creating a culture of inquiry between design and engineering teams, with specific playbook examples that can be applied to any project.

Getting closer to your customer: How Mass.gov is using Drupal in the last mile

How do we know we are delivering the right things? How are we informing our customers of this work and getting their feedback effectively? How can we find out what will improve our product?

In seeking the answers to these questions, the team behind Mass.gov uses the powers of Drupal to shorten the distance between developers, state department authors, and state constituents of Massachusetts by continuously improving the authoring experience to leverage new feedback loops and truly measure their success by customer satisfaction.

Hands on Usability Test Session

Knowing how users behave helps you create a much more suitable product. Rather than just guessing about what people might like or how they use your product, you can see their reactions first hand. The Usability Testing process brings together users, designers, developers, and content experts. The goal is to follow this fast paced, but structured observation session to improve a project's look and feel in a collaborative and fun way.

We will conduct a live website review, walk through the usability testing process and place you in the reviewer/user role. Topics covered include: knowing what questions to ask, getting the right participants, creating your test plan, moderating the session, then finally analyzing and reviewing results.

Inclusive Design: Thinking Beyond Accessibility

This session details the importance of having an inclusive mindset in the creation of our digital projects. It explains how Inclusive Design allow for producing positive experiences for a wider audience. Attendees will learn four simple guidelines that they can follow to apply Inclusive Design principles across all project phases including: ux, development and content creation. Attendees will leave with the tools they need to reach a bigger user base while also building towards an accessible and inclusive digital world.

Web Accessibility Tips and Tools

This presentation will provide a quick introduction to the layers of guidance in the WCAG 2.0 framework and also take a look at what is on the horizon with WCAG 2.1, which is scheduled for release in June. We’ll look the differences between Section 508 of the Rehabilitation Act and the Americans With Disabilities Act in terms of their treatment of web accessibility. We'll also look at the differences between an Accessibility Statement and a WCAG Conformance Claim.

There are many resources available for evaluating accessibility, and choosing the best one depends on your role and expertise. After the overview of the technical and legal aspects of accessibility, I'll share some of my favorite tools and strategies for evaluating sites.

Web Development in the Post-GDPR World

The General Data Protection Regulation (GDPR) took effect on May 25th, 2018 and it seems like nothing has changed. Well, that's not exactly true. Let's revisit GDPR.

Theming

Back to Basics Drupal 8 Theming

In this session I’ll write an open letter to my theoretical beginner self and recommend the tools and approaches that can help them build a great Drupal 8 theme without getting in over their head. I’ll also recommend related topics to learn next as they become comfortable with the basics. And at the end of it all, I’ll most likely realize that I was just talking to my modern, prone to overcomplicating self all along.

Building a Living Style Guide with Herman - in Your Sass!

Building a full pattern library in an external tool like Pattern Lab is a win -- there's no denying it. But, that doesn't mean every project has the budget to support one, and the tooling to keep all of that up to date is still a work in progress. If you love the idea of keeping a canonical style guide up to date as you develop, let me show you how Herman can help you!

Maintainable Drupal 8 Themes using Components

Principles and guidelines for creating and maintaining a Drupal 8 component based theme. Topics will include:
- Displaying content; Should it be handled in the admin UI or in a template file?
- Naming conventions; working with Drupal's classes and BEM methodology.
- How to get the most out of your view modes.
- Tips for maintaining and handing off project knowledge when working on a team.t.

Next Gen Design Systems with Pattern Lab, Twig, and Web Components

"Design systems can be incredibly efficient at delivering consistent, reusable, and interoperable components and visual styles across an organization; saving time while keeping projects on-brand and in scope.

However, most valiant attempts to integrate Drupal into a large scale design system surface a deeply interconnected web of technical and political roadblocks.

In this session, I’ll share our solutions to some of the toughest challenges teams face when building, shipping, and maintaining a next-generation design system - specifically our design system, Bolt, including:

Twig Recipes - Making Drupal 8 Render the Markup You Want

The addition of Twig has revolutionized the way we do theming in Drupal 8. Although very powerful and expressive, it is significantly different to what we did before. Using Twig requires us to take a new approach in order to make Drupal produce the markup that we want. This session is aimed at site builders and themers who want to understand how Twig works in Drupal 8. Basic theming concepts will be presented so no prior knowledge is required to attend.

Site Building

Composer 101

Composer is a package manager that alleviates the complexity of dependencies in PHP based projects (such as Drupal 8). This session provides an introduction to the core concepts behind package management and Composer. No previous knowledge of Composer required.

Discovery, discovery, discovery, discovery!

When a project goes wrong, most of the time it fails as a result of mismatched expectations. This can be avoided for most clients by following a repeatable and thorough discovery process. Understanding how to ask the right questions up front can mean the difference between happy clients who are eager to give you more business and nightmare clients who can never be satisfied.

Estimates, Expectations, and Evolution During a Project's Journey from RFP to Release

*** Remote Session ***
We’ve all been there with a client. Back when the project kicked off (days, weeks, months, or even years ago) there was some type of mutual understanding of the time, timeline, and cost of their project. Unfortunately, things happened along the way! Conversations sparked new ideas. Assumptions turned out to be incorrect. Life happened and someone left the team. Whatever the reason(s), the scope of the project today is no way matches what was discussed at the very beginning of the relationship.

Meta and Schema: Defining the Content about your Content

Publishing your own content, and configuring the correct metadata can help boost the chances of your content outperforming its competition in search results and on social media sites.

Do you want to enhance the look of your content on social media sites like Facebook, Twitter, LinkedIn, and Pinterest? Do you want to get included in new search features and featured snippets in Google? Do you want to be prepared for what comes next?

This session is meant for anyone responsible for publishing content online and for those that empower them to do so.

Nobody Wants a Website. They Want Results!

How many times have you been in a situation where the client is never happy with the results no matter what you do? How many 'emergency' messages have you responded to because the site isn't quite right in some new way? How many clients have you lost or fired because they honestly had no idea what they really wanted? If you answered yes to any of those questions, this session is for you!

Site Building Tricks With SOLR

Sure, SOLR is great at search, but there are a lot of tricks and tips you can use to build better sites with SOLR. Using some example site integrations, I will demo all my favorite tricks with SOLR

Troubleshooting Drupal

Troubled with too many redirects? Exhausted with memory exhaustion errors? Want the "411" on 503's? This talk is aimed at Drupalists who want to be able to dig more into issues that cause downtime, rendering issues, and general end-user pain. We'll go over things like identifying the cause of some common errors, how to track them down in logs, and ideally how to resolve them.

Understanding Drupal

Drupal is an extremely flexible system. To achieve this, various layers of abstractions were built into it. A lot of concepts were created to explain these abstractions. Unfortunately, they are not always intuitive. This session aims to explain the basic building blocks for assembling a Drupal site and how they relate to each other. Many examples will be presented to help you understand Drupal and why it is so powerful.

Webform Accessibility

In this session we will introduce the Webform module, review accessibility guidelines and recommendations, experiment with using tools to evaluate and recognize accessibility issues, and explore how we can build accessible forms.

Case Study/Panel Discussions

A Partial Decoupling: React + Drupal + Apache Solr FTW!

We'll explore a case study in which we leveraged one of the most popular front end frameworks, React JS, to power a fast, faceted, app-like search experience with Apache Solr and Drupal. I'll showcase some of the well‑established benefits of decoupling Drupal's content from the presentation layer, while also avoiding many of the challenges that complete decoupling involves. We'll discuss the architecture and the strengths of this flexible and future-proof design approach. We'll also share best practices for incorporating React in your Drupal project, lessons learned and pros and cons from our experience. We'll also share the versatility of this design paradigm and how to use it effectively in myriad ways beyond the specific use case of search within a Drupal website.

Front-end Tooling: A Panel Discussion

Stephen Cross will moderate this panel discussion around front-end tooling There's so much out there it can be overwhelming. We'll bring together some community members to talk about what they're currently using and why.

How SVGs Power Wilson Sporting Goods Product Configurator

Working closely with photographers, product designers, and developers, discover how SVGs are used to create thousands of combinations for coaches to design baseball uniforms, helmets, and gloves specifically customized for their team. Upload a logo, select team colors, and coaches are just a few clicks away from creating a customized uniform along with a personal team pro shop. We will cover our overall goals for the project, our approach, and finally dive into details about how SVGs power Wilson’s product configurator.

Iterative UX: Find It Cambridge Case Study

Find It Cambridge needed to be an online resource to help families easily find activities, services, and resources in Cambridge.

We came in with the incredibly fortunate situation of tons of research being done by Code for Boston and the City of Cambridge. We will describes some of the highlights from the research before anything was built, through initial user testing with people in a library computer lab (particularly real-world conditions for this site), and to the iterative improvements continuing today.