Content first

In 2016, Instagram redesigned their app from the ground up. You might remember the simpler icon they introduced, but the interface also went in a new direction. Ian Spalter, then head of design at Instagram, said putting the content first was the reason:

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

Also in 2016, Apple announced their redesigned Music app at WWDC 2016 (Skip to 1:10:30 if you want to see the announcement for yourself). Apple were typically short on the approach that led them to this new look, but they did say that they wanted the app to be about the music:

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

This content-first approach is reflected in the Human Interface Guidelines, which Apple publishes to help developers and designers create apps that feel like they belong on the platform. The iOS section states that content should be "paramount". It also suggests that adding other unnecessary visual elements could cause problems:

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

Around the same time, Airbnb released a newly redesigned app of their own. Michael Horton, who had at this point noticed a trend, wrote an article about it and said that one of the reasons for the redesign was to help the content shine:

[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.

As I looked into this, I started to wonder what defines "content". I realised that I could look to another definition to help. People commonly say that a plant is a weed if it is "unwanted". It's a great definition because it's relative - even a rose bush is a weed if it's in the middle of your garden path and you have to step around it every time you leave the house.

The definition I landed on for content was, "Whatever the person wanted before they arrived". The trailers they show before the film at the cinema? Not content (Except for the people who really love the trailers). In the same way, the drop shadows around your card component aren't content, and the banner advertisements at the top, bottom, and sides of your site definitely aren't content.

If you prefer something more official, you might like these definitions from Dictionary.com:

Highly successful companies aren't the only ones putting content first. 18f, a government office in the USA that aims to improve "how government serves the public through technology", also suggests a focus on content. They warn about the power of unnecessary visuals to distract people, and mention the importance of good typography:

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?

Kate Moran at Nielsen Norman Group, in an article about the roots of minimalism in web design, talks about the concept of a "content-element" ratio. How much content do you have relative to the number of elements on screen?

[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, where there's more content than not, is a sign of respect to the person trying to use your design. As Nicole Fenton says, 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.

If you've ever been to the souks in Dubai, you might know what Nicole is talking about. If not, it's like a very busy shopping centre, where every shop has a salesperson outside. As soon as you get within 10 feet, they rush over to you and try to sell you something. They're not shy about it. If they're selling hats, they'll put the hat directly on your head and tell you that it looks very good. Never mind that you've just passed and ignored eight other hat sellers.

If you're anything like me, this is exhausting after five minutes. Any hopes of browsing at your leisure are immediately crushed, and the only thing you can think about is making it through to the other side so it'll end. You might stop if you see something you like, and even buy it, but you'll notice other sellers in your peripheral vision, waiting to try their luck.

Do you want your design to be an exhausting souk in Dubai? Or do you want it to be a calm and relaxing shop where people can find something they connect with?

People have started noticing this trend towards content-last design, and their acting out. Jeffrey Zeldman talks about how many people are taking the designer out of the equation because it improves their experience:

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.

It should worry you that the designer, who worked closely with the content and decided how it should be presented, is being intentionally removed by the person using the design. One reasons for the success of apps like Instapaper and Pocket is they put the content first as much as possible. They turn a souk into a quiet book shop.

Jeffrey says elsewhere that this content-first approach is not only preferred, but is 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]

Putting good content first helps you be successful because good content is what people are there to see. The brilliant thing is, the rest of your design doesn't even have to be good - the content can carry it all. The self described "Best page in the universe" puts its success down to content, and it's plain to see when you visit the site that they're paying almost no attention to anything else.

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.

Not only is your style not as important as your content, but having good content informs what your style should be. As long as you know what you're saying, you can figure out how you should be saying it. "Content first", to be clear, is not just a way to style the end product. Content first is how you should approach the whole design process. Create the content, then design for it.

Frank Chimero puts it best:

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.

Wordy → ← A brief guide to simple design Back to the table of contents