Moodboard erstellen – Anleitung, Inspirationen und Tipps

Zuletzt aktualisiert: 24.09.2024
Ein Moodboard hilft dir dabei, deine Ideen für ein Projekt zu sammeln und zu veranschaulichen. Hier findest du viele Inspirationen, Tipps, Tools und eine Anleitung zur Erstellung deines eigenen Moodboards.
4.9
(40)

Damit am Ende alles gut zusammenpasst und ein handfestes Konzept steht, greifen erfahrene Webdesigner zu Beginn der Design-Entwicklung gerne auf Moodboards zurück.  Alles, was du bei der Ideensammlung und Erstellung beachten solltest und was du sonst noch über das Moodboard lernen kannst, erfährst du in meiner umfangreichen Anleitung.

Was ist ein Moodboard?

Was ein Moodboard ist, lässt sich ganz einfach an dem Namen nachvollziehen. Dieser setzt sich aus den englischen Wörtern „mood“ und „board“ zusammen. Wörtlich übersetzt ist ein Moodboard also nichts anderes als eine Stimmungstafel.

Und das trifft es tatsächlich ganz gut: Ein Moodboard wird oft zur Ideensammlung eingesetzt, wenn man beispielsweise für ein Projekt festlegen möchte, welche Stimmung die spätere Umsetzung widerspiegeln soll.

Im Projektablauf sind Moodboards häufig der erste Schritt im Designprozess. Oft werden sie auch zur Präsentation vor dem Kunden eingesetzt, um zu veranschaulichen, in welche Richtung das Design später gehen wird. Der Webdesigner kann mit einem Moodboard gut erkennen, welche Elemente oder Farben harmonisch zueinander passen.

Verschiedene Moodboard-Ideen
Verschiedene Moodboard-Ideen & -ansätze im Überblick.

Wofür werden Moodboards erstellt?

  • Website-Projekte
  • Logo-Entwicklung
  • Grafikdesign-Projekte
  • Branding-/Corporate-Design-Projekte
  • Visualisierung in der Mode- und Filmbranche
  • Inneneinrichtung und -architektur
  • Zielgruppendarstellung

Moodboard erstellen per Hand:
freie Fläche für deine Kreativität

Kreative Bastler, die sich viel Zeit für die Gestaltung nehmen möchten, können ein analoges Moodboard erstellen. Materialien, die du dafür zur Hand haben solltest, sind in erster Linie eine Schere und ein Kleber. Außerdem solltest du dir Gedanken über eine passende Unterlage machen, die groß genug ist, um all deine Ideen darauf unterzubringen. Diese kann aus Pappe oder Schaumstoff bestehen. Dann brauchst du nur noch ausreichend Inspiration, die du aus Katalogen oder Bildern sammeln kannst. Aber auch Stoffe, Farbpaletten und bunte Blätter kannst du aufkleben.

Wenn du alles parat hast, kannst du dich kreativ austoben. Der Vorteil an einem analogen Moodboard:
Wenn du etwas mit den eigenen Händen erschaffst, kann sich deine Kreativität in diesem Prozess noch besser entfalten. Hinzukommt, dass du während dieser Zeit einmal nicht am Computer sitzt und die Moodboard-Erstellung als digitale Auszeit nutzen kannst.

Ein Moodboard solltest du vor allem dann von Hand erstellen, wenn du Wert auf Haptik legst und beispielsweise unterschiedliche Strukturen spüren möchtest.

Mit analogen Materialien ein Moodboard erstellen.
Mit analogen Materialien lässt sich gut ein Moodboard erstellen.

Meist entstehen dabei größere Tafeln, die sich wiederum schlecht transportieren lassen. Alternativ kannst du deine Kreation abfotografieren – die Haptik geht dabei natürlich verloren. Zudem ist es relativ zeitaufwendig, alle Materialien zu sammeln, auszuschneiden und aufzukleben. Das Moodboard kann teuer werden, wenn du viele unterschiedliche und kostenintensive Materialien verwendest.

Vorteile

  • große Fläche für Ideen
  • maximale Gestaltungsfreiheit
  • Haptik
  • digitale Auszeit

Nachteile:

  • zeitintensiv
  • ggf. auch kostspielig
  • kaum Transportmöglichkeiten

Moodboard digital erstellen:
wenn’s kreativ und schnell sein soll

Moodboard erstellen – Anleitung, Inspirationen und Tipps 1
Ein digitales Moodboard mit einem Grafikprogramm erstellt.

Inzwischen lassen sich Moodboards wunderbar digital erstellen. Das geht wesentlich schneller. Dafür gibt es viele Grafikprogramme, mit denen du aus deinen Inspirationsbildern eine kreative und hochwertige Collage erstellen kannst. Das fertige Moodboard lässt sich anschließend überall mit hinnehmen und du kannst es jederzeit mit Kollegen und Kunden teilen.

Digitale Moodboards lassen sich auch im Team erstellen. Das ist besonders gut, wenn einmal die gebündelte Kreativität von mehreren Leuten gefragt ist, die gemeinsam an einem Projekt arbeiten. Die Elemente sind leicht austauschbar. Ein digitales Moodboard kann kostengünstig erstellt werden und erfordert keine Materialkosten.

Ein Nachteil der digitalen Form ist, dass man keine Stoffe oder Strukturen einbeziehen und anfassen kann.

Achtung: Beachte, dass bei Bildmaterial aus dem Internet die Urheberrechte berücksichtigt werden müssen. Informiere dich daher gut, ob du bestimmte Bilder verwenden darfst oder erst kaufen musst.

Vorteile

  • schnelle Erstellung
  • vielseitige Grafikprogramme
  • keine Materialkosten
  • Bilder können flexibel ausgetauscht werden
  • kann mit anderen Personen geteilt werden
  • gemeinsame Projektarbeit möglich

Nachteile:

  • keine Stoffe etc. einsetzbar
  • keine Haptik
  • Urheberrechte müssen beachtet werden
Moodboard Template

Moodboard selbst erstellen – die einfache Anleitung zum Loslegen

Du hast eine Idee (für ein Projekt oder einen Auftrag), das du mit einem Moodboard visualisieren möchtest?

Dann nichts wie los:
Hier zeige ich dir, wie du schrittweise ein Moodboard erstellen kannst und welche nützlichen Tools sich dafür eignen.


Schritt 1: Die Vorbereitung

Bevor du richtig loslegst, solltest du ein paar Vorgaben für dein Moodboard festlegen. Damit sollst du deine Kreativität gar nicht ausbremsen, sondern nur einen Rahmen schaffen, in welchem sie sich bewegen darf. Mach dir Gedanken über folgende Punkte:

  • Welches Ziel verfolgt du mit deinem Moodboard?
  • Was möchtest du darstellen?
  • Macht es Sinn, dein Thema in Einzelbereiche zu unterteilen?
  • Welches Format eignet sich am besten für deine Ideensammlung?

Wenn du weißt, wofür du dein Moodboard erstellen möchtest, kannst du damit beginnen, erste Ideen zu sammeln. Einen Anhaltspunkt schaffst du dir, indem du 5-10 Adjektive oder Stichworte festlegst, die deine Ideensammlung repräsentieren soll. Diese Begriffe können auch Teil deiner Corporate Identity sein. Sie können aber auch damit zu tun haben, wie sich deine Zielgruppe fühlen soll.

Moodboard erstellen – Anleitung, Inspirationen und Tipps 2
Eine Liste an Stichworten legen die gewünschte Stimmung fest. Dieses visuelles Vokabular ist aus dem Design Kit und liefert dir jede Menge Inspirationen und Vorlagen.

Schritt 2: Sammle Inspiration

Passend zu den Antworten und Begriffen, die du im ersten Schritt bereits gesammelt hast, kannst du nun Material sammeln. Bei deiner Recherche kannst du dich an deinen Adjektiven und Stichworten entlanghangeln. Gib sie zum Beispiel in die Google-Suche ein und schau nach, welche Ergebnisse dafür erscheinen. Vielleicht stößt du dabei auch nochmal auf ganz neue Zusammenhänge. Zu jedem deiner Begriffe solltest du etwa 20 Bilder suchen.

Sicherlich hast du bereits viele eigene Ideen, wie du deine Ideensammlung anlegen möchtest. Dennoch kann es nicht schaden, Moodboard-Inspiration zu sammeln. Dafür kannst du dich an den aktuellen Webdesign-Trends und Grafik-Design-Stilen orientieren. Je nachdem, zu welchem Thema du ein Moodboard erstellen möchtest, brauchst du vielleicht nicht nur Bilder und Grafiken, sondern auch verschiedene Farbpaletten und spezielle Schriftarten.

Bildmaterial

Neben der grafischen Umsetzung und Anordnung benötigst du sicher auch passendes Bildmaterial. Wenn du noch auf der Suche nach Bildmaterial bist, findest du in diesem Artikel 60 Webseiten mit kostenfreien Fotos. Eine gängige Inspirationsquelle für Collagen und Moodboards ist Pinterest.

Neben Fotos kannst du auch Grafiken und Icons für dein Ideen-Board einsetzen. Die kannst du entweder selbst erstellen oder dir auch hier Material von verschiedenen, kostenfreien Anbietern zusammenstellen.

jaymantri hat einen Blick für Stilleben wie für szenische Bilder.
Es gibt auch viele Websites, die kostenfreie und hochwertige Fotos zur Verfügung stellen.

Farben

Auch, wenn sich dein Entwurf aus verschiedenen Ideen zusammensetzen kann, solltest du die Farben nicht wahllos aussuchen. Achte bei deinem Farbschema darauf, welche Farben gut zueinander passen und vielleicht auch deinem Markenbild entsprechen. Da jede Farbe ihren eigenen Effekt hat, solltest du dich auch mit der Wirkung und Bedeutung von Farben auseinandersetzen.

Vielleicht hast du ja auch schon eine grobe Richtung, in die es farblich gehen soll. Basierend auf einer Grundfarbe kannst du passende Farbtöne finden und eine Farbpalette für dein Moodboard erstellen, die dich dann in deinem Gestaltungsprozess begleitet. Um ausdrucksstarke und harmonische Farbpaletten zu kreieren, kannst du verschiedene Farb-Tools verwenden.

Moodboard erstellen – Anleitung, Inspirationen und Tipps 3
Tools wie Pinterest eignen sich gut für die Inspirationssuche.

Beliebte Farb-Tools sind zum Beispiel:

Moodboard erstellen – Anleitung, Inspirationen und Tipps 4
Tools wie Color Hunt liefern jede Menge Farbpaletten zur Anregung.

Wie in jedem Bereich gibt es auch im Webdesign immer neue Trends. Für ein besonders modernes Moodboard kannst du dich vorab auch über aktuelle Farbtrends im Webdesign informieren. Damit du dich von der Konkurrenz abhebst, ist es aber immer ratsam, die aktuellen Trends nur als Grundlage anzuwenden und diese im nächsten Schritt zu individualisieren.

Typografie

Fette Typografie – Webdesign Trends
Auch typografische Ausschnitte von Websites können die gewünschte Wirkung erzeugen.

Ähnlich wie bei den Farben ruft auch jede Schriftart eigene Assoziationen und Emotionen hervor. Wenn du Wörter und Schriften für dein Moodboard verwenden möchtest, ist es deswegen ratsam, sich ein wenig mit der Typografie zu beschäftigen.

Natürlich muss eine Schrift in erster Linie lesbar sein. Du kannst Schriften aber auch benutzen, um deine Inhalte zu strukturieren. Deshalb werden auf Websites zum Beispiel unterschiedliche Fonts für die Überschriften und den Fließtext eingesetzt.

Wenn du dein Moodboard auch dafür nutzen möchtest, um passende Schriftkombinationen zu erstellen, kannst du verschiedene Tools nutzen, um diese zu finden.

Schriftarten für dein Moodboard findest du zum Beispiel hier:

Wenn du auf Webfonts zurückgreifen willst (z. B. weil du eine Website gestalten willst), dann sind die beliebtesten Google Fonts bestimmt interessant für dich.

Moodboard erstellen – Anleitung, Inspirationen und Tipps 5
Fontsanbieter haben eine große Auswahl an Schriftarten.

Schritt 3: Verschaffe dir einen Überblick

Auch, wenn du jetzt bestimmt einiges an Material gesammelt hast, wird nun erstmal aussortiert. Ein gutes Moodboard zeichnet sich auch dadurch aus, dass es übersichtlich ist.

Stelle dir deshalb folgende Fragen:
Welches Material inspiriert dich und repräsentiert dein Ziel? Was passt zu deinem Stil? Was passt gut zusammen? Verschaffe dir einen Überblick und sortiere alle Dateien, die du vor dir hast. Du hast alle Bilder herausgesucht, die du übernehmen möchtest? Gut, denn alles andere kommt weg! Dafür kannst du nun dein Moodboard erstellen.

Moodboard erstellen – Anleitung, Inspirationen und Tipps 6
Aus einer wilden Sammlung an Ideen und Vorlagen wird ein fertiges Moodboard.

Schritt 4: Erstelle dein Moodboard

Inzwischen gibt es viele Programme, die dich mit hilfreichen Vorlagen dabei unterstützen, ein tolles Moodboard zu erstellen. Du musst diese Vorlagen natürlich nicht nutzen, sondern kannst auch selbst kreativ werden. Dadurch eignen sich die Tools sowohl für Anfänger als auch für Fortgeschrittene.

Hier findest du Programme, mit denen du ein Moodboard erstellen kannst:

Stelle deine Bilder so zusammen, dass sie gut erkennbar sind und sich nicht zu stark überschneiden. Die Anordnung sollte so gewählt sein, dass ein roter Faden erkennbar wird und deine Idee und dein Ziel am besten sofort deutlich werden. Am Ende sollte dein fertiges Moodboard auf eine DIN A4 Seite passen, denn dann ist es auf einen Blick gut zu erfassen.

Moodboard erstellen – Anleitung, Inspirationen und Tipps 7
Mit dem kostenlosen Moodboard-Template kannst du erste Designrichtungen visualisieren und mit deinen Kunden abstimmen.

Tipps für Moodboards im Projektablauf

Etwas zu visualisieren, ist der erste Schritt, um es in die Realität umzusetzen.

Wer eine Website erstellen möchte, auf der Suche nach einer Corporate Identity ist oder ein Produkt entwerfen möchte, braucht Ideen. Daher ist das Moodboard oft ganz früh ein Teil des Designprozesses. Während der Erstellung werden viele Ideen gesammelt und wieder verworfen, bis am Ende nur noch der Entwurf übrigbleibt, der dann auch in die Realität umgesetzt wird.

Nicht jede Idee funktioniert – und das ist gut so. Mit einem Moodboard findest du so lange heraus, was für dich nicht klappt, bis du ganz genau weißt, was gut funktioniert. In der Regel kennst du dein Unternehmen nach diesem Prozess noch besser. Das Moodboard wird somit zu der Grundlage deiner Corporate Identity.

Verschiedene Moodboards für dasselbe Thema.
Verschiedene Moodboards für dasselbe Thema.

Tipps für das Moodboard im Projektablauf:

  • Lege dich auf 4-6 Farben fest, die optimal aufeinander abgestimmt sind. Deine Palette sollte sowohl aus hellen als auch aus dunkleren Tönen bestehen.
  • Beschränke dich auf maximal 6 Bilder für das Moodboard deines Unternehmens. Sie sollten wirklich zu 100 % zu deinem Markenbild oder deiner Zielgruppe passen.
  • Wähle Schriftarten, die gut zueinander passen. Auch hier sollten es nicht zu viele sein. 2-3 gut aufeinander abgestimmte Schriften reichen vollkommen aus.

Eingliederung im Webdesign-Prozess

Neben Wireframes und Stylescapes sind Moodboards ein Teil des sehr frühen Webdesign-Prozesses. Sie unterstützen den Webdesigner dabei, Ideen zu finden und dadurch eine visuelle Richtung für das Projekt festzulegen, sie haben aber noch gar nicht viel mit Struktur und grafischer Umsetzung zu tun. Sie zeigen vor allem auf, was die Botschaft des Unternehmens ist und wie der gestalterische Rahmen aussehen kann – sie liefern sozusagen einen roten Faden.

Moodboards sind also ein wichtiger Teil der Konzeption und haben ihren Platz noch vor der technischen Umsetzung. Auch, wenn die Farben und Schriften später für das tatsächliche Design übernommen werden können, gibt das Moodboard erstmal eine grobe Richtung vor.

Wie sich die Kernbotschaft der Ideensammlung umsetzen lässt, festigt sich dann im nächsten Schritt des Webdesign-Prozesses.

Moodboard Template
Moodboard Template

Was ist der Unterschied zu Stylescapes?

Wo Moodboards häufig nur eine Idee davon liefern, in welche Richtung sich das spätere Design bewegen soll, gehen Stylescapes noch einen Schritt weiter. Sie sind wesentlich konkreter und häufig schon ein fertiger Entwurf für das spätere Design. Zwar wird die Anordnung der Elemente auch hier noch nicht pixelgenau angegeben, jedoch liefern Stylescapes dem Kunden schon ein ganz gutes Bild davon, wie der Webdesigner das Projekt zu einem späteren Zeitpunkt umsetzen wird.

Stylescapes sind noch konkreter als Moodboards.
Stylescapes sind noch konkreter als Moodboards.

Fazit: Moodboards sind die Grundlage eines guten Design-Konzepts

Auch, wenn du eine zündende Idee hast und sofort mit der Umsetzung starten möchtest, lohnt es sich, Zeit in ein handfestes Konzept zu investieren.

Ein Moodboard ist eine gute Grundlage für deinen Designprozess.

Nutze die hilfreichen Tools, um passende Bilder, Farben und Schriften für deine Stimmungstafel zu finden. Und vielleicht stößt du bei deiner Ideensammlung ja noch auf weitere gute Gedankenanstöße, die dir bei deinem Projekt helfen können.

Bewertungsergebnis: 4.9 / 5. | Anzahl der Bewertungen: 40

Über 8.500 sind schon dabei:

Exklusive Webdesign-Inhalte

Kostenfreie Templates + regelmäßig Webdesign-Links & -tipps

Deine Daten sind sicher. Mehr Infos: Beispiele, Datenschutz, Analyse und Widerruf

Optimiere Websites und
deinen Webdesign-Workflow:

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.

Mehr über diese Website und den Autor erfahren   →

Die Inhalte des Webdesign Journals wurden mit Sorgfalt, Engagement und Liebe erstellt – so auch dieser Artikel. Wenn du Ergänzungen oder Anmerkungen hast, kannst du dich gerne bei mir melden. Ebenso wenn du Ideen oder Wünsche für weitere Themen hast.

Wenn du Ausschnitte oder Zitate in wissenschaftlichen Arbeiten zitieren möchtest, kann du dies gerne machen. Was gar nicht geht: Inhalte klauen oder kopieren! Sollte aber selbstverständlich sein…

Nach oben scrollen

Über 8.500 sind schon dabei!

Exklusive Webdesign-Inhalte

Bleibe up to date mit den kostenlosen Templates und den wöchentlichen Links & Tipps: