Smashing Magazine - #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:

So, how do we tell a truly impactful story? Well, scroll down below and dive in!


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!

“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 Events
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:

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!

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
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

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#459: UX Motion and Motion Design Systems

Tuesday, June 4, 2024

Motion design systems, UX motion choreography, motion audits and how to document motion. Issue #459 • June 4, 2024 • View in the browser Smashing Newsletter Kalí méra Smashing Friends, How do we design

#458: Design Systems

Monday, June 3, 2024

Design systems for healthcare, car interfaces, insurance companies, digital publications and universities. Issue #458 • May 28, 2024 • View in the browser Smashing Newsletter Dobré odpoledne Smashing

#457: Figma Organization

Tuesday, May 21, 2024

Cleaner Figma files, Figma workspace template, organization template, multi-brand Figma kit. Issue #457 • May 21, 2024 • View in the browser Smashing Newsletter Shikamoo Smashing Friends, How do you

#456: How to Name Things

Tuesday, May 14, 2024

How to name design tokens, colors, UI components, HTML classes and variables. Issue #456 • May 14, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, Naming is hard. As designers

#455: CSS

Tuesday, May 7, 2024

CSS Masonry Layout, Self-Modifying CSS Variables and Hanging Punctuation Issue #455 • May 7, 2024 • View in the browser Smashing Newsletter Dobryi vechir Smashing Friends, When I first encountered CSS

You Might Also Like

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Athena Calderone and Young Huh’s Savviest Social Media Advice

Tuesday, July 2, 2024

View in your browser | Update your preferences ADPro As we head into the July 4th holiday, we're revisiting some of our most popular business tips. Among our faves: This conversation on social

#463: Data Visualization

Tuesday, July 2, 2024

Data visualization in design systems, visual data visualization vocabulary, decision trees, color scales and accessible charts. Issue #463 • July 2, 2024 • View in the browser Smashing Newsletter Hello

Accessibility Weekly #403: In Detail - 1.4.11 Non-Text Contrast

Monday, July 1, 2024

June 24, 2024 • Issue #403 View this issue online or browse the full issue archive. Featured: In detail: 1.4.11 Non-Text Contrast (User Interface Components) "The Web Content Accessibility

Spotlight: Kate Syuma

Sunday, June 30, 2024

Issue 201: A conversation on scaling at Miro, Growthmates, and advising ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Inside Balsamiq: our new approach to internal product training

Thursday, June 27, 2024

Streamlining our team's product knowledge ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏