Designing with Real Data using Sketch and RSS Feed


We have been used to filling our mockups and wireframes with lorem ipsum placeholders, thinking that showing mockups to our viewers without real text was better, the viewer wasn’t distracted by the content focusing on graphic aspects such as fonts, typography, colors and layouts.

I don’t think so. Replacing lorem ipsum and image placeholders with beautiful stock pictures and custom text with the right number of characters, it’s neither a good solution.

Designers have to be realistic, anticipate problems and minimize them efficiently.

Designing using real text, real images and real data is much better; letting us to stress the UI and investigate more about real design problem such as:

  • length of text
  • empty data
  • image size and aspect ratio
  • image quality
  • text readability on different image backgrounds

The old way to do that is to create or look for meaningful text to copy and paste, a long and boring activity for any designer, especially for anyone who wants to test a large volume and variety of text and images.

Using Sketch and the great plugin Data Populator designers can populate the mockups with preset data or custom JSON.

So I wrote a little php script that converts a standard RSS feed  to JSON for the Sketch Plugin extracting all the images: RSS-to-simple-JSON.

The JSON has the following placeholders, that you can use in your Sketch mockups:

  • title
  • description
  • date
  • guid
  • contents
  • author
  • comments
  • category
  • img_url
  • img

Download the php code and the sketch demo file on Github

See the video below:

Write a Comment