January 13, 2021

So baust du kostenlos deinen App- / Webseiten-Prototyp

Ein Prototyp hilft immer dann, wenn du dich davon überzeugen möchtest, ob deine Geschäftsidee funktioniert. Das Beste daran? Es geht ohne Vorkenntnisse und Kosten. Ich zeige dir, wie du mit dem Design-Tool Figma einen App- oder Webseiten-Prototyp erstellst.

Alexander Sprogis

Mehr Innovation für dein Konzept

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.

Starte mit Papier und Stift

Ganz ehrlich. So simpel es auch klingt - Papier und Stift sind die beste und einfachste Methode, damit zu starten dein Konzept 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. Wenn du mehr zu diesem Thema erfahren möchtest, schaue dir diesen Artikel von mir zum Thema "Wie teste ich meine Geschäftsidee in wenigen Tagen" an.

Das "Prototyping"-Werkzeug deiner Wahl

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.

So legst du den Grundstein für deinen Prototyp

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 Prototyp 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.

Jetzt geht´s los

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.

Verbinde die Punkte

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.

Wie testest du den Prototyp mit einem Nutzer?

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. Wie du genau in solch einem Nutzertest vorgehst, erfährst du in meinem Blog-Beitrag "So testest du deine Geschäftsidee in wenigen Tagen". Viel Erfolg!

Keine Updates mehr verpassen

Erhalte Updates zu No-Code Themen und VisualMakers in deine Inbox.

Es gilt die aktuelle Datenschutzerklärung

Vielen Dank für dein Interesse! Du erhältst von uns eine Mail mit einem Bestätigungslink! :) 
Oops! Something went wrong while submitting the form.

Es gilt die aktuelle Datenschutzerklärung

ERWÄHNTE TOOLS
PASSENDE KURSE