Dear Smashing Friends,

It’s another exciting week here at Smashing! This time, the SmashingConf is taking place in the Netherlands — in Antwerp, to be exact. As always, it’s such a great pleasure meeting the most friendliest attendees who all share their experiences and learn from each other. We’re sure that it’s a time that certainly won’t be easy to forget!

Oliver Schöndorfer talking about the invisible power of UI typography.

The SmashingConf venue is the magnificent Bourla Theatre.

In this newsletter, we dive right into the complex world of data visualization: We explore how to design and build better dashboard UIs, how to design better charts, and how to make smarter decisions around data visualization.

Stay creative and see you around!

— Iris Lješnjanin (Senior Editor)

1. 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, FT Visual Vocabulary summarizes the characteristics of nine different types of data relationships and the charts that can be used to tell their stories. The poster is available in English, Japanese, traditional Chinese, and simplified Chinese. A useful starting point for making informed and meaningful data visualizations. (cm)

2. Dashboard Design Patterns

When designing a dashboard, you want it to present complex data sets at a glance. But what does effective dashboard design look like? How do you find the balance between displaying everything important and ensuring the dashboard is easy to use without overwhelming the user?

The interdisciplinary research lab VisHub at the University of Edinburgh published a set of dashboard design patterns to support the design and creative exploration of dashboard design. It dives deeper into every aspect of dashboards — from components and meta information to visual representation, interaction, page layout, and color. A cheatsheet summarizes all the patterns on one page. (cm)

From our sponsor

Monitor Site Speed And Core Web Vitals

Optimize web performance to improve user experience and rank higher in Google. Get set up in minutes!

3. How To Design A Dashboard

Another handy companion on all your dashboard design adventures is Matt David’s free web book How to Design a Dashboard. It takes you through the complete process of defining, prototyping, building, and deploying a dashboard that supports decision-making.

In the book, Matt explores which metrics to monitor and how to arrange your visualizations to maximize understanding. Common pitfalls of deploying dashboards are also covered, just like tips for scaling your dashboards and improving usability and performance based on feedback from your audience. A comprehensive guide to dashboard design, no matter if you’re about to design your first dashboard or plan to enhance an existing one. (cm)

4. Upcoming Workshops and Conferences

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.

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:

• Typography Masterclass UX
  with Elliot Jay Stocks. Oct 16–30
• Strategizing Products and Customer Experiences UX
  with Debbie Levitt. Oct 18–26
• Design KPIs Masterclass UX
  with Vitaly Friedman. Oct 31 – Nov 8
• Accessibility for Designers UX
  with Stéphanie Walter. Nov 6–15
• Smart Interface Design Patterns Video Course UX
  9h-video + Live UX Training with Vitaly Friedman
• Jump to all workshops →

5. User Testing Data Visualizations

Do you test your data visualizations with real users before deploying them? The data, design, and analytics consulting firm 3iap argues that even the tiniest design elements can unexpectedly impact users’ mental models and cause confusion. To prevent your graphs and charts from being misinterpreted, they share five simple questions you can ask users to validate your data visualizations.

The questions help you determine if the visualization communicates what you think it does, ensure that users understand the conclusions, and check if it nudges them toward a specific course of action.

No worries, you don’t have to test with many users to gain valuable insights. As 3iap points out, the answers of only a handful of participants can help you better relate to your audience and, ultimately, make your work more understandable and impactful. (cm)

From our sponsor

Master Composable Web Architectures

Dive into O’Reilly’s new report by Stefan Baumgartner, author of “TypeScript in 50 Lessons” and explore frontend composability, serverless backends & modular design. Available for free, courtesy of Storyblok, the beloved CMS committed to providing resources that empower you. Download the O’Reilly Report today.

6. Preventing Bias And Mistakes

As objective as data might be, there’s a human factor that is easily overseen when it comes to crafting visualizations that accurately reflect it: bias and misunderstandings. Having worked with students and postdocs on thousands of data visualizations over the years, Claus O. Wilke, Professor of Integrative Biology, knows from experience that the same issues arise over and over when it comes to visualizing data.

In his book Fundamentals of Data Visualization, he collected his accumulated knowledge from these interactions to help everyone create clear, attractive, and convincing data visualizations. You can read the complete manuscript for free on the author’s website.

If you want to dive deeper into biases and the mistakes that people often make when analyzing data, Matt David’s free web book Avoid Misrepresenting Data is another fantastic read. It provides guidance on how to avoid costly mistakes, explaining cognitive biases, analysis mistakes, and how to accurately interpret trends and predict and review outcomes. (cm)

7. React Data Visualization Framework

If you’re working with React and want to visualize data, the data visualization framework Semiotic is worth taking a closer look at. Created by Elijah Meeks, it offers several frame types to deploy a wide variety of charts.

Semiotic covers frames for XY data (i.e., classical line charts and scatterplots), frames for categorical data (think bar charts, violin plots, and parallel coordinates), and frames for topological and network data, including flow diagrams, network visualization, and hierarchical views. Interactive examples and guides teach you more about the framework’s flexibility and power. A handy little helper. (cm)

From our sponsor

The World Of Composable Web Architecture Comes Together At Netlify Compose 2023

Developers at businesses of all sizes are turning to composable web architecture for unmatched agility, speed, and efficiency. Compose 2023 gathers a diverse ecosystem of technology decision-makers, developers, engineers and more, to shape the path towards a modern, composable future of the web. Join in person or virtually!

8. News From The Smashing Library 📚

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?

• Understanding Privacy by Heather Burns
• Touch Design for Mobile Interfaces by Steven Hoober
• Image Optimization by Addy Osmani
• Check out all books →

… and we’re currently working on a new book: Success At Scale, shipping in fall. Pre-order your copy or browse the complete library.

9. Recent Smashing Articles

• A High-Level Overview Of Large Language Model Concepts, Use Cases, And Tools
• Gatsby Headaches: Working With Media (Part 1)
• Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 2)
• The Problem With WordPress Is Positioning, Not Plugins
• Read more on Smashing Magazine →

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