März 12

Wie du mit einem Moodboard deine Traum-Website visualisierst

März 12, 2020


Als ich den Begriff Moodboard zum ersten Mal gehört habe, verstand ich nur Bahnhof. Ich konnte mir keinen Reim darauf machen. Frei übersetzt heisst Moodboard ja Stimmungsbarometer.

Was hat das Moodboard mit deiner Website zu tun?

Den ersten Eindruck, den ein Besucher deiner Website wahrnimmt, ist ein Gefühl, eine Stimmung. Diese Stimmung wird Look&Feel einer Website genannt.

Wenn dieses Gefühl nicht passt, dann ist dein Besucher mit einem Klick wieder verschwunden.

Du kannst das ganz leicht testen. Geh zu der Suchmaschine deiner Wahl und gib zum Beispiel Hundeschule ein. Schau dir die Websites an die aufploppen. Wo klickst du sofort wieder weg und warum? Welche Website gibt dir ein gutes Gefühl?

Das wird für jeden etwas anders sein. Natürlich gibt es Websites, die einfach zu alt und schlecht gemacht sind, so dass sie kaum jemanden ansprechen. Aber bei den anderen hängt es von dir ab, ob du dich wohl fühlst oder nicht.

Wenn die Website zu dir und deinen Werten passt, fühlst du dich wie zu Hause.

Mit einem Moodboard erarbeitest du dieses Stimmungsbild.

Das Moodboard kommt zuerst

Noch bevor du mit der Website-Gestaltung startest, erstellst du ein Moodboard. Du wirst sehen, das ist eine Arbeit die grossen Spass macht.

Ein Moodboard erstellen

Bevor du daran gehst in Farben zu schwelgen und die passende Schrift auszuwählen, musst du dir einige Gedanken machen.

Du musst dich mit dem Moodboard wohl fühlen, aber du machst es nicht für dich, sondern für deine Wunschkunden.

Das Look&Feel deiner Website sind wie Kleider für deine Website. Auch wenn du zu Hause gern in einem bunten T-Shirt und Jeans herumläufst, wirst du so nicht zu einer Hochzeit gehen. Die Kleider, die du trägst, müssen zum jeweiligen Zweck passen.

Im Fall deiner Website müssen sich deine Wunschkunden darauf wohlfühlen.

Wer sind deine Wunschkunden?

Wenn du das schon genau weisst, kannst du diesen Abschnitt überspringen. Sonst musst du hier anfangen.

Damit du das richtige Look&Feel erarbeiten kannst, musst du die Menschen genau kennen die deine Kunden sind.

Hier ein paar Fragen, die dir weiterhelfen:

  • Welche Menschen profitieren am meisten von deiner Arbeit?
  • Mit welchen Kunden arbeitest du am liebsten zusammen?
  • Was haben diese Menschen gemeinsam?

Viele weitere Tipps bekommst du in diesem weiterführenden Artikel: Die Zielgruppe deiner Website – Der Mensch im Mittelpunkt

Sobald du deine Wunschkunden genau kennst, weisst du, welches Look&Feel sie bevorzugen.

Sind sie eher der kühle, sachliche Typ:

Moodboard für eien Technik-Website

Oder mögen sie es lieber bunt?

Oder feminin?

Wenn du diese Bilder betrachtest, spürst du sofort den Unterschied.

Sobald du genau weisst, was deine Wunschkunden mögen, geht es an die Umsetzung.

Soll das Moodboard digital oder analog sein?

Gerade für einen ersten Schritt kann es eine gute Idee sein, ein Moodboard ganz klassisch auf Papier zu erstellen.

Das Moodboard auf Papier

    Das brauchst du dazu:

  • Einen grossen Bogen Papier, mindestens A4 besser A3.
  • Verschiedene alte Zeitschriften.
  • Leim und eine Schere
  • Zeit – etwa 1-2 Stunden
So erstellst du ein Moodboard mit Papier und Schere

Als erstes fragst du im Freundeskreis, ob noch alte Zeitschriften herumliegen. Je unterschiedlicher die Themen umso besser.

Danach blätterst du durch die Zeitschriften und schneidest aus, was zu deinen Wunschkunden passt.

Das können unterschiedliche Dinge sein:

  • Passende Farben oder Schriften.
  • Ein Foto, das eine bestimmte Stimmung transportiert.
  • Formen, die zu deinen Wunschkunden passen.

Wenn du eine Sammlung hast, rufst du dir deinen Wunschkunden nochmals ins Gedächtnis. Danach gehst du deine Sammlung durch und sortierst alles aus, was nicht so richtig passt.

Jetzt beginnst du damit die Bilder, die übrig geblieben sind, auf das Blatt zu kleben.

Du kannst es dir wie eine Collage vorstellen, die dir hilft zu visualisieren welche Stimmung deine Website ausdrücken soll.

Dieses Blatt kannst du fotografieren und so auch mit deinem Webdesigner teilen, wenn du einen hast.

Das digitale Moodboard

Natürlich gibt es verschiedene Möglichkeiten ein Moodboard an einem PC zu erstellen.

Die einfachste ist dazu Canva zu nutzen, das viele Vorlagen von Moodboards hat.

Im Prinzip funktioniert es genau gleich, wie auf dem Papier. Du surfst auf Canva und suchst dir die passenden Bilder, Farben und Schriften aus.

Alternativ kannst du auch Bilder aus deinem Fundus nehmen oder durch die kostenlosen Bilddatenbanken im Netz surfen.

Zum Beispiel:

Zu diesem Zweck nutze ich ausnahmsweise auch diese Bilddatenbanken.

Danach kannst du die Bilder in dein Moodboard bei Canva einfügen.

Die digitale Methode hat den Vorteil, dass du auch im Team arbeiten kannst. So kannst du das Board einfach mit deinem Webdesigner teilen und gemeinsam daran arbeiten. Oft ergeben sich daraus viele Inspirationen.

Welchen Weg du wählst, hängt von deinen Vorlieben ab.

Wenn das Moodboard fertig ist

Ein schönes Gefühl, wenn du das fertige Moodboard vor dir hast und es genau zeigt, welches Look&Feel du dir für deine Website vorstellst.

Die nächsten Schritte

Wenn das Moodboard fertig ist, legst du die Farben fest, die du auf deiner Website verwenden willst. Such dir nicht zu viele Farben aus. Ideal sind 2-3 Farben, die dann noch in Abstufungen eingesetzt werden können.

Notiere dir die Farbe und den Hexadezimalcode. Der sieht so aus:

#8b010d

Du kannst den Code mit der Chrome-Erweiterung ColorZilla herausfinden oder in einem Grafikprogramm.

Du notierst dir welche Schriften zum Einsatz kommen. Beschränke dich auch hier auf 2-3 Schriften.

Damit hast du die Grundlagen für eine Corporate Identity (CI) geschaffen.

Noch mehr aus dem Moodboard herausholen

Ein Moodboard hilft dir nicht nur um auf der Website das Look&Feel gut umzusetzen, sondern auch für die Social-Media-Kanäle oder Printsachen.

Egal, ob du ein neues Titelbild für Facebook gestaltest oder einen Flyer erstellst, alles wirkt danach wie aus einem Guss.

Bewahre es gut auf und nutze es immer, wenn du neue Dinge gestaltest.

Claudia Barfuss - Die Website-Mentorin

Ich bin Claudia Barfuss

Als Website-Mentorin unterstütze ich Frauen, die mit ihrer individuellen Website ihre Lieblingskunden gewinnen wollen.


Es spielt dabei keine Rolle, ob sie ihre Website selbst bauen wollen oder ob ich sie für sie erstelle.

Claudia Barfuss

Ich helfe dir, wenn du eine Website willst die du begeistert zeigst, weil sie DICH zeigt. Cookie Consent mit Real Cookie Banner