Let Content Shape Design

Ben Groulx
Jul 22, 2015
Let Content Shape Design

Using dummy text changes the way we perceive content. Use real content when designing.

Tweet this

"Oh, we'll figure it out later, just do the design now." This is an all too familiar phrase when dealing with people who don't have any content.

And that's just not good enough.

Content makes up the vast majority of the web, and as such, it's the medium designers have to work with the most. We've touched on this before, most notably in The Value and Importance of Typography On the Web, where I noted that "Websites are containers of content, and the devices we use to access that information are conduits to this information." It's the role of designers to make this content accessible and readable because that's what people visit sites for the stuff within them -- not for any of the colours or layouts. Nobody deeply cares about how pretty a site is.

Just like how good cinematography can elevate the script of a movie, good design can help content more easily convey a tone or message and emphasize certain aspects. Therefore, design becomes good design when it uplifts content  appropriately.

Content Creates Context

When design comes before content, the designers still have to show where content is situated. They'll use placeholder text called lorem ipsum (faux-latin text) so show this.

Lorem ipsum certainly has benefits, such as being able to focus solely on the "amplifiers" like font choices and image treatments or even basic wireframing, but it removes the context of design by altering the way we perceive the content. In their book, Getting Real, 37signals (now Basecamp) explain:

"…lorem ipsum changes the way copy is viewed. It reduces text-based content to a visual design element -- a shape of text -- instead of what it should be: valuable information someone is going to have to enter and/or read."

When we use placeholder text, we are removing the importance within the text, and losing out on things such as tone and voice -- not to mention the valuable information contained within. That results in unrealistic assumptions which can lead to poor design. Kristina Halvorson of BrainTraffic notes:

"What kills me here is that we're talking about creating a user experience that will (whether we like it or not) be driven by words. The entire structure of the page or app flow is for the words."

It's Not Always a Perfect World

When a house is being built, the electricians and plumbers have to come in before the drywallers and get in before the walls go up. There's a process here, with steps to follow. But sometimes, the electrician doesn't show up, and timelines have to be met… so the walls go up without wiring.

It's possible for the electricians to come in after, albeit inefficient. It occurs sometimes, and we have to roll with it.

This happens often with web design, too. Maybe deadlines are encroaching, or maybe budget isn't there, or… or… who knows. But the point is that you have to roll with it now. So what can you do in this situation?

  • Be open to change and be ready to be flexible. If possible, have your designs accommodate different text types, lengths, and tones. It's quite difficult to design around, but knowing that what's happening on a page will be different in the end will make the process more efficient.
  • Have an outline -- even if it's a rough one. Content strategists work to not only figure out what kind of content will be created but how that content is to be managed and maintained. Work with one to figure out an overview of content, both throughout the site and its pages.
  • Take some of your budget and allocate it to a writer. This is my favourite: dive into the books, shuffle some funds around, dig between the couch cushions… whatever it takes to get the money to hire a good writer or content strategist, and get that content created. Start properly.

Content comes first. That's how it has to be. The key thing to remember is that content will shape design, so the earlier you see this, the more efficient the design process can go. And, as always, the wisdom of Jeffrey Zeldman -- the father of web design -- is applicable:

Made With In Whistler