Website Moodboard erstellen – sage damit mehr als tausend Worte

von | 2. April 2023

Dein Website Moodboard kann und sollte für dich und deine Website das Bild sein, das mehr als tausend Wort sagt. Nutze dieses einfache Werkzeug, um alle Designelemente – wie Stimmung, Farben und Schriften – deiner Website an einer Stelle zusammenzufassen und auf den Punkt zu bringen. Und das am besten VOR der Erstellung deiner Website.
Deine Themen in diesem Artikel: 1_PLANUNG | 2_UMSETZUNG | 3_DRANBLEIBEN | Canva | Design | Moodboard

Gefällt dir der Inhalt? Teile ihn gern.

Website Moodboard

NUTZE DIESES EINFACHE WERKZEUG, UM ORDNUNG IN ALLE DESIGNELEMENTE DEINER WEBSITE ZU BRINGEN

Was ist ein Moodboard?

Bei der Gestaltung deiner Website haben die Designelemente eine besondere Bedeutung. In welchen Farben erstrahlt deine anziehende Website, mit welchen Schriften kommunizierst du deine spannenden Inhalte, welches Logo verwendest du, welche Stimmung möchtest du rüberbringen?

website moodboard erstellen - strehober wordpress webdesign
Lasse deiner Phantasie mit einem Moodboard freien Lauf

Ein Moodboard kann für dich ein sehr nützliches Werkzeug sein, um all diese optischen und stilistischen Elemente übersichtlich an einer Stelle zusammenzufassen und auf den Punkt zu bringen. Und das am besten noch VOR der Erstellung deiner Website. 

Du kannst ein Moodboard natürlich nicht nur in Vorbereitung auf deine Website verwenden, sondern für alle Designprojekte, in denen es darum geht, Stimmungen und Gefühle für eine spätere Umsetzung zu entwickeln und darzustellen.

Der Begriff Moodboard setzt sich aus den englischen Wörtern “mood” für Stimmung und “board” für Tafel zusammen. Du kannst damit in einer (digitalen) Collage alle klassischen Designelemente (wie Farbcodes und Schriftarten) aber auch Emotionen, Stimmungen und Ideen mithilfe visueller Elemente (Fotos, Illustrationen, Bilder) darstellen.

Und wozu brauche ich ein Moodboard?

Im Webdesign kannst du mit einem Moodboard die Stimmung deiner Website entwickeln und in eine harmonische Form überführen. Hier kannst du Ideen und Inspirationen sammeln und die optische Stimmung anhand von Farben, Typografie, Bildern und anderen grafischen Elementen ganz in Ruhe auf einem (digitalen) weißen Blatt Papier konzipieren.

Du kommst damit der optischen Richtung und deinem bevorzugten Stil immer näher – abstrakte Begriffe werden damit in etwas Greifbares umgewandelt. Anstatt zu viele Worte und allgemeingültige Phrasen wie “individuell, dynamisch, seriös, professionell, natürlich” zu verwenden, fertige lieber visuelle Collagen an. 

Gerade wenn du dir zu Beginn deiner Reise mit deiner Website noch unsicher bist, wo die Reise optisch und stimmungstechnisch hingehen soll, hilft dir ein Moodboard – oder mehrere Versionen davon – damit zu experimentieren und deinen Weg zu entwickeln. Du kannst relativ schnell verschiedene Stile und Richtungen ausprobieren – lange bevor das fertige Design auf deiner Website sichtbar wird. 

Deine Vorlage für alle Kommunikationskanäle – online & offline

Hast du den kreativen Prozess der Erstellung eines Moodboard für dich und dein Ziel erfolgreich abgeschlossen, liegt am Ende ein “fertiges” Moodboard in Form eines gut gefüllten (digitalen) Blattes Papier vor dir.  

Du hast für dich, dein Business, dein Ziele, dein Projekt … Stimmungen beschrieben und optisch eingefangen, hast Farben und Schriftarten festgelegt, die deine Aussagen bestmöglich verstärken, hast ein Logo mit Wiedererkennungswert entwickelt. Kurzum, du hast auf einen Blick alle wichtigen optischen und stilistischen Elemente an einem Ort zusammengefasst.

Das Beste daran ist, dass du diese wichtigen Informationen natürlich nicht nur für deine Website verwenden kannst. Nein, ganz im Gegenteil! Dein Moodboard kann ab sofort durchgängig für all deine Kommunikationskanäle – online & offline – eingesetzt werden. Und für einen einheitlichen und professionellen Auftritt möchte ich dir diese Herangehensweise auch unbedingt empfehlen.

Beispiel Website Moodboard

Nachfolgend siehst du mein Beispiel für ein Website Moodboard. Weiter unten habe ich auch ein leeres Muster für dich eingebunden. Vielleicht lässt du dich ja davon inspirieren?

mein website moodboard - strehober wordpress webdesign
So sieht zum Beispiel mein Moodboard aus

Erstelle ein Moodboard für deine Website

Du hast verstanden, was ein Moodboard ist und warum es wirklich sinnvoll ist eines zu haben, bevor du in die eigentliche Erstellung deiner Website einsteigst? Wunderbar, dann solltest du auch gleich praktisch loslegen. Lerne die einzelnen Elemente kennen und orientiere dich gern an meinen Empfehlungen.

Wie gehst du am besten vor?

  • Überlege dir, wofür du ein Moodboard erstellen möchtest.
  • Nimm dir ein (digitales) weißes Blatt zur Hand. 
  • Ich kann dir für die Erstellung eines Moodboards auch Canva*- ein kostenloses Online-Tool für Grafik-Design – empfehlen.
  • Orientiere dich bitte wie immer an meinem dreistufigen Vorgehen: Planung, Umsetzung, Dranbleiben.
  • 1 | Planung: gehe alle Elemente Schritt-für-Schritt durch und notiere, male, klebe, verwerfe, überdenke, stelle dir vor, fang von vorne an, entscheide, skizziere, ändere die Perspektive, lass dich inspirieren …
  • Fertige bei Bedarf mehrere Entwürfe an und lasse diese in deiner Wahrnehmung “wachsen”. Hänge dir deine Entwürfe gut sichtbar an die Wand, betrachte diese mit einem gewissen Abstand und lasse sie auf dich wirken.
  • 2 | Umsetzung: Entscheide dich abschließend für dein Moodboard mit all seinen Elementen, halte alles auf einem (digitalen) Blatt Papier fest und beginne, damit zu arbeiten: erstelle deine Website, Visitenkarten, Social-Media-Auftritte, usw.
  • 3 | Dranbleiben: schau dir dein Moodboard und deine Kontaktpunkte regelmäßig an und nimm – so notwendig – Anpassungen vor.

1 | PLANUNG – Elemente für dein Moodboard

Welche Elemente ich in der Regel in Moodboards für meine unterschiedlichen Website-Projekte stecke, siehst du in den folgenden Absätzen. Ich stimme all diese Elemente mit meinen Kunden ab oder erarbeite diese mit meinen Kunden gemeinsam. So kann ich mich abgestimmt im Anschluss an die Umsetzung der Website machen.

Ich bin mir bewußt, dass ich “mein” Moodboard  etwas weiter als gewöhnlich fasse. So gehören z.B. Botschaft, Slogan und auch Kontaktpunkte nicht zwingend in ein Moodboard. Für meine Zwecke – der Abstimmung mit meinen Kunden – hat sich dieses Vorgehen aber als sehr sinnvoll erwiesen.

Gehe also alle  – für dich wichtigen – Elemente Schritt-für-Schritt durch und notiere, male, klebe, verwerfe, überdenke, stelle dir vor, fang von vorne an, entscheide, skizziere, ändere die Perspektive, lass dich inspirieren …

Mach den Trichter weit auf und setzte dir bitte gerade zu Beginn keine Grenzen!

IDENTITÄT | Name, Botschaft, Slogan

  • Wer bist du und was machst du? Bei der Identität geht es darum zu zeigen, wofür du und dein Business stehen. Die Identität umfasst alle essentiellen und wesensprägenden Merkmale und ist damit Kompass für alle weiteren Elemente. Im Gegensatz zum Markenimage als Fremdbild in den Köpfen der Kunden handelt es sich bei der Markenidentität um das Selbstbild von dir und deinem Business.
  • Das fängt natürlich mit deinem Namen an: Wie heißt dein Business? Gibt es eine Abkürzung? Achte darauf, immer die gleiche Schreibweise zu verwenden.
  • Notiere dir deine wichtige Botschaft: ein kurzer, knackiger Satz über das, was du für wen machst. Lass dir hierfür gern etwas mehr Zeit. Setze dabei die Kundenbrille auf und kommuniziere Tätigkeit/Angebot als Lösung eines Kundenproblems.
  • Hast du einen Spruch/Slogan für dein Business?
  • Notiere dir alle Punkte in deinem Moodboard.

STIMMUNG | Wahrnehmung, Tonalität, Werte

  • Wie möchtest du wahrgenommen werden und “klingen”? Überlege dir, was du für ein Mensch bist und wofür du mit deinem Business stehen möchtest. Was macht dich und dein Business besonders, originell und einzigartig? Welche Werte sind dir wichtig?
  • Notiere jeweils ein paar Adjektive, was du bist/wofür die stehst und was du nicht bist/wofür du nicht stehst.
  • Frage auch Freunde oder Familie, wie sie dich beschreiben würden. (Wo liegen meine Stärken, was kann ich richtig gut und welche Begriffe fallen dir spontan zu mir ein?)
  • Überlege dir auch, welche Werte für deine Lieblingskunden am wichtigsten sind und finde Übereinstimmungen mit dir.
  • Überlege dir auch, wie du “klingen” möchtest: Ist dein Ton ernst und förmlich, inspirierend und beruhigend oder warm und freundlich? Es ist wichtig, einen Ton zu wählen, der zu deiner Zielgruppe passt.
  • Notiere dir abschließend die wichtigsten Stimmungs-Punkte in deinem Moodboard, denn sie beeinflussen deine weiteren Designelemente.

INSPIRATION | Bilder, Illustrationen, Vorbilder

  • Mach dich auf die Suche. Lass dich (auch von anderen) inspirieren. Gehe mit offenen Augen durch deine Welt.
  • Sammle deine Ideen für Bilder, Fotos, Illustrationen, Info-Grafiken, Zeichnungen, Formen, Videos, Audios…
  • Überlege dir eine passende Formensprache für deine Website, denn Formen von Designelementen können bestimmte Reaktionen hervorrufen:
    • Runde Formen (Kreise, Ovale, Elipsen): positive Gefühle, Gemeinschaft, Einigkeit, weiblich 
    • Geradlinige Formen (Quadrate, Rechtecke, Dreiecke): Stärke, Effizienz, Stabilität, Vertrauenswürdigkeit
    • Gerade Linien: vertikale Linien stehen für Männlichkeit und Stärke, horizontale Linien für Gelassenheit und milde Atmosphäre
  • Füge eine Auswahl an Bildern ein, die deiner Meinung nach zu dir und deinem Business passen.
  • Dampfe deine sicherlich große Auswahl abschließend auf die wesentlichen Quellen ein und klebe, male, notiere sie in dein Moodboard. 

FARBEN | Haupt- und Nebenfarben

  • Farben beeinflussen unsere Emotionen und sind mit einer Bedeutung belegt. Nachfolgend eine kleine (sehr unvollständige) Auswahl:
    • Rot = Starke Emotionen, Liebe, aktiv, aufregend
    • Gelb = Strahlend, anregend, Optimismus
    • Grün = Natur, Harmonie, Leben, Hoffnung
    • Blau = Ruhe, Sehnsucht, Seriosität
    • Schwarz = Konservativ, seriös, kraftvoll
    • Weiß = Gesundheit, Licht, sachlich
  • Suche dir 2 – (maximal) 3 Haupt-Farben aus, die zu deiner im vorherigen Punkt identifizierten Stimmung und deinen Werten passen.
  • Wähle Nebenfarben (z.B. Nuancen von schwarz und weiß aus), die du z.B. auf der Website für dezente Hintergründe verwenden kannst. 
  • Nutze gern das Farbrad von Adobe, um Farben miteinander zu kombinieren oder dich inspirieren zu lassen.
  • Male die Farben in dein Moodboard und notiere dir dazu die HEX-Codes (Raute mit 6 Zahlen/Buchstaben) und die RGB-Farbkombination (R Zahl, G Zahl, B Zahl) für jede Farbe, denn die benötigst du später für deine Website oder weitere Kontaktpunkte. Die Farbe-Codes kannst du einfach von der Adobe-Seite ablesen. 

TYPOGRAFIE | Schriftarten für Überschriften und Absätze

  • Eine einheitlich verwendete Schriftart ist der Schlüssel zur Vertrautheit.
  • Es gibt 4 Arten von Schriften:
    • Serifen: mit kleinen “Füßchen”, wirken vertrauenswürdig, traditionell, oldschool  (z.B. Times New Roman)
    • Sans-Serifen: keine “Füßchen”, weiche Ecken, wirken elegant, modern (z.B. Helvetica)
    • Schreibschrift: immitieren kursive Handschrift, wirken luxuriös, feminin (z.B. Pacifico)
    • Display-Schrift: mit speziellen Elementen für ein starkes Statement, sparsam einsetzen (z.B. der Blitz bei/in Metallica)
  • Entscheide dich für maximal 2 verschiedene Schriftarten – z.B. für Überschriften, Absätze und Hervorhebungen.
  • Arbeite für Abwechslung gern mit unterschiedlichen Schriftschnitten deiner Schriftarten (Variation einer Schriftart in Stärke, Laufweite und Lage).
  • Eine Auswahl an Schriften findest du z.B. bei Google Fonts.
  • Notiere dir deine Schriftarten und deren Einsatz in deinem Moodboard. 

LOGO | Logo und Favicon

  • Dein Logo ist der Eckpfeiler und das Gesicht deines Business. Es kommuniziert wichtige Informationen und unterscheidet dich auf einen Blick von deinem Umfeld und erhöht die Wiedererkennung. 
  • Dein Logo sollte deutlich, ansprechend, einfach, aufgeräumt und zeitlos sein und natürlich deine Zielgruppe ansprechen.
  • Wenn du noch kein Logo hast, solltest du spätestens jetzt damit beginnen, dich darum zu kümmern – in Eigenregie (z.B. mit Canva*) oder mit einem Designer.
  • Lege in diesem Zusammenhang auch fest, wie dein Logo verwendet werden soll und darf (z.B. Größe, Farbkombinationen) und ggf. auch wie nicht.
  • Du solltest dein Logo oder einen Teil davon auch für das Favicon – dein Website-Icon – vorsehen und verwenden. 
  • Male sowohl dein Logo als auch dein Favicon in dein Moodboard. 

KONTAKTPUNKTE | Online und offline

  • Kontaktpunkte sind Wege, auf denen du mit deinem Business tatsächlich mit den Menschen interagierst. Viele Unternehmen entwickeln mehrere der folgenden Elemente, wenn sie ihre Identität ausarbeiten. Allerdings wird nicht jedes Business jeden Kontaktpunkt benötigen. Deine Bedürfnisse hängen von vielen Faktoren ab, einschließlich deinem Produkt oder Service und deinem Kundenstamm.
  • Kontaktpunkte “Online” können sein: Website, E-Mail mit Signatur, Newsletter, Social Media Auftritte …
  • Kontaktpunkte “Offline” können sein: Visitenkarten, Geschäftsausstattung (Briefpapier), Flyer, Plakate, Kleidung, Verpackung…
  • Überlege dir, welche Kontaktpunkte du für dich und dein Business wirklich brauchst (weniger kann gerade am Anfang mehr sein) und notiere dir diese in deinem Moodboard. 

2 | UMSETZUNG – Arbeite mit deinem Moodboard 

Entscheide dich abschließend für dein Moodboard mit all seinen Elementen und halte alles auf einem (digitalen) Blatt Papier fest.

Beginne ab sofort damit zu arbeiten: erstelle unter Verwendung deiner festgelegten Designelemente deine Website, Visitenkarten, Social-Media-Auftritte, usw..

Muster Website Moodboard

So könnte ein Muster für ein Website Moodboard aussehen. Ich habe dieses in Canva* erstellt und nehme es als Basis für meine Kundenprojekte. Vielleicht möchtest du dir ja etwas in dieser Art nachbauen?

template website moodboard - strehober wordpress webdesign
Dieses Template fülle ich für meine Kunden

Noch mehr Details in einem Styleguide

Du kannst natürlich auch jedes einzelne Element sehr viel detaillierter und umfangreicher beschreiben. Bei größeren Projekten solltest du dies auch unbedingt tun. Diese Arbeit mündet dann in einem mehrseitigen StyleguideSprich mich gern darauf an, wenn du hierüber mehr erfahren möchtest und Interesse daran hast.

Für den Anfang ist ein Moodboard aber ein wirklich einfaches, aber wirkungsvolles Instrument, um Ordnung in deine Designelemente zu bringen und diese zielführend und einheitlich anzuwenden. Probiere es einfach aus.

3 | DRANBLEIBEN – Halte dein Moodboard aktuell

Schau dir dein Moodboard inkl. deiner Kontaktpunkte regelmäßig (z.B. jährlich) an und nimm – so notwendig – Anpassungen daran vor. Nur so stellst du sicher, dass sich deine Ziele auch in deinen Designelementen widerspiegelen – nicht nur im Augenblick, sondern auch in der Zukunft. 

Herzlichen Glückwunsch! Du hast jetzt ein Bild, das mehr als tausend Worte sagt und die Grundlage für deinen optischen und stilistischen Auftritt auf allen Kommunikationskanälen ist. 

Du hast noch Fragen? Ich freue mich auf jede einzelne davon.

Du möchtest mehr gratis Tipps für deine WordPress Website?

Manuela Strehober Webdesign Memoji

Hallo, ich bin Manuela.

Als Selbständige bekommst du bei mir nicht irgendeine, sondern deine WordPress Website – die dich zeigt, die du gern zeigst und die deine Lieblingskunden anzieht. Ohne kompliziert!

STARTE MIT MIR▸
ARBEITE MIT MIR▸ 
KNOWHOW & TOOLS▸
SAG HALLO▸

WORDPRESS & DIVI KURSE IN DER VHS PANKOW

strehober-webdesign-vhs-kurse

Im April und Juni 2023 kannst du in der Volkshochschule in Berlin-Pankow an meinen Wochenendkursen live dabei sein, wenn es heißt: Die eigene Webseite mit WordPress & Divi - Planung, Umsetzung, Dranbleiben.

GRATIS WEBSITE FAHRPLAN 3X3

Strehober WordPress Webdesign Website Fahrplan

Du fragst dich, wie & wo du mit der Erstellung deiner Website am besten startest? Dann nimm meinen WEBSITE FAHRPLAN 3x3 zur Hand und lege einfach los - mit bewährtem Ablauf, Checklisten, Tipps, Tools und vertiefenden Informationen.

WordPress Website mit Divi Theme – Übersicht, Vorteile und Erfahrungen

WordPress Website mit Divi Theme – Übersicht, Vorteile und Erfahrungen

Profitiere von der intuitiven Benutzerfreundlichkeit von WordPress und dem Divi Theme – dem Premium Theme von Elegant Themes – auch auf deiner Website. WordPress bietet die Grundlage und das Divi Theme sorgt für die Gestaltungsmöglichkeiten, das Aussehen und den Stil deiner Website. Zusammen sind sie ein unschlagbares Team für deine anziehende Website.

Website Briefing-Fragen – Gut geplant zur Website Erstellung

Website Briefing-Fragen – Gut geplant zur Website Erstellung

Alles beginnt mit einem klaren Ziel und einer guten Planung! Warum, worüber, und für wen möchtest du überhaupt eine Website machen? Woran solltest du vor der Erstellung deiner Website denken? Bearbeite meine Website Briefing-Fragen mithilfe meiner Erläuterungen und starte richtig gut vorbereitet in die Erstellung deiner Website. Das wird gut!

Mach bessere Website Fotos mit deinem Smartphone – 9 praktische Tipps

Mach bessere Website Fotos mit deinem Smartphone – 9 praktische Tipps

Die beste Kamera ist immer die, die du gerade dabei hast – heute meistens das Smartphone. Mache dich mit den Funktionen deiner Kamera vertraut, achte auf eine interessante Bildgestaltung und gutes Licht – dann kann fast nichts mehr schiefgehen. Und denke immer daran: nicht die Kamera macht das Foto. Du machst es – mit einem Auge für gute Motive, Kreativität und Spaß beim Fotografieren. Los gehts mit deinen Website Fotos!

WordPress aufräumen – Deine Checkliste für die Optimierung

WordPress aufräumen – Deine Checkliste für die Optimierung

Deine WordPress Website kann jederzeit unkompliziert an deine (sich verändernden) Bedürfnisse angepasst werden, um stets deine Ziele zu erreichen. Dafür solltest du ihr in regelmäßigen Abständen etwas Zeit widmen. Orientiere dich dabei gern an meiner 3×3 Checkliste zum „WordPress aufräumen“. So könnt ihr euch gemeinsam weiterentwickeln und dabei erfolgreich sein und bleiben.

IKIGAI – oder wofür startest du gern in den Tag?

IKIGAI – oder wofür startest du gern in den Tag?

Jeder Mensch hat sein ganz persönliches Ikigai – den Sinn seines Lebens. Allein der Gedanke daran, lässt dich jeden Morgen mit Freuden aufstehen und in den Tag starten. Was ist das genau und wie findest du es? Und wie gibst du deinem Leben und Tun so mehr Fokus, Erfüllung und Lebenssinn? Finden wir es gemeinsam heraus.

Gefällt dir der Inhalt? Teile ihn gern.

Das könnte dich auch interessieren

WordPress Website mit Divi Theme – Übersicht, Vorteile und Erfahrungen

WordPress Website mit Divi Theme – Übersicht, Vorteile und Erfahrungen

Profitiere von der intuitiven Benutzerfreundlichkeit von WordPress und dem Divi Theme – dem Premium Theme von Elegant Themes – auch auf deiner Website. WordPress bietet die Grundlage und das Divi Theme sorgt für die Gestaltungsmöglichkeiten, das Aussehen und den Stil deiner Website. Zusammen sind sie ein unschlagbares Team für deine anziehende Website.

Website Briefing-Fragen – Gut geplant zur Website Erstellung

Website Briefing-Fragen – Gut geplant zur Website Erstellung

Alles beginnt mit einem klaren Ziel und einer guten Planung! Warum, worüber, und für wen möchtest du überhaupt eine Website machen? Woran solltest du vor der Erstellung deiner Website denken? Bearbeite meine Website Briefing-Fragen mithilfe meiner Erläuterungen und starte richtig gut vorbereitet in die Erstellung deiner Website. Das wird gut!

Mach bessere Website Fotos mit deinem Smartphone – 9 praktische Tipps

Mach bessere Website Fotos mit deinem Smartphone – 9 praktische Tipps

Die beste Kamera ist immer die, die du gerade dabei hast – heute meistens das Smartphone. Mache dich mit den Funktionen deiner Kamera vertraut, achte auf eine interessante Bildgestaltung und gutes Licht – dann kann fast nichts mehr schiefgehen. Und denke immer daran: nicht die Kamera macht das Foto. Du machst es – mit einem Auge für gute Motive, Kreativität und Spaß beim Fotografieren. Los gehts mit deinen Website Fotos!

WordPress aufräumen – Deine Checkliste für die Optimierung

WordPress aufräumen – Deine Checkliste für die Optimierung

Deine WordPress Website kann jederzeit unkompliziert an deine (sich verändernden) Bedürfnisse angepasst werden, um stets deine Ziele zu erreichen. Dafür solltest du ihr in regelmäßigen Abständen etwas Zeit widmen. Orientiere dich dabei gern an meiner 3×3 Checkliste zum „WordPress aufräumen“. So könnt ihr euch gemeinsam weiterentwickeln und dabei erfolgreich sein und bleiben.

Viele Menschen wünschen sich, sie hätten früher angefangen. Fast niemand wünscht sich, er hätte später angefangen. James Clear