I’ve designed a lot of charts. It’s gotten to the point where I feel like I deserve an honorary doctorate for data science, or at least a tattoo on my arm depicting a logarithmic scatter plot.
But I digress.
Charts are an integral part of data products, and a beautiful way to visualize sets of information. I have strong opinions about when and how they should be used, but that will be a post for another day.
Today we talk about designing charts so that they’re both pleasing to look at and most importantly, easy to maintain. Messy charts are a total eyesore, and no one wants visualizations that look like they were made in PowerPoint circa 1995…or as I call it, “the good old days”.
Henceforth are some ProTips™ I’ve come up with after designing a gazillion charts.
If you’re working on a product with a ton of charts, you’re going to kick yourself if the client decides that they want dashed gridlines instead of solid. D’oh. Now I have to go find all of those.
Not if they’re styles! Check it out:
That’s just showing the primary axis. Styles are great for gridlines, too (they’re too faded to see in the GIF).
I should mention that there’s a slight lag in the GIF above because it’s changing the primary axis style for 60+ different charts in one fell swoop. Styles are the best ❤️
Keeping with our theme of updating lots of charts at once, symbolizing data points will save you roughly nineteen and a half years spent ⌘-Clicking tiny circles across your art boards. Set up a symbol, and reuse it whenever you need a data point. If you decide down the road that you want it to be solid instead of hollow, just change the base symbol. It’s so easy even Grandma could do it!
Tiny ProTip: Don’t make your data points circles. Make them squares with 100% rounded corners (radius). It just makes it that much easier if you decide to go back to squares!
If you have 10 data points in a line graph, use a plugin like RenameIt to change the layer name for all of them to “Data Point”. I cannot even begin to tell you how much time this will save you.
Here’s a look at one of my chart layer groups so you can see the layer names:
If I ever need to change the length or position of all of every “Horizontal Gridline”, I just do a layer search for…you’re catching on…“Horizontal Gridline”! Then I can **Shift+Click **at the top and bottom of the list to select all gridlines across my art boards and change their length/position. These little things add up, I promise.
This may divide my readers, but I personally prefer to group data points with their axis labels, particularly if I’m working on a bar or column chart. It just makes it that much easier to position or delete everything associated with that value in the graph all at once. Check out the GIF below to see what I mean.
Note: I’m also using a bounding box around the entire data group. Check out my other post “5 Ways to Keep Your Sketch Kitchen Clean” to see why I like using bounding boxes.
Speaking of grouping (no, not groping), if you’re making line graphs with data points, group these together so you can quickly move and update them together. Seems trivial, but I’ve seen dozens of free chart downloads with lines and data points just sitting willy-nilly on the artboard like lost puppies in the park without leashes.
Let’s be real, line graphs are such a pain to make. But when I discovered that you can use distribution alignment actions on vertices, I paid off my school loans, reached out to the high school bully for coffee, and finally lost that last 10 pounds.
Select the line for which you want evenly-spaced vertices, click Edit in the toolbar (or hit *Enter *on your keyboard), select all points with ⌘+A, then click the horizontal distribute action at the top of the right pane. **Tada! **All of your vertices are now perfectly spaced apart and aligned to their matching X-Axis labels (make sure these are horizontally-distributed using the same method).
on
Sketch 39 shipped with a feature we were all waiting for: Resizing Rules. Check out Peter Nowell’s Resizing Cheat Sheet to get yourself up to speed.
By default, Sketch sets every object to Stretch, but this is going to do some nasty things to your chart if you try to resize things straight out of the gate.
Here are some baseline rules, but you’ll really just have to play with it yourself to get a chart that resizes correctly without distorting the chart itself:
Edge objects should be Pinned to Edge. This includes the entire Y-Axis, the left- and right-most X-Axis labels, and the two left- and right-most data points if you’re doing a line chart. This will ensure that the edges stay fixed, while everything else inside resizes and floats.
Any data in the middle area of the chart will likely need to Float in Place. This will ensure that it maintains its relative distances to surrounding data points, and protects them from stretching/distortion.
Gridlines should be set to **Resize Object **or Stretch. I can’t articulate why, but I personally prefer Resize Object.
Look, Ma! No distortion! Go put ***Chart Wizard™ ***in your Tinder profile.
Resizing rules work best for horizontal resizing, but they will occasionally work for vertical resizing as well. Usually it’s one or the other, though.
In the event you just want to make a chart smaller, it’s best to use ⌘+K to resize your chart, instead of selecting the chart and resizing it from the corner transform grabby-things (whatever they’re called…). This will ensure that everything is scaled, including text. See below:
How do they make such smooth, even curves?! — Me, three months ago
Instead of battling with the pen tool to draw a smooth, evenly spaced curve, I find it’s easiest to draw my vertices with mirrored handles. Watch the GIF below, and note that I am clicking and holding Shift while I drag open the handle of the vertex. Keeping the handle horizontal will keep transitions between vertices nice and buttery smooth. After placing a vertex and opening the handles, release Shift, then Click-Drag your next vertex while holding Shift again.
This one is my absolute favorite, and I just discovered this method a week ago.
Note: If you’re trying to visualize real data in your mockups, this method will not help you.
I was working on designing a scatter plot and was getting really tired of duplicating data points and dragging them around to form “the scatter”. If, however, you just want to create a chart that looks like a scatter plot to give dev something to reference, this method was made for you.
Okay, go grab the **Pencil Tool **in Sketch. Just hit the letter “P” on your keyboard.
What the hell is the Pencil Tool?! I didn’t even know it existed. I have no idea when or why I would ever use something like this. — Me, last week
Now scribble around on your canvas. Yeah, really. For dense data, scribble around the same area a whole bunch. Don’t forget to occasionally swing around the chart area to create some outlier values.
Okay, here’s the genius part: Give your line a border, then set a super wide dash in the border settings. **Boom. *Instant scatter plot. You’re like the Michael Phelps of charts if he went into data science instead of swimming.Timely Olympic reference. *Hot dog!
Get outta here, Clippy! No, I don’t need your help creating scatter plots!
If this little Sketch trick is all I’m remembered for when I’m dust in the wind, I’ll die a happy man.
There you have it. Now you’re a certified statistician, mathematician, data scientist, and chart-ographer. Go ask for a raise. You deserve it. 😊
All of these charts and more (60+) are available in our UX Power Tools Toolkit. They’re all made with styles and symbols, resizable, and give you lots of variety for finding the right data visualization(s) for your product. Check them out at https://www.uxpower.tools/!
Love you people. Happy Sketching!
网友评论