December 20, 2022 Smashing Newsletter: Issue #384
This newsletter issue was sent out to 215,368 subscribers on Tuesday, December 20, 2022.
Editorial
With data visualization, we often first think about how to choose the right type of charts and diagrams, but in client work, it usually goes a little bit further than that. We need to think about the right fonts to choose for the visualization, color contrast, accessibility, color management and documentation.
In this newsletter, we explore data visualization from different perspectives: looking at design systems and how they document data visualization, general guidelines around color and fonts, to some examples and publications of how to get it right.
We’ve also just announced the first speakers for SmashingConf Front-End @ SF 2023 with Josh W. Comeau, Shaundai Person, Jake Archibald joining in, and for SmashingConf Freiburg 2023 with Miriam Suzanne, Christine Vallaure and Elliot Jay Stocks. Hurry up: there are only a few last-minute early birds left!
As the year is nearing its end, we sincerely hope that you will find a bit of time to enjoy some calm, relaxing moments away from the shopping noise, with your friends and your loved ones. Sending you a lot of positive energy, good vibes, optimism, hope, and peace for the rest of this year and for the year ahead of us.
Stay smashing and safe, everyone!
— Vitaly (@vitalyf)
1. Understanding Color Management
If someone asked you to build a coffee table with legs specified as a height of 50, what do you think that would mean? 50 kilometers? Feet? Inches? Millimeters? Centimeters? The coffee table example comes from Marc Edwards from the Bjango blog and is the perfect analogy to understand color management better.
Color values are not enough to describe a color; you need a color value and a description of the space it exists in to be able to rely on what you’re seeing when choosing colors.
In the 4-part article series about color management, Marc introduces you to everything you need to know about color management. Part 1 and part 2 explain the basics of color management, part 3 details the settings required for screen design in popular design tools, and part 4 proposes a framework for measuring how well color management is supported in screen design tools. A comprehensive overview. (cm)
2. Color Contrast Score Ranges
A punchy headline requires a different color contrast than a button border. So far, nothing new. But which contrast should you choose for which UI element? Matt D. Smith defines five contrast score ranges for specific UI elements to help you find the best contrast for every use case.
As Matt suggests, a contrast range of 12–21 works best for light mode body text and 7–12 for dark mode body text. 4.5+ is a good choice for supporting text, while 3.0+ works well for icons and colorful primary CTAs. Surprisingly, even a failing score of 1.2–1.5 can have its use case — for subtle UI elements like secondary CTA background colors, dividers, and disabled text, for example. The contrast score ranges are also available as a free Figma plugin and a Figma file. Handy! (cm)
3. Data Visualization Guidelines
Data is pretty much useless if we can’t make sense of it. Luckily, data visualization helps us tell the full story. But how to best tackle a data visualization project? We came across some handy guidelines that have got your back.
Shopify’s design system Polaris maps out a set of data viz guidelines for how to approach the task and defines five core traits for what makes your visualizations successful. Do’s and don’ts deliver practical examples.
The If Design System shines a light on color in data visualizations. If you want to dive deeper into different types of visualization, Culture Amp has got you covered with some great further reading resources.
Last but not least, the Carbon Design System features demos and ready-to-use code snippets for React, Angular, Vue, and Vanilla. Inspiration for your next data visualization project is guaranteed. (cm)
4. Fonts In Data Charts
There are millions of typefaces out there. But which one to use in your charts and tables? Lisa Charlotte Muth takes a closer look at how to choose and adjust typefaces for data visualization.
As Lisa recommends, when in doubt, set your text in a font that is easy to read: sans-serif, neither overly narrow nor wide, regular instead of bold or thin, sentence case, in a size that is big enough to read, and in black or almost black. In her blog post, Lisa illustrates all these options with examples and shows how ignoring the advice can set your visualization apart from others. (cm)
5. Upcoming SmashingConfs And Workshops
Every year we bring bright and kind people who care about the web to share what they’ve learned. For 2023, we can’t wait to welcome you to SmashingConf Freiburg 2023 (Sep 4–6, 2023) with adventures into design systems, accessibility, CSS/JS and interface design patterns. Get your early-bird ticket!
We’re also very excited about our very first SmashingConf Front-End @ SF 2023 (May 23–26, 2023), entirely focused on cutting-edge front-end. From accessibility and advanced CSS to JavaScript gems and web performance. With a dash of Tailwind, Next.js and TypeScript. Get your early-bird ticket!
And as always, here’s an overview of our upcoming online workshops:
- Successful Design Systems Workflow
with Brad Frost. Jan 10–24 - Designing For Complex UI Masterclass UX
with Vitaly Friedman. Jan 19 – Feb 2 - New Front-End Adventures, 2023 Edition DEV
with Vitaly Friedman. Feb 8–22 - Universal Principles of Typography Masterclass UX
with Elliot Jay Stocks. Mar 2–16 - Interface Design Patterns UX Training UX
with Vitaly Friedman. Mar 10 – Apr 7 - Smart Interface Design Patterns 9h Video Course UX
9h-video + UX training on interface design with Vitaly Friedman - Jump to all workshops →
6. Designing Accessible Data Visualizations
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.
Sarah L. Fossheim develops and designs software for the education sector and previously worked in cancer research. She knows first-hand how accessible data impacts more than just the user. In medical software, for example, an inaccessible or confusing graph could lead to critical mistakes, such as giving the wrong medication to a patient.
To help us build better and accessible 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 a graph. A must-read. (cm)
7. Data Visualization Journal
Can we understand blood test results without numbers? How did Soviet artists design data? And how can you visualize the network of the dragons from Game of Thrones? Data visualization is an exciting topic, and you probably won’t find a resource that dives as deep into it as Nightingale.
Nightingale is the journal of the Data Visualization Society, a non-profit organization that supports the growth, refinement, and expansion of data visualization knowledge regardless of expertise level. Run by a team of passionate people, Nightingale publishes articles that cover all aspects of data visualization — from personal stories to exploratory research to interviews with leaders in the community, data ethics, and best practices. A treasure chest for everyone interested in data visualization. (cm)
8. The Good Country Index
What does each country on Earth contribute to the common good of humanity? And what does it take away, relative to its size? The Good Country Index attempts to answer these questions. But not only that. It is also a great example of what a user-friendly data visualization that involves a huge data set can look like.
The Good Country Index looks at each country’s external impact on the world by comparing the global contribution in seven fields of interest: science & technology, culture, international peace & security, world order, planet & climate, prosperity & equality, and health & wellbeing. You can toggle them on and off to see how they influence the ranking, and if you want to dive deeper into each of the topics, the chart reveals more details on click. A well-thought-out design that shines with simplicity. (cm)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.