#460: Storytelling

Free storytelling masterclass, how to design with product storytelling and storyboarding for designers. Issue #460 • June 11, 2024 • [View in the browser]( [Smashing Newsletter]( Dobra večer Smashing Friends, 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. [SmashingConf New York 2024]( Meet [SmashingConf NY 2024]( all around front-end and UX, on Oct 7–10 in the Big Apple. 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. [The 9 Principles of Better Stories]( Also part of Jeremy’s “Tell Better Stories” project are 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? [Product Storytelling]( 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. [Periodic Table Of Storytelling]( 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) --------------------------------------------------------------- From our sponsor Catch Page Speed Regressions Before They Happen! [SpeedCurve]( “We actually don’t need to log in much. We’ve set up performance budgets and deploy-based testing. We just wait to get alerts and then dive in to fix things.” Track the metrics that matter, including Core Web Vitals. Stay fast. [We’ll show you how](. --------------------------------------------------------------- 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. [Storyboards Help Visualize UX Ideas]( 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. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. 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. [6 storytelling principles to improve your UX]( 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 a 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](. [Strategic Storytelling 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) --------------------------------------------------------------- From our sponsor Welcome To The Ideation Room! [Storyblok]( Your centralized, collaborative, AI-powered hub for effortless content drafting. Bring your ideas to life in Storyblok. [Try the beta now]( --------------------------------------------------------------- 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. [Stories That Work]( 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 →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Useful CSS Tips And Techniques]( - [Presenting UX Research And Design To Stakeholders: The Power Of Persuasion]( - [Scaling Success: Key Insights And Practical Takeaways]( - [Ice Cream Ahead (June 2024 Wallpapers Edition)]( --------------------------------------------------------------- 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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](