Episode 39: [Mini] 3 Design Tweaks that Make a Big Difference

 
alignment.png
 

Welcome to episode 39 of Data Viz Today. I’ve been on a mission to improve my design abilities, and there are three design tweaks that I’ve found to be really effective in making my visualizations look more professional. In this episode, I share these three tips that pack a punch!

Listen on Apple Podcasts, Google Play, Google PodcastsStitcher, SoundCloud & Spotify.

  • Welcome! I'm Alli Torban.

  • 00:15 - Today’s topic is 3 design tweaks that I’ve learned this past year that instantly improve the design of my visualizations. I’ll explain those three things, and I actually took an old chart that I had made and implemented these three things so you could see the difference. There are still a lot of things I’d change about that chart, but it’s interesting to see the transformation with just three tweaks. See below!

  • 01:10 - First, alignment. I try to make sure everything that I put on a page is aligned with something else, or there’s a really specific reason why it’s not. Usually I find left alignment looks best, especially with bigger chunks of text. In Adobe Illustrator, I’m always setting up my graphic with straight guidelines that I can use to snap all my elements to. You could mimic this in powerpoint or tableau by drawing your own guidelines along the margins or between groups of information. In Tableau dashboards, you can toggle on a grid by pressing the G key, which is super helpful. So be aware of what each element is aligning with, and also an alignment that’s easy to overlook - the vertical and horizontal spacing between your elements. Make sure there’s consistent space between your elements as well.

  • 02:10 - Second, text hierarchy. We talked about annotation hierarchy in episode 7 “How to Annotate Like a Boss” where you have a title, lead-in text right below it, then maybe subheaders and explanatory text within your chart to call attention to the points of interest. And all those text elements have an order that’s ideal for your audience to read them in. So how do you convey that order? Usually I go straight to size of the text, which definitely works well - bigger things are more important. And another option is weight. Many fonts of a light, regular, italic or bold option so you can layer those to create a hierarchy effect. Another way is color. One technique that I’ve been experimenting with is using a slightly lighter black, which can be easier to read that straight black, for the title, and then smaller text that’s grey for the subheader. Or for a white text that’s on a darker background, you can make text look less important by giving it a little transparency so it takes on a bit of the background color so it pops less than the white title. I’ve used this technique well with labeling. Like if I have a treemap and I’m labeling each segment with the category and the percentage, I write the category white and then the percentage in white with added transparency. It’s legible and cohesive because I’m not changing much, but it still gives a little hierarchy.

  • 03:50 - Third, keep annotations simple. After doing episode 26 “How to Develop Your Design Eye” I realized how crazy I was with my annotations. You can see in the shownotes for that episode, I had created a viz for rainfall in DC and then I came across a similar viz by Jane Pong for rainfall in Hong Kong a few years earlier so I had the unique chance to directly compare what I created with something a pro created with a very similar dataset. And one big thing that stood out is that Jane had these really elegant and understated annotations calling out interesting days with short, slightly curved black lines and text within the chart, and by comparison, my annotations looks almost comical because the lines were really long and flowy leading out to text outside the chart and colored red! Then I also had these big clunky arrows along the axes as if people didn’t know which direction to read. So now, I keep my annotation lines as short as possible, with only one curve (not bending in and out and around), and in a consistent thickness. Like the line doesn’t start small and get bigger. I’ve noticed that when I use arrows or lines that do that, it looks more clip-arty.

  • 05:30 - One resource that really helped me as a beginner is Canva’s Design School. They have a bunch of interactive tutorials and courses that do a good job of teaching some basics.

  • 05:50 - My final takeaway is that there are a few design tweaks that can get a lot of mileage out of. And for me, those have been making sure each element is aligned with something else, make sure your text has hierarchy with size, weight or color, and lastly, keep the arrows and annotation lines simple.

  • 06:30 - You can sign for my weekly newsletter that I send out every Sunday with top tips from the episode. I love mailing it out every week and getting your replies!

  • 06:35 - I also have a resources page with my favorite books, blogs and podcasts.

  • 06:45 - And I also have two online courses - one for creating your first custom map using Mapbox, and the other is a shortcut to learning how to create charts in Adobe Illustrator.

Here is an example of those three tips applied to an old viz. There’s still a lot of changes I’d make now to this viz, but doesn’t the new one look a little more professional with better alignment, clear visual hierarchy, and simple annotations?

 

My old visualization BEFORE tweaks

AFTER - making a few tweaks

AFTER - making a few tweaks

 

Allison Torbanmini, design