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?

The 7 Principles of Effective Web Design

The 7 Principles of Effective Web Design

header thumbnail image

Good web design? What is good web design?

Nice looking? Selling? The customer like?

For me, a web design is good if it is effective .
But what is “effective web design” ?

Effective is clear

Where am I?

Where can I go?

How do I get there?

And how do I get back?

Questions that the visitors face. Questions that a web design should answer very quickly.


Anyone who comes to a website for the first time must be able to orient themselves quickly. Web design must quickly signal to him what awaits him here. Headlines, navigations, logos, teasers should give him a quick overview. A clear, non-overloading page structure helps. It allows a quick scanning of the contents.

The content of a structure should follow.

People love structures, so we give them some. Effective web design creates clear structures.

Headlines, pictures, icons, colors create meanings. These should give the viewer a grip, give clues when scanning.

Effectively is readable

Webdesign is above all typography, that is the design of the text. (See the blog post by IA Web Design is 95% Typography )

Webdesign is 95% Typography.

Most of the information we consume on web pages is written text.

Navigation points, buttons, headlines, product descriptions, articles – all texts. Texts that want to be read.

Texts we want to read. To read quickly, without that reading becomes exhausting after a short time, because the font is too small, the font is inappropriate or the line spacing is too low.

In such cases, we often avoid reading in advance, even unconsciously.

Effective web design makes texts good, that is easy to read .

Sufficient font size, easy to read fonts, which ideally support the theme of the text. In addition, line spacing, which also deserve this meaning. And a text color that has enough contrast to the background.

THAT is good typography.


Effective is aesthetically pleasing

Above all, our perception is about the visual. And websites are above all an optical medium.

In addition, in recent years / decades, the development that “design” is becoming an increasingly important image factor and distinguishing feature. IKEA, Apple and H & M exemplify this. Design is important not only for high-quality products, but also for cheaper ones.

A screen design should therefore also meet a high-quality optics. This does not have to mean that every website has a high-quality look, but that the design is professional. A website for a toy shop does not have to be high quality, but visually appealing.

We love and expect good design.
Also on a website.

This concerns the choice of color, the typography, the grid, the structure of the individual design elements, etc.

Professional design creates meanings and guides the viewer. At the same time it creates emotions and unconsciously communicates the positioning of the website at any time.


Effective is emotional

We are emotional beings.

We can think of ourselves as rational (which most of us do), above all we decide emotionally. Long before our brains come up with rational justifications.

Therefore, a website should also appeal to us emotionally. To convey to us certain emotions or to evoke within us.

Images appeal to us emotionally, more directly and much faster than text ever could. And if images are emotional, then colors are even more important, as the basis of every image.

Colors (and thus also pictures) directly achieve a certain effect.

With colors, you can easily create certain emotions. They can be used to control emotions. The targeted use of colors can cause the visitor of the website a certain emotion.

We are emotional beings. Effective web design uses this emotionality for its purposes.

Colors and pictures should therefore not fulfill an end in themselves but fulfill a specific task.


Effective is user friendly

That sounds good, of course – “user-friendly”.

And sounds almost so logical that you should think all the websites are there anyway. But it is not like that.

User-friendliness is often referred to as usability. And usability affects all aspects of website development and should be considered from the beginning.

Without a high usability, a website can hardly achieve its goal.

A high usability is something of a quality feature of a website. The user reaches his destination effectively and efficiently.

User-friendliness concerns the navigation, its structure and the naming of the navigation points. It concerns the contents, which must be well structured and comprehensibly written. It concerns the design that has to generate a clear visual hierarchy. It concerns the technical implementation, which ensures fast and easy operation of the website on every device.


Effective is flexible

One sits at his desk for many hours, looking at a 30-inch monitor.

The other sits in the train in front of his smartphone and wants to quickly look something up.

And the other has just sat down in front of his laptop and prints out his desired information.

The usage situation of users of a website can be so different.

A web design adapts to the user, his usage statement and his output device. It is not fixed on a specific situation, on a specific device and especially not on a specific screen size.

But these were websites for a long time. Very long. 1,024 pixels wide was the standard used by web designers. Since the meteoric rise of tablets and smartphones, the awareness of alternatve uses has come up and given the technical requirements thanks to media queries.

Websites are per se flexible. Let’s try to take as little of them as possible.

Responsive web design is the keyword. But only one aspect. A barrier-free access to the website, a careful handling of effects and animations, a clear contrast between text color and background color, attention to possible visual impairments (such as color blindness) and an optimized print version are other important aspects.


Effective is fast loading

You know that.

You come to a website, you are tense on the content and have to wait … and wait … and …

And are gone or at least already heavily annoyed. Rightly so!

The temptation is great, of course, to incorporate great effects thanks to jQuery. Lightboxes, Slider and so on. And to use beautiful large-format wallpapers.

Thanks to fast Internet connections (especially in the Web designer in the office), enormous amounts of data are no longer a problem. But that does not look like every one. Just a look at the mobile usage shows that websites with low storage requirements are clearly in the advantage.

The user does not want to wait long for loading web pages, the loading animations may still be so nice.

So clearly stated: Every bit should be well considered and justified. Files should be optimized (image files compressed, source code minimized, etc.). Scripts can only be loaded if their meaning or function is really needed. Everything else wastes only the valuable time of the visitors.


Web design must be effective

The observance of these seven criteria ensures that a website is good.

That it is effective.

Effectiveness is a pleasant user experience.

And then the visitor stays on the website or comes back or buys or …

What do you mean? Are there any missing aspects that make a site effective? Or what points do you pay special attention to?