Smashing Magazine - #384: Color and Data Visualization
Color management, data visualization guidelines, typography for data charts, color contrast and accessible data visualizations. Issue #384 • December 20, 2022 •View in the browser 💨
Gō-an Smashing Friends,
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.
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)
From our sponsor
Build And Ship Complete Apps In Just A Few Hours
A visual interface that allows developers to easily build and ship complete web and mobile apps in hours: meet AWS Amplify Studio. Bridge the gap between design, development, and product with centralized workflows that mitigate costly rework. Start for free today.
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!
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)
From our sponsor
Tech Professional? Help The Software Industry Thrive By Joining The Developers Alliance
When it comes to app ecosystem issues, software professionals know best. The Developers Alliance represents 70k developers and app publishers across the globe. Together they advocate for government policies that support the industry's growth. Join the network.
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)
Behavioral science, user interviews, product design methods, UX research and design system ROI calculator. Issue #383 • December 13, 2022 • View in the browser 💨 Smashing Newsletter Goeije 'n avend
With advent calendars on accessibility, CSS/JS, UX and Web Performance. Issue #382 • December 6, 2022 • View in the browser 💨 Smashing Newsletter Gamarjoba Smashing Friends, It's December! So
With focus styles, WCAG 2.2, accessible PDFs, accessible color palettes and how to document and test accessibility. Issue #379 • November 15, 2022 • View in the browser 💨 Smashing Newsletter Hello
See if your brand checks all the boxes... Branding, branding, branding. Like, PR, it's an oft-misunderstood area of business building. Many people think a logo, some colors, and a font constitute
The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 1 2024 Self-Modifying Variables: the inherit() Workaround
Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 2 View in browser Welcome to Issue 164! Standing out in today's competitive market is hard, really hard. But side projects can help
View in your browser | Update your preferences ADPro Image may contain: People, Person, Accessories, Bag, Handbag, Food, Meal, Adult, Clothing, Hat, Glasses, Fun, and Party For this week's edition
The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 30 2024 Detect JavaScript Support in CSS ryanmulligan.dev
The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 29 2024 Detect JavaScript Support in CSS ryanmulligan.dev
April 29, 2024 • Issue #394 View this issue online or browse the full issue archive. Featured: Images as the first thing in a button or link "An accessibility problem I encounter regularly is
The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 26 2024 A primer on the cascade and specificity piccalil.
