Drop #220 (2023-03-15): 👀 > Ides

Data Hierarchies; Why Color Theory Sucks; Pastel | pppalette

We keep all knives sheathed in today's Drop since we'll need all available hands to pick up some tips on leveling up how we present information to those who consume it, design the context of those information displays, and take a (quick) look at two related tools.

Data Hierarchies

During the first major Twitter implosion

¹

, I did what a bunch of other folks did and headed over to mastodon.social for a bit. Sure, some folks went to other instances, but the Fediverse was a bit harder to grok (at least for me) back in those troubled times, and jumping to one of the biggest ones seemed to make sense at the time

²

. I also created an account on infosec.exchange, since that is — ostensibly — my primary career community, and to claim the handle there

³

.

While that is still primarily a placeholder account

⁴

, the one on vis.social

⁵

is not. I find the community there to be vibrant and diverse, and I learn quite a bit from those who also hang there. While I post more from my mastodon.social account

⁶

, I always have the local timeline of vis.social up in whatever 🐘 client I'm experimenting with.

All that blather was to provide context for something I saw ~two weeks ago that led me to feature what's in this section.

Caroline Carter works as a product and visual designer at Stamen, a data visualization and cartography studio. She specializes in telling compelling stories with data. She's also a graduate of Bowdoin College, so that also makes her a fellow Mainer, at least in spirit.

Her post on “Data Hierarchy Best Practices to Elevate Your Data Visualizations” provides, um, best practices for organizing data to create effective data visualizations. In it, Caroline recommends a hierarchical approach, and starts out strong right from the top:

At its very core, data visualization has two main components: representation and interaction.

Representation (or how data looks) is the process of rendering data on a screen, after analyzing the data, transforming the data, and determining the appropriate method of mapping that data to visuals. Interaction (or how data behaves) involves the dialogue between your data visualization and the users who explore it to uncover insights or data stories. How you organize your information shapes both experiences.

Information hierarchy determines how data is grouped and aggregated. In design, and especially in data visualization, all aspects of a dataset cannot be equally emphasized. In order for any element to stand out, others must fade into the background. Effective data visualization often begins with gaining an understanding of the proper hierarchy (or hierarchies) to surface in your visualization and giving your users an appropriate interface for navigating that hierarchy.

Shen then breaks her thoughts down into four, very accessible, sections:

• Look Beyond the Obvious

• Design From the Data, Not For the Data

• Play With Your Data Hierarchies Through Prototyping

• Inspire User’s Exploration Through Utility and Beauty

and provides solid contextual examples.

Why Color Theory Sucks

In “Color in UI Design: A (Practical) Framework”, Erik Kennedy presents a practical framework for using color in UI design, though I think it has some applications in data visualization land as well; specifically the environment the visualizations are presented in. Rarely does a data visualization live wholly on its own. It's most often on a page/screen with other content. In an application context, ensuring all the effort you've put into that chart or generative work isn't drowned out by the setting it is framed in should be as important of a consideration as the choices you made for the visualization itself.

Erik is self-taught and highly opinionated. I state that so folks who spent a few years learning or focusing on the fundamentals of modern color theory are prepared to be challenged, at least a bit. He doesn't ignore or dismiss the importance of color theory. But, out of the gate, he expresses considerable disdain for the “split complementary palette”, which is a composition technique that you are very familiar with regardless of whether you are a creator or consumer.

Said palette type comprises one color and two colors symmetrically placed around it. This strategy adds more variety than complementary color schemes by including three hues without being too jarring or bold. Using this method, we end up with combinations that include warm and cool hues that are more easily balanced than the complementary color schemes.

Erik argues that “the fundamental skill of coloring interface designs is being able to modify one base color into [many] variations”.

He presents a framework that will:

• Allow you to modify one theme color for basically any purpose in your UI (this is hugely powerful, and, as we’ll see, what apps like facebook are already doing)

• Help you to predict what color changes will look good

• Make color seem less subjective (“subjective” is often a word for “I haven’t figured out how it works” — and it’s a word you hear a ton when folks talk about color)

Erik argues it all boils down to one principle: “darker color variations are made by lowering brightness and increasing saturation. Brighter color variations are made by increasing brightness and lowering saturation”.

It's a short read with plenty of illustrations to support the author's argument. Plus, it complements the article in the first section quite well.

Pastel | pppalette

I'll make this quick, since I gave you quite a bit to pore over today.

Given a choice between a truly native macOS app (i.e., no “Electron” 🗑️) and one accessed via browser, I will always choose the former. While the macOS UX has significantly degraded over time, well-built native apps on macOS just outshine anything shoved in a browser tab.

Pastel is an app for amateur developers, artists, and data visualization folk that lets us build up a library of color palettes to use in our projects. Because it's a native app, it supports fancy inter-operations with other macOS apps (e.g., seamless drag & drop of colors/palettes into/out of the app), and speaks “iCloud”, so you get state sync between systems

⁷

.

It can yank palettes from images, has scads of color pickers, is designed with coders in mind, and has plenty more features you can discover through the app.

Both macOS and lesser operating system users alike can give “pppalette: friendly color palette generator for beautiful colors” a spin, if color palettes are your “thing”. I could hit “r” on that site all day.

FIN

Given the state of current affairs, I think we should change the common tagline of this particular day to “Beware the bank runs of March”. ☮

1. Back in 2017.

2. In retrospect, it most certainly did not; I think I may have a bit more empathy for those only now encountering Mastodon as a result of how confusing my experience was in 2017.

3. I'm pretty protective of “hrbrmstr” on All The Things.

4. It turns out, a local timeline of nothing but “cybersecurity” can be pretty darn depressing.

5. Where I headed after the boy billionaire took over “the bird site”.

6. Honoring the norms of the local timeline on vis.social.

7. That is, when iCloud is actually working.

#pastel #ppalette #designsystem #design #datavis #dataviz #colortheory #colorpalette