So on Wednesday of this week I held a webinar. The topic of the day was on using tools like Sketch and Adobe XD to design data visualization.
As with most things I present that are new I end up getting the following question.
Okay, you sold me, how do I start?
I gave my usual response of just download the free Adobe XD and start playing. But I know that’s enough. So I’ve decided to start showing not just why but how I design charts in Adobe XD.
I use something I call Pixel Math. It’s not a tool or a plugin, really it’s just a process I made up to increase the control I have over data design inspired by pre-computer visualization.
In this post I will show you the pixel math behind the following bar chart.
So first, what is Pixel Math?
Most web design and digital content design is built on pixels, not inches or centimeters.
Websites are designed in blocks. Even when designed to be mobile-responsive, or in vector formats, certain assumptions are made about sizes that are based on pixels.
For example, most of my cartoons were originally created 720 pixels tall by 1080 pixels wide. Then as resolutions and computer power grew, I doubled pixel count. The cartoons look the same, but they come out a bit sharper and print a bit bigger depending on the screen you use.
Not only can we use pixels to set quality, we can also use pixels as a data design measurement tool. But first, we need to understand the basics of vector design.
Vector Design is Scalable
As a designer I create my work for different purposes and subsequently share them with different file extensions. There are two main types, vector files (i.e. ai, svg, eps) and raster files (i.e. png, jpg, psd).
Raster images are built entirely from pixel grids. 1080 x 720 means the visual is made up of 777,600 little blocks of varying colors. The more little blocks, the higher the resolution. So a 2160 x 1440 file would be made up of 3,110,400 little blocks of color (4 times as much). The bigger the resolution, the more information needs to be stored, the bigger the file!
Vector images are built on the mathematical relationship between points in a file. This allows vector images to scale without requiring additional information to be stored. Meaning you get the opportunity to create in one view, but then scale up or down (or even skew) without losing image quality (pixelating your visuals).
Why vector scaling matters for data designers.
So beyond math and image quality, vector provides an opportunity.
We get to use whatever type of pixel grid we want and then scale the chart to meet the needs of the eventual format. Or multiple formats.
This is why Excel and PowerPoint charts scale. The charts are originally in a vector format, this is usually only changed when someone goes to bring the chart out of Office.
Unfortunately for good or for bad, Microsoft makes a lot of design decisions for us. Sometimes the way around is to trick Microsoft into making the kind of chart you want to make.
The way around this is to take back control by doing the math yourself.
Like in olden times.
The pioneers of data visualization, people like William Playfair and Florence Nightingale, didn’t use Excel. This was pre-computer, they used straight edges, paper, and pencils.
It takes a little more time and you have to know more math. But is that really such a bad thing?
So much bad visualization exists because people just click buttons and don’t necessarily understand much about the math and design behind data visualization.
What if we measured in pixels?
The pixel math behind the chart.
So in Adobe XD I created an art board that was 1080 pixels wide by 720 pixels tall. XD is a vector tool like Adobe Illustrator, so quality is not a factor, I can always scale the design up and down later.
My favorite pixel scale is 10 pixels for every 1 percentage point. This makes 100% = 1000 pixels and basically gives us a decimal point (1000 pixels = 100.0%).
I’m sure you’re asking a question right now.
This looks like a lot of work, why am I doing it instead of just using Excel?
The true joy behind using a true design tool.
Tools like Adobe XD were built to measure using pixels. They have guide lines that appear as you drag elements around, they have features that give you the ability to construct a grid, you get to layer all of your elements, and you have an almost endless ability to tweak, copy, scale, and skew. It’s even gives you the ability to plot elements, showing everything with related X and Y values.
This is what really allows a graphic designer to be a graphic designer. To create elements that fit with one another. With Excel and Power Point you spend all your time guessing. And Adobe Illustrator is not nearly as nimble and easy to use.
The DiY Data Design webinar series
So if you missed yesterday’s webinar, good news. A recorded version is available to watch, I’ve pulled a short clip below and you can follow that to the full version.
I would love to see you the next time I have a webinar. Next week is a marketing week, but the following will be back to data design.
I’m thinking of doing one on the process of creating one page reports and infographics. Probably using Adobe XD again (“free” and compatible on both Mac and PC gives the tool a certain kind of power).
Until then, here’s a short clip from yesterday.