June 11, 2024 Smashing Newsletter: Issue #460
This newsletter issue was sent out to 201,565 subscribers on Tuesday, June 11, 2024.
Editorial
Great products start with a great story. In the past, most promotional campaigns focused entirely on speed and new features. Today, it’s hard to avoid campaigns that try to weave a powerful storyline in the way how they explain, entice, and excite their customers.
But how do we design with storytelling? Do we actually follow along storytelling arcs in our user flows? How would it fit with the paradigm of interface design and UX? This newsletter is just about that — how to design with storytelling, with a few helpful resources and toolkits to get started.
If you’d like to dive deeper into UX and design, we have a few Smashing events coming up soon:
- Smashing Meets Web Design, a free community event,
- Smashing Hour with Miriam Suzanne, on everything CSS,
- Designing For Complex UIs, with Vitaly Friedman,
- Inclusive Design Patterns In 2025 (free 3.5h-workshop),
- SmashingConfs 2024 in Freiburg, Antwerp and NY.
So, how do we tell a truly impactful story? Well, scroll down below and dive in!
— Vitaly
1. Storytelling Masterclass
How can we tell stories that matter, delight, offer value, and maybe even change the world? To help us communicate more effectively, Jeremy Connell-Waite, Communications Designer at IBM, condensed everything he learned about storytelling over the last twenty years into a set of nine principles, with video tutorials, scientific research, cheat sheets, inspirational keynotes, and reading lists.
Also part of Jeremy’s “Tell Better Stories” project is his One Pagers, hand-written and illustrated summaries of things he learned. The One Pagers explore everything from Walt Disney’s Imagineers to the Japanese principle Ikigai and what we can learn from how Ernest Hemingway or Taylor Swift tell stories. Beautiful masterpieces, jam-packed with storytelling wisdom.
2. Product Storytelling
From the fairy tales and scary stories we listened to as kids to exchanging gossip with friends and getting fully immersed in a novel or movie, everyone loves a good story. And this inherent love for stories that we all carry inside us is a powerful tool designers can leverage to build better products. So, what does it take to successfully merge storytelling and product design?
In her post “Five Steps To Design Your Product With Powerful Storytelling,” Chiara Aliotta introduces you to five principles of digital storytelling that lead to a successful experience. Chiara not only taps into the different elements of storytelling but also explains in detail how she used the approach to design the experience and interface for the Smart Interface Design Patterns landing page.
Marli Mesibov’s post “How To Use Storytelling In UX” is another wonderful article on the topic. In it, Marli takes a real-life example of an app she helped to build and explains five steps you can follow to build a story into your user experience and truly connect with your users. (cm)
3. Periodic Table Of Storytelling
Like the world around us consists of atoms and molecules, stories can be broken down into their smallest constituent parts. The Periodic Table Of Storytelling gets us familiar with these basic building blocks: “tropes”, recurring ideas that can be combined into story molecules.
For the periodic table, James Harris organizes tropes into categories covering everything from structure, setting, laws, and plots to heroes, villains, and character modifiers. Combining them into simple story molecules allows you to make up pretty much every story, whether it’s Star Wars, Ghostbusters, or Dilbert — or your very own, of course. A fun, lighthearted take on the underlying mechanisms of storytelling. (cm)
4. Storyboarding
Storyboards help UX professionals tell a customer’s story. They aren’t as detailed as journey maps but are often used to describe a fragment of the user journey to establish context and common ground for team members working on a specific problem. Rachel Krause wrote a practical step-by-step guide on how to create a storyboard to visualize UX ideas, empathize with your users, and prioritize your team’s efforts.
You don’t need to be an artist to create a UX design storyboard; simple sketches and stick figures will do. Lucian Popovici’s mix-and-match illustration library for Figma makes creating a quick storyboard even simpler. With just a few clicks, it lets you pick and change the character’s poses, expressions, and gestures, adjust the background, and create close-up scenes to visualize your scenario.
Another handy storyboarding resource comes from IBM: They published a toolkit with everything you need to know in order to run a quick storyboarding workshop with your team. (cm)
5. Upcoming Workshops
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Designing For Complex UI Masterclass ux
with Vitaly Friedman. June 20 – July 2 - Advanced Modern CSS Masterclass dev
with Manuel Matuzović. June 24 – July 8 - Design Patterns For AI Interfaces ux
with Vitaly Friedman. July 9–23 - Fast and Budget-Friendly Research and Testing workflow
with Paul Boag. Jul 11–25 - Behavioral Design Workshop ux
with Susan Weinschenk. Aug 22 – Sept 5 - Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10 - Jump to all workshops →
6. Storytelling Principles
Applying storytelling techniques to a design creates a memorable user experience and helps you get buy-in from stakeholders. Dan Nassler shares a quick overview of six storytelling principles you can make use of to tell and sell your story.
The overview is a great reminder that the main character of your story is always your user or customer — you are the sidekick, enabling them to achieve a goal, even if it’s only about creating joy and pleasure. Dan also dives deeper into why conflict is crucial for every story, how to structure a story, and which role emotions play. Quick tips you can apply to your UX design right away. (cm)
7. Strategic Storytelling For Designers
Presenting ideas in front of stakeholders is an essential skill for any designer. To help you master the challenge and present your design ideas in a way that engages even the busiest or most skeptical audience, Saielle Montgomery put together a strategic storytelling toolkit for designers.
The toolkit consists of seven guidelines you can follow to align user research presentations for decision-making. You’ll learn to set the right expectations, develop a straightforward, engaging narrative for your stakeholders, and set the stage for feedback. Practical tips for sharpening your presentation skills and a great reminder that the work of design begins long before the first pixel is decided. (cm)
8. Storytelling Resources
In his career as a TV journalist, Stephen Rawling has researched, pitched, and told thousands of stories. And he found something you could describe as the holy grail of storytelling: The insight why some stories work and others don’t.
To help us all become better storytellers, he distilled his 30 years of storytelling experience into a series of storytelling guides and resources.
The material includes short video tutorials and downloadable worksheets to help you tackle different stages of the creative process. Whether you’re trying to work out why you need new ideas, want to make a promising idea stronger, or spot problems with an idea before they happen, Stephen’s resources are a treasure chest of storytelling wisdom. (cm)
9. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.