Was ist ein Moodboard? So legen Sie die visuelle Richtung im Webdesign fest

Ein Moodboard macht sichtbar, wie sich eine Website anfühlen soll, noch bevor jemand den ersten Screen gestaltet. Es bündelt Farben, Typografie, Fotos und Texturen auf einer Fläche. In diesem Leitfaden zeigen wir Ihnen Schritt für Schritt, wie Sie ein Moodboard aufbauen, wie Sie mit Ihrem Kunden eine Richtung wählen und wie Sie Referenzseiten nutzen, ohne sie zu kopieren.

Die Nielsen Norman Group beschreibt das Moodboard in ihrem Leitfaden zu Mood Boards als Ausdruck der Gefühle und Werte, die ein Produkt vermitteln soll. Unsere Erfahrung aus der Praxis bestätigt das. Wenn ein Kunde etwas „Modernes" wünscht, stellt sich jeder etwas anderes vor. Ein Moodboard übersetzt dieses vage Wort dagegen in ein konkretes Bild. Somit dreht sich die Diskussion nicht mehr um Geschmack, sondern um Ziele.

Kurz gesagt ist ein Moodboard ein Entscheidungswerkzeug. Ein gutes Board verkürzt spätere Designrunden. Zudem hören Sie den Satz „So hatte ich mir das nicht vorgestellt" ganz am Anfang, also dann, wenn Änderungen noch günstig sind.

Wann sollten Sie ein Moodboard im Webprojekt erstellen?

Sie erstellen das Moodboard nach dem Briefing und vor dem ersten Wireframe. Die Reihenfolge ist deshalb wichtig. Zunächst sagt Ihnen das Briefing, für wen, wozu und mit welchen Grenzen Sie gestalten. Danach übersetzt das Moodboard diese Informationen in eine visuelle Sprache. Ohne Briefing hängt das Board in der Luft; deshalb empfehlen wir, zuerst ein Webdesign Briefing zu erstellen.

Bei einer neuen Marke deckt das Moodboard einen größeren Bereich ab. Logo, Farben und Schriften existieren zudem oft noch nicht. Bei einem Relaunch sieht es dagegen anders aus. Dann zeigt das Board, wie die bestehende Identität online wirken soll, und die Markenrichtlinien setzen die Grenzen.

Allerdings können Sie das Board auch mitten im Projekt wieder öffnen. Braucht zum Beispiel eine neue Produktseite einen eigenen Charakter, erstellen Sie ein kleines Unterboard. Trotzdem ermüdet ein häufiger Richtungswechsel das Team. Deshalb spart ausreichend Zeit für das erste Board später Wochen. Aus diesem Grund planen wir diese Phase in unseren Webdesign Projekten als eigenen Schritt ein.

Worin unterscheiden sich Moodboard, Styleguide und Wireframe?

Diese drei Ergebnisse werden oft verwechselt, dabei beantwortet jedes eine andere Frage. Das Moodboard klärt, wie sich die Seite anfühlen soll. Das Wireframe klärt, was wo steht. Der Styleguide klärt schließlich, nach welchen Regeln Sie umsetzen. Die Tabelle fasst den Unterschied zusammen.

In der Praxis ist das Moodboard das freieste und der Styleguide das strengste Ergebnis. Auf einem Moodboard brauchen Sie keine exakten Hexcodes. Im Styleguide muss dagegen jeder Wert messbar sein. Wer ein Board also wie ein Regelwerk liest, weckt falsche Erwartungen.

Welche Grundlagen brauchen Sie vor dem Moodboard?

Statt mit einer leeren Fläche zu beginnen, legen Sie zunächst das vorhandene Material auf den Tisch. Je klarer die Grundlagen, desto fokussierter das Board. Zu Projektbeginn füllen wir daher die folgende Liste gemeinsam mit dem Kunden aus.

• Aktuelles Logo, Markenfarben und vorhandene Markenrichtlinien.
• Eine Beschreibung der Zielgruppe: Bedürfnisse und Erwartungen, nicht nur Altersgruppen.
• Das Hauptziel der Seite: Anfragen, Verkäufe, Termine oder Information.
• Drei bis fünf Websites, die der Kunde mag, und einige, die er nicht mag.
• Der allgemeine visuelle Ton der Wettbewerber und gewünschte Abgrenzung.
• Ob Fotos vorhanden sind und ob ein Shooting möglich ist.
• Technische Grenzen: Plattform, Anzahl der Sprachen, Ziel für Barrierefreiheit.

Vor allem die Frage nach ungeliebten Websites ist wertvoll. Denn Menschen beschreiben klarer, was sie nicht wollen, als was sie wollen. Außerdem sollten Sie die Fotosituation früh kennen. Gibt es kein professionelles Shooting, macht eine Richtung, die Stockfotos nicht tragen können, später Probleme.

Wie wählen Sie die Stimmungsbegriffe aus?

Stimmungsbegriffe sind der Kompass eines Moodboards. Der Leitfaden der Nielsen Norman Group empfiehlt vier bis fünf Begriffe. Diese Zahl gibt also genug Richtung, ohne das Board zu überladen. Am besten legen Sie die Begriffe direkt nach dem Briefinggespräch gemeinsam mit dem Kunden fest.

Meiden Sie vor allem allgemeine Wörter. „Hochwertig", „professionell" und „modern" stehen auf fast jeder Liste und grenzen Sie deshalb nicht ab. Suchen Sie stattdessen den feinen Unterschied zwischen Synonymen. So führen „ruhig" und „luftig" zu unterschiedlichen Bildern. Ebenso sind „vertrauenswürdig" und „seriös" nicht dasselbe.

1. Bitten Sie den Kunden, zehn Wörter zu notieren, die die Marke beschreiben.
2. Fassen Sie fast gleichbedeutende Wörter zusammen.
3. Fragen Sie bei jedem Wort, was das Gegenteil wäre.
4. Behalten Sie Wörter, deren Gegenteil ebenfalls eine sinnvolle Markenbeschreibung wäre, denn diese erzwingen eine echte Wahl.
5. Kürzen und ordnen Sie, bis vier oder fünf Begriffe übrig sind.

Auch die Reihenfolge im letzten Schritt zählt. Konkret wird der erste Begriff zum dominanten Gefühl des Boards. Die übrigen sind dann unterstützende Töne. Folglich wissen Sie bei einem Konflikt zweier Begriffe schon vorher, welcher gewinnt.

Wie legen Sie die Farbrichtung auf dem Moodboard fest?

Auf einem Moodboard sollte Farbe als Atmosphäre wirken, nicht als Liste von Codes. Warm oder kühl, gesättigt oder sanft, heller oder dunkler Hintergrund? Für die meisten Projekte genügt eine Gruppe aus drei bis fünf Farben, die diese Fragen beantwortet. Die exakten Werte können Sie dann im Styleguide festlegen.

Denken Sie beim Aufbau der Farbgruppe in Rollen. Eine Hintergrundfarbe, eine Textfarbe, eine Hauptfarbe und eine Akzentfarbe bilden das Grundgerüst. Den Akzent reservieren Sie meist für Buttons und wichtige Links. Daher zeigt eine kleine Akzentfläche auf dem Board die spätere Nutzung realistischer.

Farbassoziationen unterscheiden sich zudem je nach Kultur und Branche. Dieses Thema behandeln wir ausführlich in unserem Beitrag zur Farbpsychologie im Webdesign. Im Moodboard prüfen Sie Farben also gegen Ihre Stimmungsbegriffe, nicht gegen auswendig gelernte Bedeutungen.

Auch die Proportion spielt eine Rolle. Zeigen Sie jede Farbe gleich groß, entsteht ein falscher Eindruck. Der Hintergrund sollte groß, der Akzent klein erscheinen. Somit sieht der Kunde die echte Balance der Seite von Anfang an.

Warum sollten Sie den Farbkontrast schon im Moodboard prüfen?

Weil selbst eine schöne Farbgruppe unlesbaren Text erzeugen kann und eine späte Korrektur teuer ist. Das WCAG Kontrastkriterium des W3C verlangt auf Stufe AA mindestens 4,5:1 für normalen Text und mindestens 3:1 für großen Text.

Sobald Sie Textfarbe und Hintergrund nebeneinander auf das Board legen, können Sie dieses Verhältnis prüfen. Unser Kontrastrechner erledigt das in Sekunden. Reicht der Wert nicht, genügt oft ein etwas dunklerer Ton. Manchmal müssen Sie allerdings die ganze Gruppe überdenken.

Außerdem sollte Farbe nie allein Bedeutung tragen. Das W3C Kriterium zur Verwendung von Farbe verlangt, dass Menschen, die Farben nicht unterscheiden können, dieselbe Information über Text, Form oder Muster erhalten. Zeigen Sie Fehlerzustände deshalb mit Symbol und kurzer Meldung, nicht nur in Rot. Den größeren Rahmen beschreibt unser Leitfaden zur barrierefreien Website nach WCAG.

Wie zeigt sich Typografie auf dem Moodboard?

Typografie gibt einer Website vor allem ihre Stimme. Zwei Seiten mit denselben Farben wirken völlig verschieden, wenn eine eine Serifenschrift und die andere eine geometrische Groteske nutzt. Deshalb reicht ein Schriftname auf dem Board nicht. Zeigen Sie Überschrift und Fließtext in einem echten Satz und in annähernd realer Größe.

Für die meisten Projekte genügen zwei Schriftfamilien: eine für Überschriften, eine für Fließtext. Manchmal reicht sogar eine einzige Familie. Prüfen Sie zudem die Sprachunterstützung. Läuft die Seite mehrsprachig, testen Sie einen Beispielsatz mit Umlauten und ß.

Auch die Ladezeit gehört zur Schriftwahl. Der Typografie Leitfaden von web.dev erinnert daran, dass jede zusätzliche Schriftdatei die Ladezeit erhöht. Zudem nennt er 45 bis 75 Zeichen als weithin akzeptierte Zeilenlänge. Mehr zur Auswahl lesen Sie in unserem Beitrag zur Web Typografie.

Wie definieren Sie die Bildsprache auf dem Moodboard?

Fotos sind die Ebene, die Besucher zuerst wahrnehmen. Noch bevor sie ein Wort lesen, registrieren sie Licht, Farbton und Bildausschnitt. Deshalb sollten Sie Fotos für das Moodboard nach gemeinsamen Merkmalen auswählen, nicht zufällig.

Wir beschreiben eine Bildsprache entlang dieser Achsen:

• Licht: natürliches Tageslicht, Studiolicht oder dunkel und dramatisch.
• Ausschnitt: weite Räume, nahe Details oder Menschen im Mittelpunkt.
• Farbbearbeitung: kräftig oder gedämpft, warm oder kühl.
• Menschen: Blick in die Kamera, Hände bei der Arbeit oder gar keine Personen.
• Inszenierung: spontane Momente oder geplante, perfekte Szenen.

Schreiben Sie diese Achsen direkt auf das Board. Dann kann jeder, der fotografiert oder Stockbilder auswählt, dieselbe Sprache fortführen. Eine Notiz wie „Tageslicht, nahes Detail, warmer Ton" erleichtert also die Auswahl unter Dutzenden Bildern erheblich.

Wo haben Icons, Illustrationen und Texturen ihren Platz?

Icons und Illustrationen wirken weniger stark als Farbe und Fotos; trotzdem fällt Uneinheitlichkeit sofort auf. Auf dem Moodboard genügen daher einige Beispiele für Strichstärke, Eckenradius und gefüllten oder umrandeten Stil. Diese kleine Entscheidung betrifft später Dutzende Komponenten.

Texturen und Muster liegen meist in der Hintergrundebene. Eine leichte Papierstruktur, ein feines Raster oder ein sanfter Verlauf kann den Charakter einer Seite verändern. Allerdings darf eine Textur nie die Lesbarkeit stören. Zeigen Sie sie deshalb besser in freien Flächen als hinter Text.

Ebenso übersehen viele die Form der Ecken. Scharfe Ecken wirken ernster und strukturierter, runde Ecken dagegen weicher und freundlicher. Legen Sie Beispiele für Buttons, Karten und Formularfelder auf das Board, sieht der Kunde den Unterschied sofort.

Wie zeigen Sie Abstände und Rhythmus auf dem Moodboard?

Weißraum transportiert Gefühl genauso stark wie Farbe, wird aber am häufigsten vergessen. Großzügige Abstände wirken luftig, edel und ruhig. Dichte Layouts wirken dagegen energiegeladen, lebhaft und informationsreich. Welche Variante passt, hängt also von Ihren Stimmungsbegriffen ab.

Wir nutzen zwei Wege, um Abstände auf dem Board zu zeigen. Erstens zeichnen wir eine kleine Beispielkarte mit demselben Inhalt in zwei Dichten. Zweitens fügen wir zugeschnittene Referenzen hinzu, die nur den Weißraum einer anderen Seite zitieren. Somit sieht der Kunde einen konkreten Unterschied statt eines abstrakten Worts.

Rhythmus beschreibt außerdem, wie Abschnitte aufeinander folgen. Ein breiter Bildbereich, dann ein kurzer Textblock und dann wieder ein Bild erzeugen zum Beispiel ein ruhiges Atmen. Zeigen Sie diesen Rhythmus als senkrechten Streifen auf dem Moodboard, erhält das Wireframe einen klaren Hinweis. Das genaue Layout überlassen Sie dennoch dem Wireframe.

Sollte ein Moodboard auch Bewegung und Interaktion zeigen?

Ja, allerdings in Maßen. Der Charakter einer Seite ist nicht nur statisch. Was beim Überfahren eines Buttons passiert, wie Elemente beim Scrollen erscheinen und wie schnell Übergänge laufen, prägt die Wahrnehmung. Schnelle, harte Übergänge wirken dynamisch. Langsame, weiche Übergänge wirken dagegen ruhig.

Eine kurze Bildschirmaufnahme oder eine Folge weniger Einzelbilder reicht, um Bewegung auf dem Moodboard zu zeigen. Auch hier gilt: Kopieren Sie keine Referenzseite als Ganzes. Notieren Sie stattdessen nur Tempo und Charakter der Bewegung. Eine Notiz wie „weich, kurz, nie ablenkend" setzt der Entwicklung eine klare Grenze.

Denken Sie zudem an die Barrierefreiheit von Bewegung. Manche Nutzer aktivieren im Betriebssystem die Einstellung für reduzierte Bewegung. Ihre Bewegungssprache sollte diese Vorliebe respektieren. Daher ist ein Hinweis auf dem Board sinnvoll, dass die Bedeutung auch mit reduzierter Bewegung erhalten bleibt.

Wie nutzen Sie Referenzseiten, ohne sie zu kopieren?

Referenzseiten sind das riskanteste Material auf einem Moodboard. Richtig eingesetzt, klären sie die Richtung schnell. Falsch eingesetzt, entsteht dagegen eine blasse Kopie einer fremden Seite. Auch die Nielsen Norman Group warnt, dass zu viele Screenshots den Fokus von der Stimmung auf Funktionen verschieben.

Unsere Regel ist einfach: Zitieren Sie eine Referenzseite für ein einziges Merkmal, nie als Ganzes. „Uns gefällt, wie luftig der Weißraum hier wirkt" ist gesund. „Wir wollen diese Seite" legt das Design dagegen von Anfang an fest. Ergänzen Sie deshalb neben jedem Screenshot eine kurze Notiz, warum er dort steht.

1. Schneiden Sie den Screenshot zu und behalten Sie nur das relevante Detail.
2. Notieren Sie, was Sie übernehmen: Abstand, Schrift, Rhythmus oder Fototon.
3. Entfernen Sie Logos, Texte und andere Markenelemente.
4. Zeigen Sie dasselbe Merkmal mit mindestens zwei Beispielen aus verschiedenen Branchen.
5. Schauen Sie beim Gestalten auf die Notiz, nicht auf die Referenz.

Referenzen aus fremden Branchen funktionieren besonders gut. So kann der Umgang eines Museums mit Raum die Seite eines Architekturbüros inspirieren. Statt Ihren Wettbewerbern zu ähneln, heben Sie sich also mit einer Idee aus einem anderen Feld ab.

Wie verändert sich das Moodboard je nach Branche?

Jede Branche hat eigene visuelle Gewohnheiten, und ein Moodboard folgt ihnen oder bricht sie bewusst. Welchen Weg Sie wählen, hängt von der Positionierung der Marke ab. Suchen Besucher Vertrauen, helfen vertraute Signale. Suchen sie dagegen etwas Neues, zieht eine unerwartete Richtung Aufmerksamkeit auf sich.

Denken Sie an einige Beispielszenarien. Bei einem Industriebetrieb dreht sich das Moodboard meist um Solidität, Ordnung und technische Kompetenz. Echte Fotos von Werk und Produkten überzeugen dort weit mehr als Stockbilder. Ein kleines Café braucht dagegen Wärme, Textur und Nähe. In einer Kanzlei oder Beratung stehen schließlich Ruhe und Lesbarkeit im Vordergrund.

Andererseits macht eine zu enge Bindung an Branchenmuster Ihre Seite austauschbar. Deshalb empfehlen wir, dass mindestens ein Element auf dem Board von außerhalb der Branche stammt. Somit verbinden Sie Vertrautheit mit Eigenständigkeit, und Besucher erinnern sich an Sie.

Wie viele Moodboard Richtungen sollten Sie vorbereiten?

Für die meisten Projekte genügen zwei oder drei deutlich verschiedene Richtungen. Ein einziges Board lässt dem Kunden keine echte Wahl und macht das Treffen zu einer Ja oder Nein Frage. Mehr als fünf Boards führen dagegen zu Entscheidungsmüdigkeit und lassen jede Richtung oberflächlich.

Die Richtungen müssen sich allerdings wirklich unterscheiden. Drei Töne derselben Palette zählen also nicht als drei Richtungen. Ein ruhiges und helles Board, ein dunkles und kraftvolles sowie ein warmes, handgemachtes Board bieten dagegen eine echte Wahl. Jedes kann trotzdem eine andere Lesart derselben Stimmungsbegriffe sein.

Geben Sie außerdem jeder Richtung einen kurzen Namen und eine Begründung in einem Absatz. Ein Name wie „Stilles Atelier" statt „Variante A" erleichtert das Gespräch. Auch die Nielsen Norman Group rät, für unterschiedliche Konzepte getrennte Boards anzulegen, statt Widersprüche auf eines zu pressen.

Wie führen Sie das Richtungsgespräch mit dem Kunden?

Ziel des Gesprächs ist kein Schönheitswettbewerb, sondern die Richtung, die dem Ziel am besten dient. Rufen Sie deshalb vor dem ersten Board kurz Briefing und Stimmungsbegriffe in Erinnerung. Dann betrachtet der Kunde jedes Board mit der Frage, welches die Marke am besten erzählt, statt welches am schönsten ist.

Wir führen das Gespräch meist in dieser Reihenfolge:

1. Fassen Sie Ziel und Stimmungsbegriffe in zwei Minuten zusammen.
2. Präsentieren Sie jedes Board mit Namen und Begründung.
3. Bitten Sie den Kunden um eine Stärke und eine Schwäche je Board.
4. Notieren Sie die Elemente, die über alle Boards hinweg am besten ankamen.
5. Wählen Sie eine Hauptrichtung und höchstens ein oder zwei Elemente aus den anderen.

Seien Sie beim letzten Schritt vorsichtig. Nimmt man aus jedem Board ein Stück, entsteht eine Mischung ohne Charakter. Die Hauptrichtung muss klar bleiben. Kleine Anleihen, etwa der Fototon eines anderen Boards, funktionieren allerdings meist problemlos.

Wie sammeln und deuten Sie Feedback?

Kundenfeedback ist oft emotional und knapp: „Wirkt etwas kühl" oder „bitte lebendiger". Solche Sätze sind wertvoll, lassen sich aber nicht direkt umsetzen. Ihre Aufgabe ist also, sie in Designsprache zu übersetzen. Dafür stellen Sie offene Rückfragen.

Kommt zum Beispiel „kühl", fragen Sie, ob Farben, Fotos oder Abstände kühl wirken. Meist liegt das Problem in einer einzigen Ebene. Statt das ganze Board zu verwerfen, wärmen Sie folglich nur den Fototon auf und gehen weiter.

Halten Sie Feedback zudem schriftlich fest. Legen Sie die Gesprächsnotizen neben das Board und senden Sie dem Kunden eine kurze Zusammenfassung. Diese verhindert Wochen später Diskussionen darüber, was vereinbart war. Achten Sie zudem darauf, dass alle Entscheider teilnehmen; wer spät dazukommt, kann den Prozess sonst an den Anfang zurückwerfen.

Welche Fehler passieren beim Moodboard am häufigsten?

Die Fehler, die wir in der Praxis am häufigsten sehen, betreffen den Prozess, nicht die Technik. Die folgende Liste deckt die meisten davon ab.

• Das Board ohne Briefing beginnen.
• Zu viele Stimmungsbegriffe wählen und das Board zerfasern.
• Referenzseiten komplett einfügen.
• Eine Bildsprache wählen, die das Projekt nicht liefern kann.
• Die Farbgruppe ohne Kontrastprüfung freigeben.
• Das Board ohne Erklärung per E-Mail verschicken.
• Die mobile Ansicht völlig ignorieren.

Der letzte Punkt wiegt schwer. Viele Besucher kommen über das Smartphone. Ein breites Querformatfoto, das am Desktop beeindruckt, kann auf schmalem Bildschirm seine Wirkung verlieren. Deshalb gehört mindestens ein Beispiel für schmale Bildschirme auf das Board. Wenn Sie eine klare, reduzierte Richtung anstreben, hilft Ihnen zudem unser Beitrag zum minimalistischen Webdesign.

Wie sieht ein Beispielszenario mit zwei Richtungen aus?

Dieses Szenario dient als Beispiel und beschreibt keinen echten Kunden. Ein kleines Architekturbüro möchte über seine neue Seite Anfragen gewinnen. Die Stimmungsbegriffe legten wir in dieser Reihenfolge fest: „sorgfältig", „ruhig", „materialbewusst" und „zugänglich".

Die erste Richtung nannten wir „Stein und Licht". Sie nutzt einen gebrochen weißen Hintergrund, dunklen Anthrazittext und einen einzigen sandfarbenen Akzent. Die Fotos wählten wir in natürlichem Licht mit nahen Materialdetails. Typografisch kombinieren wir eine feine Serifenschrift für Überschriften mit einer schlichten Textschrift.

Die zweite Richtung hieß „Zeichenatelier". Hier liegt ein feines Raster auf weißem Grund, dazu Icons im Stil technischer Zeichnungen und eine geometrische Schrift. Die Fotos rücken Hände und Modelldetails in den Mittelpunkt.

Im Gespräch wählte das Büro die erste Richtung, wollte aber das Raster für die Kontaktseite übernehmen. Danach testeten wir den Sandakzent als Texthintergrund. Weil der Kontrast nicht reichte, setzten wir den Akzent schließlich nur für Buttonränder ein.

Was gehört auf Ihre Moodboard Checkliste?

Bevor Sie das Board an den Kunden senden, prüfen Sie es anhand der folgenden Checkliste. Können Sie einen Punkt nicht bejahen, schließen Sie zuerst die Lücke.

• Enthält das Board eine kurze Notiz zu Briefing und Ziel?
• Stehen vier bis fünf Stimmungsbegriffe in geordneter Reihenfolge?
• Ist die Farbgruppe nach Rollen getrennt: Hintergrund, Text, Hauptfarbe, Akzent?
• Haben Sie den Kontrast von Text und Hintergrund geprüft?
• Erscheinen Überschrift und Fließtext in einem echten deutschen Satz?
• Beschreibt das Board die Bildsprache nach Licht, Ausschnitt und Ton?
• Hat jeder Referenzscreenshot eine Notiz, was Sie übernehmen?
• Haben Sie mindestens ein Beispiel für schmale Bildschirme ergänzt?
• Hat jede Richtung einen Namen und eine kurze Begründung?

Die Liste wirkt kurz, beantwortet aber die meisten Fragen des Gesprächs im Voraus. Nutzen Sie sie außerdem im Team. Nachdem der Designer das Board fertiggestellt hat, liest eine zweite Person die Liste Punkt für Punkt. Frische Augen entdecken schnell Lücken, die der Autor nicht mehr sieht.

Bewahren Sie die Liste schließlich im Projektordner auf. Wenn Sie Monate nach dem Start eine neue Seite ergänzen, hält der Blick auf dieselbe Liste die Website einheitlich.

Wie überführen Sie die freigegebene Richtung in ein Designsystem?

Nach der Freigabe hat das Moodboard seine Aufgabe erfüllt und übergibt an strengere Ergebnisse. Zunächst verwandeln Sie die Farbgruppe in exakte Codes und Rollen. Danach legen Sie die Schriftskala fest, also die Größen von Überschriften und Fließtext. Anschließend gestalten Sie Kernkomponenten wie Buttons, Karten und Formulare in der gewählten Richtung.

In dieser Phase bauen die meisten Teams eine Stilbibliothek in einem Designwerkzeug wie Figma auf. Den Ablauf erklären wir Schritt für Schritt in unserem Beitrag zum Webdesign mit Figma. Bewahren Sie das Board trotzdem auf. Denn es ist die Referenz, zu der Sie zurückkehren, sobald eine Designentscheidung strittig wird.

Zeigen Sie dem Kunden außerdem früh den ersten Screen, der Wireframe und Moodboard verbindet. Ein einziger Abschnitt der Startseite genügt. So sehen Sie, wie die Richtung im echten Layout wirkt, und erkennen größere Abweichungen rechtzeitig.

Wie können Sie den Moodboard Prozess mit uns umsetzen?

Als Talha Aslan und Team beginnen wir jedes Webprojekt mit einer Briefing und Moodboard Phase. Wir legen die Stimmungsbegriffe gemeinsam mit Ihnen fest, bereiten zwei oder drei klar verschiedene Richtungen vor und überführen die gewählte Richtung in einen Styleguide und danach in eine funktionierende Website. Kontrast, mobile Ansicht und Ladezeit prüfen wir dabei von Anfang an.

Möchten Sie die visuelle Richtung Ihrer Website klären und umsetzen, richten wir das für Sie ein. Für ein klares Angebot nach Ihrem Umfang senden Sie uns eine Anfrage über unsere Seite zu Webdesign Leistungen. Planen Sie einen Relaunch, teilen Sie bitte auch Ihr vorhandenes Markenmaterial; dann richtet sich das Angebot nach Ihrem tatsächlichen Bedarf.