We have a lot of assumptions in the process of creating wireframes and mockups for websites & apps. As wireframes & mock-ups are not dynamic, it is easy to aware various scenarios when dummy content or placeholders are used.

In contrast to graphic design or typesetting, which you build on certain materials delivered by the client. Website & app is on the other side of the track, it’s like working on a blank canvas at the beginning. Stakeholders like clients & users have some rough ideas but there is still space that requires our imagination and instinct to predict how people would use them.

A lot of tools that help designers to generate filler text easily to imitate a real product. Lorem Ipsum (originated from a sadistic quote in Latin) has become the synonym of dummy text. Tools like Little Lorem enable quick access to different lengths of text, either by sentence, by line, or by paragraph. But when lorem ipsum is everywhere, it is not a good sign for a sophisticated design. What it really means is you need be more thorough of your design or you will need to revise it after all. I recognized placing them in my design files is actually a lazy step back, and the lesson I learned is to use real data & content as soon as possible.

Here are the reasons why:

Misinformed Design Delays Process

Unless intentional, filler text usually delays my design process. Once lorem is placed, I can hardly get rid of it, especially when I was designing an app with content management system (CMS) or user-generated content. The idea of mock-up text will be replaced by anything, encouraged my mind to do nothing about it.

But for the exact same reason, users could also do nothing or confused about it, without context knowing what should they fill in. It would also become developers’ trouble when the draft has been developed. It would take more time and effort to adjust. What if the lorem is not text-only? Or the design incorporated personas photo that most user does not feel like to upload? Getting ahead start to collect actual copy or real sets of data would save you tons of time in the development process.

One Step Ahead To Stop Design Flaws

Using dummy text could also result in design flaws in terms of visual design. I would definitely redesign if article headlines are too long on a blog page, as they affect how the page looks like on a photo background. Button text is also tricky, the space you need placing a “View More” button is not the same as “Read Blog Title”. Using real data would provide a more accurate estimate of the information I am dealing with, resulting in a more informed decision.

Design With Real Data is Designing Reality

What makes mock-up real is not how refined a box shadow is created, but context. How every single detail falls into the right place, that’s how a mock-up straightly takes you in the context. However, working in a web agency that handles clients’ design and feature request every day. Getting information from stakeholders or clients is not an easy task. Most clients come with a business plan or sketchy idea, do not realize the importance of getting the real data.

Depending on the scope of work of the project, the step of researching actual data could be an extra effort to the design process, or even it should before design process begin. As Josh Puckett stated, “ (Designers) allow data to inform and constrain their work. Their decisions are wholly informed; implementation details carefully considered; edge cases solved. They build empathy for how their users will actually experience things in a variety of contexts.”

Trying to obtain data is also one step toward practicality. Realistic data that you can obtain eventually will be the data shown on screen. Those you cannot obtain will remain in the fancy template. I worked on an app that showcases tourist destinations, the “editorial” introduction that filled with lorem ipsum has eventually become excerpts from Wikipedia, which have removed after all. With Sketch quick-and-easy plugin (Try Content Generator or Invision’s Craft, inputting dynamic data is easier than ever. Craft even support JSON so any dataset can be imported into the design within clicks.

If you are working on a new website / app idea, getting real data is an essential step leads to a better design. It would require collaborative effort from both clients and designers to do so. To me, if I’m doing all my old projects again, this would be the way I choose.

Read more

How Might We - Summer Blues

Hi Friends, Thank you for those who joined “Do You Know Design Systems” early this month. It’s been a privilege to organise and host in-person event for th

How Might We - Life Update

Hello friends, So here it goes, I started a new role as a product designer this month in a crypto company. Before starting a new role, I’m so grateful that