Designing an interface without thinking about the content is like building a house without giving any thought to who might live there. Are you building a house for a young family with a gaggle of rambunctious kids? A frugal college student barely scraping by? A bachelor with an entourage of sports fanatics? Without incorporating real content into your designs, you may find yourself with a house with concrete floors and teetering steps in a family-oriented neighborhood such as Noe Valley or Park Slope. People, like content, are different, and one size does not fit all, unless your goal is to build a housing tract in the exurbs. Lorem ipsum, the auto-generated Latin words so often substituted for all content in early designs, is too vague of a material with which to build interfaces. There’s something special about calling a custom-built house your home.
Imagine you’re designing a business card, which is itself an interface of sorts between yourself and a new professional contact. The content is your name, role, email address, phone number, and physical address. If you use lorem ipsum, how do you make design decisions such as how large your name should be, how to group the contact information, and where to lay out the address? If you make such a decision, how do you keep track of what each element being represented in lorem ipsum is, and how do you communicate it to your stakeholders in a way that immediately makes sense? In a sense, you’re designing blindly.
Now zoom out from the business card example and think about a website or mobile app, which probably includes not just textual content but also media content, like videos and images. Knowing whether an image is a headshot or a detailed infographic is crucial to figuring out how large the image should be and where within the page it should sit. Realistic content helps you determine which parts of the content to highlight, which parts support other content, and how they all fit around each other. With realistic content, you have a ballpark estimate of how much real content you need from your content creators, and you move closer to a realistic design. It gets you talking with the content creators early about what type of content to provide. And it speeds up understanding between you and your stakeholders.
Lorem ipsum loyalists tout lorem ipsum as a way to keep reviewers of a design focused on the layout rather than getting mired in the specifics of the content. Interaction designers can get around this quagmire by keeping early concepts visually loose and low-fidelity while stressing that the supplied content is example content and the wireframe is in draft mode. We can offer to hold content reviews to address the content separately. But we need content in order to create meaningful interfaces.
Now zoom out from the business card example and think about a website or mobile app, which probably includes not just textual content but also media content, like videos and images. Knowing whether an image is a headshot or a detailed infographic is crucial to figuring out how large the image should be and where within the page it should sit. Realistic content helps you determine which parts of the content to highlight, which parts support other content, and how they all fit around each other. With realistic content, you have a ballpark estimate of how much real content you need from your content creators, and you move closer to a realistic design. It gets you talking with the content creators early about what type of content to provide. And it speeds up understanding between you and your stakeholders.
Lorem ipsum loyalists tout lorem ipsum as a way to keep reviewers of a design focused on the layout rather than getting mired in the specifics of the content. Interaction designers can get around this quagmire by keeping early concepts visually loose and low-fidelity while stressing that the supplied content is example content and the wireframe is in draft mode. We can offer to hold content reviews to address the content separately. But we need content in order to create meaningful interfaces.