Content first

In 2016, Instagram redesigned their app. They wanted to put the content first.

While the icon is a colorful doorway into the Instagram app, once inside the app, we believe the color should come directly from the community's photos and videos. We stripped the color and noise from surfaces where people's content should take center stage

In the same year Apple announced their redesigned Music app. They gave a similar reason.

[The Apple Music app] has a beautiful new design language that allows the music to be the hero.

Apple’s Human Interface Guidelines reflects this shift.

[iOS apps should have] minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

Airbnb also redesigned their app around the same time. You can probably see where this is going.

[Airbnb's] mobile redesign introduced larger, bolder headlines, removed unnecessary imagery and color and simplified their icons to make them more universally recognizable. What was left was a very black and white UI where the content shined and functionality was clear.

I think of content as as “whatever the user came to see”. They didn’t come to see the drop shadows.

If you prefer something more official, here are some definitions from

The US government’s 18f also suggests a focus on content.

Let the content be the voice. Bring clarity to content through design choices that support meaning and intent. Do the visuals overpower the content? ... How does typographic hierarchy contribute to understanding?

Along the same lines, Kate Moran talks about the “content-element” ratio.

[Edward Tufte's] concept of data–ink ratio can be applied to web interfaces by considering the content–element ratio for any interface. The goal is similar: a high proportion of the amount of meaningful elements relative to all elements in the interface.

A high content-element ratio is a sign of respect for the user. Nicole Fenton reminds us that we've earned their attention, and shouldn't waste the chance.

Reducing the noise on the page shows readers we've earned their attention. If people can concentrate on our content, they're more likely to delve into it ... Treat your homepage like an appetizer, not a feast. Give the reader a taste of what's there without overwhelming them with choices. As we're all curious folk, people naturally find what interests them most and move further into it, so long as you give them room to breathe.

Content first means that you’ve given the user a chance to explore at their own pace. It seems like a sensible idea, but it’s become less common. Some users take matters into their own hands.

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites' pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That's not all these apps do, but it's one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites' content. It also suggests that those who don't design for readers might soon not be designing for anyone.) ... We can't keep designing as we used to if we want people to engage with our content. We can't keep charging for ads that our layouts train readers to ignore. We can't focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer.

Content first can be the secret to commercial success.

Serving only the content the customers actually need; streamlining and testing and fine-tuning the interaction to get the right customer to the right content precisely when they want it; wrapping the experience in an engagingly readable but also quickly scannable user interface; and doing everything in our power to ensure that the underlying web experience is as performant as possible—this, I believe, is the secret [to success]

Good content has more impact on your success than the rest of the design.

Some webmasters have spent years tweaking their layout and designing their site, and very few get any traffic. This site, as shitty as it looks, gets over 1 million visits per month. I use large fonts also as a protest against all the stylish garbage you see out there. When I go to a web site, I WANT TO READ THE CONTENT.

Some of the largest companies in the world use this approach.

Steve [Jobs] had strict standards for Apple's site regarding what got in and what didn't. He wasn't a big fan of whizzy animations. He believed that such things were “lazy,” the mark of a company trying to wow visitors with eye candy rather than substance. He insisted that Apple's site should avoid the frivolous and just make it easy for people to find the information they seek.

Good content is not easy, but it is enough.

I don't like filters, color correction, transitions, digital effects, fancy font treatments or titles. I think they're cheap and easy - anyone can download and plug in. They're not a demonstration of creativity but something pre-packaged and emblematic of a more formal mainstream-like aesthetic that a lot of younger creators see as aspirational - aspirational because using easy plug ins makes their home-made videos look like what is seen on TV. Use nothing but straight cuts and footage out of the camera, text is almost always Helvetica - not because I like the look, because it's the default. Expressing creativity using the most basic, accessible methods is the hardest thing to do and the purest. The very best steak houses serve their fillet on a plate with nothing else. Shitty franchises cover theirs in sauce and other shit to distract you from the fact that you're eating dog food.

Content should inform the rest of the design.

Consistent voice is more important than consistent style. Voice is about what you say. It's content. Style is about what you're wearing. It's aesthetics. The prior informs the latter, not the other way around.

Next chapter →

← Previous chapter

Back to the table of contents