Upcoming Webinars

Design4Drupal holds quarterly webinars around design, UX/UI, and other topics of interest to the Design4Drupal audience.

We have paused the webinar series for now. Thanks to all speakers, sponsors and listeners that have participated in the webinars over the years.

 

Previous Webinars

Layout Builder for the Ambitious Site Builder

June 26, 2024 by Rod Martin, Lead Trainer at OSTraining

Watch the recording

Layout Builder is great - right? Not really - “out-of-the-box” it’s pretty terrible. Despite a few initiatives that are trying to create a better experience, we’re probably a couple of years away from seeing anything specific.

This webinar is going to present Layout Builder in a way that actually makes it easier to use with beautiful results that anyone can implement. You’ll come away with a list of recommended contrib modules, a list of configuration settings, and a completed site with styles, pre-set blocks and more - all without a line of code and without locking in to any vendor.

We’ve been using this approach to convert non-Drupal sites over quickly, along with making the content editor’s job a LOT easier.

 

About Rod Martin

Image

It's been my privilege to introduce Drupal to almost 50,000 people in the past 11 years through live training globally and video courses at OSTraining, LinkedIn and Acquia Academy.

Born in Australia, raised in Canada, living in the United States. I’ve been blessed to live in three countries and have traveled to many more.

I play ice hockey two or three times a week, ride my motorcycle anywhere and everywhere I can and find a lot of joy in my family.

I love when the light goes on over someone’s head - and they “get it”.

Beyond "99 Red Balloons" - A Pragmatic guide to alternative text

April 11, 2024 by AmyJune Hineline, CPACC

Watch the recording

Slides

We love to include images on our websites and digital assets. Images support and add context to our information and concepts. They can act as visual cues and help some users orient themselves on a page. Media, especially social media, include images for conversions; having images on posts leads to a higher clickthrough rate and ROI (return on investment).

Images can be simple and easy to add alternative text, but they can also be more complex like infographics, charts, or maps.

Let's take a nostalgic walk through some imagery from the 80s music scene and ensure our alt text conveys the information in a meaningful way for those who cannot access the images visually. From 99 Red Balloons shaking us all night long, to Burning Down the House we don’t want to leave any of our users behind.

About AmyJune

Image

AmyJune currently works with the Linux Foundation as their Certification Community Architect. She is responsible for supporting the Certification team’s efforts in building and maintaining exams and related documentation for exam products in the Linux Foundation’s certification portfolio.

She is a Drupal Mentor Coordinator, DrupalCamp organizer (Florida DrupalCamp, DrupalCamp Asheville, and MidCamp), and a CWG Community Health Team member. She serves on the board of the Colorado Drupal Association.

Her ongoing experience as a hospice nurse keeps her in touch with many end-users' challenges. In her continued efforts to make a difference, she helps organize A11yTalks, an online meetup that advocates all things accessibility - one of the core components of building an inclusive web.

AmyJune helps communities discover how they can contribute and belong in more ways than code. Her ability to eat with her elbows on the table has wowed the world.

6 Web Design Accessibility Issues and How to Avoid Them

September 20, 2023 with Michaela Lederman and Ken Woodworth - Aten

Watch the recording

Join Aten’s VP of Design and Aten’s Senior Accessibility & QA Lead as they walk through how they work together using Web Content Accessibility Guidelines (WCAG) and client branding to create accessible and usable website designs. Together, they will explain the six most common design issues based on WCAG standards.

• After the webinar, attendees will:
• Have an understanding of what areas they need to focus on when creating accessible website designs
• Understand how these issues relate to certain WCAG guidelines
• Know how to avoid these issues in the future

 

About Michaela Lederman, Senior Accessibility & QA Lead

Image

After several years of experience as both a designer and developer, Michaela joined the Aten team in 2016. Michaela always had an interest in making the world a better place and giving back to the community through volunteering with local community pickups, as well as following her passion for physical and digital ADA compliance. Now she uses her background in the industry and her personal life to bring awareness and solutions to digital ADA compliance as Aten's Accessibility and QA Specialist. Michaela writes and speaks about accessibility and inclusive digital experiences, has completed a number of accessibility trainings, and is certified as an IAAP Web Accessibility Specialist.

 

About Ken Woodworth, VP of Design & Partner

Image

Ken pursued an education in Graphic Design and Illustration, graduating with a Bachelor's Degree in Studio Art in 2001. Now, after more than 14 years of working on the web, he has experienced the evolution of web design – from table-based layouts, to the web standards movement, to the responsive world of today.

Ken has helped create beautiful work for amazing clients including Stanford, The World Resources Institute, The Smithsonian, Colonial Williamsburg, and Habitat for Humanity. Ken has a gift for creating beautiful, intuitive design systems for even the most complex requirements, and his design capabilities are matched by a thorough understanding and ability in multiple front-end technologies.

Component-based Authoring with Drupal: Bring your design system to life with Mercury Editor

May 17, 2023 with Justin Toupin, Kathryn Sutton and Brent Robbins - Aten

Watch the Recording

 

Mercury Editor offers easy-to-use, drag-and-drop publishing for Drupal. In this session, we’ll cover a design-through-development workflow for implementing a component system in Drupal, sharing your components with Storybook, and empowering your marketing and editorial teams to publish beautiful, component-based landing pages with Mercury Editor.

 

About Justin Toupin, CEO

Image

Justin is CEO and founding partner at Aten. He started the company back in 2000 with a passion for technology and communications, a desire to do meaningful work, and an aspiration to help build a place where people love what they do. He is a co-maintainer for several Drupal projects, including Mercury Editor and OpenAid, the Drupal distribution for marketing non-profit programs.

 

About Kathryn Sutton, Senior Accessibility and QA Lead

Image

Kathryn brings a passion for insightful user experience strategy and elegant design to Aten Design Group. She has partnered with clients across dozens of market sectors, including nonprofit, education, government, and professional services. She cares deeply about pursuing a shared vision with her clients to create attractive digital experiences that enhance brands and connect with audiences. Kathryn is committed to creating work that is useful, accessible, and inclusive.

 

About Brent Robbins, Front-end Developer

Image

Brent began his career in web development over two decades ago and enjoys the variety of client website development. He holds degrees in Marketing, Management, and Computer Information Systems, previously worked with the USDA, and has owned a web design and development company since 2001. He volunteers with DrupalCamp Colorado and regularly contributes to Drupal.

New things we love and more things we want in CSS

April 12, 2023 with Adam Varn and Aubrey Sambor - Lullabot

Watch the Recording

 

If you haven't been paying attention to CSS lately, you have been missing out! From container queries to the :has() pseudo selector, CSS has made leaps and bounds over the last 2-3 years...but there is still plenty more to do!

In this session, Lullabot front-end developers Adam Varn and Aubrey Sambor will get you up to speed on the newest CSS features we love, as well as some still in the works and the ones that we wish we had the most.

We'll cover:

• the :is(), :where(), :not() and :has() pseudo selectors and their "pseu-per" powers
• why container queries will blow your mind
• what @layer is and how to use it
• and a lot more!

A basic understanding of CSS is recommended for attendees but all are welcome!

 

About Adam Varn - Front End Developer

Image

Adam Varn is a front-end Developer who built his first website in 1997 when he launched “Adam’s Game Reviews” for a local ISP’s portal. The ISP paid him in video games. To earn actual money for his work, he started building other sites in HTML and Cold Fusion.

In 2008, he began creating his first Drupal themes, learning the ins and outs of Drupal site-building and configuration. Before joining Lullabot, he ran his own Drupal development company where he helped solve problems for non-profits, advocacy organizations, local government, and educational institutions.

 

About Aubrey Sambor - Senior Front End Developer

Image

Aubrey is a front-end developer who loves creating accessible websites using clean and modern CSS. She initially learned to code in the late 90s when her high school friends told her about this cool website called Geocities. She decided she wanted a site of her own, so she bought an HTML 4 book and taught herself the ways of code. Aubrey graduated from Indiana University with a computer science degree and started her career building custom PHP web portals for clients, eventually discovering Drupal in 2008./p>

As a senior front-end developer at Lullabot, Aubrey has contributed to projects for IBM, New Relic, Principal, and Carnegie Mellon. Prior to Lullabot, Aubrey lent her expertise to organizations, including Rutgers, Princeton, UMass Amherst, Harvard, Yale, MIT, Mount Holyoke College, Smith College, and Phillips Exeter Academy. She is also a frequent attendee at Drupal events, enjoys contributing to the Drupal community, and is passionate about design systems, accessibility, and the latest and greatest CSS techniques./p>

In her spare time, Aubrey loves to knit, spin her own yarn on one of her two spinning wheels, and walk on the many trails and paths throughout western Massachusetts. She's left-handed and has always disliked it when her classmates took all the left-handed scissors in art class.

What does it mean to have accessible and inclusive presentations?

March 15, 2023 with AmyJune Hineline

Watch the Recording

Slides

In this session, we'll go over what we can do as presenters to ensure inclusivity for all our attendees regardless of how they consume the content, beyond the basics of captions and color contrast. We'll briefly cover accessibility definitions, standards, and guidelines and then share practical tips and examples to help make presentation slide decks and presentations more accessible.

 

About AmyJune 

Image

AmyJune Hineline is the Senior Community Manager at Opensource.com, a project supported by Red Hat. She is also a Drupal Core Mentor. With a dual focus on both open-source community development and inclusivity, she is uniquely positioned to help individuals become more comfortable and confident as they contribute to their communities. She co-organizes various open-source camps and conventions globally, empowering individuals to forge deep community connections that benefit the whole. As a self-described non-coder, AmyJune helps communities discover how they can contribute and belong in more ways than code.

Her ongoing experience as a hospice nurse keeps her in touch with the challenges faced by many end-users. In her continued efforts to make a difference, she helps organize A11yTalks, an online meetup that advocates all things accessibility - one of the core components of building an inclusive web.

How to hack Storybook for Drupal

February 15, 2023 with Melissa Miller

Watch the Recording

Slides

Storybook is a tool used to build UI component libraries and is a favorite of many front-end developers. However, because there isn't a Drupal or Twig-specific version of Storybook, we must hack our own.

The approach can vary based on your specific needs. I will talk through some possible approaches and provide tips and tricks to help you tackle this problem and craft your own DIY solution.

We will discuss why (or why not) you would even want to use an external component library with your Drupal site, and how to make it happen.

• Takeaways will include:
• A brief overview of Storybook and its benefits
• How to extend Storybook to work with Twig (including Drupal-specific functions), and Drupal behaviors
• How to build Drupal-friendly UI components
• How to package this component library and consume it in your Drupal theme
• How to navigate the official Storybook documentation for which sections apply to our "hacked" version of Storybook

 

About Melissa - Senior UX Engineer at Pantheon

Image

Melissa is an Oakland, CA-based developer and designer. She currently works as a Senior UX Engineer at Pantheon, specializing in design system development. Melissa began using Drupal in 2011 and has been an evangelist for it ever since.

When not building the internet, Melissa likes to bike around the city, play various musical instruments, research urban history, and spend time with her partner and their dog.

Sneak preview of the Emulsify UI Kit beta—using design tokens to connect developers and designers

January 18, 2023 with Randy Oest

With the forthcoming Emulsify UI Kit, you can harness design tokens so that design and development teams can enjoy an automated communication connection.

Website production has always progressed while navigating a broad divide: the line separating visual design and front-end development.

When your designer needs to change a component’s color, text size, or any other detail in your style guide, a developer needs to process those changes into code.

If your team uses a design tool like Figma, designers create a sheet that outlines the project’s text sizes, colors, and other elements. Then a developer has to review those choices and begin copying and pasting every update into the codebase.

We automate communication between the design files and the coded front end using design tokens.

 

• In this session, we will cover:
• A quick definition of design tokens
• A brief introduction to Emulsify
• A deep dive into the Emulsify UI Kit challenges and benefits
• Examples using the UI Kit

 

About Randy - Director, Programs at Four Kitchens

Randy Oest's goal as the Creative Director at Four Kitchens is to make the online world as approachable, understandable, and delightful as the real world. He wants to make people happy and confident online.

How to Create and Maintain Healthly Communities: The Importance of Psychological Safety

December 21, 2022 with Von Eaton

Watch the recording

The backbone of Open Source, and specifically Drupal, is a diverse, engaged, collaborative, and innovative global community. We use the term "community" often, and we  usually mean the people who work in Drupal. But what is the broader implication and importance of this word? 

In sociology, a community is a group who follows a social structure within a society (culture, norms, values, status) and they may be bound by a sense of belonging sustained across time and space. 

This session will engage attendees on the key components of creating and sustaining health communities.

 

This session will engage attendees on the key components of creating and sustaining health communities:

• A core value set
• Psychological safety for those most vulnerable
• Restorative justice in conflict resolution
• Robust systems of accountability
• Communication norms and boundaries

The successful implementation of these components is essential to ensuring contributors who join our community are supported, affirmed, and long-lasting.

This session appeals to all attendees, regardless of industry! Participants who are invested in the health, safety, and longevity of the Drupal Project and Community will get the most out of this session. This session was presented in July for A11y Talks, and I regularly update and improve the information and activities.

About Von

Image

Director, Programs at the Drupal Association

Von is a New Jersey-based activist, community engagement professional, and change-maker. He currently does social/cultural change work through his role at the Drupal Association, through his business, Wasp & Fig - Consulting and Education, as a Steering Committee member for the organization Philadelphia Asian & Queer, and as a board member of GLSEN Philly. He has 6 years of experience in anti-oppression education, and program management, and 4 years experience in organizational development and working on conferences. He has his Bachelor of Arts in Political Science from East Carolina University, his Master of Arts in Sociology from University of North Carolina at Wilmington, and a European Minor of Education in an International Perspective from HAN University of Applied Sciences - Nijmegen, NL.

How to involve your internal stakeholders in the UX discovery

November 16, 2022 by Annika Oeser (UX designer) and Vuong Tong (Design Director) at Evolving Web

Watch the recording

When working on a website project, the information you need may not always be available upfront. Yet, to create a successful website, designers need a high-level understanding of both the client objectives and end-user needs. For a site to be a human-centred experience, you’ll want to bring in plenty of data and research to inform the design process, both from internal stakeholders and end users.

The UX discovery is the first step in the UX design process, and a discovery questionnaire is the tool you need to align the organization with your website’s goals. By asking your stakeholders key questions, a solid UX discovery phase will give you the foundation you need to build a fantastic website.

• Key Takeaways:
• Learn how to create a discovery questionnaire for stakeholders to help you understand their roles, business goals, audiences, and priorities
• Learn how stakeholder questionnaires fit in the overall UX Research Design process
• Define the relevant internal stakeholders to be involved in the process
• Identify what makes a good UX question and get examples of key questions
• Understand how to get the most value out of stakeholder input

Join Annika Oeser, UX designer and Vuong Tong, Design Director at EW, as they chat about how a solid UX discovery phase is key to building fantastic websites.

 

About Annika Oeser

Image

Annika is an experienced UX designer and researcher who has designed countless websites and apps. She helps organizations build intuitive web experiences with her strong creative and problem-solving skills, and has experience in a variety of UX design and research techniques. Annika enjoys sharing her knowledge on UX improvements, and you will certainly learn some helpful tips no matter the size of your team or budget.

 

About Vuong Tong

Image

Vuong’s extensive career as a design director touches everything related to design: branding, web design, motion, and product and service innovation. Vuong uses his design thinking to build digital products from the ground up through emotional and psychological lenses, while considering user needs. Known for his engaging and approachable presence, Vuong’s training expertise will make sure you practice what you learn and make an impact on your projects.

Crayons Down! Accessibility for UX is More than Contrast

May 11, 2022 by Donna Bungard

Watch the recording

More and more teams are discussing how their work impacts the overall accessibility of a project. Time and again UX teams focus a lot of their energy on colors - which is important but only a fraction of the UX journey. Dear UXers - there is SO MUCH MORE you can do! In this talk we’ll leave the colors at the door and talk through the top 15 things that UX team members can do to bake accessibility into every stage of the projects lifecycle. Come away with a better understanding of how to produce accessible deliverables that set your team up for success.

 

About Donna

Image

 

Donna is a human-centric leader who strives to inspire teams. With a deep understanding of digital accessibility and a strategic management style, she works to elevate through empathy. As the Sr. Accessibility Program Manager in Marketing at Indeed, she works with amazing professionals to help all people get jobs.

DevOps for frontend developers (who can't backend good and wanna learn to understand other stuff good, too)

April 13, 2022 by Tearyne D. Almendariz

Watch the recording

As a front-end web developer, the first leg of Tearyne Almendariz's career focused heavily on the user interaction layer - analyzing user experiences and designing and coding user interfaces. When she joined her first large scale production team, there were a lot of tasks in the realm of DevOps with which she found herself very unfamiliar.

She was lucky to have many senior and full-stack developers mentor and assist her along the way, and with this talk she aims to help others to similarly level up their DevOps knowledge and skillsets.

In this talk, you can expect to:

• learn the lingo and key principles of DevOps - what is a trunk? What happened to branches? What are secrets (and how do we keep them)?
• learn about different DevOps workflows and what workflows work best for different types of projects
• deepen your understanding of how interacting with larger scale development workflows impact the structure of your code
• learn about the power of scripting - an invaluable process that will help you become a powerful collaborator while keeping your time focused and protected from excessive tinkering

 

About Tearyne

Image

Tearyne D. Almendariz's passion for all things Japan and Sailor Moon led her to become a front-end developer with a focus on accessibility and usability. She has designed, prototyped, and coded user interfaces and worked on teams small and large. One time she even converted Coldfusion sites to React Apps -- and lived to tell the tale.

Tearyne is currently employed as a developer advocate at Pantheon. She previously worked for Lullabot (Support & Maintenance) and Bright Plum (frontend developer). She serves as the lead of the Drupal Diversity and Inclusion Initiative in the Drupal open source community and she is a Certified Professional in Accessibility Core Competencies with the International Association of Accessibility Professionals.

Accessible Slideshows

March 16, 2022 by AmyJune Hineline

Watch the recording View the Slides

Arguably, the first rule of slideshows is to not have slideshows, but what do you do when the primary stakeholder insists…

According to W3 schools: "Carousels are disputed from a usability perspective because their content can be hard to discover. Ensuring accessibility can also improve usability."

Together we'll follow Alice down the rabbit hole and learn about the different types of slideshows (often called carousels), discuss their components, and dive into how to make our slideshow accessible across different types of users and user agents.

We will also walk through some imagery from Wonderland and ensure our alt text conveys the information in a meaningful way for those who cannot access the images visually.

 

About AmyJune

Image

AmyJune Hineline is the Senior Community Manager at Opensource.com, a project supported by Red Hat. She is also a Drupal Core Mentor. With a dual focus on both open-source community development and inclusivity, she is uniquely positioned to help individuals become more comfortable and confident as they contribute to their communities. She co-organizes various open-source camps and conventions globally, empowering individuals to forge deep community connections that benefit the whole. As a self-described non-coder, AmyJune helps communities discover how they can contribute and belong in more ways than code.

Her ongoing experience as a hospice nurse keeps her in touch with the challenges faced by many end-users. In her continued efforts to make a difference, she helps organize A11yTalks, an online meetup that advocates all things accessibility - one of the core components of building an inclusive web.

All the cool things you can do when you don’t support IE11 (and how we can use these in Drupal core)

December 15, 2021 by Mike Herchel

Watch the recording

Hallelujah! Drupal will no longer support Internet Explorer when version 10 comes out later next year! How will that change Drupal core? What new fancy features will this enable?

In this presentation, I’ll walk attendees through new modern CSS and JS including things like:

• CSS custom properties (you might already be familiar with these)
• :is() and :where() selector syntax
• the all property combined with the revert value
• CSS Grid
• focus-within and :focus-visible
• Selector arguments within :not()
• JavaScript optional chaining
• Lots more!

How can we use this cornucopia of awesomeness in Drupal core? What features become possible?

• Dark modes
• Color changing
• Lots more!

Hopefully this will get you excited about the future, and you can take these lessons home to your own project to optimize your own codebases and create new innovations.

 

About Mike

Image

Mike Herchel is a senior front-end developer that’s been developing with Drupal for over 14 years. He’s passionate about web performance, usability, and accessibility. You can often find him speaking on these subjects at DrupalCamps, DrupalCons, and various other web development conferences. Mike is the maintainer and lead developer of the new Olivero theme for Drupal 9, as well as an elected at-large Drupal Association Board of Directors member. In addition, Mike is a primary organizer of Florida DrupalCamp, and is the maintainer of the Drupal Quicklink module.

Taking Drupal Layout Builder to the Next Level: Leveraging Contrib Add-ons For Enhanced Site Building, Governance, and Theming

October 20, 2021 by Danny Englander

Watch the recording

 

Since Layout Builder for Drupal came out a few years back, a very expansive ecosystem has developed around it with a huge variety of contrib modules. In this webinar, I will discuss the following:

• Layout Builder Styles - A Predefined select list of HTML classes which is ideal for content editors to add customization to components and Layout Builder sections
• Layout Builder Restrictions - Fine tune Layout Builder by restricting what content editors can and cannot add to the UI.
• Layout Builder Modal - Expands the block configuration sidebar into its own modal for easier editing.
• Layout Builder Library - Give your content editors a selection of predefined layouts to choose from via a select list.
• Layout Builder Component Attributes - A nice module for developers to add one-off classes, ids, and data attributes to Layout Builder blocks.
• I will also demo a neat trick on how to add wrappers around fields in the Layout Builder UI. This comes in really handy for theming.

By the end of this webinar, participants should have a good handle on enhancing their Layout Builder sites with 3rd party contrib modules as well as other tips and tricks.

Image

About Danny Englander - Senior Front-end Drupal Developer at Bixal Solutions Inc.

Danny has been a Drupal Developer for the past 12 years and is currently a Senior Front-end Drupal Developer at Bixal Solutions Inc. He specializes in Drupal Front-end development, theming, and site building.

From Danny: "I thrive on learning new things all the time in order to better my craft. I love to do knowledge shares whether within my company, at a Drupal Camp, or a user group. I have presented on a wide range of topics including Netlify CMS, a custom default content module for Drupal 8, Layout Builder, and even how I designed and created a custom symbol font. Learning and knowledge sharing is in my DNA. "

Layout Paragraphs

September 15, 2021 by Justin Toupin

Watch the recording

We’ve been working with Drupal for a long time: since way back in 2006, when Drupal had just reached version 4.6. The platform has come a long way, and in particular Drupal 8 and 9 have been huge jumps forward. Meanwhile, so has the rest of the publishing industry. Building content online has never been easier, with products like Squarespace, Wix, and even WordPress defining the new standard for easy-to-use publishing tools. We’ve been working on a suite of tools that combines the flexibility and robust capabilities of Drupal 8 and 9 with the simple content management experience that marketing and communications teams need and expect. In this webinar, we’ll walk through the components of Aten’s modern, easy-to-use, drag-and-drop authoring experience that empowers teams to publish rich, beautiful content in Drupal, quickly.

Image

About Justin Toupin - CEO of Aten

Justin is CEO and founding partner at Aten. He started the company back in 2000 with a passion for technology and communications, a desire to do meaningful work, and an aspiration to help build a place where people love what they do. Justin speaks publicly on occasion about design and development process, working with clients, and the business of running a design company. He is a co-maintainer for several Drupal projects, including OpenAid, the Drupal distribution for marketing non-profit programs.

Introducing Quahog: a brand new design system and web platform for the State of Rhode Island

April 28, 2021 by Jason Pamental and J. Hogue

Watch the recording

Over the past year we've been working on something new and exciting for our home state: a brand new design system and Drupal-based web platform that will bring a whole new level of capabilities to state agency websites. While there's way to much to cover in just one sitting, J and Jason will introduce some of the core elements of typography and color that we created as part of the project. We'll show you some truly unique features that drive the color theming system, typography, and how they both play an integral role in the accessible nature and user-focused design of the system as a whole. Combining PatternLab, variable fonts, Acquia SiteFactory, and Drupal 9—we couldn't be more proud of the outcome and can't wait to share it with the D4D community!

About Jason Pamental -  designer, strategist, tinkerer & typographer

Image

Jason has been designing and building for the web since 1994, and has specialized in web typography for the past 10 years. One of the leading experts in using variable fonts, he consults with nearly every major type and web browser company, and is an Invited Expert to the Web Fonts Working Group at the W3C. He has led the design of typographic systems used by millions of people every day for entertainment and government platforms alike, as technically advanced as they are successfully envisioned. Over the past several years, he has published countless articles, newsletters, and sites focused on teaching web typography, exploring the design and technical capabilities of variable fonts, and has delivered talks and workshops on the subject at over 100 events and conferences all around the world.

 About J. Hogue (he/him) -  Director of Design and UX

Image

I have over 20 years of experience in design and user experience. As Director of Design & UX, I lead a team of digital platform experts with strategic thinking, cutting-edge UX practices, and visual design. I am passionate about solving complex business problems by asking smart questions, probing assumptions, and envisioning an entire ecosystem to map ideal future states and the next steps to get there.

I love to use psychology, authentic content, and fantastically unique visuals to deliver impact, authority, and trust. I have been a business owner and real-estate developer, so I know what is like to run a business and communicate a value proposition to customers. I find that honest and open communication, a willingness to ask questions, and an empathy towards individual points of view are the keys to successful creative solutions. I live and work in Providence, RI, and love this post-industrial city so much that I maintain ArtInRuins.com, a documentation project about the history and evolution of the local built environment. I help to raise two amazing girls alongside my equally strong and creative wife and partner.

 

 

 

UX Mistakes Made in 2020 and How to Fix Them

March 24, 2021 by Kim Lai

Watch the recording

If 2020 has taught us anything, it’s that the internet is here to stay. With stay-at-home-orders many people are finding they cannot live without the internet – it provides a school, a workplace, and entertainment all in one neat package.

However, more demand creates more supply, and websites are popping up at a rapid pace. Setting yourself apart can feel challenging but a few simple adjustments can elevate your brand above the rest. An intuitive user experience is the easiest way to make a good first impression and win loyal customers, as 32% of customers will leave a brand after one bad site experience.

We’ll walk through the most common UX mistakes made in 2020 and provide you the tools to fix them.

About Kim Lai, User Experience Strategist & Designer at Kanopi Studios

Image

Kim helps clients bring their mission and goals to life online in her role as a UX strategist and designer at Kanopi Studios. She spends the time it takes to understand what makes an organization unique, then creates design solutions that embody those qualities, helping clients tell their stories effectively, build trust with their audience, and motivate action.

Kim received a masters degree in web design and has more than ten years of design experience gained at agencies and through freelance projects.

Bridging the design-development gap with Webflow and Drupal

February 24, 2021 by Susan MacPhee

Watch the recording

You will see how to create full-fidelity design prototypes in Webflow so that Drupal development teams can implement designs faster, with less back and forth between the designer, developer, and client.

In this session you will learn:

• An introduction to the canvas, and how you directly interact with HTML, CSS, and everything else on the screen.
• How you can think in Drupal while designing in Webflow
• How to get more skills with Webflow University

In observation of Black History month, the MIT Black History Project will be featured as well as a marketing website, OpenScholar, a Drupal-based website building platform for research institutions used by Harvard University, Broad Institute and more.

About Susan MacPhee, Principal at MacPhee Design

Image

Susan MacPhee leads MacPhee Design as a hybrid technology-focused and design thinker, partnering with clients, brand designers, front-end developers, and marketing colleagues to launch modern websites that are easy for editors to control. Susan takes a content-first approach to tackle complex data relations and types and strives to keep her clients in the latest design and UX best practices. In 2009 Susan founded Design 4 Drupal, Boston at MIT in Cambridge, MA which can now be found online due to COVID-19 life.

Design for Developers

January 13, 2021 by Ruth Leopold

Watch the recording

Should a developer learn how to design? Should a designer learn how to code? The answer to both these questions is: just a bit. Luckily, they're not really as different as you might think. Learning just a little design will help you to understand the logic that goes into the smallest design decisions, make better decisions while coding, build empathy for your designers, and establish a shared language. Better communication between design and development naturally leads to time saved and products that can remain aligned to design principles and patterns as they grow.

In this session you will learn: - The basic principles of any design - How to create and use a color scheme - Accessibility tips for translating design to code - The details to look for in a design when writing CSS - How to fill in the gaps between the mockup screen sizes

...and more! You may even feel a little more comfortable next time you're designing a slideshow or working on a side project.

About Ruth

Image

Ruth Leopold is a designer and front-end developer at Redfin Solutions. She bridges the gap between design and development, often playing a role as translator between external designers and internal developers. Ruth has been at Redfin Solutions for four years and has spent that time establishing and improving design practices. She also is experienced with CSS, accessibility, information architecture, UX best practices, and more. Ruth most enjoys looking at the big picture, problem solving with whatever tools are relevant, and making sure both the process and solution are as accessible and kind as possible.

Web components through the eyes of a newcomer

December 2, 2020 by Brian Perry

Component based approaches to front end development have taken over the web. From conceptual approaches like Atomic Design, to component based frameworks like React and Vue, this perspective on web development is unlikely to fall out of favor any time soon. And like many others, I love it.

There is however, one component related technology that has eluded me: web components. Web components are of a set of web APIs and standards that can be used to create custom and reusable HTML elements. A custom element that isn’t tied to a specific framework and is supported across all modern browsers truly sounds like component utopia. Yet somehow, native web components still haven’t become a major part of my front end toolset. With web component adoption increasing, it seemed like time to better understand why.

This session recounts the highs, lows, and surprises of my experience as a newcomer to web components, including:

● Key technologies including custom elements and the shadow DOM
● Creating web components using the core API
● Creating web components with the help of a library
● Styling web components
● Application state and web components
● Using web components with frameworks like Angular, Vue and React
● My newfound and slightly more educated outlook on web components

About Brian

Image

Brian is a versatile developer with experience building complex, interactive web applications in support of large-scale localized sites. Recently he has focused his efforts on evolving Drupal front-end development practices, decoupled Drupal, and design systems and has spoken on the topic at various Drupal events. Brian is a Drupal 7 and Drupal 8 Acquia Certified Grand Master and loves all things Nintendo.

Consentful UX

November 11, 2020 by Clayton Dewey and Johanna Bates

Watch the recording

View the slides

 

We design and build websites because we want people to come to them. There is so much information, so much noise, especially now, that website makers are often pressured to keep users’ attention, no matter what it takes. This often means attempting to “engage” users in ways that we would never dream of doing with a person face-to-face: interrupting them, stalking them around a web page, and using deceptive, manipulative language to get them to remain on a site or take a particular action.

But just because these UX tactics can sometimes garner us a few extra newsletter subscriptions, donations, or purchases, does that mean we should use them?

We want people to read our content, find our helpful resources, donate to our organizations, and discover and purchase our products. In addition, we are often asking our users to share vulnerable info with us, such as credit card info for a donation or a purchase, or to fill out a survey so we can better understand their needs.

Especially in this time of global upheaval, when most people are carrying around extra stress and cognitive load, this contract between site makers and users is particularly delicate.

The Consentful Tech Project used the framework of the Planned Parenthood FRIES definition of consent (Freely-given, Reversible, Informed, Enthusiastic, Specific) to define the concept of consentful tech. We will look at some common UX patterns, including modals, manipulinks, and other dark patterns, and consider how they can erode user focus, attention, and trust. We will share some alternate examples of patterns that are respectful of users. You will leave with a consentful UX framework to bring to your own creative design and development work.

 

About Johanna Bates, Co-Founder & Principal of DevCollaborative

Image

Co-founder of DevCollab, Johanna began her formal tech career at WGBH Boston in 2000. In her front-end development work, she prioritizes web accessibility and mobile-first progressive enhancement. She is a longtime volunteer community leader for NTEN.org, and is co-organizer of the annual DrupalCon North America Nonprofit Summit. You can find her on Twitter @hanabel.

About Clayton Dewey, Technical Product Owner at DevCollaborative

Image

Clayton has been working in nonprofit technology and web development since 2011. He applies his background in linguistics and sociology to ensure websites meet users' needs. Aside from content strategy and user experience design, Clayton also enjoys being a goofy dad and always appreciates a good paraprosdokian.

Essential Sketch skills: From branding to development

October 21, 2020 by Jennifer Smith

Watch the recording

Abstract

The Sketch App provides the power, flexibility, and speed needed to intuitively create functional, high-resolution, interactive prototypes that can be sent directly to development and include valuable specifications and assets.

This live demonstration of Sketch includes a typical workflow, from design to development, along with multiple tips and tricks that will help design and development teams work together faster and more efficiently.

Consistency in branding is important, in this session you find out how Sketch offers shareable libraries that keep everyone on board with updates and branding elements such as font styles, colors, buttons, and other controls.

 

Full Description

Sketch is a tool that can be shared by both designers and developers to build a final, more cohesive product. With the vast number of plug-ins available, Sketch’s capabilities are hard to match. Whether a UX lead, visual designer, researcher, or developer, or other members of a successful team, you should be familiar with Sketch’s capabilities.

• Understanding pages, artboards, layers and more
• Importance of naming conventions
• Quick tips you can use to rapidly build your UI
• Importing, building, and sharing branding elements in libraries
• Creating and organizing symbols, object and type styles
• Sending assets and specs to development
• Discover how to transition your design to development

 

About Jennifer Smith, Co-founder of American Graphics Institute, Sketch Ambassador for Boston Area

Image

Jennifer's career started when she was one of the first creative directors to push the limits of technology and its integration with design. She has since managed and developed projects for companies such as Adobe, Microsoft, Reebok, Hershey Foods, Hasbro, Nike, and more. Jennifer's expertise lies in interpreting highly technical information and presenting it in a clear and easy-to-understand manner.

In addition to teaching and consulting, Jennifer is also a UX designer that creates educational IOS apps, websites, and apps for Windows devices. She is directly involved in the entire process from brainstorming to research, prototyping, wireframing, testing and final visual design.

Jennifer has written over a twenty books on technology and design, as well as over 100 publications used for curriculum. Her books include: Digital classroom: Adobe Illustrator and Photoshop CC, The Adobe Creative Cloud for Dummies (versions CS thru CC), Adobe Creative Suite Web Premium, Adobe Illustrator Classroom in a Book, and more. Jennifer is the co–founder of American Graphics Institute which has classroom training centers in Boston, New York, Philadelphia.

CSS is Rad

September 9, 2020 by Miriam Suzanne

Watch the recording

Depending who you ask, CSS is either awesome or broken. CSS is not a programming language, unless it is. CSS is too simple and entirely too difficult. CSS is weird – not like other languages, and not like print design either, but trapped in a strange middle ground with unique rules and constraints.

The web is designed to work across platforms, devices, languages, and interfaces – but how can we possibly design for that unknown and always-changing canvas? CSS is designed to be resilient, declarative, accessible, and contextual – with progressive enhancement and graceful degradation built in. We’ll look at practical ways to leverage those aspects of the language in our everyday work. We don’t have to wait years for support in every browser before we use the new features, and we don’t have to duplicate our work for every browser we support. From layouts to variables, support queries, and duplicated properties – we can write resilient and modern CSS that works across the entire web, now and into the future.

 

• Use new features before they are universally supported
• Support more browsers with less work
• Use different fallback methods depending on the circumstances
• Understanding caniuse.com as a guide, rather than a gatekeeper
• Understand the radical vision that makes design on the web so unique… and weird

 

About Miriam

Image

Miriam is a user-experience expert, and a pioneer of modern CSS techniques – W3C Invited Expert on the CSS Working Group, member of the Sass core team, and creator of the popular Susy and True libraries. Miriam is a teacher and open-web advocate for Mozilla Developer, staff writer for CSS-Tricks, co-author of SitePoint’s Jump Start Sass, and internationally known conference speaker. 

Getting Graphic: Reinventing Design with Type on the Web

August 12, 2020 by Jason Pamental

Watch the recording

Presentation slides & resources

Graphic designers have customized layouts and title pages in magazines for decades. But, between the limited technology of the early web, and our race to systematize design once we had sufficiently capable technologies, we’ve missed out on much of what good graphic design has to offer. Now that we’ve designed our systems, polished our patterns, and perfected our pages, it’s finally time to refocus on the specifics. With scaling typographic systems, we can leverage the power of modern CSS and variable fonts to create compelling, unique design variations tailored for the content they render. In this talk, Jason will look at powerful examples of publication design, and explore how many of those concepts can be incorporated in our own work in compelling and sustainable ways.

About Jason

Image

Jason Pamental is a strategist, UX leader, technologist, expert in web typography, and Invited Expert on the W3C Web Fonts Working Group. He writes, speaks, and works with teams and brand owners on how to set type better on digital platforms. He has spoken with organizations like Adobe, Audible, Condé Nast, GoDaddy, IBM—and given presentations and workshops at conferences all over the world. I also publish a newsletter on web typography. Learn more about Jason.

Olivero: The Making of Drupal 9’s New Front-end Theme

July 8, 2020 by Mike Herchel

Watch the recording

Olivero is a modern and fresh theme that is being developed for Drupal 9 core, which aims to be the default front-end theme in Drupal 9.1 (replacing Bartik). This session will go into the nitty-gritty details, smoke-filled backrooms, and conniving creation of this theme.

• Origin and timeline
• Design process overview
• Technical challenges
• Community challenges
• Accessibility challenges
• Current status
• Walkthrough

This session will have a hefty question and answer component, and may be interspersed with occasional humor and memes.

 

About Mike

Image

Mike Herchel is a senior front-end developer that’s been developing with Drupal for over 13 years. He’s passionate about web performance, usability, and accessibility. You can often find him speaking on these subjects at DrupalCamps, DrupalCons, and various other web development conferences. Mike is a primary organizer of Florida DrupalCamp, and is the maintainer of the Quicklink module. Currently, Mike is helping to lead a Drupal core initiative to create a new front-end theme for Drupal 9.