March 18, 2025 Smashing Newsletter: Issue #499
This newsletter issue was sent out to 191,839 subscribers on Tuesday, March 18, 2025.
Editorial
When we think about charts, we often perceive them as a way to visualize data. However, charts usually are more than just that. They have a job to do. They must explain, highlight, point out, invite conclusion — and they must do so with accuracy in mind, avoiding bias and misleading representation.
In this newsletter, we explore practical techniques and resources to design honest, accessible, and accurate data visualization. From accessibility guidelines and reference sheets to Figma kits and how to prevent misleading charts.
And here’s our latest line-up of workshops and conferences we’ve been preparing:
- Smashing Meets CSS (Tue, Apr 1) Free, with Adam Argyle, Julia Miocene and Miriam Suzanne (+ Geoff Graham as your shining host!),
- Design Token and UI Component Architecture Workflow with Nathan Curtis,
- Cognitive Biases 101 Free with Stéphanie Walter,
- Theming Design Systems Workflow with Samantha Gordashko,
- Measure UX + Smart Interface Design Patterns (Bundle) UX with Vitaly Friedman.
Happy designing, everyone — and sending a lot of good vibes and positive thinking your way!
— Vitaly
1. Defense Against Dishonest Charts
Data visualizations aren’t as objective as one might assume. Quite the contrary is true: a chart can be technically correct and misleading at the same time. It can make something good look bad, significant changes can look like nothing, or a decrease can look like an increase.
Flowingdata published a helpful guide that raises awareness for how small changes in the design can skew the message of a chart. Using interactive examples, it explains the anatomy of a chart and how different choices in combining visual encodings and scales lead to different charts that reflect different points of view.
A must-read for anyone designing data visualizations but also for anyone who wants to learn how to spot misleading narratives. (cm)
2. Financial Times Visual Vocabulary
Violins, doughnuts, pies, slopes — data can be visualized in many ways. But which type of chart should you pick? To help you select the optimal visualization type for your data, the Financial Times Visual Journalism Team published the Financial Times Visual Vocabulary.
Available as a poster and website, the visual vocabulary summarizes the characteristics of different types of data relationships and the charts that can be used to tell their stories. The poster is available in English, Spanish, French, German, Japanese, and Chinese. A great starting point for making informed and meaningful data visualizations. (cm)
3. Data Visualization Cheat Sheet
A good chart doesn’t just visualize data. It provides accurate and meaningful insights, and it’s accessible and easy to understand. To help us make the most out of our data visualizations, Lisa Charlotte Muth regularly shares valuable data visualization tips and best practices on the DataWrapper blog.
For easy reference, Anastasiya Kuznetsova and Alex Barakov now distilled Lisa’s guidelines and best practices down into a single Miro Board cheat sheet. It covers everything from color choice and color scale to color blindness and text. A resource you might want to keep close. (cm)
4. Ideas For Better Data Visualization
With applications becoming increasingly data-driven, the need for quality data visualizations is as high as ever. Luckily, getting data visualizations right isn’t rocket science, and sometimes, it takes just a few small tweaks to take a chart to the next level.
Taras Bakusevych shares 20 simple rules you can follow to design better data visualizations. They cover everything from choosing the right chart type to labeling, bringing order to the data, making the right color choices, and ensuring the content is accessible. As easy as the rules are to apply, they’ll make a huge difference for your users. (cm)
5. Upcoming Workshops and Conferences
Heads up! We run online workshops on frontend and UX, 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:
- Design System Planning and Process workflow
with Nathan Curtis. Mar 20–28 - Cognitive Biases 101 free
with Stéphanie Walter. Apr 10 - Theming Design Systems workflow
with Samantha Gordashko. Apr 8–23 - The Secrets of Web Performance dev
with Ryan Townsend. May 7–21 - How To Measure UX and Design Impact UX
with Vitaly Friedman. May 12–20 - Enterprise UX Masterclass UX
with Marko Dugonjić. May 14–21 - Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jun 4–18 - Accessibility for Designers UX
with Stéphanie Walter. Jun 16–24 - Jump to all workshops →
6. Avoid Misrepresenting Data
Cognitive biases and analysis mistakes are the worst enemies of communicating accurate insights from data. So what can we do to avoid them? In his free web book “Avoid Misrepresenting Data,” Matt David explores the biases and common mistakes that people make when analyzing data and how to prevent these costly errors.
The book gets you familiar with different kinds of biases to ensure they won’t affect the interpretation of data. You’ll learn how to provide more nuance to your data, why overall statistics can be misleading, how to accurately interpret trends, and more. Tips for predicting and reviewing outcomes and increasing trust in results are also covered. Happy reading! (cm)
7. Making Data Visualizations Accessible
Accessibility should be at the heart of every product, and it’s not any different for data visualizations. By making your graphs accessible, you not only ensure that everyone can use them but also that they are easier to understand. And that can be crucial to preventing harmful errors, for example, in medical software where a confusing graph could result in a patient receiving the wrong medication.
Developing and designing software for the education sector and having worked in cancer research, Sarah L. Fossheim knows first-hand how accessible data impacts more than just the user. To help us build data visualizations that prevent confusion and misunderstandings, Sarah summarized ten dos and don’ts to keep in mind whenever you’re designing a chart or graph.
For more guidelines and useful tools and resources for making your charts and tables accessible, also be sure to check out Vitaly’s LinkedIn post. (cm)
8. Useful Figma Kits For Charts
We came along with some useful Figma kits to help you tackle the data visualization challenges you might encounter in your work. One of them is Semrush’s Intergalactic Design Systems Charts Library. It includes more than a dozen easy-to-use and fully flexible chart components and also features links to guides and hints about usage for the different charts.
Another handy helper is the Ethr Design System. Focused on reusable components for fintech products, it includes more than 300 responsive components, among them line graphs, area graphs, bar charts, and pie charts. Another Figma kit you might want to check out is the open-source dYdX Design System.
Last but not least, there’s the City of London Data Design Guidelines. The PDF includes guidelines, best practice examples, working processes, and links to tools to help you understand the basic principles of data visualization. Four wonderful resources with lots of inspiration to make your data visualizations more straightforward. (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.