Thread by @RohanIrvine

Next up is Martin Von Lupin — The Lorem Ipsom of data visualisation: how to design data driven wireframes.

#UXAustralia #UXA2019

Martin will share some of the strategies for data driven wireframing, the ones that worked and the ones that didn't.

Lorem Ipsom is a placeholder text that designers use as placeholder text so you can visualise how the design will look with content in it.

You start with the wireframe of a website, add some lorem Ipsom, then add some colour, then put some more meaningful content in the design before you test.

This is the normal design process that Martin uses for his websites.

So what if the content is fundamental for the basic structure of the page?

What is data is fundamental for the basic structure of a page?

This is where placeholder data needs to be used.

The three strategies

Placeholder content
Meaningful but random content
Real content

When you're using real data:

Martin was tasked with building sn interactive map of Australias frog habitats.

When they started doing the sketching they realised they would need real data in order to understand the complexity it would create for design.

They made an interactive wireframe with the data.

Martin was happy, the client was happy, and there were even more things that they started to notice interesting traits about the data set.

Martin identified potential issues early on in the design process and was able to flag it with developers so there were no surprises

So why don't we always use real data when we wireframe?

We don't always have real data

In the case you don't have access to real data the next best solution is meaningful but generic data.

You gather as much information as you can about what data might be captured and use that as your data to visualise.

What they found out when they received some of the actual data was that the initial 30 projects they needed to visualise were actually 150+ and the budget which drove the size, wasn't always available so some circles had no visual representation.

Martin said he was trying to use Random but meaningful data (I stuffed this up in an earlier tweet)

But he ended up using random and meaningless data which is what caused the problems and reworks.

It's not about creating amazing wireframes it's about creating amazing data visualisation.

So what are the other ways you go do this?

This was the final version of the data visualisation. We're going to work backwards.
It's very complex and every single element is clickable.

So how do you create wireframes for something this complex?

You don't.

You do sketching.

Build your visualisations out of the wireframe program and import them in as images to your wireframes.

Martin recommends Chippencharts with Sketch.

@threadreaderapp unroll please