How to Ditch Lorem Ipsum and Start Using Real Data in Your Designs (GIF Warning!), Part 1 of 2
I don’t use lorem ipsum in my designs anymore.
First off, no one speaks Latin except for the three kids who took a class in high school because “it seemed pretty easy”, and also probably your friend toiling away in med school, reciting fancy phrases like Vulnus Punctum (dude got stabbed!) and Vulnus a Tormento (bro got shot!) (…).
Secondly, do you actually know what the entire lorem ipsum phrase means?
Yes, every time you use lorem ipsum in your designs, you’re basically quoting Cicero talking about masochism. I suppose if you’re designing a weird, Latin-based Tinder, then maybe that lorem ipsum excerpt would be comically accurate, but otherwise you’re probably missing the mark.
Needless to say, maybe it’s time to give your dummy text an upgrade.
TL;DR
This article is a Step-by-Step Guide to using real data in your mockups. Your designs will have more polish, and tell a more accurate and compelling story to your stakeholders.
But first…
To get the most out of this tutorial, you should first equip yourself with the right tools (click to download):
- Sketch - We’ll use this to make our designs. You can use Photoshop, but some of the other tools are Sketch-based. Time to make the switch!
- Craft by InVision LABS - We’ll use this suite of plugins to populate our Sketch designs with real, practical data.
- Data Files - We’ll use this data file to populate our designs so it makes sense! Don’t worry, no lorem ipsum here!
Step 1: Design your base item
You’ll be using data on every page of your designs, but this technique is most valuable for repeated content. A couple examples:
- Lists of items
- Data tables
- Content cards
- Activity streams
- Messaging
Repeated elements in each of these design patterns can be quite cumbersome to fill in, but this technique only requires you to design a single row item, card, or entry. The rest is fully automated!
For this exercise, I’ll be designing a data table with seven unique fields:
When you are done creating your “base” item, make it a symbol. If you’ve never used symbols before (or never used them correctly), the utility of symbolizing this single element will become very clear in a couple steps.
Step 2: Assign data values to each element in your design
Before you start this step, make sure you’ve installed Craft by InVision LABS. I’ll be referencing it a lot 👌🏼
For comparison, here’s how we would do things “back in the day”:
Duplicate, duplicate, duplicate. Click a field. Try and think of a new name/email/etc. for that item. Rinse and repeat for 127 hours, or until you quit your job…whichever comes first.
Now this isn’t going to be efficient at all. We can use plugins like the Sketch Content Generator (awesome, don’t get me wrong) to fill in some random data for us, but the problem with random data is just that: It’s random.
The trick to using data in your mockups is that it should tell a believable and consistent story throughout. You should never change the names of your dummy users from one design to the next, but random data generators don’t give you any control over this.
Let’s imagine a scenario where JK Rowling just randomly changed Harry Potter’s name in the second book:
Ron, to Harry: “So Dobby stopped us from getting on the train and broke your arm…you know what, H̶a̶r̶r̶y̶ Leonard? If he doesn’t stop trying to save your life he’s going to kill you.”
Lol…Leonard Potter. What a different book that would’ve been 🤓
But you see the problem: It doesn’t make sense. The inconsistency makes it hard to pay attention to anything else in the sentence, and this is exactly what will happen in your designs. Stakeholders will be stuck on why the email address for John Smith is carla-schmeckelton@mail.com instead of listening to you present the genius of your designs.
I know it sounds crazy, but before I started applying a high level of rigor toward data in my designs, I’d be presenting to a CEO and he or she would literally cut me off to ask questions about inconsistent data.
So what do we do instead?
Enter JSON objects. JSON objects allow you to maintain consistent data each time you duplicate a layer, group, or symbol.
Using Craft, you can assign each value in your base item from Step 1 to a piece of information in a JSON file.
Continue assigning each value in your design to an associated value in the JSON file. When you’re finished, you’re ready to start duplicating!
Step 3: Duplicate data using Craft’s duplicate function
Important note: Even though you just assigned data values to your design, you can’t just start copying-pasting your symbol and expecting magic to happen.
The trick to copying your base item is to use Craft’s built in duplication function. Here’s how it works:
Craft populates data one object (or one “cardboard box”) at a time:
- Row 1 will only ever be filled with data from object 1 in my JSON file.
- Row 2 will only ever be filled with data from object 2 in my JSON file.
- Row 3 will only ever be filled with data from object 3 in my JSON file.
- …
Craft is clever enough to know that when I duplicate my row using their duplicate feature, it should numerically step through the objects in my JSON file to fill each subsequent row with information.
Prepare to be amazed:
Our data looks great! Notice how names match up to emails, and emails match up to companies. This already looks better than if we used a random data generator, but we can make it look even better.
Step 4: Update and customize your symbols “live” next to your generated design
One of the added benefits (yes, it’s a benefit!) of designing with real data is you’ll encounter issues like this:
Our data is pretty tight, so there are overflow issues with some of our longer fields. This is a very real scenario that developers and QA engineers test for when they build out your designs, so do them a favor and try to address these issues in the design phase.
Think like a Developer: It’s a great idea to create JSON files with edge case data like this. What if a user has a super long name? What if they don’t have an email address? Will my design hold up? How do I treat these scenarios?
Back to our design.
Since our base row item is a symbol, it’s simple to update all 10 of our rows at once by editing our symbol artboard. However, it can be quite a pain to toggle back and forth between your working artboard and the Symbols artboard inside of Sketch.
The solution is simple: Copy and paste your working design right next to your symbol artboard on the Symbol page:
Now when you make updates to the base row, you’ll instantly see all of your rows “live update” to the adjusted layout and design:
Don’t forget to adjust the table header if you’re re-spacing your columns! In the GIF above, I’m holding Command+Shift as I select column headers and the associated values in my base row symbol. Since we’re editing the base symbol, things like color changes will also propagate to the table rows, so have some fun customizing your shiny new data table.
When you’re done making adjustments, you can delete this copied table from your Symbols page and head back to your working artboard. You’ll see that your rows have been updated to reflect the changes you just made because this table was created using your row symbol.
Hey Jon, what about images? Can I add images to my base symbol and duplicate that, too?
Well I’m sure glad you asked!
Step 5: Using data image URLs
One of the brilliant things about Craft JSON data is it supports image fills via URL. That is, create a random shape on your artboard, point it to the URL of an image, and Craft will fill it with that image. So convenient!
When you start to get comfortable with data, you can do start doing really stylized things like this, pulling all of your data and images from a JSON file:
Small note: Craft duplicate works perfectly with text, but JSON images have a small off-by-one bug. I have contacted InVision and a fix is coming.
In Conclusion
This concludes Part 1 of my step-by-step guide to using data in your designs. Don’t miss Part 2 for more advanced data techniques — follow me on Medium/Twitter, subscribe to the UX Power Tools publication, and follow us on Twitter for updates, new content, and other groovy stuff.
Love you, people.
