Moodboards sind Collagen, über die man verschiedene Designstile veranschaulichen kann. So eine Collage ist relativ schnell zusammengestellt – ganz im Gegenteil zu “echten” grafischen Entwürfen. Die werden mit viel Aufwand im Grafikprogramm erstellt.

Damit alles stimmig ist, feilt der Designer ausführlich an den Details. Das kostet Zeit. Letztlich kommt nur ein Entwurf zum Zug, das heißt, zwei von drei landen im Papierkorb. Ein großer Teil des Budgets für die Gestaltung auch.

Die Vorteile von Moodboards

• Es geht schnell, sie belasten das Budget wenig
• Man kann verschiedene Stile und Richtungen ausprobieren
• Korrekturen und gestalterische Kurskorrekturen sind umkompliziert
• Viele Leute können mitreden, ohne dass ein bereits fertiger Entwurf “zerlegt” wird
• Die Diskussion verliert ich nicht in nebensächlichen Details, weil sich Moodboards auf das Wesentliche konzentrieren

Bei Google nach Moodboards suchen.

Bild: Screenshot Google-Suche “Moodboard”

Der Entstehungsprozess einer Website unterscheidet sich grundlegend von den Abläufen, die wir aus der Printproduktion, aus der Werbung oder aus der Software-Entwicklung kennen. Jonathan Kahn bringt es in seinem Artikel Embrace content strategy: throw out your design process so auf den Punkt: Eine Website, die nach dem Muster eines gedruckten Geschäftsberichts aufgesetzt wird, sieht zwar schick aus, aber kein Mensch wird sie lesen. Sie ist dann genauso wirksam wie eine Broschüre in der Schublade.

Webdesign ist anders. Leser verhalten sich auf einer Website nicht so wie beim Zeitunglesen oder Fernsehen. Sie haben spezielle Erwartungen an das Medium und sie nutzen das Web in allen möglichen Lebenslagen.
Die Inhalte auf Webseiten beschränken sich auch nicht auf Texte, es gibt viele Content-Formate: Videos, Audiodateien, Präsentationen, Formulare und so weiter.

Die Teile dieses Puzzles zu einem Bild zusammenzusetzen, das ist die Aufgabe von Content-Strategie.

Content-Strategy in einem Satz

Alles, was auf der Website passiert, wird nach zwei Kriterien bewertet:

1. Die unternehmerischen Ziele der Website
2. Die Bedürfnisse der Besucher und Nutzer

Jede Seite, jeder Text, aber auch jedes Designelement muss sich daran messen lassen. Diese Fragen sind der rote Faden, der jede Projektphase mit der nächsten verbindet.
Wenn das Team beispielsweise in der Konzeptionsphase den Strukturplan kritisch betrachtet, könnten die Fragen lauten:

• Welche Seiten in diesem Strukturplan leisten einen Beitrag zu den unternehmerischen Zielen? Worin konkret besteht dieser Beitrag?
• Welche Seiten unterstützen die Besucher? Auf welche Weise?
• Wo müssen die Schwerpunkte der Informationen liegen, wie ist die Aufteilung?

Und wie sieht es im richtigen Leben aus?

Der Projektmanager fragt: “Wie weit seid Ihr?”. Der Designer antwortet: “Ich warte auf den Text.” “Ich warte auf das Design”, sagt der Texter.

Nach einem strengen Blick des Projektmanagers gibt der Designer klein bei. Ein bisschen Lorem Ipsum, ein paar Agenturbilder und fertig ist der Entwurf. Ist die Grafik abgestimmt, kommt der Texter dran und ersetzt den Blindtext mit “echten” Texten.

Zum Schluss geht das Ganze zur Freigabe an den Kunden. Ein paar Tage später kommt die Rückmeldung: Die Texte auf der Startseite müssen dreimal so lang werden und die Hauptnavigation muss noch vier zusätzliche Rubriken aufnehmen. Nein, die Fotos sind noch nicht fertig und zu den Produkten X, Y und Z liefert Herr Maier noch was.

Kurz vor dem Start-Termin gähnen noch viele weiße Flecken auf den Seiten. Die werden schnell mit ein paar Texten aus der alten Website gefüllt. Dafür enthält die Startseite jetzt einen ausführlichen Abriss der Unternehmensgeschichte.
Die Website ist fertig.

Wie verändert eine Content-Strategie diesen Prozess?

Kleine Projekte mit wenigen Seiten brauchen einen Designer und einen Texter und keine Strategie. Das heisst, sie könnten sie wohl brauchen, aber das Zeitbudget dafür ist in der Regel nicht vorhanden.
Aber schon bei einem handelsüblichen Unternehmensauftritt sieht es anders aus. Eine Content-Strategie gibt dem gesamten Team nämlich das, was es dringend braucht: Eine gemeinsame Sprache. Und objektive Kriterien, an denen sich so subjektive Dinge wie Farben, Textlängen und Schreibstile messen lassen.

Bei vielen Projekten beschränkt sich das kollektive Bild des Projekts auf den Anfang und das Ende: Man trifft sich zum Kickoff und irgendwann geht die Website online. Was dazwischen passiert, ist keinem so richtig klar. Das Ergebnis ist nur allzu oft ein schiefer Kompromiss aus Meinungen, Zufallsergebnissen und allen möglichen Umständen.

“Gefällt mir nicht” ist keine belastbare Aussage mehr, wenn alle einen handfesten Maßstab zur Verfügung haben. Der Satz könnte heißen: “Die Besucher finden dies und jenes nicht, weil die Farbe der Links zu hell ist. ” Oder: “Die Leser verstehen diesen Text nicht, weil die Sprache zu kompliziert ist.”

Die Content-Strategie gibt jedem das in die Hand, was er oder sie braucht.

• Der Manager muss nicht im Stillen die Frage fürchten, warum er die Website eigentlich in Auftrag gegeben hat. Denn er weiß, was sie für sein Unternehmen leistet und welche Rendite sie ihm bringt.
• Die Webdesignerin sitzt nicht vor einem leeren Blatt Papier und muss sich die Verpackung für etwas ausdenken, das sie nicht kennt. Denn die Inhalte sind klar.
• Und der Redakteur kämpft nicht kurz vor dem Launchtermin mit den fertig ausgearbeiteten Templates. Denn Platzierung, Gewichtung und die Längen seiner Texte stehen längst fest.

Der einfachste Nenner: Users First

Eigentlich heißt das Schlagwort “Content First”, aber “Users First” bringt es besser auf den Punkt. Um sie geht es nämlich, für sie wird der ganze Aufwand getrieben.

Ohne Leser, Betrachter und Zuhörer ist jede Art von Inhalt bedeutungslos. Inhalte, die die Bedürfnisse von Nutzern nicht beachten, sind schlecht für den Anbieter. Denn Besucher, die sich ignoriert fühlen, gehen.
Erin Kissane; The Elements of Content Strategy

Hier kann man gedanklich ansetzen, aus diesem Blickwinkel lässt sich eine Content-Strategie relativ leicht und flüssig entwickeln. Ahava Leibtag, Content-Fachfrau aus Washington DC, hat diesen nutzerzentrierten Ansatz ist einer sehr anschaulichen Checkliste zusammengefasst. Dank Walburga Wolters gibt es die Liste auch in einer deutschen Übersetzung.

Der Content-Strategy-Prozess ist darin auf fünf einfache Fragen reduziert.

• Findet der Besucher die Inhalte?
• Kann der Besucher die Inhalte lesen?
• Versteht der Besucher die Inhalte?
• Wird der Besucher aktiv werden?
• Wird der Besucher die Inhalte weiterempfehlen?

Ahava Leibtag empfiehlt, die Liste mit dem gesamten Website-Team zu bearbeiten. Dabei soll man sich auch nicht scheuen, die Liste zu verändern und zu ergänzen.

Fazit

Wenn man so will, geht um die richtige Reihenfolge. Der Anfang liegt ebenso wenig bei der Ausarbeitung eines Designs noch bei der Auswahl eines Reaktionssystems. Es geht auch nicht um fertig ausformulierte Texte; bis die fertig sind, kann man natürlich nicht warten.
Der Anfang des Fadens liegt bei den Lesern.

Ihre Bedürfnisse, ihre Fragen, Gewohnheiten, Handlungen und Reaktionen sind es, um die sich das Erscheinungsbild einer Website dreht. Ein Webprojekt ist dann auf dem richtigen Weg, wenn es darauf die richtigen Antworten gibt.

Wireframes sind Strukturskizzen von Websites. Der Name kommt von den Drahtgitter-Modellen (Wire = Draht) aus der 3D-Grafik. Die Website von Spiegel Online sieht in der Wireframe-Darstellung etwa so aus:

[Screenshot rechts über wirify.com]

Was man auf der Skizze sieht
Alle Elemente, die die Website enthält: Die Navigation und die Inhalts-Bereiche, deren Position, Größe und Zusammenstellung

Was man nicht sieht
Farben, Schriften, konkrete Inhalte (Texte, Bilder)

Die Vorteile von Wireframes

Im Gegensatz zu grafischen Entwürfen ist ein Wireframe-Modell schnell aufs Papier gebracht. Wünsche des Kunden lassen sich ohne viel Aufwand integrieren, Varianten und neue Ideen sind fix ausprobiert. Das ist vielleicht der größte Vorteil von Wireframes: Der Kunde kommt sehr früh mit ins Boot.

Wireframe-Modelle helfen, die Gewichtung der Inhalte und die Nutzerführung herausfiltern.

• Wie bewegt sich der Besucher vom einen Inhalt zum nächsten?
• Welche interaktiven Funktionen müssen an welcher Stelle in welcher Form verfügbar sein?
• Auf welche Elemente soll die Aufmerksamkeit des Benutzers besonders gelenkt werden?
• Wie wird die Information über verschiedene Ebenen hinweg aufgeteilt?
  (Übersichtsseite -> 1. Detailansicht -> 2. Detailansicht)

Kann man das nicht auch an einem grafischen Entwurf erarbeiten?
Ja, aber die Diskussion ist schwerer zu lenken. Statt über Funktionalitäten und Struktur dreht sich die Diskussion um Farben, Schriften, Weißräume und Stimmungen. Die optischen Details absorbieren die gesamte Aufmerksamkeit.

Schnell schleichen sich strukturelle Defizite ein, die erst nach dem Launch sichtbar werden. So können zum Beispiel schwache Nutzerzahlen darauf hindeuten, dass der zentrale Aspekte des Angebots nicht klar genug herausgearbeitet wurde oder die Besucher zentrale Inhalte nicht erreichen, weil etwas mit der Nutzerführung nicht stimmt.

Graue Kästen contra bunte Grafik

In der Diskussion über die Wireframe-Layouts fallen wichtige Entscheidungen. Alle folgenden Arbeitsschritte, z.B. die grafische Ausarbeitung, werden sich auf die Strukturmodelle beziehen und stützen. So weit die Theorie.
In der Praxis stossen wir mit Wireframes manchmal an Grenzen, weil einem Kunden trotz geduldiger Erklärung die Tragweite und Bedeutung der grauen Kästchen nicht klar zu machen ist.

Grafische Entwürfe sind hübsch und anschaulich, Wireframes sind trocken und abstrakt. Hier ist es hilfreich, ein bisschen zu experimentieren. Manche Kunden können eher mit handgezeichneten Skizzen etwas anfangen als mit grauen Balken und Kästen aus dem Drucker. Andere möchten zunächst mal ein Gefühl für den Stil der Seite bekommen, bevor sie sich auf strukturelle Fragen einstellen können.
Das kann man über Moodboards erreichen oder indem man Seiten und Designs betrachtet, die dem Projekt stilistisch oder inhaltlich ähnlich sind.

h1 {font-family: sans-serif}

Möchte man dem h1-Element noch eine Schriftgröße zuweisen, z.B. 14px, dann schreibt man diese Angabe ebenfalls in die geschweiften Klammer:

h1 {font-family: sans-serif; font-size: 14 px}

Die Angaben werden mit einem Strichpunkt voneinander getrennt. Man kann beliebig viele Formatierungsanweisungen miteinander kombinieren.

Inhalt und Struktur sind getrennt

In der Regel legt man eine eigene Datei mit den Styles an. Das so genannte Stylesheet – im Prinzip eine einfach Textdatei – wird per Befehl in die HTML-Datei eingebunden. Ruft ein Browser die Seite auf, schaut er im Stylesheet nach, wie er die HTML-Elemente darstellen soll.
Dasselbe Stylesheet kann beliebig vielen HTML-Dateien zugeordnet werden. Das heisst, alle Seiten greifen dann auf dieselben Formatierungen zurück. Das hat einen großen Vorteil: Will man eine Formatierung ändern, z.B. die Schriftgröße, genügt eine kleine Korrektur im Stylesheet. Es ist nicht nötig, alle HTML-Seiten zu bearbeiten.

Die Vorteile von Cascading Stylesheets

• Änderungen an Formatierungen können schnell und an zentraler Stelle umgesetzt werden
• Mit CSS kann man Inhalte für unterschiedliche Ausgabemedien (z.B. Bildschirmdarstellung, Druckversion, Smartphone) optimieren.
• Der HTML-Code bleibt schlank, da die Formatierungen nur einmal zentral festgelegt werden.
• Schlanker Code bedeutet weniger Traffic auf dem Server und spart Kosten.
• Die Seiten sind mit deutlich weniger Zeitaufwand zu pflegen.

CSS bieten sehr umfangreiche und reizvolle Möglichkeiten, eine Webseite zu gestalten, die weit über die Möglichkeiten von reinem HTML hinausgehen. Sehr schöne und anschauliche Beispiele für das, was mit CSS möglich ist, zeigen diese Seiten: www.csszengarden.com

Das Prinzip ist einfach, trotzdem ist es ein kleines Kunststück, die verschiedenen Parameter, die Google zur Gestaltung einer Kampagne anbietet, gut aufeinander abzustimmen.

Vier Schritte zur ersten AdWords™-Kampagne

• Konto anlegen
  Unter www.adwords.google.de legen Sie ein Nutzerkonto an. Dafür fällt eine geringe Schutzgebühr für die Aktivierung an. Momentan sind das 5 Euro.
• Limits festlegen
  Sie legen fest, wie viel Sie pro Klick und pro Tag zahlen möchten. Mit diesen Angaben steuern Sie, wie häufig Ihre Anzeige erscheint. Ein höheres Gebot bewirkt, dass Ihre Anzeige häufiger geschaltet wird. Das heißt: Hohes Gebot = mehr Klicks und umgekehrt.
• Suchbegriffe (Keywords) auswählen
  Parallel legen Sie die Suchwörter fest, nach denen Ihre potenziellen Besucher Sie und Ihre Anzeige finden sollen. 
Hier müssen Sie sowohl die Gewohnheiten Ihrer Kunden richtig einschätzen (welche Begriffe verwenden sie, was kommt ihnen als erstes in den Sinn) als auch Ihr eigenes Angebot. Finden die Nutzer tatsächlich relevante Inhalte zum Suchwort X  auf Ihrer Seite? Haben Sie etwas zu bieten, dass die Besucher dann auch wirklich zu Interessenten oder Kunden macht?
• Klein anfangen und ausprobieren
  Fangen Sie mit einer kleinen Liste Keywords und mit einer einzelnen Kampagne an. Im Laufe der Zeit bekommen Sie ein Gefühl dafür  und können die Parameter Ihrer Kampagne korrigieren und anpassen. Auch lernen Sie allmählich das Umfeld besser kennen. Vielleicht besetzt ein Mitbewerber dasselbe Suchwort wie Sie und überbietet Sie im Preis pro Klick. Ihre Anzeige rutscht dann automatisch nach unten oder erscheint seltener. Dann müssten Sie eigentlich Ihr Gebot erhöhen – vielleicht lohnt es lohnt sich aber auch, nach anderen, alternativen Suchbegriffe zu suchen.
  Google gibt gute Tipps zur Einschätzung der Kosten zu Beginn der Kampagne. Läuft die Kampagne, nutzen Sie auf jeden Fall die Google‘s AdWords™-Benutzeroberfläche – ein mächtiges Anlaysetool – um Ihre Kampagne zu überwachen und auszuwerten.

Wissenwertes zu Google AdWords™

Der Qualitätsfaktor

Wo und wann Ihre Anzeige erscheint, hängt nicht nur davon ab, wieviel Geld Sie Google für einen Klick auf Ihre Anzeige bieten. Google bringt noch ein eigenes Kriterium ein: Den Qualitätsfaktor. Google möchte nämlich seinen Kunden stets relevante Inhalte bieten. Passt eine Anzeige so gar nicht zum damit verknüpften Suchwort, wird sie keinen Erfolg haben, und sie wird einfach nicht erscheinen.
Der Grund: Anzeigen auf einer Suchergebnisseite, die am Interesse des Nutzers vorbeigehen, werden nicht angeklickt. Google würde also weniger verdienen. Ein besseres Geschäft sind Anzeigen, die inhaltlich einen guten Bezug zur Suchanfrage haben, denn sie werden eher angeklickt.

Anzeigentext

Laut Google liegt liegt der tatsächliche Betrag, den Sie ein Klick kostet, in der Regel unter Ihrem maximalen Gebot. Der Erfolg einer Kampagne hängt stark mit der Qualität Ihrer Anzeige zusammen. Je besser der Text der Anzeige ist, desto günstiger fällt Ihre Kosten/Nutzenrechnung aus. Wenn alles gut zusammenspielt, werden aus Besuchern Kunden.

Landing-Page

Sie sollten für jede Kampagne eine eigene Landing-Page einrichten. Das ist die Seite, auf die der Link in Ihrer Anzeige verweist. Auf dieser Landing-Page fangen Sie den Besucher auf, bieten ihm exakt den Inhalt, der zu dem Suchbegriff, dem er auf der Spur ist, passt. Und bereiten Ihr Angebot so auf, dass der Besucher mit ein, zwei Klicks etwas auf der Seite tun kann, das ihn zu einem Kunden macht.

Mitbewerber

Ihr Erfolg und Ihre Kosten hängen stark davon ab, was Ihre direkten Mitbewerber zu zahlen bereit sind bzw. welche Suchwörter sie besetzen. Versuchen Sie, Ihre Nische zu bestimmen, richten Sie Ihre Anzeige auf Ihr spezifisches Marktsegment aus.

Streuverluste

Die Streuverlusten der AdWords™-Anzeigen sind sehr gering, da die Anzeigen nur eingeblendet werden, wenn nach einem bestimmten Begriff gesucht wird. 
Noch ein Vorteil: Sie können Ihre Kampagne regional ausrichten. Ihre Anzeige wird dann nur in einer bestimmten Region oder Stadt eingeblendet. Selbstverständlich können Sie auch landesweit oder international schalten.

Messbarer Erfolg

Sie können die Wirksamkeit einer Kampagne (ROI = return of investment) sehr gut messen. Über kleine Programmschnipsel, die in Ihre Homepage eingebunden werden, kann man nachvollziehen, welche Unter-Seiten der Interessent besucht hat, ob eine Anfrage oder Bestellung erfolgt ist und einiges mehr.