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.