Einfache Wireframes und Prototypen erstellen

In diesem Projekt erfährst du, wie du einfache Wireframes (Drahtgitter) und Prototypen für mobile Apps erstellst.

Nehmen wir an, du hast eine vielversprechende Idee für eine neue App. Wir nennen sie in unserem Beispiel This or That (Dieses oder Jenes). In der App werden den Nutzern zwei Optionen gezeigt, von denen sie eine auswählen sollen. Bevor du dir jedoch Investoren dafür suchst, solltest du ein paar einfache Wireframes und Prototypen erstellen, um die App mit Nutzern zu testen.

Wireframes sind einfache Modellentwürfe von Webseiten oder Apps, mit denen du schnell mehrere mögliche Versionen deines Endprodukts erstellen kannst. Details wie Farben, Bilder oder andere Designelemente werden darin noch nicht genau festgelegt.

Anschließend erstellst du einen Prototyp, um zu testen, wie Nutzer mit deinem Produkt interagieren und darin navigieren.

Die Kombination aus Wireframes und Prototypen ermöglicht dir, dein Produkt zu planen und anschließend live mit Nutzern zu testen.

Am Ende dieses Projekts weißt du, wie du Rahmen, Formen, Text und Prototyping in Figma verwenden kannst. Los geht's.

Wireframe mit Rahmen, Formen und Text erstellen

Für den Wireframe in unserem Beispiel verwenden wir die folgenden Objekte:

• Zwei Rahmen für die Designs
• Sieben Rechtecke für die Bilder und Schaltflächen der App
• Vier Textebenen zum Beschriften der wichtigsten Schaltflächen

Datei erstellen

Zunächst benötigen wir eine neue Designdatei.

1. Melde dich unter figma.com bei deinem Figma-Konto an.
2. Klicke im Datei-Browser auf Drafts (Entwürfe).
3. Klicke auf New design file (Neue Designdatei).

Ersten Rahmen hinzufügen

Jeder Rahmen stellt eine andere Seite der App dar. Da die App auf mobilen Geräten nutzbar sein soll, verwenden wir vordefinierte Rahmengrößen. Für dieses Projekt verwenden wir die folgenden beiden Rahmen:

• Einen Rahmen namens “This or That” (Dieses oder Jenes), in dem zwei Optionen angezeigt werden
• Einen Rahmen namens “This” (Dieses), der zeigt, was passiert, wenn Nutzer “This” wählen.

Beginnen wir mit dem Rahmen “This or That”.

1. Klicke in der Symbolleiste auf das Rahmensymbol oder drücke die Taste F.
2. Wähle auf dem Design-Tab in der rechten Seitenleiste die vordefinierte Größe iPhone 14 Pro.

Jetzt benennst du den Rahmen um. Eine klare Namensstruktur erleichtert dir später, Ebenen in deinen Dateien wiederzufinden und zu verwalten.

1. Doppelklicke auf dem Layers-Tab (Ebenen) auf den Namen des Rahmens, den du soeben in der Arbeitsfläche platziert hast.
2. Benenne den Rahmen in “This or That” um und drücke die Enter-Taste (Mac) oder die Eingabetaste (Windows).

Formen hinzufügen

Da wir uns in dieser Phase der Entwicklung nicht groß mit Farben, Stilen und Designs befassen müssen, können wir einfache Formen verwenden, um das Layout der App darzustellen.

Füge dem Rahmen „This or That“ Rechtecke für die beiden Optionen hinzu.

1. Wähle das Rechteckwerkzeug aus oder drücke die Taste R und klicke in den Rahmen “This or That”.
2. Gib in der rechten Seitenleiste in die Felder Width und Height Pixelwerte für die Form ein. Für die Breite unseres Rechtecks verwenden wir 319 und für die Höhe 240.
3. Klicke auf das Rechteck und ziehe es an den oberen Rand des Rahmens. Figma versucht daraufhin, das Objekt an umliegenden Objekten auszurichten, indem es sie automatisch daran anheftet. In diesem Fall richten wir das Rechteck in der Mitte des Rahmens aus.
4. Um die Füllfarbe anzupassen, wähle das Rechteck aus und öffne dann den Farbwähler im Abschnitt Fill (Füllen) in der rechten Seitenleiste. Im Beispiel verwenden wir für die Füllung den Farbcode 8ED3E2.

Da das zweite Rechteck genauso groß sein soll, kannst du das erste Rechteck duplizieren.

1. Wähle das Rechteck aus und drücke die Befehlstaste + D (Mac) oder Strg + D (Windows), um es zu duplizieren.
2. Das neue Rechteck wird direkt über dem vorhandenen Rechteck platziert. Klicke auf das zweite Rechteck und ziehe es in die Mitte des Rahmens.
3. Ändere die Füllfarbe des zweiten Rechtecks. In unserem Beispiel verwenden wir den sechsstelligen Code D48C8C.

Das sieht gut aus! Benenne jetzt die beiden hinzugefügten Rechteckebenen um: die obere in "This Image" (Dieses Bild) und die untere in "That Image" (Jenes Bild).

Nachdem du jetzt weißt, wie du Formen hinzufügen und ändern kannst, füge zwei weitere Rechtecke für "This Button" (Dieses-Schaltfläche) und "That Button" (Jenes-Schaltfläche) hinzu. Jedes Rechteck ist 130 breit und 95 hoch. Denk daran, die Ebenen umzubenennen. Der Rahmen sollte danach so aussehen:

Text hinzufügen

Der erste Rahmen ist fast fertig. Füge ihm jetzt Text hinzu, um die Schaltflächen "This" und "That" zu identifizieren.

1. Wähle in der Symbolleiste das Textwerkzeug aus oder drücke die Taste T.
2. Klicke auf das untere linke Rechteck und gib “This” ein.
3. Wähle die Textebene aus und gib in den Einstellungen unter Text für die Größe 24 ein.
4. Klicke auf die Textebene und ziehe sie zur Mitte des unteren Rechtecks. Figma versucht daraufhin, die Textebene mittig im Rechteck auszurichten, indem es eine rote Linie als visuellen Indikator anzeigt.

Die Textebene liegt jetzt direkt über der Rechteckebene. Indem wir die beiden Ebenen zu einer Gruppe kombinieren, können sie als ein Objekt behandelt werden.

Um die Ebenen zu gruppieren, wähle beide Objekte aus. Klicke hierfür mit der Maustaste und ziehe den Cursor in der Arbeitsfläche über die Objekte, sodass sich beide innerhalb des blauen Auswahlrahmens befinden. Erstelle dann mit den folgenden Tastenkombinationen eine Gruppe:

• macOS: Befehlstaste + G
• Windows: Strg + G

Auf dem Layers-Tab (Ebenen) in der linken Seitenleiste wird jetzt nur eine Ebene namens “Group 1” (Gruppe 1) angezeigt. Benenne diese in “This Button” (Diese-Schaltfläche) um.

Nachdem du jetzt weißt, wie du Textebenen hinzufügst und Gruppen erstellst, erstelle einen “That Button” (Jenes-Schaltfläche). Dein Design sollte anschließend etwa so aussehen:

Zweiten Rahmen erstellen

Nachdem nun der Rahmen “This or That” fertig ist, überlege, wie der zweite Rahmen aussehen soll.

Wenn Nutzer auf "This Button" klicken, sollten “This Image” größer und “That Image” ausgeblendet werden.

Du brauchst nicht erneut von vorn zu beginnen. Dupliziere einfach den ersten Rahmen, indem du die Befehlstaste + D (Mac) oder Strg + D (Windows) drückst. Benenne den neuen Rahmen in “This” um.

Entferne “That Image”, indem du das Objekt auswählst und die Löschtaste drückst.

Vergrößere als Nächstes das Objekt “This Image” so, dass es den Großteil des Rahmens einnimmt.

Prototyping hinzufügen

Du hast jetzt einen Wireframe für zwei Seiten der neuen mobilen App erstellt.

Sehen wir uns jetzt genauer an, wie die beiden Seiten zusammenarbeiten. Wie gelangen die Nutzer vom Rahmen "This or That" zum Rahmen "This"? Welche Arten von Interaktionen und Animationen sind beim Wechsel zwischen den beiden Seiten zu erwarten?

Diese Fragen kannst du durch Prototyping beantworten.

Wenn Nutzer im Rahmen “This or That” auf "This Button" tippen, sollten sie zum Rahmen “This” weitergeleitet werden.

Erstelle eine Prototyp-Verbindung, um die Interaktion zu ermöglichen:

1. Klicke in der rechten Seitenleiste auf den Prototyp-Tab.
2. Bewege den Mauszeiger im Rahmen "This or That" über der Ebene "This Button".
3. Klicke auf das blaue Pluszeichen am Rand der Schaltfläche und ziehe die Verbindung zum Rahmen “This". Dadurch wird das Modul Interaction details (Interaktionsdetails) geöffnet.
4. Aktiviere im Dropdown-Menü den Trigger On tap (Durch Tippen).
5. Lege als Aktion Navigate to (Navigiere zu) fest. Wähle als Ziel im Dropdown-Menü den Rahmen “This”.
6. Wähle im Dropdown-Menü “Animations” (Animationen) die Option Smart Animate (Smart-Animation).

Nachdem du eine Interaktion erstellt hast, verlasse das Modul Interaction details (Interaktionsdetails). Klicke in der Symbolleiste auf Present (Vorschau), um die Interaktion zu testen.

Herzlichen Glückwunsch, du bist fertig!