The products we design today must connect with customers across different screen sizes, contexts, and even voice or chat interfaces. As such, we create emotional expressiveness in our products not only through visual design and language choices, but also through design details such as how interface elements move, or the way they sound.

In a dynamic 60-minute presentation recorded live at An Event Apart Orlando 2018, Val Head shows how to harness the design details from different media to build overarching themes—themes that persist across all screen sizes and user and interface contexts, creating a bigger emotional impact and connection with your audience.

You’ll learn how to use every tool at your disposal, including audio and animation, to create more expressive products that feel cohesive across all of today’s diverse media and social contexts.

Val Head is a web animation expert, author, and Design Evangelist at Adobe. She’s the author of Designing Interface Animations, published by Rosenfeld Media, and teaches CSS Animation on LinkedIn Learning.

Enjoy all the videos in An Event Apart’s library! There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

When it comes to graphical effects, CSS has come a long way in the last few years with the introduction of CSS filters and blend modes. Yet compared to the effects available in editors like Photoshop, CSS still lags a long way behind. SVG, on the other hand, comes with a set of filter primitives that enable you to recreate Photoshop-grade effects in the browser, using just a few lines of code.

In a detail-packed talk at this month’s An Event Apart Boston conference, Sara Soueidan showed us how to do just that. Sara’s first-ever AEA appearance was a tip-filled crash course on SVG filters: why they’re awesome, how they work, and how to use them to create a dazzling range of inspiring and powerful special effects.

While the syntax and attributes of these filters may have seemed intimidating at first, Sara’s natural teaching style helped the designers and developers at AEA quickly grasp how they work—leaving us with plenty of great ideas on how to push the boundaries of what’s possible in our websites.

If you missed it…

While nothing can replace watching Sara in action, these articles can help those who missed her session begin coming to terms with the magical creative possibilities of SVG on today’s web:

• SVG Filters 101, an introduction to SVG filters—how to create them and use them.
• SVG Filter Effects: Outline Text with <feMorphology>
• SVG Filter Effects: Poster Image Effect with <feComponentTransfer
• SVG Filter Effects: Duotone Images with <feComponentTransfer
• SVG Filter Effects: Conforming Text to Surface Texture
• SVG Filter Effects: Creating Texture with <feTurbulence>, did you know SVG can generate and create texture?

Learn more

For more about Sara, check her AEA bio and this nifty interview from a few months ago.

And if you wish you hadn’t missed SVG Filters: The Crash Course, the good news is, you have two more chances to see it: at An Event Apart DC, July 29–31, and An Event Apart San Francisco, December 9–11.

In addition to Sara, both shows feature 16 more industry-leading speakers. Each show is three education-packed days of design, code, and content for UX and front-end specialists. You’ll come away inspired, and ready to get to work.

Don’t miss out!

Tell us a little about yourself and what you’ve been doing recently.

I’ve been working in the field of web and application design since 1995, but more recently I’ve been drawn to work in service and product design. I’ve got a lovely collection of titles and business cards—remember those?—which include Webmaster, Director of Communications, UX Director, Founder, and Vice President.

Over the last few months, I’ve been training designers to become better facilitators based on material from my latest book, Meeting Design. I’m very interested in continuing to learn about and explore how we normalize design methods and quality of work for different sized teams and different kinds of organizations. This includes things like emerging practices in design operations and strategies for building agreement on what it means to do great work under the real-world constraints designers face every day.

Common constraints I’ve seen are misunderstandings around what design can/cannot/is supposed to do, confusion about where accountability lies for decision making, and the prioritization, and occasional false correlation, of velocity over direction and clarity—faster doesn’t mean better. Real insights about people are hard earned and our digital behaviors are constantly evolving. Shipping more code more often doesn’t get you ahead of that.

What are some tools you find indispensable to your work?

My number one tool is a whiteboard, or a piece of paper and a pencil. There is not a problem or idea that cannot be more clearly understood by spending a little time sketching it out alone or together. Everything from simple use cases to complex UI choices can be quickly illustrated, discussed, and addressed by visualizing things in a rough fashion. Even the most talented visual designers in the world do some of their best thinking through sketching.

Most of the rest of my work involves talking to people, listening, and writing things down, so I’d be dead in the water without good ways of managing text. I’m a huge fan of Bear Notes for iOS, and use it several times a day for capturing and then easily finding all the cool things I learn from the people I work for and with. I particularly dig how it syncs across devices.

Finally, what’s new and coming up with you?

I’m thrilled to announce that I’ve recently joined the United States Digital Services (USDS) team. I’m going to start by working on digital services and products that serve America’s veterans, working with the Digital Services team at the Veterans Administration (DSVA). If you’ve ever been frustrated dealing with a health insurance claim to get the care you need, just imagine layering on the complexity associated with government processes and policies. I’m excited to contribute to the application of great design and user experience in support of streamlining and innovating services for veterans who have been of great service to American citizens.

See Kevin share his hard-won insights in “What is Design Ops, and Why Do I Care?” at An Event Apart DC (July 29-31, 2019). Don’t miss your chance to see Kevin and sixteen other top-notch speakers!

By now, ’most every in-house team has some form of design system initiative underway. Yet many designers and developers on those teams still struggle to make the system really take root in their organization. Working together, designers and developers create wonderful, reusable components, tools, guidelines, and documentation. But if those elements don’t reflect the reality of how the organization builds its products, all their effort is for naught.

Having spent years creating, evangelizing, and teaching design systems and corporate integration of same, Brad Frost is here to help. In this 60-minute presentation from An Event Apart Orlando 2018, he shares strategies and methods to ensure that your design system stands the test of time. You’ll learn how to keep your system and the products it serves in sync, and you’ll understand how to maintain and evolve your design system to give your users get the best possible experience.

Brad Frost is a web designer, speaker, writer, and consultant located in beautiful Pittsburgh, PA. He’s passionate about creating web experiences that look and function beautifully on a never-ending stream of connected devices, and loves helping organizations do the same. He’s the author of Atomic Design, and has also helped create several tools and resources for web designers, including This Is Responsive, Pattern Lab, and Styleguides.io.

Enjoy all the videos in An Event Apart’s library! There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.

Design systems are hot right now, and for good reason. They support a modular approach to building a product, promote organizational unity, and ensure stability via reusable code snippets and utility styles. They make prototyping a breeze, and provide a common language for both designers and developers. But sometimes design systems are underutilized within organizations. Why is that, when they’re so darn useful?

In this 60-minute presentation from An Event Apart Orlando 2018, Una Kravets draws on years of experience to explore what makes design systems successful, analyze real examples of success and failure, and show how to make sure your design system has the building blocks it needs to grow into a successful product.

Una Kravets is a Developer Advocate at Google. She’s also a technical writer, and has written for A List Apart, Smashing Magazine, and Sitepoint. Una co-hosts the Toolsday podcast, started both the Washington DC and Austin Sass Meetups, and is involved in the open source community as a design advocate and the maintainer of the CSSgram project.

Enjoy all the videos in An Event Apart’s library! There are over 40 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.