Ein Prototyp hilft dir eine App oder Website zu entwickeln. Es geht ohne Vorkenntnisse und Kosten. Ich zeige dir, wie du mit dem Design-Tool Figma einen App- oder Webseiten-Prototyp erstellst.
Alexander Sprogis
Du hast eine grobe Idee davon, wie das Ergebnis deines Konzepts aussehen soll? Gut! Konzentriere dich auf den Kern deiner Idee und dann besorge dir Inspiration, wie du diesen verbessern kannst. Begib dich im Netz auf die Suche nach 2-3 Beispielen von Unternehmen, die ein ähnliches Problem wie dein Konzept lösen. Um das Innovationspotenzial zu erhöhen, versuche dich bewusst auf andere Branchen als deine eigene zu konzentrieren. Ich nenne dir ein Beispiel. Möchtest du zum Beispiel kundenindividuelle Produkte verkaufen, schaue dir doch einfach mal den Onboarding-Prozess von Duolingo an. Duolingo ist eine Plattform, mit der du spielend leicht neue Sprachen lernen kannst. Das mag im ersten Moment nicht zusammenpassen. Du wirst aber feststellen, dass Duolingo neue Nutzer erst durch einen kleinen, klar strukturierten Assistenten führt, bevor diese tatsächlich zu den Übungsaufgaben übergehen. Diese sind dann individuell auf den Nutzer zugeschnitten. Vielleicht kannst du ja etwas von der Klarheit und Einfachheit des Assistenten für die Konfiguration deiner kundenindividuellen Produkte übernehmen.
Ganz ehrlich. So simpel es auch klingt - Papier und Stift sind die beste und einfachste Methode, damit zu starten deinen App Prototyp zu visualisieren. Wer als Designer unterwegs ist, wird das Gefühl kennen, direkt in seinem Lieblings-Grafiktool damit starten zu wollen, seine Idee auszuarbeiten.
Bevor wir das tun, sollten wir uns aber gründlich überlegen, wie unser Prototyp strukturiert und aufgebaut sein soll. "Ich bin aber nicht gut im Zeichnen", denkst du dir jetzt vielleicht. Aber das ist nicht relevant. Man muss kein Künstler sein, um ein paar Rechtecke und Boxen auf das Papier zu zaubern. Hässlich ist okay. Schreibe kurze Stichwörter auf, um die Funktionalität oder den Aufbau näher zu beschreiben. Erstelle die einzelnen Screens deiner App oder Webseite und beschreibe die Navigationsstruktur. Solltest du den Prototyp für einen Nutzertest erstellen, überlege dir eine Geschichte, die du mit diesem Konzept erzählen möchtest. In diesem Fall solltest du vermeiden die Screens unabhängig voneinander zu betrachten. Integriere deine Story und sorge für einen sinnvollen Übergang.
Solltest du bereits wissen, mit welchem Tool du das Konzept deines Prototyps umsetzt, dann nutze dieses gerne dafür. Es gibt diverse gute Anwendungen in diesem Bereich am Markt und viele unterscheiden sich im Funktionsumfang nur minimal. Daher ist es auch immer eine persönliche Geschmacksfrage, welches Werkzeug man in diesem Fall bevorzugt.
In diesem Tutorial werden wir mit dem Tool "Figma" unseren Prototyp erstellen. Figma ist für bis zu 3 angelegten Projekten kostenlos nutzbar. Figma ist bekannt für sein Kollaborations-Feature, welches mehreren Personen gleichzeitig ermöglicht, am gleichen Projekt zu arbeiten, ohne sich dabei in die Quere zu kommen. Die Benutzeroberfläche ist simpel und einfach gestaltet und besonders vorzuheben ist, dass die Anwendung browserbasiert läuft. Du musst nichts auf deinem Computer installieren, sondern kannst das Tool über einen beliebigen Browser aufrufen. Für die Nutzung empfehle ich Google Chrome. Weiterhin besitzt Figma eine breite Palette an frei verfügbaren Plug-ins und Templates und es kommen laufend neue dazu.
Nehmt euch Zeit und macht euch mit dem Interface vertraut. Auch wenn die Anwendung, wie bereits beschrieben, einfach gestaltet ist, bedarf es trotzdem einer kleinen Eingewöhnungsphase.
Habt ihr ein neues Projekt angelegt, befindet sich eure Ebenen Struktur auf der Linken Seite, eure "Leinwand" in der Mitte und auf der rechten Seite findet ihr die Eigenschaften zum jeweils markierten Element. Erstellt über den Shortcut "A" (A-Taste drücken), ein neues Artboard. Auf der rechten Seite könnt ihr euch entweder für ein vorgegebenes Format entscheiden (z.B. iPhone, iPad oder Desktop für eine Webseite) oder ihr zieht das Fenster mit eurer Maus in die gewünschte Größe. Über den Shortcut "R" (R-Taste drücken) erstellt ihr ein neues Rechteck, über "T" ein neues Textelement und über "O" ein Oval. Das ist eigentlich schon alles was ihr braucht, um zu starten.
Den Part des "Wireframings" lasse ich bewusst außen hervor, da dieser beim schnellen Testen einer Idee nicht zwingend zielführend ist. Du kannst diesen Punkt natürlich trotzdem gerne durchführen, wenn du möchtest. Figma stellt hierfür ein kostenloses Template zur Verfügung. Beim Wireframing geht es darum, dein Design auf Konzeptebene zu optimieren. Dabei legst du die Anordnung und Struktur der einzelnen Screens fest. Das alles ohne Bilder und Text. Es geht rein darum, den Ablauf der Interaktion mit deiner Anwendung festzulegen. Wir haben dies bereits grob mit Stift und Papier aufgezeichnet. Falls du mit dem Prototyp eine Idee testen möchtest, geht es in erster Linie darum, ob du das "Richtige" baust. Es geht darum herauszufinden, ob dein Konzept ein reales Problem löst und einen Mehrwert bietet. Nach den Tests kannst du dazu übergehen das Konzept "richtig" zu bauen. Ganz nach der Theorie von Alberto Savoia (ehem. Google Mitarbeiter): "Baue erst das Richtige, bevor du es richtig baust".
Bevor du dich an das konkrete Design deines Figma Prototype machst, solltest du die grundlegenden Dinge wie Farben, Schriftarten, Buttons etc. in Figma erstellen, um so eine gute Grundlage zu haben, mit der du arbeiten kannst. Für Farbkombinationen empfehle ich dir die Seite coolors.co. Dort lassen sich ganz einfach passende Farbkonzepte zusammenstellen. Für Fonts nutze gerne fonts.google.com. Alle dort gelisteten Fonts sind kostenfrei für private und kommerzielle Projekte nutzbar. Figma hat zudem bereits von Haus aus alle Google Fonts integriert.
Lege dir zusätzlich einen Arbeitsbereich für ein Moodboard an. Wenn du noch nicht konkret weißt, in welche Richtung dein Design gehen soll, recherchierst du zur Inspiration einfach ein paar Bilder und lagerst sie dort ab. So kannst du im Design-Prozess immer wieder einen Blick auf deine Sammlung von Stimmungsbildern werfen.
Lade deine Zeichnung auf deinen PC und anschließend in Figma hoch. Klappt ganz einfach über das Menü oben links. So hast du alles an einem Ort und kannst immer wieder einen Blick auf deine Konzeption werfen. Drücke die "A"-Taste um ein neues Artboard im Smartphone-Format anzulegen. Figma macht dir auf der rechten Seite entsprechende Vorschläge dazu.
Starte anschließend damit, dein Konzept Schritt für Schritt digital nachzubilden. In den nächsten Tagen werde ich hierzu ein kostenloses Video-Tutorial veröffentlichen.
Hast du alle Screens erstellt, ist es an der Zeit den Prototyp zum Leben zu erwecken. Gehe auf der rechten Seite in das "Prototyp" Menü und lege die grundlegenden Einstellungen fest. Dann klicke auf deinen Startscreen und verbinde die Trigger mit den nachfolgenden Screens. In Figma kannst du die Konnektoren ganz einfach per Drag und Drop verbinden.
Sind alle Screens miteinander gekoppelt, ist es Zeit den Prototyp auszuprobieren. Klicke im oberen, rechten Bereich auf den "Play"-Button. Anschließend sollte sich ein neues Fenster mit dem Prototyp öffnen und du kannst damit beginnen ihn durchzutesten.
Passt alles, kannst du den Prototyp ganz einfach mit deinen Testnutzern teilen. Klicke einfach auf den "Share Prototype"-Button und teile den Link mit den jeweiligen Personen.
