Design meets Development: Die Kunst der Gestaltung trifft auf die Kraft der Umsetzung

Durch langjährige Umsetzung von Softwarelösungen in verschiedenen Branchen verstehen wir die Bedürfnisse der Anwender gut und setzen etablierte Methoden ein, um deren Erwartungen zu erfüllen. Lassen Sie uns tiefer in diesen Workflow eintauchen und verstehen, wie Design und Entwicklung bei M&M durch Figma harmonisch zusammenarbeiten. 

Die Rolle von UX/UI Design im Entwicklungsprozess

Anstatt die erste Version des Prototyps durch die traditionelle Entwicklungsabteilung programmieren zu lassen, werden das Nutzererlebnis und die Anwendung mithilfe von Wireframes bis hin zu High-Fidelity-Prototypen getestet. Figma ist ein webbasiertes Design-Tool, das es UX/UI Designern ermöglicht, diesen Prozess durchzuführen. Doch seine Stärken liegen nicht nur im Designprozess selbst, sondern auch in der effektiven Zusammenarbeit. In Figma können UX/UI Designer, Software Developer, Project Manager, Product Owner und Marketing Specialists gleichzeitig an einem Projekt arbeiten. Diese nahtlose Zusammenarbeit ermöglicht es, dass Designideen in Echtzeit angepasst werden, technische Machbarkeiten geprüft werden, Feedback koordiniert wird und Marketingstrategien integriert werden. So können Teams effizient gemeinsam an der Verwirklichung ihrer Ideen arbeiten. 

Von Low-Fidelity zu High-Fidelity

Im weiteren Verlauf des Projekts, nachdem Wireframes erstellt wurden, können Designer zu detaillierten High-Fidelity Prototypen übergehen, die das endgültige Aussehen und Verhalten des Produkts widerspiegeln. Hier kommen Komponenten, wiederverwendbare Designelemente, ins Spiel. Sie fördern Konsistenz und Effizienz, da sie in verschiedenen Teilen des Projekts wiederverwendet werden können.

Design und Styleguide: Eine symbiotische Beziehung

Eine bewährte Praxis ist die Trennung von Design und Styleguide. Durch separate Dateien für Design und Styleguide können Änderungen im Styleguide automatisch im Design übernommen werden. Dies stellt sicher, dass das gesamte Design konsistent bleibt und erleichtert es, Designrichtlinien auf dem neuesten Stand zu halten. 

Diese Trennung schafft ein flexibles und skalierbares Designsystem:

• Flexibilität: UX/UI-Teams können schnell auf Änderungen reagieren, indem sie neue Markenrichtlinien oder Nutzerfeedback zentral im Styleguide anpassen. Dies hält das Design dynamisch und reduziert manuelle Anpassungen in einzelnen Projekten.
• Skalierbarkeit: Der Styleguide erleichtert die Verwaltung und Erweiterung des Designs in wachsenden Projekten oder Organisationen. Neue Komponenten und Richtlinien können integriert und sofort genutzt werden, was die Wiederverwendbarkeit fördert und die Zusammenarbeit zwischen Teams effizienter macht. 

Vorbereitung für die Entwicklung und Vorteile des Dev Mode 

Sobald das Design abgeschlossen und als Ready for Development markiert ist, beginnt die Übergabe an die EntwicklerInnen. Figma's Dev Mode erleichtert diese Übergabe, indem es genaue Spezifikationen wie Maße, Abstände und CSS-Stile direkt aus der Figma-Datei extrahiert. EntwicklerInnen können direkt im Dev Mode Kommentare hinterlassen und Fragen stellen, was die Kommunikation und das Feedback zwischen den Teams verbessert. Der Dev Mode ist besonders bei großen Projekten sinnvoll, da er die Zusammenarbeit zwischen Design und Entwicklung effektiv unterstützt. Bei kleineren Projekten ist die Nutzung optional, aber verstärkte Kommunikation über andere Kanäle bleibt entscheidend für ein reibungsloses Projektmanagement. 

Dev Support: Unterstützung durch den UX/UI Designer

Ein wesentlicher Aspekt der erfolgreichen Zusammenarbeit ist der Dev Support.

Dabei steht der UX/UI Designer den EntwicklerInnen stets zur Verfügung, um bei Problemen und Rückfragen zu unterstützen. Dies umfasst nicht nur die Beantwortung technischer Fragen zur Umsetzung des Designs, sondern auch die Klärung von Unklarheiten bezüglich der Benutzerführung und visuellen Details. 

Durch diese kontinuierliche Unterstützung wird sichergestellt, dass das Endprodukt den hohen Qualitätsansprüchen entspricht und gleichzeitig den Designvorgaben treu bleibt. 

Kommunikation und Feedback

Ein reibungsloser Workflow erfordert kontinuierliche Kommunikation und Abstimmung über MS Teams Channels, Figma Kommentare und E-Mails. Diese sind entscheidend, damit DesignerInnen und EntwicklerInnen Probleme frühzeitig erkennen und lösen können, um sicherzustellen, dass das Endprodukt den Erwartungen gerecht wird. 

Ausblick

Die Updates von Figma's Config 2024 zeigen eine vielversprechende Zukunft für die Softwareentwicklung. Verbesserungen in der Benutzeroberfläche, Entwickler-Tools und die KI-Integration deuten auf eine noch kollaborativere, effizientere und innovativere Arbeitsweise hin. Mit der zunehmenden Präsenz von Künstlicher Intelligenz im Bereich UX-Design gewinnen wir bei M&M ein besseres Verständnis dafür, wie sie unsere Arbeitsabläufe verbessern kann. Zukünftig ist zu erwarten, dass KI nahezu überall integriert wird, und zwar auf eine Weise, die uns unterstützt, anstatt uns zu dominieren.