Effiziente App Entwicklung mit Figma

Ein Bild von einem Laptop Bildschirm, das ein Wireframe anzeigt

Wie visuelle Konzepte unnötige Änderungen vermeiden und die Zusammenarbeit verbessern.

Nachdem der Funktionsumfang des MVP (siehe letztes Kapitel) definiert wurde, mache ich mich daran, die Funktionen durch ein visuelles Konzept greifbar zu machen.

Figma

Für diesen Zweck nutze ich das bekannte Online-Tool Figma. Viele Designer kennen Figma bereits gut. Leider muss ich aus meiner beruflichen Erfahrung gestehen, dass solche Tools oft zu selten zum Einsatz kommen.

Dabei bietet Figma großes Potenzial, um auch Entwicklern die Arbeit zu erleichtern. Es gibt zum Beispiel vorgefertigte Komponenten von großen CSS-Frameworks und Designsystemen wie Material Design, die mit nur wenigen Klicks importiert werden können. Dadurch arbeiten Designer und Entwickler mit denselben grafischen Elementen, was die Abstimmung erleichtert.

Darüber hinaus kann man in Figma eigene Komponenten erstellen oder bestehende anpassen. Entwickler können sogar selbst Komponenten gestalten und als eigenständige Bausteine verwenden.

Der für mich größte Vorteil von Figma: Mit relativ geringem Aufwand lassen sich Interaktionen simulieren. Es dauert oft lange, bis Entwickler Designanpassungen umsetzen, und noch länger, Interaktionen zu programmieren.

Wie oft kommt es vor, dass Entwickler nach mehreren Tagen harter Arbeit an Features plötzlich gebeten werden, „nur kurz“ die Farbe oder den Abstand anzupassen? Wenn die Anwendung dann zum Testen bereitgestellt wird, heißt es oft: „Könntest du noch diese Information hinzufügen?“ Was von außen wie eine Kleinigkeit wirkt, kann für den Entwickler (im schlimmsten Fall) mehrere zusätzliche Arbeitstage bedeuten.

Ein Großteil dieser „lästigen“ Änderungswünsche für Entwickler ließe sich vermeiden, wenn Tools wie Figma frühzeitig im Projekt genutzt würden.

Wireframe

Aber zurück zum Projekt: Ein Wireframe beschreibt im Wesentlichen die verwendeten Elemente (Bilder, Buttons, Texte, Abstände usw.) durch einfache Abstraktionen. Hier geht es nicht um pixelgenaue Ausrichtungen oder perfekt abgestimmte Farben, sondern darum, die Bedienbarkeit für den Endnutzer der zukünftigen Anwendung zu verdeutlichen.

Für diesen Zweck reicht es oft aus, nur mit Rechtecken, Kreisen und Texten zu arbeiten. So lässt sich schnell ein Entwurf erstellen, der als hervorragende Grundlage dient, um die Bedienbarkeit mit dem Projektinhaber durchzusprechen.

Aktuell nutzen die Pflegeeltern aus Tanjas Community WhatsApp, um sich zu organisieren. Die Idee ist daher, sich am Bedienkonzept von WhatsApp zu orientieren, um die spätere Umstellung der Pflegeeltern auf unsere App so reibungslos wie möglich zu gestalten. Ein Beispiel für die von mir erstellten Wireframes ist im Folgenden abgebildet.

Natürlich ist mir bewusst, dass Änderungswünsche auch mit Design-Tools wie Figma nicht vollständig vermieden werden können. Deshalb gibt es ja Ansätze der agilen Softwareentwicklung. Dennoch bin ich überzeugt, dass sich durch den Einsatz solcher Tools unnötige Änderungswünsche minimieren lassen. Zudem bekommt der Projektinhaber ein besseres Gefühl dafür, ob die Entwickler das Konzept so verstanden haben, wie er oder sie es sich vorstellt.

Ausblick

Als Nächstes wäre die detaillierte Umsetzung des Designs geplant gewesen. Doch dazu kam es leider nicht. Lies im nächsten Artikel, was die Gründe dafür waren.

Veröffentlicht am
Kategorisiert in Allgemein