Design 4 Drupal Boston 2019

Jim Birch

Search engines rank content and pages for query terms they feel the user will get the most value out of. The basis of the modern search engine is to deliver the user the best possible experience, whether that is providing links to websites, or providing answers to questions directly in search.

Search Engine Optimization is the practice of identifying and maximizing the number of visitors to a website by working to appear on the results page of a search engine for a certain query.

User Experience, UX, is focused on identifying, converting and helping users that visit your site based on the goals of the site.

UX and SEO are sibling user focused disciplines whose goals are to connect people with the correct content. SEO professionals will concentrate on how the user finds the content in search engine result pages, while User Experience professionals will concentrate on how the content completes the journey once the user has arrived at the content.

This presentation will review the SEO basics that every design should have, and some techniques for viewing our websites from the intent of the user, and how we can design around them.

https://design4drupal.org/sessions/site-buildingfront-end/seo-and-ux-go-hand-hand

Marc Rust

How to get inspiration, and motivation to become and integral part of your culture.
Efficient strategy, technology and brand experience are at the center of how business works today.
• What happens when design and dev do not work well together?
• Examples of afterthought front-end.
• Reasons for “is this a deal-breaker if we don’t make it in?”
• How good design and the experience matters.

https://design4drupal.org/sessions/uivisual-design/design-inspire-motivate-and-win

Jennifer Smith

UX Design Overview
Overview of UX design workflow
Understanding tasks and scenarios
Creating a persona matrix

Brainstorming features that align with user needs
Aligning features with tasks/scenarios

Sketching navigation and basic information architecture
Organizing content

Sketching your screens
Use design fundamentals to build successful screens.
Building the layout for your app or website

Building a prototype
Creating low-fidelity and high-fidelity prototypes
Narrowing the scope of the project
Evolving the design

Review of Balsamiq mock-up tools
Understanding what makes a great wireframe
Creating an interactive wireframe

Documentation, validation and user testing
Testing your designs.
Communicating your design with your development team
Final visual design & redlines

https://design4drupal.org/sessions/uivisual-design/ux-design-principles

Andrew Olson

Themes can become a beast. Over time, features get added and new patterns get introduced. Tight deadlines may also cause you to make inefficient decisions with the desire to one day go back and refactor. There are also times you will inherit a project built by another team and need to understand how to add on and reduce duplication. How do you size up a theme to ensure you are efficient and not growing out of proportion?

In this session we will explore tools and methodologies that provide insight to keep your theme manageable over time. We also introduce concepts to establish metrics within your theme to keep a pulse on how it grows over time.

Attendees will learn how to:
* Analyze your theme’s structure and size.
* Use CSS analysis tools Project Wallace, Parker, and Analyze CSS.
* Refactor and take action based on information from these tools.
* Place metrics within your theme.

https://design4drupal.org/sessions/theming/audit-your-theme

Chris O'Donnell

The world’s greatest Agile process can’t save a project that was a bad idea from the start. In this session, we will review the principles of Human Centered Design, and how applying these principles well before you even install Drupal 8 core can dramatically improve project outcomes.

Session attendees will gain an understanding of Human Centered Design, and how its principles lead to better front and back end design of a Drupal website.

Presenters are Chris O'Donnell, Digital Strategist at Promet Source, and Mindy League, Creative Director at Promet Source.

This session is appropriate for all experience levels.

https://design4drupal.org/sessions/uxproject-strategy/great-drupal-websites-are-made-first-line-code-written

Katherine Cornelius
DJ Min
Justin Medas

Building reusable components into a Drupal project saves time during design and development and makes it easier for the content team to manage the site later on. But once you’ve streamlined those processes, how do you carry that savings over to an entirely different project? By using a co-owned strategy, UX, design, and development process, We’ll show you how to come up with unique, strategic solutions throughout the project lifecycle with real-world examples.

https://design4drupal.org/sessions/case-studypanel/5-awesome-ways-streamline-your-process-create-unique-site-designs

Christina Costello

We finally have a truly 2-dimensional layout system native to CSS, but many teams are not yet using it in production. This session will provide a beginner's overview of how and when to use grid, aimed at growing your confidence with this powerful tool.

Attendees will gain familiarity with grid's important concepts, such as: implicit vs explicit grids, lines vs tracks, and inline vs block alignment. We'll tackle the fr unit, minmax(), repeat(), auto-fill vs auto-fit, and more.

We'll also discuss when to use grid instead of flexbox, browser support and fallbacks, and what will soon be possible with subgrid.

Attendees should be comfortable with intermediate CSS.

https://design4drupal.org/sessions/theming/introduction-css-grid

Mauricio Dinarte

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.
Learning Objectives & Outcomes:

By the end of the session, attendees will understand:

* What is a node?
* What is a content type?
* What are fields and why are they useful?
* What is a block and what can I do with it?
* What is a view?
* How are users and permissions managed?
* What is a module and its purpose?
* What is a theme and how can it change the look and feel of my website?

https://design4drupal.org/sessions/site-buildingfront-end/understanding-drupal

Benjamin Melançon

Drupal is better than ever, but whether it is more successful is questionable. A pincer threatens Drupal. One side, Drupal's own power and complexity, discourages new users and contributors. The other, proprietary platforms, increasingly squeeze out custom web development through sheer economies of scale. Retreating into Drupal's new fortress, the enterprise, leaves many of us on the outside and it doesn't escape the pincer, which will continue until there's nowhere left to hide.

Adding a new economic model, that of software as a service, can make Drupal the best choice for quick starts and for nimble organizations. This, in turn, can drive contributions and innovation. Instead of waiting for proprietary SaaS companies to slowly add features and come eat our lunch, we can swoop in and eat theirs. At the same time, a well-designed Drupal SaaS provides many more people with the traditional entryway to web development and to Drupal (namely, hacking around with HTML and clicking together functionality).

Adhering to the principles of Free/Libre Software when our platforms will make the Drupal software and community better. Organizing SaaS-providing businesses as platform cooperatives will put people in control of software that affects our lives, which, in an age of flying killer robots, may be almost as important as the health and happiness of the Drupal community.

Come hear and talk about how Drupal LibreSaaS like Open Social, Roomify, RoundEarth, Open Church, Drutopia, and the platform you start can save us all!

Learning Objectives & Outcomes:

- What leads to long-term success in a software project?

- What Libre SaaS efforts exist in Drupal?

- Identify some areas where making the leap from services to product may make sense for you, your sector, and your business.

- You judge: Can Drupal as Software as a Service (SaaS) make it a designer's and themer's delight and make it fun and a strong, growing community again?

Prerequsites:

- Any level of experience with Drupal.

- A desire to take more control of your life and work.

https://design4drupal.org/sessions/site-buildingfront-end/how-drupal-service-can-save-our-livelihoods-and-our-lives

Brian Perry

Hot JAMS(tack) Reunion Tour Edition - in addition to a project overview, this encore presentation will cover what has changed in the React and Decoupled Drupal landscape since the original version of this app was created (spoiler alert: tons of things have changed.)

Learn from one developer's experience building a music discovery app with Drupal 8 and React, soundtracked by the hottest jams of 2017 (Remember that year? Yikes!)

On an annual basis, The Album of the Year Project follows a painstaking Process to compile all of the best of the year lists into one massive google spreadsheet that crowns a definitive musical critical consensus (DAMN.) While an intriguing dataset is practically the American Dream, how could a curious developer take the Plunge and go from a Google Spreadsheet to a JavaScript application while gaining A Deeper Understanding of Decoupled Drupal and React along the way?


Your awesome mixtape will include:

* A Common Sense approach to choosing a decoupled architecture - progressively decoupled vs. fully decoupled and why a fully decoupled approach was most appropriate for this project.

* CTRL your API with the right flavor of Drupal - Contenta vs. Reservoir, vs no distribution, and why Reservoir was chosen for this project.

* Migrate to the rescue - getting data from a Google spreadsheet and the Spotify API into Drupal without resorting to getting Drunk.

* 4:44 worth of React basics (actual time may vary)

Quickly bootstrapping a project with Create React App

* Components, Props and State - oh my!

* Go Fetch! - getting data from JSON API into your app.

* CSS in JS (aka Nothing Feels Natural) - How I avoided a Crack-Up and learned to love styled components.

* Take Me Apart and deploy me back together - a look at the JAMstack and efficient ways to build and deploy your application.

* The rest of The OOZ - the things I conveniently avoided, the things I’d do differently next time around, and why I threw away the first version of this app and started over.

Last but not least, we'll wrap up with some Melodrama and ask the question 'did this project really need Drupal'?

By the time the mixtape fades out, you'll have a clearer picture of what it takes to go from compelling dataset to decoupled app, and may even be itching to join the Party and do something similar yourself. You’ll also know beyond a shadow of a doubt that critics really, really loved Kendrick Lamar's latest album.

This talk is for people who are are interested in decoupled Drupal but unsure where to start, people who find it helpful to learn from real world decoupled projects, or even just people taking a Slowdive into decoupled Drupal concepts who want to avoid some poor developer's rookie mistakes. Experienced React developers are unlikely to learn something new about React here, but will better understand how Drupal could be a viable option to serve their front end work.

Repository: https://github.com/backlineint/aoty-visualizations

Full slides available here: http://brianperryinteractive.com/aoty-slides/

https://design4drupal.org/sessions/case-studypanel/hot-jamstack-building-music-discovery-app-drupal-and-react

Rick Hood

This session will give you an understanding of the key building blocks in React, including components, props and state. You will come away from the session thinking "oh that's what it is" with lots of resources on where to go to learn further, with links and reviews of courses you can do in a weekend.

https://design4drupal.org/sessions/site-buildingfront-end/introduction-react

Jen Kramer

For the first time in the history of the web, CSS is graced with tools for laying out web pages without hacks. Flexbox and Grid provide methods for creating responsive websites with designs not previously possible. CSS Calc and CSS Custom Properties give us a first chance to use math and variables within CSS itself, without requiring compiling. Together, these four new CSS modules work together to revolutionize CSS in modern evergreen browsers.

https://design4drupal.org/sessions/theming/responsive-design-20

Ian Mullinder

This session will introduce you to Backstop.JS and how it will help you combat visual regression during development and after your site has launched. We will cover how to setup Backstop.JS on your project and write some example scenarios (tests). We will also cover ways to integrate Backstop.JS in to your development workflow.

https://design4drupal.org/sessions/theming/prevent-visual-regression-backstopjs

Chris Strahl

Design is the foundation of user experience and one of the most significant inputs into the front-end development process. Recently, organizations have begun to build systems to help them manage their design and code as a set of reusable patterns.

Using applications like Sketch, InVision, or in custom software, these are loosely-termed “Design Systems” and they’re being adopted rapidly by designers and developers alike.

Design Systems are a way of creating a system for managing design patterns within an organization. Too often, these are considered part of another technology product - simply a system that serves a single application. **Instead, we need to think of these systems as a product that serves other products**. They are distinct from a CMS or a native application, but they serve those as an organizational tools that brings consistency, scalability, and maintainability to an application.

Exploring this new product concept is something that aids the ability of software **like Drupal to scale within the organization.** Additionally, it helps foster collaboration between designers and developers by creating a shared language and expectations for how experiences flow from user needs.

https://design4drupal.org/sessions/uivisual-design/design-systems-product-serves-products

Margo Romanowski

Great designs don't ensure great execution and integration. Whether you are accomplishing a comprehensive site redesign/rebrand, consolidation exercise, platform conversion, site acquisition, or other project, the organizational tactics are going to be of paramount importance. This session is geared towards those managing development teams and the work involved with executing design in Drupal, and will leave with ideas on how to organize their projects and teams to reach greater efficiency.

Design systems have emerged as a way to sync design across an organization and execution, while giving greater flexibility to implement innovative and consistent user experiences across all properties within an organization. However, the design system isn't just a living style guide that is shared on a wiki or on a website. This session will explore the emerging trend of design systems and their organizational challenges that ScrumMasters, Product Managers, PMO office, and senior leadership face when managing and implementing a design system that works well with Drupal (and beyond).

Treating the design system as a product allows for an increased understanding and organizational efficiency that will keep the development teams moving forward and continually improving. We will review management of organizational portfolio roadmap planning, day-to-day team needs and challenges, and workflow across Design / UX / Front End / Drupal teams. Team roles and management options will be covered, with a focus on agile and hybrid organizational hierarchies.

https://design4drupal.org/sessions/uivisual-design/design-systems-are-coming-your-team-ready

Stephen Cross

Development workflows, continuous integration and automated testing are a hot topics, and should be. As teams rush to implement and improve their DevOps strategies, one thing hasn’t changed, testing is an afterthought. Effective automated testing begins with effective User Acceptance Testing (UAT). This session will explore a proven strategy to implement Behat into your development workflow.

Topics covered:

* What is User Acceptance Testing
* The positive impact simple UAT has on the development process and team
* Steps to implement UAT
* Getting started with Behat
* Effective use of Behat
* Tips for using Behat on a Drupal project

https://design4drupal.org/sessions/site-buildingfront-end/user-acceptance-testing-automated-testing

Jacob Rockowitz

This presentation will introduce designers to the Webform module for Drupal 8. We will explore how designers can leverage the Webform module to create visual appealing forms with engaging user experiences. We will discuss the three big digital concerns for designers: visual design, user experience, and information architecture.

Topics include…
* Introduction to the Webform module
* Common use cases
* Creating style-guides
* Styling forms and elements
* Reusable templates

https://design4drupal.org/sessions/site-buildingfront-end/webforms-designers

Donna Bungard

High demands, high anxiety clients are a reality of agency life. Their stresses, deadlines, and sometimes lack of understanding of the technology can create tension and take a project (or the client relationship) off track. Together we'll discuss common challenges and the strategies that satisfy the clients need while insulating your team; allowing them to be more effective. These strategies will include how to:

- Herding Cats: wrangle in out of control expectations

- Stop the Hissing: promote positive, team-focused communication styles

- Playing Well Together: encouraging multi-player team involvement without sidetracking the dev team

- Detaching the Claws from the Ceiling: being a calming voice while holding your ground and mitigating scope creep

- Grooming: performing a retrospective at important milestones that produce actionable improvements moving forward


Walk away with people-focused tactics that will help you improve your relationships with both the client and inside of your team.

https://design4drupal.org/sessions/uxproject-strategy/getting-angry-wet-cat-purr-turning-unhealthy-client-relationship

Marcus Iannozzi

Cornell’s internal web development and CRM teams had a great idea: find ways to leverage their Drupal and Salesforce expertise to connect systems and streamline processes across the university. They wanted to begin with a Student Opportunity Marketplace to help students navigate a complex array of study abroad and other learning experiences managed within numerous departments and across platforms, some of which lived outside of the institution (TerraDotta). The platform would not only promote student opportunities but also funnel students into the unique application process for each program, driven by a dynamic application builder in Salesforce.

Suspecting there was a way to tightly integrate Drupal 8 and Salesforce but unclear how to architect a solution, Message Agency worked with Cornell’s team to help architect the solution across Drupal and Salesforce, working with the university’s internal and external partners.

This case study explores how we architected a streamlined user experience from a complex process, balancing the constraints of accessibility requirements, multiple legacy data platforms, distributed systems of record and data silos, and high profile stakeholders. By leveraging the strongest traits of each platform, the Opportunity Marketplace delivers a multifaceted solution that uses Drupal 8 as the front end, Salesforce as a backend, and other technologies as data feeds for the information displayed to end users.

https://design4drupal.org/sessions/case-studypanel/architecting-ambitious-student-experience-drupal-8-cornells-opportunity

Spencer Ward

There are few words more confusing than "design." It means many different things in many different contexts. Designing an Android app is wildly different from designing a building, which is wildly different from designing a database. What does this word "design" actually mean?

Moreover, why should anyone care about design? Most development teams could create an iOS app without a design team, but few design teams could create an iOS app without a development team. Even when they're paired together, a designer's obsession with their "perfect vision" can feel like a burden to a good developer.

How much design does a project need? Should designers be able to hold a project back? Can a project on a budget skimp on design? Is it enough to just make an attractive, accessible UI?

What should be designed? Give an expert designer enough time and they can create almost anything. Even within a single project, there can be many different paths to "good design." Which path is the right one?

All of these questions can be answered by a universal and intuitive view of design. Design can be seen as creative thought directed at a purpose. In that sense, design encompasses every action and every idea, whether we think about it or not. Planning a party? That's a design problem. Writing a book? Design problem. Thinking? Design problem.

However, when we approach any of those problems, we can't expect our purpose to come out of nowhere. Often, the most obvious ideas of purpose can be naive or superficial. Purpose can't be found by luck. Purpose has to be honed and developed, just like every other step of the process.

What can we learn from this? As with anything creative, purpose can be designed. By applying a thoughtful, holistic design process to the very intent of a project, rather than simply the interface or the icons, the entire project can be refocused around cohesive goals to deliver the highest impact possible.

This talk will aim to guide the audience to form their own understanding of the design process, recognize how they can apply this newfound lesson in parts of their life they would have never expected, and learn how to design their intent so that everything they do has potential to be powerful.

https://design4drupal.org/sessions/uxproject-strategy/designing-your-purpose

Lindsey Gemmill

This talk explores common myths between design and development, and we're here to bust them!

Is this you?

- A designer wondering what happens to your beloved mockups after handed off to the development team

- A developer having nightmares about the intricacies of design and functionalities seeming way off base of budget and scope

- A project manager watching from the sidelines wondering how this process can be improved

The answer to smooth project workflow has been right in front of us the whole time...collaboration! With the current state of agile workflows, it's important to remember that full team involvement from start to finish will eliminate many unknowns in projects.

We'll walk through the ins and outs of :

- Collaborative Commitment
- Design Workflow
- Development Workflow
- Setting Expectations / Project Planning
- Winning!

When we align design and development as one collaborative unit projects can really take flight. So, can we all just get along? Of course we can. Join me in exploring the common myths and working through improvements together.

https://design4drupal.org/sessions/uxproject-strategy/cant-we-all-just-get-along-design-development-collaboration

Christina Inge

Customer journey mapping melds data with humanity to create better UX that is grounded in data while treating users as real people with a history. In this hands-on session, we'll learn the fundamentals of building a customer journey map. We'll leverage data to build our maps, creating a defensible map of user engagements before, during, and after their visit to a site. We'll also review the fundamentals of empathy-driven design.

https://design4drupal.org/sessions/uxproject-strategy/customer-journey-mapping-building-sites-make-perfect-sense-users

Jim Birch

Drupal has a vast suite of tools for image processing and configuration in its base. Using core tools, developers can place the correctly sized image exactly where it needs to be.

But for designers, did you know you can use tools inside of Drupal to process and create derivatives of the originally uploaded image?

We can ensure the focus of the image is maintained across different sizes and aspect ratios. We can add filters and effects, complex watermarks and image layering, and even add article titles to social media images.

This session will review how we can harness the power of contributed modules like Focal point, Crop, ImageMagick® Image Effects, Textimage, and more to implement designs.

Attendees will come away from the session knowing the potential of designing for and implementing images in Drupal.

https://design4drupal.org/sessions/uivisual-design/designing-images-drupal

Miriam Suzanne

The web is more than a technology, it was created with a mission statement. Design and code trends also come with attached philosophies, often unstated. As designers and developers, it’s important that we think clearly about the underlying implications of our products and our processes. We’ll explore various approaches and lessons from Miriam’s experience with creative process and audience interaction in theater, writing, art, and software. How do we balance creativity, expertise, and expectations? What does it really mean to be user friendly?

We will explore:

How the medium influences what we make and how we work
Thinking about HTML & CSS as extensions of the web mission statement
Thinking about “open” and “invisible” definitions of user friendly design
Understanding (and seeking-out) user-feedback, without sacrificing vision
The importance of integrating designers and developmentTalk with clients, stakeholders, and co-workers about the choices we make

https://design4drupal.org/sessions/keynote/user-unfriendly-practical-guide-losing-control

Miriam Suzanne

CSS has come a long way since the browser wars of the late 90s. What used to be a struggle, is now often a breeze (see box-shadow or border-radius). But the last 2 years have pushed CSS into entirely new territory: with DOM-aware variables and calculations that can drive your design, without all the invasive Javascript.

In this session we'll discuss:

Introduction to Custom Properties & Calc()
Understanding Cascade vs Inheritance
Practical examples and use-cases for data-infused design
Integrating with CSS Grids to build on-the-fly layouts

https://design4drupal.org/sessions/site-buildingfront-end/dynamic-css-live-code

Salem Ghoweri

How do you build and manage a design system's frontend architecture that is both scalable and maintainable?

The typical tools and techniques for approaching design systems often break down when trying to scale across multiple sites, integrate with dynamically injected content, or keep the system up to date. Many of these technical boobytraps aren't discovered till late in development, but can be avoided through progressively decoupled components.

This session is most appropriate for frontend developers & architects or teams building and maintaining a design system. You will learn:

Why and how to decouple a design system from Pattern Lab and Drupal
Preventing component fragmentation in Drupal through the use of web components
Pattern Lab improvements and techniques to reduce rework and ease Twig-based component integration
How distributing a design system via NPM (yes, NPM) can help teams overcome technical hurdles with Composer

https://design4drupal.org/sessions/site-buildingfront-end/frontend-architecture-scalable-design-systems

DJ Kadamus

This will be a beginner talk to give users real-life advice on how to design and build a site with SEO on the mind.

You don't have to be super focused on the perfect SEO structure on each page and perfect meta information. Instead, you should be focused on making your website 'search-friendly' for external users, and creating a positive UX for on-site users.

This talk will cover the following:
- A super brief overview of SEO best practices
- Taking a step back and reviewing SEO in tandem with UX and design; including tips for designers on how to not forget SEO when wireframing and designing pages
- Reviewing how engineers can build and theme Drupal sites without sacrificing SEO
- A review of the Metatags module and what you should be using it for
- Website examples of good and bad SEO

An attendee should leave this session thinking "I knew some of that, if not most, but now I know how to put it into practice." SEO is way more simple than marketers make it out to be, and I want to make sure that all Drupal designers and builders feel confident that their work will be easily found on Google (or Bing if that's your flavor)!

https://design4drupal.org/sessions/site-buildingfront-end/drupal-and-seo-designing-and-building-seo-mind

Becky Cierpich

These questions are universal to every designer at all levels:
- How can we build designs that get the most out of the development budget?
- What’s the best way to communicate functionality and value to clients?
- How can we ensure design consistency across all pages and devices?

The answers can all be found in this straightforward approach: Component Driven Design with Rain.

In this session, see real-world examples and get practical advice to apply this approach to your next project. You'll learn:

Why design with components?
Learn the history of this approach, how it benefits the entire project team, and how to explain it to your clients in a language they can understand.

How do we design with components?
Peek inside our toolbox and see how we shortcut the design and development process with Rain’s component and symbol libraries that connect with a standard Drupal 8 installation profile.

How do we plan functionality?
Hear how our agile design process invites early collaboration between strategy, design, development, and stakeholders.

How do we ensure consistency?
From the designer’s documentation of styles to the developer’s living style guide, learn best practices and efficiency tips for integrating a component library like Rain into your next web development project.

How does a component-based approach play out over the years?
Learn the real-world impact of this methodology on a website and its content editors over the lifetime of the site.

https://design4drupal.org/sessions/uxproject-strategy/rain-new-tool-streamline-design-reusable-components

Joe Galluccio
Colin Panetta

Mass.gov is Massachusetts’ web front door. It’s one, single large Drupal site that is shared by over a hundred state organizations. At Mass.gov we want to continually measure and improve the performance of our content, and one of the ways we do that is by getting feedback from the public about specific pages to the authors who are best equipped to make improvements on those pages.

At this session we'll tell you how we designed and built a page-based feedback component on Mass.gov that gets 30,000 feedback messages a month and makes them available to over 500 authors that manage content. We’ll talk about how we designed the interface that authors use to review feedback within Drupal, and we’ll end with some of the lessons we learned along the way.

https://design4drupal.org/sessions/case-studypanel/collecting-and-using-feedback-massgov

Dwayne McDaniel

Don't you wish there was a way you could give each and every user of your module's admin experience a quick and easy way to learn what each setting really did and why it was there? Good news Drupal 8 users, this is actually in core. The Tour Module has been in core since the first release of Drupal 8 and is awaiting you to leverage it.

In this session we will explore how to first a tour and then implement it for your site, letting you better communicate with your users. Leveraging easy to read and write YML and with the power of Drush, it is very fast to iterate and test changes on our sites. The tools for making Drupal more user friendly has never been in a better state, so let's learn how to use this feature to make it even more appealing, especially to new users!

This session is intended for intermediate to advanced developers and site builders alike, no matter if you are building your own modules or just using Core.

Walk away having learned:

How to find and enable existing Tours
How to structure your Tour files for better collaboration
Best practices for writing Tour content
Basics of Drupal 8 routing system and Configuration Management best practices

https://design4drupal.org/sessions/site-buildingfront-end/making-tour-leveraging-tour-module-better-user-experience

J.D. Flynn

I'm JD and I have mental illness. I'm also not alone. Every year, roughly 20% of the US adult population deals with some form of mental illness, however that number is MUCH higher in the tech community.

In this talk I tell my story of how I came to terms with the fact that I have mental illnesses, and how I came to realize that I'm not alone. Within my story, I tell how I came to realize I needed help, how I found help, what treatments worked for me, and how I came to be active in OSMI (Open Sourcing Mental Illness) with a mission of Erasing the Stigma that surrounds mental illness.

Attendees will walk away from this session with knowledge of resources that are available, statistics that have been collected, and hopefully a new view on mental illness that helps them Erase the Stigma from their own point of view.

https://design4drupal.org/sessions/uxproject-strategy/dealing-mental-illness-or-how-i-learned-dislike-myself-less

Shane Thomas

This is the session to attend if you are considering developing a Gatsby website using Drupal as a backend content source. We will cover static-site generation with Gatsby, compare and contrast different content sources (or backends), and even show a demo of live preview capabilities between Gatsby & Drupal that are coming soon.

This session is intended for beginners looking for a high level overview of the design/development process. We will live demo a working Gatsby / Drupal site while providing an overview of:

- How to structure your data and fields on your Drupal website

- How to pull content into Gatsby from your Drupal website using GraphQL

- How to design and structure dynamic pages and lists of pages in Gatsby

- How content changes can be live previewed using Gatsby Cloud

Having some basic knowledge of Javascript / React will help when looking over code examples, but is not required.

https://design4drupal.org/sessions/site-buildingfront-end/gatsby-drupal-sitting-tree

Wes Ruvalcaba

Is the Drupal 8's new Layout Builder UI the holy grail of editor user experience? We've created a new version of Lullabot.com using Drupal 8. A huge goal for this project is to put our Head of Marketing, a non-technical user, in total control of the site.

Drupal 8 was just rolling out Layout Builder in core as we started the project, and the timing was perfect to use Layout Builder as the basis for our newest solution.

We had some successes and learned some lessons. We'll talk about:

Our final Layout Builder editorial experience on Lullabot.com.

Modifications we made to core Layout builder, including configurable css and a way to add titles to layout sections.

- Block editor user experience improvements we made.

- What makes Layout Builder different than other approaches enabling editors to manage the UI.

- Whether you should Layout Builder all the things.

https://design4drupal.org/sessions/site-buildingfront-end/layout-builder-real-world

Jen Kramer

The thrill of watching your idea come to life is hard to beat. So it’s no wonder that most entrepreneurs and founders start with an idea and move right to code. But if you want success – and the even bigger thrill of people BUYING your product – you need to tamp down that ‘if you build it, they will come’ enthusiasm and do some intentional planning, research and validation. In this talk, we’ll cover the essential blueprint to ensure your product’s success, all before writing any code.

https://design4drupal.org/sessions/uxproject-strategy/better-luck-product-building-idea-people

Deborah Levinson

Introduction: impostor syndrome – uncertainty at a personal level, and its parallel to uncertainty at a business level
What do I mean by “uncertainty”?
the state where we cannot tell whether the decision we’re about to make is the right one from any number of perspectives – ethically, financially, personally, and so on
Uncertainty can hold things up, can result in endless meetings, can result in the wrong decisions being made because people feel under pressure to come up with the right answer all the time, on demand
Uncertainty leads us to make decisions out of fear
We’ve been talking about uncertainty as a negative. But it doesn’t have to be.
Getting comfortable with uncertainty
Uncertainty is a fact of life, a condition of reality
What if we think of uncertainty in design and development not as a terrifying state, but as a hopeful one? One where if we learn to embrace it as a fact of life, and a fact of every project, we can instead build plans for resolving uncertainty? For rapidly identifying it, owning it as a fact, for coming up with a way to address it as best we can, and lather/rinse/repeat as needed, even if it means coming back to the same problem again later?
This kind of iteration is fundamental to user research. If you aren’t asking questions, developing theories, testing solutions, and learning from them, you aren’t doing your job. You cannot be an effective UX designer without bringing people in all their messiness into the mix.
Types of uncertainty
uncertainty about behavior
uncertainty about business model
uncertainty about IA
uncertainty about codebase/module/DB structure to enable feature set and longevity
uncertainty about user maintainability
Designers: getting comfortable with uncertainty makes you a better designer. Embrace it — learn from it — bring others in to get them excited about problem-solving
User research – insert project & other examples here (I have some in mind)
Uncertainty in development: agile vs. waterfall
(Planning to interview some developers, some of them Drupal folks, about how uncertainty factors into their work)
How is our discomfort with uncertainty failing us?
Uncertainty involves a willingness to learn, but we aren’t always good at prioritizing what we learn from it.
Where is the software industry failing to account for uncertainty now, and how is it screwing us over?
Using software to work around a people problem
Accessibility
Prioritizing profits over people and ethics
Where do we go from here? Well, resolving uncertainty is all about asking questions ...
Develop plans for resolving issues (plans for each type of uncertainty, UX & dev)
Get used to saying “I don’t know” and “I’m going to have to look that up” and “Let’s ask our users”
Managers: understand that this isn’t always about needing more time for a project, but it is about understanding that projects encounter issues that need to be resolved on a rolling or iterative basis
It’s okay to doubt yourself. Well, it’s not great, but it’s not unusual. But don’t doubt your ability to tackle a problem, with help if needed.

https://design4drupal.org/sessions/keynote/uncertainty-principles

John Picozzi
Kathleen Beck

Oomph has been using Paragraphs to delivery “flexible content” areas and content layout for their clients. However, with the release of Drupal 8.7 and the addition of Layout Builder. Oomph has shifted from Paragraphs to Layout Builder. This talk will split time between the advantages of Layout Builder over paragraphs and how you can successfully implement layout builder on your next project.

- Some of the topics we will cover are
- How to setup Layout Builder for static and flexible content templates.
- How to setup components (blocks) to be added to your Layout.
- How to add custom user selected configuration to your components (blocks) as classes.
- Useful contribute modules to use with Layout Builder.
- Future Roadmap of Layout Builder

https://design4drupal.org/sessions/site-buildingfront-end/layout-builder-paragraphs-killer

Evan Lovely

You've undoubtably heard of Pattern Lab, attended a few sessions, read some blog posts, or perhaps have a starter theme of your own. There's more you can learn and best practices around how to set it up.
- Learn about the specific tooling needed to integrate Pattern Lab and Drupal for ease of use and maintenance
- Learn about strategies and file structures that make it easier to work with the Twig templates.
- Stop asking how to get Drupal to consume Pattern Lab, and start asking how to get Drupal to consume reusable components that have a helpful demonstration and documentation.
- Review many strategies that make it easier, not harder to demo your files and work with dummy data.

https://design4drupal.org/sessions/uivisual-design/pattern-lab-definitive-how

Andrew Olson

“One size fits all” does not apply when it comes to themes. Automatically selecting a theme based on your last project can be dangerous. Rolling your own custom theme from scratch every time can be extremely inefficient. Using a contributed theme can be frustrating as you override defaults and fight opinionated styles. Any of these approaches can exhaust even the most determined front end developer. Would standardizing a theme alleviate the pain?

In this session we will frame an approach to select a theme for your organization. Attendees will learn how to:
* Establish criteria to select a standard theme.
* Decide when to break away from the standard theme.
* Create a theme plan.
* Theme and sub-theme large scale projects.
* Onboard additional developers.

Follow Along to View a Sample Theme Plan

Download Sample Theme Plan as PDF
http://bit.ly/31Vnb3D

View Slides for "Themes: Standardize Without Compromise"
http://bit.ly/2Nmwo1J

https://design4drupal.org/sessions/theming/themes-standardize-without-compromise

Aaron Manire

Progressive Web Apps are all the rage these days and we're just beginning to see the emergence of the offline web. Key to building PWAs, service workers enable features like offline fallbacks and notifications.

This session will give you enough to get started building your own service worker-enabled pages. We'll review the service worker lifecycle, Fetch and Cache APIs, and some common gotchas.

Some experience with ES6 JavaScript will be helpful, but is not required for this session.

Slide deck

https://amanire.com/isw/

https://design4drupal.org/sessions/site-buildingfront-end/intro-service-workers

Jennifer Smith

5 minutes-Introduction
Sketch is a tool-Do your research, sketch your ideas, do preliminary tests on structure before building UI in Sketch
5 minutes-High level overview of Sketch
Understanding pages, artboards, layers and more.
Importance of naming conventions
10 minutes-Building UI in Sketch
Quick tips you can use to rapidly build your UI
5 minutes-Building and using shareable Sketch libraries
Importing, building, and sharing branding elements in libraries
10 minutes-Creating and organizing symbols, object and type styles
There could potentially be 100’s of elements that you need to manage, find out how to categorize your type styles, object styles, symbols and more. By organizing your content, you can find what you need quickly and easily.
5 minutes-Sending assets and specs to development
Discover how to transition your design to development so that what you expect is what you get
5 Minutes-Conclusion

https://design4drupal.org/sessions/uivisual-design/essential-sketch-skills-branding-development

Jessica Ito

As a designer, there’s nothing worse than an inexperienced client ruining their beautiful, well-thought-out site in a matter of minutes.

Many clients have nothing to go on but gut instinct and subjectivity (that’s why they hire us). It’s our job to give site owners and stakeholders the tools and knowledge required to evaluate whether what we’re doing is what they need, and to prepare them to be successful site builders.

In this session, I will walk through real examples of practical ways you can equip your client with the skills they need throughout the implementation process and beyond. This talk is geared toward UX design leads who interact frequently with their clients.


What will be covered:
How to get your client thinking in terms of content types & components
How to help your client understand the implications of their visual design choices
Tools you can create to help your client be a successful site builder
How to run content entry training in a way that is meaningful to your client

https://design4drupal.org/sessions/uxproject-strategy/so-another-client-ruined-their-website-heres-why-its-your-fault

Abby Kingman

Like a lot of people, you have come to realize that accessibility is an important part of everyone's job if you work on the web. Whether you're in design, development, QA, or account management, you're interested in being part of the solution, right? So now you're ready to move it up a notch, and looking for ideas to help you get it done. In this talk, I'll talk about some tools and actions that I've used in the past year to help me to improve my accessibility game. Participants will walk away with a punch list of actionable ideas, many of which can be implemented on a day-to-day basis without disrupting your workflow. Before you know it, you'll be making a difference every day! It's a long and winding road, so pack a lunch and enjoy the journey!

https://design4drupal.org/sessions/site-buildingfront-end/accessibility-newbie-ninja-10-steps

Andrew Brown

One of the main criticisms about Drupal has always been that entering content is confusing and difficult for non-technical users. And with today’s modern, flexible websites that criticism is even more glaring.

Why don’t other CMSs have this negative feedback when it comes to administering content?

In this talk we’ll:
- Look at how the web is evolving from a content standpoint
- Review how some of the more popular Content Management Systems allow users to add content to their sites
- Discuss the different options for Drupal content entry (including the new Layout Builder)
- Propose some solutions for the future of Drupal’s content admin

https://design4drupal.org/sessions/site-buildingfront-end/beg-borrow-and-steal-what-can-we-learn-about-content-admin-other

Michael Miles

All professionals deal with challenging, high-stress and/or high-pressure situations. Everyone has their limits, and too much stress or pressure can lead to "burnout", a state of physical and emotional exhaustion. Burnout takes its toll not only on the individual but also co-workers, team, friends, and family. By working together, individuals and managers can avoid burnout.

This session explores the dangers of burnout and the negative impact it has on teams and individuals. We will review the three main types of burnout: Frenetic, Under-Challenged, and Worn-Out. Attendees will walk away with the ability to identify, treat, and prevent burnout in themselves and others.

https://design4drupal.org/sessions/uxproject-strategy/preventing-burnout

Aubrey Sambor

There's been a lot of discussion abut CSS-in-JS and all the benefits it gives. It might have its place in Javascript applications, but what if you want to reuse your CSS across multiple websites? I'll talk about why plain old CSS and preprocessors are still relevant and why you'd still want to use them on your project.

In this talk, I'll go over:

* Why CSS-in-JS isn't the answer for every scenario

* A basic introduction to BEM and how to use it in your design system or website

* Why preprocessors such as Sass still have a place in the front-end development world

* What makes the 'cascade' in Cascading Style Sheets so useful

You will come away from this session knowing why CSS and preprocessors are still relevant today and how you can implement more modern CSS practices to your design system or website.

This session assumes a basic knowledge of CSS and basic understanding of modern front-end development practices.

https://design4drupal.org/sessions/theming/putting-c-back-css-modern-techniques-todays-website

Cheryl Little

Designers of any level can appreciate these challenges:
- In a limited amount of design time, how can we make the most significant improvements to usability?
- How do we determine what areas to focus on when extensive user research is not available?
- How can we guide clients in looking beyond their own preferences to considering their users’ experiences?

Introducing a tool that equips a team to face those challenges efficiently: The UX Audit.

In this session, learn how to conduct an objective design analysis and apply it in the real world, with practical advice for leveraging the findings and presenting them to stakeholders. You'll learn:

What is a UX audit?
Learn the history of this approach, how it benefits the project team, and how to explain it to clients in a language they can understand.

What are the components of a UX audit?
We’ll discuss at a high-level the standards-based methodology, the 9 categories of interaction, and the questions we use to interrogate the quality of the current experience.

How is a UX audit conducted?
Hear the nuts and bolts of determining what pages to review, what functionality to focus on to maximize findings, and how the audit is scored.

What if I only have time for a mini UX audit?
We provide ideas on how to get results even if time is of the essence or a tight budget is a key factor.

How do I use the findings to guide design?
The results of a UX Audit are the perfect way to improve an existing website with the users in mind - here’s how to read the results to uncover the most impactful gaps in the current experience.

How do I present the findings constructively?
Talking to clients about design can be tricky! But because usability standards are objective, conversations within this framework can be more clinical and constructive, with the focus on users and on best practices rather than on personal opinions.

https://design4drupal.org/sessions/uxproject-strategy/one-usability-step-time-improve-your-website-ux-audit

Nam Ho

Design systems are the new rage, but much like responsive web 10 years ago, it's a concept that is still hard to conceptualize or understand. With that being said, how do you even build / implement a design system, let alone manage projects that involve a design system?

In this session we'll cover:
- WTF is a Design System?
- What components make up a Design System
- How is a Design System used
- Benefits of a Design System
- Who should use a Design System

A simple methodology on how to plan, build, and implement a Design System; soup to nuts!
- Discovery process
- Project Planning
- Build / Implement
- Maintenance / Scaling

Value to Audience:
- Basic understanding of a Design System
- How a Design System aligns Designers / Developers and expedites a site build
- A simple methodology for planning, implementing, building a Design System

Outline:
- Introduction
- WTF is a Design System
- PM digital projects before
- PM methodology for digital projects using DS
- Wrap-up / Review

https://design4drupal.org/sessions/uxproject-strategy/its-match-project-mgmt-design-systems-swiperight

Cara Guappone
Julie Michaud

We’ve all been there. After many months of detailed documentation, painstaking work, late nights, and a weekend launch date - the website has finally been delivered and a very specific “fear” sets in. What will the client do to this poor site? How long will it look how it was designed? When will they add an iframe to the homepage?

We build websites on CMS platforms so that clients can edit and add content, so why are we so afraid to let them? We’ve spent months discussing customer needs and our front-end usability, but have we done our due diligence planning for the back-end authoring experience?

Handing control over to non-designers and non-developers is a huge responsibility. In this session our clients are the users. We’ll talk through how we can apply UX thinking to the content authoring experience to create usable systems for our clients. Attendees will walk away with three specific guidelines that they can leverage within the backend interface to optimize the authoring experience of their own projects.

https://design4drupal.org/sessions/uxproject-strategy/three-ux-guidelines-designing-better-backend

Jacob Morin

https://design4drupal.org/sessions/site-buildingfront-end/designing-app-drupal-and-react-native