How to make the most of Data in your designs
We talk designing with real Data with Mark McEwan, founder of sketchappdata.com
As designers, it’s natural for us to want our work to look its best. Nobody wants to make something that looks unbalanced, unfinished, or just plain ugly. That’s why it can be easy to ignore product and interaction details, and instead focus on solving visual problems. But when it comes to creating interfaces, using ‘perfect’ data to make your designs look great only sets you up to fail when it comes to user testing. In real-life, nobody’s perfect.
You might assume everyone will choose a neat, eight-letter username. Maybe you’re just using lorem ipsum to fill in the text gaps throughout your design. However you work, making assumptions and filling gaps with random text may not help you when your product gets into the hands of real people. If you don’t cater for the edge cases, you risk alienating your users.
The solution is to use real data in your designs. That’s why we introduced the Data feature back in version 52 of the Mac app, and updated it with Linked Data in version 71. It lets you install custom datasets, then populate your designs with text or images in seconds. We already provide a few datasets that you can apply to individual elements, Symbols or groups — including names, cities, avatars, and Linked Data bios — and it’s simple to add your own or use Data plugins like Pexels to bring in free photography in a matter of clicks.
Designing with real data can help you test whether your project supports the edge cases
Whether you’re new to Data or a die-hard fan, we’ve put together some tips to help you really make the most of it in your designs.
Get real
“When Sketch first added the Data feature, I think we all wanted to use it as much as possible — but what we really wanted was for someone else to create the data. It can be a time-consuming process,” says Mark McEwan. He created and populated sketchappdata.com with hundreds of datasets — over 32,000 unique data points — that are completely free to download.
“I started creating my own data collection and decided that I’d like to share it with others in the hope that I could start a community willing to create and share data in a central location that all Sketch designers could access,” he explains. So whether you’re looking for movie titles, currency or dog hashtags (aren’t we all?), sketchappdata.com has what you need.
“It’s important to work with real data to avoid the ‘cherry picking’ that we do as designers,” says Mark. “While it’s great for sales and marketing teams, it doesn’t reflect the final product. So we should test less-than-perfect imagery and obscure content lengths to anticipate how people will use the real product.”
“Sketch’s native Data interface makes working with TXT data simple and instantly available at all times. And when combining data with symbols, Sketch becomes incredibly powerful to quickly populate complex designs.”
Beyond stress-testing, using Data can seriously speed up the design and development process. “By having this data available and ready to populate your layers, you can make quick work of something that could otherwise take hours, or even days,” explains Mark.
Random is good
The challenge, of course, is creating useable data — data that feels random enough to be real, and not accidentally making it ‘pretty’. To avoid this, they use a combination of random generators and formulae in Google Sheets to mix things up. But even a seemingly straightforward dataset takes some work.
“Let’s take currency as an example,” says Mark. “On the face of this it appears a simple task, but the first item to consider is the currency itself; do you want USD, GBP, EUR or one of the many others? Then there’s the value itself; should it be random ($49.51), rounded (£49.00), or even specific ($49.99).” Then there’s the questions of quantity and range — just how much data is a designer likely to need for a real and complete design, and what data ranges make sense for them?
But once you’ve got the right dataset in place, working with it easy. “Sketch’s native Data interface makes working with TXT data simple and instantly available at all times,” says Mark. “There’s no need to rename layers. And when combining data with symbols, Sketch becomes incredibly powerful to quickly populate complex designs.”
The future is data-led
And it doesn’t end there. Mark has big plans for the future of sketchappdata.com — he and his contributors have a number of organized JSON datasets to share soon. With our Linked Data feature, or a plugin like Data Populator, you can access JSON data and take control of data population for grouped and organized content. That means when it comes to designing something like a movie interface design, the movie artwork, title and release year all respect the layers’ grouping. So you can quickly fill in groups with real, organized content.
Using JSON data you can fill in large sections with organized data in a few seconds
And if you need to use your own, custom dataset? Just make sure you share it with your team so everyone can benefit. “Experiment with data so you can understand how powerful it can be for you and your team,” he suggests. “You only need to make a data file once, so it’s best to take the time to create it or search for it — it’ll save you and you team time over and over again.”
If you want to get started with Data in Sketch, download our 30-day free trial, or head over to our documentation for more information.
