Skip to main content
UX sketches.

Marrying Content and Design

Michael Tri

By Michael Tri ,

Senior Interactive Designer


Great digital experiences require the marriage of content and design. Content benefits from the enhancement of design. However, while content can live without design, design really cannot survive without content. Yet, all too often, designers are asked to design without knowing the content.

The Horrors of Designing without Content

1. Cookie-Cutter Design

If you don’t know what your content is, you have to create a design that must be able to hold any type of content. This means your design is basically a collection of picture frames — containers that have no unique relationship to the art within. This challenge can easily result in designs that are basic and hyper-conventional. This is not necessarily terrible, but the solution could be so much better.

2. Wasted Time

Designing without content is like shooting in the dark; it’s a waste of time, and your effort would probably be better spent finding the light switch first. Here’s the scenario: it’s the day before your final design presentation, and everything is looking beautiful. Boxes filled with lorem ipsum, everyone’s favorite placeholder gibberish, show beautiful typographic hierarchies. The UI has clear and noticeable buttons with lorem ipsum labels. News widgets show grey image boxes and lorem ipsum fills the slots where a name, a date and button to read more will go.

Suddenly, the final content deck arrives, and nothing fits where it should! Titles get truncated in odd ways, images are a different aspect ratio than originally assumed and the news teasers are so many different lengths that your precious grid is destroyed. It looks like you have a late night ahead of you as you scramble to make this content work and get your design to look beautiful again. Content coming at the last second means more work. More work means you need more time and more budget to complete the project.

3. Unhappy Users

It’s sad but true; design without content is design without purpose. Content is what users look for when they visit a website. If that content is not there or it’s hard to access, they will leave, even if the site is pretty. Designers should advocate for good content and content organization. A lack of emphasis on carefully crafted content will leave you with a final product that serves no one.

The Advantages of Designing with Content

1. Thoughtful Design

Visual design decisions are content presentation decisions. Isn’t it better to make informed decisions? The qualities of the content should inform its presentation. For example, on a website with an extreme amount of content — perhaps a website with important new information about health insurance law — greater emphasis should be placed on scannability. Large amounts of information need clear hierarchy and structure to allow users to quickly sift through to the information they truly need. A wide breadth of content may also need additional controls like jump links, or perhaps it would be more prudent to break up the content into different pages.

2. The Right Fit

If we design with close-to-final content, we will be more prepared when our final final content is created and ready to be fitted into the design. As opposed to when we make design decisions before content decisions, we design with an understanding of the requirements of our copy. This allows us to make our design logically flexible and accommodate the range of copy that actually exists rather than just guessing or making our design infinitely flexible.

With non-text content like videos and photography, information is key. Knowing the size, aspect ratio and subject matter of any photography, videos and other assets helps determine so much in the design. Knowing these qualities or having a sampling of the final assets allows designers to design page layouts that present the assets in the best possible way. If we know that our photography is mostly single-subject vertically oriented portraits, then we design much differently than if the photography were landscape oriented photos of groups. The design can highlight the content in its natural state instead of trying to contain, crop or minimize it.

3. A Happy Future

Great solutions created with both content and design working together will further define future content. Content-informed design decisions can guide future constraints to ensure that every piece of content for the site fits nicely into the design. Character lengths and formatting choices in headings, sub-headings, body copy, by-lines, call-to-action buttons or any other content pieces that might be on the page become a model for written content updates going forward. With an understanding of how they will fit into the design, photo and video asset decisions influence how future photos and videos will be shot.

A Match Made for Success

In the digital space, design depends upon content. Designers need to be advocates for methodically produced, high-quality content. To ensure the best possible design solution they must work closely with content creators, including copywriters and content strategists, to understand and integrate the content process with the design process. With this understanding and partnership, design can be truly successful.

Related Posts

Clark 1013 meta orig

A Flexible Design Process: A Flexible Design Process

We learned Jason Santa Maria doesn’t have a step-by-step process for his design projects. Find out about the guidelines he provided at a talk instead.

Tri 0916 meta orig

Small-Scale Research Adds Up

In a talk, Erica Hall spoke of how, without research, assumptions within the design process could create critical points of failure further along.