Adobe Creative Cloud

July 21, 2016 /

Content First Web Design: What It’s About and How to Get Started

There’s this incredible shift that happened in the history of cinematography around 1970-1980. Before that point, a big part of a given film’s credits went before the actual film – “opening credits,” the name was.

You can see this in Butch Cassidy and the Sundance Kid. You can see it in The Good, the Bad and the Ugly, and countless other masterpieces (or is it just me enjoying westerns here?).

But then, there was a transition towards an entirely different look. If you go see Guardians of the Galaxy, for example, you’ll notice that it takes exactly 6:30 minutes before you get to see even the film’s title. And until you see the full credits? That’s 113 minutes – the entire length of the film.

You get action right away. The movie starts right away. Like there’s no time to lose! And looking at the title of this very post, you might already know where I’m going with this…

Yes, content first!

Films have been “content first” for years now, giving us what we came for right up front. Of course, you might quite enjoy that vintage style or whatnot, but you do have to agree that things have shifted in a more attention-grabbing direction.

But what about web design? Should we also think content first? Should we start with the content – or at least the concept of the content – when we’re working on a new website design, and treat that as the most important element?

[spoiler alert]

Yes.

We’re going to get into the why and how in just a minute, but if I were to summarize this in one sentence, it would be this:

Telling a web designer to work on your site without giving them the content is like telling an interior designer to work on your living room before you buy an apartment.

The benefits of content first design

1. Content gives you constraints

As web designers, we’re constrained by nothing.

I mean, sure, there are screens. There are resolutions. But those aren’t real constraints. You can still make your design a zillion pixels long if you want to. Well, okay, there’s maybe the RGB pallet that’s somewhat limiting when it comes to the possible color range that you can use. But your eye isn’t capable of seeing more colors anyway, so that’s not really a constraint either (unless you’re mantis shrimp).

But content, on the other hand, does impose some serious constraints and limits your creativity in a certain way. Or maybe “limits” is not the best word, but it puts your creativity in a confined box and forces you to operate within that box.

In a very real web design scenario, you will have a specific volume of content to work with. A specific number of headlines, sales messages, body text, and etc. With all that, you can plan out the graphic part of the design better, and thus make sure that every individual piece of content simply fits like it should.

2. Content first design is better for the story

Every website has a story, or a message that it wants to convey to its visitors. This all connects back to the goals of the whole website, the brief that the client gave you, the niche it’s in, and so on.

But at the end of the day, to be able to resonate with its visitors on any level, the website needs a core (and good) story.

And it just so happens that content – and text content in particular – is much better at storytelling than anything else.

Even though a picture is worth a thousand words, text is always going to play the most important role on any website.

The content-first approach in web design focuses on storytelling – on making the design a tool to tell the story, and not the main focus in itself.

In the best case scenario, you need to have the story straight before firing up Photoshop, and then design around that story, instead of building a design prototype and then trying to hack the story into it somehow.

3. Content first gets rid of many further-down-the-road problems

In a traditional web design setup, it’s very common for a project to go back and forth multiple times later down the road, once the real content needs to be incorporated.

Very often, we find ourselves in situations where that final content doesn’t fit at all. Or is of the wrong format to be showcased effectively. Either way, as a result, we can be forcing ourselves into having to redesign multiple elements of the website completely, and effectively do the work twice.

If you think content first, you’re removing this possibility altogether. Starting with the content, you’re making your work more effective time-wise, and in many cases also more optimized for the site’s goal and purpose.

4. It improves your chances of building a mobile-friendly design

This one’s a long shot, but bear with me.

I’ve been talking about the importance of mobile for quite a while now (1, 2). The fact is that mobile is still growing rapidly, and that for many people, their phones *are* actually their main “Personal Computers.”

For that reason, making your website design mobile-friendly is even more important than making it desktop-friendly. And I stand by that statement wholeheartedly.

Now comes the kicker. Mobiles still don’t – and probably won’t – have enough of screen real estate for you to work with. Hence, we are forced to fit the most important pieces in a very limited space.

Content first just works for that. The whole idea of content first is to build the design to fit the content perfectly and to make that content even more noticeable. Maybe somewhat as a byproduct, but content-first thinking makes it easier for you to make the design responsive and to scale well on mobile.

How to do content first design

1. “Content first” is not just “text first”

The first thing we should probably set straight is that content first doesn’t necessarily mean text first. Yes, I know, I said that text is your best tool when telling a story, but in this day and age, graphics and images are not only used as structural elements of a website design. They serve as content as well.

So depending on the specific website and its goals (more on that in a minute), your main content could be images, videos, or even audio (especially since podcasts seem to be the hottest flavor of the summer.)

2. Know thy purpose » have content to make this purpose possible » design

The second a visitor arrives at a website they’ll have some questions. A good website will provide them with all of the right answers at the right time. But in order to do that, the design should reinforce the content and make it more accessible. By itself, the design won’t provide any answers at all. It’s just the vehicle.

When designing in a content-first way, make sure that the content you get has a good grasp on the answers it indeed needs to provide. Then, take it and make sure that the answers are delivered in the most effective way possible. This is good design.

Which brings me to:

3. How to think content first? Think conversation first

The best way to figure out what sort of content should appear on a website, what answers it should provide and in what manner, is to imagine a conversation taking place between two actual people. And in the real world.

  • If you’re speaking with a potential visitor – a person who’s the target for the site – what would that person ask?
  • What do they need to know to understand what the site has for them?
  • What angle to take when explaining the topic of the site?
  • Is the person already knowledgeable about the issue, or do you need to bring them up to speed?

Create your own list of potential questions and then put them against the content at hand. Do they match? What can you do to deliver the answers in the best way humanly possible?

4. Create a content board

To start designing content first, you obviously need to begin with the content of the site (duh). But what to do with it?

A good approach is to create a list of all the content elements that are going to be used throughout the website (on each of the individual pages). Or, better yet, create a board instead of a list. Or, even more better yet, get some pieces of paper, turn them into representations of the content, and start working with them on the floor (see header image for example).

 

Start by aligning and realigning them to get the perfect content layout and make for the friendliest content consumption scenario possible. Being able to just grab the notes and move them around is going to be much quicker and better for your creativity than working with a software tool.

At this stage, the thing doesn’t need to look anything like an actual site design. You just need a good document structure that makes for potentially the best reading / content consuming experience from the user’s point of view. Then, take that early version, “design around it” and digitize it.

5. Design to make the content more prominent

Once you know what the main content of the website is going to be, and of what type it’s going to be, you can do a lot to make that content look even more prominent.

For example, if during all the previous steps you’ve figured out that putting a spotlight on some video content will make the information more digestible for the visitor then you will be able to focus more on making sure that those videos indeed look great. For instance, you can give them additional control options (lightbox, fading, auto-play, etc.), all to make them easier to consume.

Without knowing what the content is, you won’t be able to do such a thing right away.

6. Don’t use “lorem ipsum”

Lorem ipsum is one of the more tricky design tool/shortcuts. On the one hand, it does help you get through the content parts that can’t be filled in beforehand. But on the other, it also gives you a false impression that the content is already there in its final stage, and that the only thing that needs to be done is switching to “real words” later on.

The problem is that it’s not the case at all. You are very likely to find out that things simply don’t fit once the final content needs to be included. For that reason, you need to integrate that real content as soon as possible, and not speed up the design process artificially by using lorem ipsum everywhere.

Also, lorem ipsum creates one more danger: using it, you often end up including exactly the amount of it needed to make the design look great. The thing is, however, that you don’t always get the most optimized amount of content for the real site. Your content amount expectations will actually, literally never get met.

What’s the future of content first web design?

Content first isn’t a new concept by any means, but it did pick up some speed in the recent years, with no signs of slowing down. The popularity of mobile devices and declining attention spans of a species called homo sapiens probably have something to do with that.

Anyway, we’re probably all wondering where this is going to take us next, and to what extent content is going to play the first violin in web design projects. What do you think of this?

Join the discussion

  • By Graham Baylis - 11:19 AM on July 21, 2016  

    This is an interesting post as it also nicely covers the issue of SEO. I am saying this a most web sites seem to get designed first, only then is the matter of getting the traffic to the site considered. In my view the target phrases need to be ascertained FIRST, the site map (in part) being created from that data. These phrases are mapped onto pages and the words that Google want to see ascertained (through reverse engineering). THEN the copy can be created with the site being designed AROUND the target copy..

    • By Karol K - 12:03 PM on August 5, 2016  

      Your strategy is a really good one. Unfortunately, implementing it can be tough for most clients, especially if they only think about “getting a website” for the heck of it, and aren’t considering all the ins and outs of the whole project, nor the benefits it can bring.