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.

但在点,微调了d 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…

Icinga Camp Milan 2023

It’s time to spread some monitoring love! We’re super happy to announce our next Icinga Camp in Milan, on October 17th, 2023

CSS doesn’t need to be ugly

Ever looked at some CSS and your first instinct was to close the editor and never look at it again? I did. Though, I...

Subscribe to our Newsletter

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