Webseiten und Apps gestalten
Von der Idee bis zum klickbaren Prototyp mit Figma
Wer ein digitales Produkt benutzt, erwartet, dass es ansprechend und intuitiv zu bedienen ist. Die UI/UX-Design-Software Figma bietet alles, um ein möglichst gelungenes Konzept dafür zu erstellen. Lernen Sie am Beispiel eines fiktiven Shops, wie Sie einen Prototypeiner Webseite mit Figma umsetzen und was gute Nutzerführung ausmacht.
Figma ist mittlerweile der Marktführer für die Gestaltung von Bedienoberflächen und Interaktionen. Im September 2022 wurde die Übernahme durch Adobe angekündigt – Figma soll aber eigenständig bleiben. Die Macher haben früh erkannt, dass es für eine moderne Arbeitsweise essenziell ist, mit mehreren Mitstreitern gleichzeitig an einem Design zu arbeiten. Hinzu kommen ein großer Funktionsumfang und die Plattformunabhängigkeit: Figma ist komplett webbasiert und läuft somit im Browser. Es gibt zwar eine Desktop-Applikation, doch die ist im Prinzip nur ein separater Browser. Um mit Figma zu arbeiten, benötigen Sie deshalb eine stabile Internetverbindung. Sie können zwar auch offline an bereits erstellten Dateien weiterarbeiten, jedoch gibt es einige Einschränkungen, wenn Sie Bibliotheken oder Plug-ins nutzen oder mit anderen zusammenarbeiten möchten. Schöne Nebeneffekte eines solchen Webdienstes sind die automatische Speicherung, eine Versionshistorie und dass man sich nicht um Updates kümmern muss.
Wenn Sie ein Produkt wie einen Webshop entwickeln, ist es wichtig, dass Sie sich vorher über die Interaktion und die visuelle Gestaltung Gedanken machen und diese definieren. Mit Figma kann man einen sogenannten Klickdummy oder auch Prototyp erstellen, also eine Simulation des späteren Produkts – für sich selbst, für potenzielle Kunden oder den Chef. Sie können dabei festlegen, was bei einem Klick passieren soll; eine komplexe Logik oder Programmierung lässt sich aber nicht abbilden. Der Hauptzweck eines Klickdummys ist, Ihr Konzept mithilfe von Nutzern zu testen. Im Folgenden zeigen wir, wie auf Basis von Figma der Prototyp eines Onlineshops für Apple-Hardware entsteht. Die gezeigten Funktionen lassen sich natürlich auf jedes andere digitale Produkt wie Smartphone-oder Desktop-Apps übertragen. Über den Webcode am Ende des Artikels können Sie sich die Figma-Datei zu diesem Artikel auch herunterladen.