Use actual data in Sketch for more realistic mockups

by | Aug 17, 2022

This time I want to show a feature that’s not obvious at first sight, but can save a lot of time, when you’re intending to create UI mockups with realistic data.

Why it is important to test UI concepts with realistic data at a certain point

In my opinion it’s totally fine to work with dummy data when you’re still in the early stages and sketching different ideas out.

But at the point, where it comes to fine tuning and comparing how well different concepts work, working with realistic data is pretty important. String line-breaks, contrast and informations density all play a big role on how usable a user interface will be in production.

How to get the data

In my example I’ll use the development environment to retrieve my data. Of course this is dummy data as well, but you can get it from a production environment with respective data the same way. Note, that there’re also more advanced ways to generate data for Sketch. I’ll focus on the file based way since this is far more approachable.

Navigate to a view or website you want to get data from. Then open the web inspector. The JS console and jQuery is your friend here. I want to get a list of host names so I navigate to the Icinga DB host list and use the following JS in the console:

$('.host-list .list-item .subject').each(function() {console.log($(this).text())});

This also works for, e.g. time stamps
$('.host-list .list-item time').each(function() { console.log($(this).text()) }

Or for services in a view containing a service list
$('.service-list .list-item .subject').each(function() { console.log($(this).text()) }

After that the results can be copied and pasted from the console into a new Textfile. I remove superflous content with the powerful search and replace features from BBEdit (For me this is the quickest way).

In the end there should be a new text file with one host name (or whatever piece of data you got) per line. Save that file as `.txt´. Now navigate to the “Data” tab in Sketch Preferences and select the `txt`-File.

Using data in your mockups

After you’ve made the text file containing the hosts available to Sketch. You can now use it for symbols in your mockups.

Select real host names as data for symbols in Sketch

I prepared a set of basic data elements I usually need. Those are host names, services names, timestamps, plugin output and timestamps.

You May Also Like…

List View in Icinga DB Web

List View in Icinga DB Web

Similar, to the monitoring module in Icinga Web, Icinga DB Web also provides list views for hosts and services to...

Releasing Icinga Web v2.11.1

Releasing Icinga Web v2.11.1

Today we’re announcing the general availability of Icinga Web v2.11.1. You can find all issues related to this release...

Subscribe to our Newsletter

A monthly digest of the latest Icinga news, releases, articles and community topics.