Infografik userinterfacedesign Moodboard

Moodboards und Design Progress Boards visualisieren das Look and Feel

Moodboards zeigen Dinge, die inspirieren und helfen das gestalterische Vokabular für die Designsprache zu definieren. In einer frühen Projektphase dienen Moodboards als Inspiration und helfen die angestrebte Atmosphäre und Stimmung eines Entwurfs bildlich darzustellen. Im Design Progress Board werden die Inspirationen aus dem Moodboard in konkrete Gestaltungselemente für den ersten Entwurf transferiert.

Was ist ein Moodboard?

Das Moodboard ist eine Collage aus Bildern, Screenshoots, Farben, Typografie, Formen, ersten Layoutideen, Icons, Grafiken, etc. Moodboards können analog oder digital entstehen. Sie dienen als Diskussionsgrundlage und definieren die Grundtonalität für die weitere Gestaltung. Das Moodboard ist ein wichtiges Arbeits- und Präsentationsmittel. Während dem Projekt unterstützt es die Entwicklung und die Vermittlung des Look and Feels. Im Digital Product Design macht das Moodboard die Elemente eines User Interface erfahrbar und klärt Zusammenhänge zwischen den verschiedenen Elementen. Das Moodboard lässt Raum für Inspiration und neue Ideen.

Look and Feel

Das Look and Feel (dt. Aussehen und Handhabung, «Anfühlen» Anmutung) bezeichnet Design-Aspekte des digitalen Produktes  wie z.B. die Wahl von Farben, Schriften, Icons und die Gestaltung des Layout. Ebenfalls dazu gehören Themen der Bedienung und Dialoggestaltung.

Vorgehen

Schritt 01

  • Sammeln Sie für das geplante digitale Produkt inspirierende Ideen und Bilder.

Schritt 02

  • Überprüfen Sie mit Hilfe der Markenwerte, ob das gesammelte Material zum geplanten digitalen Produkt passt.

Schritt 03

Sortieren Sie die Auswahl und gruppieren Sie das Material.

Schritt 04

  • Gestalten Sie ein inspirierendes Moodboard.

Was ist ein Design Progress Board?

Im Design Progress Board werden die Ideen und Inspirationen aus dem Moodboard konkretisiert. Das Design Progress Board definiert alle gestalterischen Basiselemente, die für den ersten Entwurf notwendig sind: Typografie, Farben, Icons, Bilder. Die Basiselemente aus dem Design Progress Board werden später im Designprozess im Design System zusammengeführt und als Pattern Library für das ganze Produkt-Team zugänglich gemacht.

Vorgehen

Schritt 00

  • Arbeiten Sie mit einem Template. Nutzen Sie dazu die Vorlage oder erstellen Sie ein eigene.

Schritt 01

  • Erstellen sie das Typografie-Konzept. Definieren Sie die Schriften in den entsprechenden Schnitten und Grössen.

Schritt 02

  • Gestalten Sie ein stimmiges Farbklima. Achten Sie auf genügend Kontrast.

Schritt 03

  • Definieren Sie einen passenden Icon-Style. Arbeiten Sie in dieser Phase mit einem bestehenden Icon-Set.

Schritt 04

  • Zeigen Sie welche Art von Bilder und Grafiken in ihrem digitalen Produkt verwendet werden.

Aus der Praxis

Folgende Kategorien haben sich in der Praxis bewährt:

  • Farben
  • Schrift
  • Icons
  • Grafiken
  • Bildsprache
  • Layout / Grid-System
  • Navigations-Komponenten
  • Interaktions-Muster
  • Animationen