April 28th, 2021
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
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
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
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.
March 24, 2021
UX Mistakes Made in 2020 and How to Fix Them
March 24, 2021 by Kim Lai
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
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.
February 24, 2021
Bridging the design-development gap with Webflow and Drupal
February 24, 2021 by Susan MacPhee
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
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.
January 13, 2021
Design for Developers
January 13, 2021 by Ruth Leopold
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.
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.
December 2, 2020
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
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.
November 11, 2020, 12:00pm ET
November 11, 2020 by Clayton Dewey and Johanna Bates
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
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
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.
October 21, 2020 12:00pm ET
Essential Sketch skills: From branding to development
October 21, 2020 by Jennifer Smith
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.
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
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.
September 9, 2020
CSS is Rad
September 9, 2020 by Miriam Suzanne
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
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.
August 12, 2020
Getting Graphic: Reinventing Design with Type on the Web
August 12, 2020 by Jason Pamental
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.
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.
July 8, 2020
Olivero: The Making of Drupal 9’s New Front-end Theme
July 8, 2020 by Mike Herchel
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
This session will have a hefty question and answer component, and may be interspersed with occasional humor and memes.
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.