Moodboard erstellen für ein Webdesign-Projekt

Ein Moodboard ist eine Sammlung von Bildern, Farben, Schriften und Gestaltungsbeispielen, die zeigt, wie sich eine Website anfühlen soll, bevor die erste Seite entworfen ist. Sie erstellen es, indem Sie die gewünschte Wirkung in wenigen Adjektiven festlegen, passendes Material sammeln, streng aussortieren und jedes Element beschriften. Das Ergebnis ersetzt lange Beschreibungen wie “modern, aber nicht kühl” durch etwas, worauf alle Beteiligten zeigen können.

Welche Programme sich für die Arbeit eignen, steht im Überblick über Design-Werkzeuge. Hier geht es um das Vorgehen.

Wofür ein Moodboard im Webdesign gut ist

Begriffe wie “hochwertig”, “freundlich” oder “klar” versteht jeder anders. Ein Moodboard macht diese Vorstellungen sichtbar und damit diskutierbar. Es hilft in drei Situationen besonders:

• Zu Projektbeginn, wenn noch keine Markenfarben oder Schriften feststehen.
• Bei mehreren Beteiligten, etwa wenn Geschäftsführung, Marketing und Gestaltung eine gemeinsame Richtung finden müssen.
• Bei Aufträgen an Dritte, weil ein Board dem beauftragten Designbüro mehr sagt als jede Textbeschreibung. Wie Sie solche Aufträge vorbereiten, beschreibt der Ratgeber Webdesigner beauftragen.

Ein Moodboard ist kein Entwurf. Es legt keine Seitenaufteilung fest und zeigt keine fertigen Seiten. Es beantwortet die Frage nach der Stimmung, nicht nach der Struktur.

Schritt 1: Ziel und Wirkung festlegen

Bevor Sie das erste Bild sammeln, schreiben Sie auf, wofür das Board gedacht ist und welche Wirkung die Website haben soll. Bewährt hat sich eine kurze Liste mit drei bis fünf Adjektiven, ergänzt um ein oder zwei Begriffe, die ausdrücklich nicht gemeint sind.

Die Gegenbegriffe sind oft wertvoller als die Wunschbegriffe, denn sie verhindern Missverständnisse. “Modern” kann minimalistisch oder grell bedeuten, “modern, aber nicht kühl” grenzt die Richtung deutlich ein.

Schritt 2: Material sammeln

Sammeln Sie zunächst großzügig und ohne viel zu bewerten. Für Webprojekte lohnt es sich, gezielt nach diesen Kategorien zu suchen:

Gute Quellen sind Fotos aus dem eigenen Umfeld, Druckerzeugnisse, Architektur, Verpackungen und natürlich andere Websites. Achten Sie darauf, nicht nur Websites aus der eigenen Branche zu sammeln. Gerade fremde Bereiche liefern Ideen, die sich vom Wettbewerb abheben.

Schritt 3: Kuratieren und aussortieren

Der wichtigste Schritt ist das Weglassen. Legen Sie alles Gesammelte nebeneinander und fragen Sie bei jedem Element: Passt es zu den Adjektiven aus Schritt 1? Elemente, die nur “schön” sind, aber eine andere Richtung zeigen, fliegen raus. Ebenso Dubletten, also mehrere Bilder, die dasselbe aussagen.

Erfahrungsgemäß bleiben von einer großen Sammlung nur ein Bruchteil übrig. Das ist gewollt: Ein Board mit klarer Linie ist hilfreicher als eine Sammlung schöner Einzelstücke.

Schritt 4: Anordnen und gewichten

Ordnen Sie die verbliebenen Elemente auf einer Fläche an. Dabei gilt:

• Ein Leitbild bekommt den größten Platz. Es fasst die Stimmung am besten zusammen.
• Farben stehen als eigene Farbfelder am Rand oder unten, mit Farbcode, sobald er feststeht.
• Schriften erscheinen als Musterzeilen mit echten Wörtern, nicht nur als Alphabet.
• Ähnliches gruppieren: Bildstil zu Bildstil, Interface-Beispiele zusammen.

Die Größe eines Elements sollte seiner Bedeutung entsprechen. Wenn eine Texturprobe genauso groß ist wie das Leitbild, liest das Board sich, als wären beide gleich wichtig.

Schritt 5: Beschriften und erklären

Ein Moodboard ohne Notizen lässt zu viel Raum für Interpretation. Schreiben Sie an jedes Element kurz, was genau gemeint ist: “Lichtstimmung, nicht das Motiv”, “die abgerundeten Ecken der Karten”, “Schriftcharakter, aber kräftiger”. So wird klar, dass ein Foto von einem Café nicht bedeutet, dass auf der Website Cafés zu sehen sein sollen.

Notieren Sie außerdem bei jedem Bild die Quelle. Das hilft später, Inspiration und lizenzierte Bilder sauber zu trennen.

Mehrere Richtungen statt einer

Wenn die Richtung noch offen ist, erstellen Sie zwei oder drei Boards mit unterschiedlicher Ausrichtung, etwa “warm und handwerklich”, “klar und technisch” und “kräftig und plakativ”. Die Beteiligten wählen dann eine Richtung oder kombinieren Elemente. Das ist schneller, als ein einziges Board immer wieder zu überarbeiten.

Eine Erweiterung ist das sogenannte Stylescape: ein Board, auf dem nicht nur Fremdmaterial liegt, sondern schon erste eigene Gestaltungselemente in der gewählten Richtung, etwa ein Button, eine Überschrift in der Wunschschrift oder eine Karte mit Bild. Es schlägt die Brücke vom Moodboard zum ersten Entwurf.

Analog oder digital?

Beide Wege führen zum Ziel. Die Unterschiede liegen im Alltag:

Für Webprojekte hat sich die digitale Variante durchgesetzt, weil das Ergebnis ohnehin am Bildschirm betrachtet wird. Eine physische Pinnwand kann trotzdem sinnvoll sein, wenn eine Marke stark über Materialien und Druck wirkt.

Vom Moodboard zur Gestaltung

Das fertige Board ist ein Werkzeug, kein Selbstzweck. Daraus leiten Sie die nächsten Bausteine ab:

1. Farbpalette: Die Farbfelder werden zu Haupt-, Akzent- und Neutralfarben. Wie Sie daraus eine belastbare Palette mit Abstufungen und Kontrastprüfung bauen, erklärt der Artikel Farbschema für die Website finden.
2. Schriften: Aus den Schriftmustern wählen Sie eine Schrift für Überschriften und eine für Fließtext.
3. Bildstil: Die Fotos werden zur Grundlage für ein kurzes Bildbriefing oder die Auswahl von Lizenzbildern.
4. Formensprache: Ecken, Linien und Abstände fließen in die ersten Komponenten ein.

Sobald diese Entscheidungen stehen, werden sie im Styleguide festgehalten. Wie das geht, beschreibt der Artikel Styleguide und Designsystem.

Das Board präsentieren und abstimmen

Ein Moodboard entfaltet seine Wirkung erst im Gespräch. Schicken Sie es nicht nur per Link herum, sondern stellen Sie es kurz vor: Was war das Ziel, welche Adjektive gelten, was ist mit den einzelnen Bereichen gemeint? Bitten Sie die Beteiligten dann um konkrete Rückmeldungen statt um ein allgemeines Urteil. Hilfreiche Fragen sind:

• Welches Element trifft die gewünschte Wirkung am besten?
• Welches passt nicht und warum?
• Fehlt etwas, das unbedingt dazugehört?

Halten Sie das Ergebnis schriftlich fest, am besten direkt auf dem Board. Eine kurze Notiz wie “Richtung B freigegeben, Bildstil aus A übernehmen” verhindert, dass dieselbe Diskussion bei den ersten Entwürfen noch einmal geführt wird.

Typische Fehler

• Zu viele Elemente: Wer alles zeigt, zeigt keine Richtung.
• Nur Websites der eigenen Branche: Das Ergebnis sieht dann aus wie alle anderen.
• Keine Beschriftung: Jeder liest etwas anderes aus demselben Bild.
• Bilder aus dem Board auf der Website: Inspirationsbilder sind nicht automatisch lizenziert.
• Board und Ziel passen nicht zusammen: Ein verspieltes Board für ein sachliches Fachportal führt zu Entwürfen, die niemand will.

Checkliste: Ist Ihr Moodboard fertig?

• Drei bis fünf Adjektive und ein bis zwei Gegenbegriffe sind festgelegt.
• Bildstil, Farben, Schriften und Interface-Beispiele sind vertreten.
• Ein Leitbild ist klar erkennbar.
• Jedes Element ist beschriftet: Was genau ist gemeint?
• Zu jedem Bild ist die Quelle notiert.
• Alle Beteiligten haben die Richtung bestätigt.

Mit einem solchen Board starten die ersten Entwürfe nicht bei null, und spätere Diskussionen lassen sich mit einem Blick auf die gemeinsame Grundlage abkürzen.