Blogartikel

Moodboard: Ein hilfreiches Werkzeug für deine Website!

So erstellst du ein Moodboard für deine Website 

Was genau ist ein Moodboard?

Egal ob du noch am Anfang bist mit deiner Website oder gerade deine Website überarbeitest, schwirren dir sicher ein paar Gestaltungsideen im Kopf herum, die du gerne ausprobieren und umsetzen würdest.

Bevor du aber planlos drauf losstürmst und deiner kompletten Website einen neuen Look verpasst, um dann frustriert festzustellen, dass das Design doch nicht das passende für dich und deine Zielgruppe ist. Solltest du etwas planvoller vorgehen. Dazu ist ein Moodboard genau das richtige Werkzeug.

Moodboards sind eine Art visueller Leitfaden. Und es ist ein großartiges Tool, wenn es darum geht, deine Ideen schnell und unkompliziert zu visualisieren und dir (oder deinen Kunden) einen Gesamteindruck zu verschaffen. Und zwar BEVOR man das komplette Design ausarbeitet und umsetzt.

Moodboards helfen dir dabei eine gewisse Atmosphäre einzufangen und die Stilrichtung und Stimmung eines Design-Entwurfs zu kommunizieren.


Und es ist ein sehr beliebtes Präsentationsmittel, um wesentliche Aspekte verbal zu vermitteln, die sonst schwer mit Worten zu beschreiben sind. Ein Bild sagt nun mal mehr als tausend Worte. Du visualisierst mit einem Moodboard also schnell und unkompliziert deine erste Idee. Dabei geht es auch eher um die Assoziationen, weniger um Details oder inhaltliche Vollständigkeit.

Früher wurden Moodboards ganz konventionell auf einem großen Kartonbogen abgebildet. Dafür sammelte man Fotos, Zeichnungen, Materialien und Farbmuster und arrangierte sie auf diesem Karton. Entweder aufgeklebt oder einfach angepinnt, um später einzelne Elemente austauschen zu können.

Insbesondere Modedesigner und Innenarchitekten arbeiten mit eher konventionellen Moodboards, weil hier auch die Haptik und die Beschaffenheit eines Materials sehr wichtig ist.

Neben Visagisten, Fotografen, Bühnen -und Kostümbildern und der Film- und Werbebranche, arbeiten aber eben auch Webdesigner mit Moodboards.

Sie können so noch vor dem ersten Entwurf das Look and Feel einer Website festlegen und dem Kunden präsentieren. Sollte es ihm nicht gefallen, so ist es doch wesentlich leichter ein neues Moodboard zu erstellen als eine komplett neue Website. Logisch, oder?

Aber auch wenn du deine eigene Website selbst erstellst, bietet dir ein Moodboard viele Vorteile:

  • du kannst mehrere Designs gegeneinander testen
  • es geht schnell und unkompliziert
  • du bekommst sofort ein Gefühl für die Designsprache, weil die
  • wichtigsten Elemente, wie Farben, Schrift und Bilder im Gesamtkontext abgebildet werden
  • es kostet nichts
  • du kannst es nahezu mit jedem dir bekannten Programm erstellen (dazu später mehr)
  • und es dient dir auch für später als Anleitung, wenn du dein Logo und andere Marketingmaterialien für deine Marke entwirfst (oder entwerfen lässt)


Wie sieht so ein Moodboard aus und was gehört da rein?

Es ist wie eine Art Collage aufgebaut. Sie enthält Farben, Schriften (auch kleine Textabschnitte), Bilder, Muster und Icons. Wie oben bereits erwähnt, kann man einfach ganz konventionell Papier, Schere und Kleber nutzen.

Mittlerweile wird ein Moodboard meist aber digital erstellt, was natürlich noch wesentlich schneller geht.

Der einfachste Weg ist, du nutzt einfach ein Programm, mit dem du dich auskennst und wo man Bilder und Texte einsetzen und frei anordnen kann. Es ist also auch mit Word oder PowerPoint ganz einfach umzusetzen. Gerne kannst du dafür auch Apps oder Design-Programme nutzen. Wie z.B. Adobe InDesign.

Ich kann dir Canva dafür ans Herz legen.

Canva ist eine Grafikdesign-Plattform, mit der man Grafiken, Präsentationen, Poster, Dokumente und andere visuelle Inhalte für soziale Medien oder die Website erstellen können. Man kann aus vielen professionell gestalteten Vorlagen auswählen, die Designs bearbeiten und auch eigene Fotos hochladen. Die Plattform ist in der Basisvariante kostenlos.


Wie macht man selbst ein Moodboard?

So gehst du vor:

Ein digitales Moodboard zu erstellen ist ziemlich unkompliziert. Es gibt hier auch sehr viele unterschiedliche Wege und du musst schauen, was für dich am besten zu deinem Work-flow passt. Ich zeige dir den Weg, den ich gehe. Probiere es einfach mal aus, ob es für dich auch klappt.

Zunächst muss man ganz viele Bilder sammeln. Aber woher weiß ich wonach ich suchen soll?

Schritt1:
Alles basiert auf deinen Werten. Schreibe dir zunächst Charaktereigenschaften auf, die dich beschreiben und die deine idealen Kunden von dir wahrnehmen sollen.

Beispiel: strukturiert, kreativ, methodisch, organisiert, pragmatisch, ehrgeizig, ehrlich, authentisch, flexibel, pfiffig, perfektionistisch, lösungsorientiert

Schritt 2:
Versuche dich auf 5 davon zu beschränken.

Beispiel: strukturiert, kreativ, authentisch, pfiffig, lösungsorientiert

Schritt 3:
Diesen Begriffen ordnest du nun passende Farben zu (den Schritt kannst du auch später noch machen, aber wenn du schon eine Farbpalette hast, hilft es dir bei der Bilderauswahl nachher)

Beispiel: kreativ = türkis, orange | authentisch = braun, sand | pfiffig = lila, türkis | lösungsorientiert/praktisch = grau | strukturiert = türkis

Schritt 4:
Danach schreibst du dir zu jeder Charaktereigenschaft alles auf, was dir dazu einfällt. Ganz klassisches Brainstorming. Aber werde dabei ruhig kreativ und abstrakt. Nimm Abstand vom Buchstäblichen und werde symbolischer, mit Bildern, die als visuelle Metaphern fungieren. Zum Beispiel ein schnelles Auto für „schnell“, ein Tiger, der synonym für „Wildheit“ ist, ein Schloss, das für „Sicherheit“ steht oder Mineralwasser, um „Erfrischung“ darzustellen.

Beispiel: strukturiert = Schachbrett, Fingerabdruck, Feder, Blatt, Iris, Pixel, Gehirn, Stoff, wiederholend, gleichmäßig, symmetrisch, spießig, Technik usw. 

Schritt 5:
Wenn du genug Begriffe gesammelt hast, dann kannst du loslegen und bei einer oder mehreren Bilderplattformen deiner Wahl die Begriffe eingeben und nach Bildern suchen.

Ich nutze gerne shutterstock und unsplash, aber auch Canva und Pinterest bei der Suche.

  • Shutterstock hat neben Fotos auch eine sehr breite Palette an Illustrationen und Vektorgrafiken, Mustern und auch Hintergrundbildern.
  • Bei Unsplash findet man tolle Stimmungsbilder, mit sehr hohem, fotografischen Anspruch.
  • Canva ist ähnlich wie Unsplash, hat aber auch tolle Icons und Collagen etc.
  • Pinterest bietet viel Inspiration, was das Design angeht, hat aber weniger Fotos.


Was machst du nun mit den Bildern?

Du kannst sie ganz klassisch erst einmal in einem Ordner auf deinem Computer sammeln.

Oder auch ein hilfreiches Tool nutzen. Es nennt sich niice. Damit kannst du in deinem Browser (am besten funktioniert Chrome) ein Add-on installieren und dann von jeder Bilderplattform aus, das Bild per Drag & Drop in Niice ziehen. Damit sparst du dir ein paar Mausklicks.

Wenn du alle Begriffe durch hast und denkst, dass du genug Material hast. Dann kannst du nun mit Canva weitermachen.

Bei Canva findest du bereits vorgefertigte Moodboard-Vorlagen. Gerne kannst du dir auch eine eigene erstellen. Wie so ein Moodboard aussehen kann, kannst du dir hier sehen.


Moodboard vorlagen canva

Ich habe dir ein paar weitere Beispiele in Pinterest zusammengestellt. Lass dich gerne davon inspirieren.

Nun kannst du deine gesammelten Bilder in Canva hochladen und versuchen sie in dem Moodboard anzuordnen. Vergiss nicht deine Farben dort auch einzufügen.


Worauf solltest du beim erstellen vom Moodboard achten?

Konzentriere dich auf deine Botschaft. Verwende keine Bilder oder Wörter, nur weil du sie magst. Jedes Mal, wenn du etwas zu deinem Moodboard hinzufügst, frage dich „Kommuniziert dies meine Marke?“ und „Ist dies etwas, was meiner Zielgruppe gefallen würde?“

Bei jedem Element, was du auf dein Moodboard ziehst, solltest du dich fragen:

  • Passt es zu meinen Werten
  • definiert es auch deine Marke
  • spricht es meine Zielgruppe an

Beispiel Blumen: Du findest ein schönes Blumenbild, was deine Natürlichkeit unterstreichen könnte. Spricht es aber auch deine Zielgruppe an? Wenn du eher Männer als ideale Kunden hast, dann wird das Bild vermutlich nicht deine gewünschte Wirkung haben. Und du musst überlegen, wie der Begriff Natürlichkeit mit deiner Marke in Verbindung steht. Warum bist du natürlich? Was steckt dahinter? Bist du authentisch, dann solltest du vielleicht eher dezent geschminkte Personen abbilden und keine Hochglanzmodels (was ich sowieso hinterfragen würde). Oder du nutzt viele geschwungene Formen und Muster, also naturgegebene Formen für die Gestaltung. Auch deine Farben sind dann eher dezent und nicht so aufdringlich. Z.B. ein Wald-Grün, Brauntöne und Beige.


Fazit:

Ein Moodboard hilft dir deine Idee visuell zu beschreiben. Damit sparst du dir viele Worte und vor allem Zeit und Geld. Bevor du also dein Design für die Website komplett ausarbeitest, solltest du mithilfe eines Moodboards prüfen, ob der Look & Feel zu dir und deiner Zielgruppe passt. Dafür musst du kein Designer sein, denn dafür brauchst du wirklich nur sehr wenige Vorkenntnisse und auch keine teuren Grafikprogramme.


Das könnte dich auch interessieren