How Content Shapes Webpage Design and Vice Versa

The Content/Design Relationship

Should you design a page first, or write the content first? We believe this should happen in tandem so that each shapes the other. The result is an ideal blend of what you want to talk about, presented in an easy-to-read way.

We often talk to our clients about the idea of the content on a page shaping the design, and the design shaping the content. It’s hard to explain, but the general idea is that when you are writing content for a webpage, you are often not thinking about how it will look on a webpage or how easy to read it be for people viewing it online.

When people start writing, they tend to write in paragraphs (though perhaps this is shifting as younger people have primary experience with digital interfaces). Many paragraphs of text do not play well on most web pages however. That works for news articles and blog posts. Not so well for your “About” page or your “What We Do” page.

Using our webpage that talks about our monthly support services — Care Packages — this post will show what we mean.

The Content / Design Evolution

The following will walk you through several steps in the evolution of one of our webpages.

1. Take a look at the raw text content in this Google doc. You can see it’s about a page long, and perhaps your eyes glaze over some trying to skim it. Everything is about the same size. It’s all the same color. Nothing really stands out or helps you skim read to quickly find points of interest or  just get the gist of it.
2. Ok so we put that content into this page. Since it’s a web page, we added a couple buttons, a decorative photo at the top, and styled some of the text to make it easier to read and to skim. It works. But it’s kind of blah and feels like lots of test to read.
3. In this version we added more visual interest. Now the top of the page has a bold background color. The testimonials are separated out from the main text which both gives them more impact and makes them look better. The main text stands on its own on the white background. And then there’s a prominent call-to-action at the bottom. But the top and bottom sections both seem to have a lot of text.
4. In the final version, we added a jumbo background image (though the blue background might be better as it’s cleaner). We rewrote the content for the top section, making it shorter, and more clear We grouped all the paragraphs of text together on the white background, and paired it with just a single testimonial. This makes it easy to see all the primary content without scrolling. The page ends with a sleeker call-to-action. With just three main sections of content, the text is broken into simple, yet still visually interesting, sections that make sense. And it’s very easy to understand the content and to skim for what’s of interest.