Content vs. Design

It’s a bit like the chicken and egg problem!

What’s there first: the content or the design?

At least that’s how the day-to-day work of many web designers and web agencies looks like:

  • Does the customer deliver the content before I start designing? So can I design it based on content?
  • Or is the customer waiting for the design to know what to create content for?

Either way, neither of the two variants leads to a satisfactory result in most cases.

If the customer creates the content first, the designer knows at least WHAT he has to design. But the customer depends too often in the air. He often does not know the possibilities of possible content design and interaction. A lead waste written in Word is then often the result.

If the designer is allowed to design first, because the customer likes to “see something first,” then placeholder content must be used – Lorem Ipsum , etc.
The customer then knows at least exactly what content he should produce and how much.

The design may look nice, but it will hardly fit the later content. Because in this case the design would be a pure facade . Totally detached from the content.

First content, then design or vice versa,
or how now?


Design without the right content.
Rarely a good idea

It is absolutely understandable that customers want to see a design design quickly. Only: It’s not a good idea!

Mostly it leads to frustration on at least one of the two sides and / or to an inferior result because design and content are not coordinated.

Because the design can not be the concept alone. The design does not replace conceptual and content planning.

Using dummy text and placeholder images can lead to an aesthetically pleasing design, but unrealistic design. Even worse: it suggests that the content would be secondary.

A good example is the design templates of the relevant suppliers. With high-resolution, appealing photos they look always appealing.

A good example is the design templates of the relevant suppliers.  With high-resolution, appealing photos they look always appealing.

And this is the reality: there was no budget left for the photographer!

The visitors do not come because of the design, but because of the content. The content is the most important element of the website. The design should support the contents and their statement.

Design creates structures and hierarchies. It guides the visitor. It offers orientation. But the designer must know which elements have which meaning. He needs to know what the site and the visitor have.

The shape follows the function

Of course, this old designer motto also applies in web design.
The form should be subordinate to the function.

And how does it often look like in reality?

There is only a rough design idea (like in the form of simple business cards and self-designed letterhead). You do not even need to talk about a corporate design with detailed design information. Instead, the customer may still have certain design ideas, guided by his personal taste (or even worse, by relatives or acquaintances ).

About the actual target group, namely the visitors of the later website and their needs and expectations, is not even talked.

There may be one or two links to websites that the customer likes and can “orient” on.

Very unsatisfactory the whole thing. How to make a website that is effective?

“Go back to Los”
A fresh start with concept

Before the web designer designs the first color harmonies before the customer writes the first words, a concept should be created. What has long been standard in larger web projects should also be implemented in smaller and medium-sized projects.

Decisive for the success of a web project and the targeted implementation is the conception.

That does not have to be page-long concepts. Often it is also sufficient to write down the most important aspects in written form.

As a suggestion, the following questions may be helpful:

  • Who exactly is the company (location, history, etc.)?
  • What kind of product or service is it?
  • Which target groups should be addressed with the website?
  • Which problems / needs does the target group have (concerning the products and services)?
  • Which content should therefore be created and presented?
  • Are there any communication materials (business cards, flyers, brochures, etc.)?
  • How should the website appear, what impression should be conveyed (eg collect multiple adjectives)?

Answering these questions is the basis for entering the project. It is the basis for the following points, which include not only the design and content creation. Now, basically, it is also possible to discuss what an implementation can look like. Only now do certain functionalities arise. It’s about thinking:
The problems of the users should be solved and not their own!

But is there still the question of what to do with: design or content?

The basic structure – the wireframes

Design or content? The answer should be called wireframe!

This is about the arrangement and positioning of the contents and functional elements. Here you can quickly and easily implement and discuss various options. Both the overall composition as well as individual details can be clarified here.

Wireframes have nothing to do with the visual design or even an initial technical implementation. The focus is solely on the content and its arrangement. Free from visual influences, the content structure of the individual pages can be worked out.

The type of wireframe creation can be very different. They can be sketched quickly by hand, digitally created in the graphics program or in extra wireframe software.

This is what a simple digital wireframe looks like.  Created in minutes with the online tool <a href="" target="_blank"> </a>.

This is what a simple digital wireframe looks like. Created in a few minutes with the online tool .

Once the wireframes have been coordinated, design, technical implementation and content creation can run in parallel. Nobody has to wait for the other one.

Together with the concept, the wireframes are the basis of the design and technical implementation that can be invoked time and time again (especially when requests for changes come from the customer).

How much design would you like?

There should be web designers / agencies who still create complete Photoshop layouts. There are still customers who like to see fully elaborated designs before content is created, or it goes to the implementation. In addition to the fact that this process is inefficient and no longer up to date, in such designs especially the appearance is assessed. The design and only graphical elements are analyzed and less attention is paid to the contents (à la “Can the logo be a little bit bigger” or “Do they have a different font”).

With wireframes, the question of colors, typography, etc. is still far from being clarified.

Instead of cobbling together complex designs in graphics programs, mood boards can help. Here, graphic ideas for the project are collected based on the results of the concept: color palettes, typographic ideas (fonts, colors), images, icons, backgrounds, etc.

For example, <a href="" target="_blank"> Pinterest </a> has some suggestions for mood boards from all directions and implementation variations.

At Pinterest , for example, you will find some suggestions for moodboards from all possible directions and implementation variants.

The implementation variants of a moodboard are very broad gefächtert. There are rough collages, sometimes analogous to finely crafted digital boards.

The idea of Style Tiles has proven itself. While classic mood boards are often not concrete enough, and screen designs designed in Photoshop are too time-consuming, Style Tiles are a kind of compromise.

Even the Google image search provides some exciting style tiles as a suggestion.

Even the Google image search provides some exciting style tiles as a suggestion.

The visual direction becomes clear without losing itself in details.

Nevertheless, some design proposals for individual elements are already being designed, such as headlines, links, buttons or backgrounds.

If even more style tiles are created, you have a good decision basis for and with the customer. The basic design language can be fixed, because even changes can be made quickly.

A case for two:
Wireframes and Style Tiles

Together with the wireframes, style tiles are the basis and the prerequisite for technical implementation.

Style tiles are a kind of design scheme that sets out the basics, but is not too set. And the connection of Style Tiles to technical implementation with style sheets (CSS) is already in the name.

Together, Wireframes and Style Tiles set the direction for the implementation.

The design is not a (final) product, but a process.

Create with real content.
That’s the challenge.

Even during the implementation, the design is being further developed. The wireframes thus provide a kind of inventory list. Which content elements are needed for the project. For example, teaser blocks, sliders, order forms, product previews, etc.

Patterns instead of Pages – Design of single building blocks

Instead of designing complete pages in a graphics program, it is only possible to design individual content elements. What does a button look like? What does a form look like? And so on …

The advantage? A page is no longer seen as a single unit that, once designed, never changes again. This is also unrealistic, where pretty much every page is now based on a content management system.

Websites “live”, they change. The designer has, as soon as he has given the project out of hand (which is usually at the latest at the launch of the case), no influence on the content, or their design. And then suddenly come “editors” and maintain a whole new content, with which the designer would never have expected at this point …

If the page is designed as a “Gesamtkunstwerk”, this quickly turns out to be an optical problem. When using design patterns, it does not matter what content the customer places where. These work for themselves and in an overall system.

A newsletter subscription form can be called a design pattern. In fact, individual form fields or submit buttons could be a design pattern. If this form is designed as a harmonious unit, then it does not matter where on the website this form is installed. If it appears instead of in the sidebar at once in the footer or even in the middle of the article, it does not matter. It fits in perfectly.

The metaphor for science: Many single atoms later put together a whole website.

The metaphor for science: Many single atoms later put together a whole website.

Web designer Brad Frost has written more about the methodology of design patterns in his Atomic Design article.

It pays to use a style guide (Design Manual). All HTML elements as well as design patterns (before) are formatted here. Preferably right in one (or more) HTML files. So on the one hand, no element can be forgotten and looked up again and again if necessary.

Conclusion: “Conception first”

Who came first: hen or egg?

With a clear conscience we can answer: the concept!

Because design is not a facade.
Because content has a benefit.

The design establishes the context between the users / readers and the sender. The context between the statements and the desired effect.

The context must be right. Who do we want to address and what do we want to achieve. These questions need to be clarified. At the beginning of a project and again and again in the middle. Web design is a process. The web designer is always something of a “strategy consultant”.

So instead of content first or instead of mobile first,
It should read: Concept first

What are your project experiences? When does the design come when the content? What role does the conception play in your projects, or does it play a major role at all?