Digital Produktdesign

Website-Entwicklung mit Webflow Interaktive Prototypen Usability Testing UX Design für Softwarelösungen

UX Grundlagen

UX Psychologie Weitere in Arbeit

Kontakt

E-Mail LinkedIn

Ideen zum Leben erwecken

Interaktive Prototypen

Prototypes workflow

Workflows

Ein Prototyp eignet sich hervorragend, wenn du einen konkreten Funktionsumfang im Kopf hast, aber diese noch nicht programmieren lassen möchtest.

Um das beste aus dem Prototyp herzauszuholen, besprechen wir als erstes über den oder die Abläufe. Diese zeichne ich in detaillierte Workflows auf.

Ein Workflow hat einen klaren Start und ein klares Ziel. Er beinhaltet alle Schritte und Entscheidungswege, die gemacht werden können. Diese Workflows dienen als Diskussionsgrundlage, um zu entscheiden, ob wichtige Anwendungsfälle fehlen.

Prototypes wireframes

Wireframes

Das Erstellen von Wireframes ist der zweite Schritt bei der Konzeption des Prototyps. Anhand der Workflows ergeben sich unterschiedliche Seiten. Für diese definiere ich Bereiche für Überschriften, Fließtexte, Bilder und so weiter.

Die Wireframes sind immer noch grob und skizzenhaft. In der Regel erstelle ich sie in Graustufen, damit der Fokus auf der Struktur anstelle der Details liegt. Diese Skizzen sind optimal, um sich den Aufbau des Prototyps vorzustellen und über die konkreten Inhalte zu diskutieren.

prototypes moodboard

Moodboard

Ein Moodboard wird oft als Look & Feel beschrieben. In diesem Schritt geht es darum, wie der Prototyp aussehen und wie sie sich verhalten soll. Wichtig sind die Bereiche Typographie, Farbe, Bildsprache und Animation. Dazu können wir beide Beispiele aus verschiedensten Quellen sammeln und dann in einem Moodboard zusammenstellen.

Das Moodboard ist die Grundlage für die Definition einer Designrichtung.

prototype design

Design

Im Design kommen die Inhalte aus den Wireframes mit dem Moodboard zusammen. Anhand des ausgearbeiteten Stils werden die einzelnen Seiten des Prototyps gestaltet.

Nachdem das Design fertig ist, können die einzelnen Screens mit Interaktionen verknüpft werden.

prototype interactions

Interaktionen

Der Prototyp wird erst durch die möglichen Interaktionen zum Leben erweckt.

In diesem Schritt werden die verschiedenen Status der interaktiven Elemente erstellt und die Seiten miteinander verknüpft.

Und schon ist der Prototyp fertig!

Bitte zögere nicht, mich zu kontaktieren, wenn du daran interessiert bist, einen interaktiven Prototypen für deine Idee zu erstellen.

Die Details und das konkrete Szenario für den Prototypen können wir bei unserem ersten Treffen besprechen.