Bei komplexen Projekten, sei es im Web oder im mobilen Bereich, kommt irgendwann der Punkt, an dem die Verwaltung der Bildschirme sowie der grafischen Elemente, aus denen sie bestehen, für den Interface-Designer und den Coder zu einem echten Kopfzerbrechen wird. In sogenannten "agilen" Projekten kann es häufig zu Anpassungen der visuellen Komponenten kommen. Eine saubere und für die Entwickler nachvollziehbare Historie zu bewahren, kann sich als äußerst schwierig erweisen.
Das Risiko besteht darin, dass eine große Diskrepanz zwischen der grafischen Version eines Projekts und seiner "codierten" Version entsteht. Wir haben eine Reihe von Werkzeugen eingeführt, die wir im Rahmen dieses Artikels mit Ihnen teilen werden.
1. Die Designwerkzeuge
Bereits vor einigen Jahren haben wir uns dafür entschieden, den Großteil unserer Benutzeroberflächen mit dem Grafikdesign-Tool Sketch zu entwickeln. Obwohl seitdem andere Lösungen wie Adobe XD auf den Markt gekommen sind, ist Sketch immer noch eine äußerst leistungsstarke Lösung für das Design von Web- und Mobiloberflächen.
Es bietet nämlich eine Reihe wichtiger Werkzeuge, wie z. B. die Erstellung flüssiger und dynamischer Komponenten, mit denen sich visuelle Elemente leicht replizieren lassen, aber vor allem "leicht" verschiedene Bildschirmgrößen simulieren lassen. Diese Variationen je nach Bildschirmauflösung sind sehr oft ein Albtraum für die meisten Designer und Entwickler. Glücklicherweise bietet Sketch eine Reihe von Antworten auf diese Herausforderungen und ermöglicht es auf sehr ergonomische Weise, komplexe und reichhaltige maßgeschneiderte Designs zu erstellen und dabei die Grundlagen der Benutzererfahrung (UX) zu respektieren.
Sketch hat jedoch seine Grenzen, und die größte davon ist die Kompatibilität. Die Software ist nämlich nur für Mac OS verfügbar, was nicht ideal ist, wenn einige unserer Entwickler mit Windows arbeiten.
2. Eine Lösung für Austausch und Dialog
Wenn unseren Entwicklern (und noch weniger unseren Kunden) Sketch nicht zur Verfügung steht, sollten wir andere Optionen in Betracht ziehen, wenn es darum geht, ein Design zu teilen und zu diskutieren.
Am Anfang hätten wir mit annotierten PDFs beginnen können. Diese stoßen jedoch schnell an ihre Grenzen, wenn lange Diskussionen stattfinden. Deshalb investieren wir seit einigen Jahren in die Cloud-Lösung Invision. Diese Plattform ermöglicht es, Web- und Mobildesigns direkt über den Browser zu betrachten. Darüber hinaus bietet sie ein äußerst leistungsstarkes Tool zur Aufnahme von Kommentaren mit einem "Kanban"-Ansatz, der für die Freigabe von Änderungen sehr praktisch ist.
Designer und Entwickler dazu zu bringen, eine gemeinsame Sprache zu sprechen, hat zu einer enormen Wertschöpfung bei Talk to me geführt.
Das Sahnehäubchen ist, dass sich diese Lösung über ein Plugin ideal in Sketch integrieren lässt, das den direkten Export von Bildschirmen aus unserer Lieblingssoftware ermöglicht. Eine unbestreitbare Zeitersparnis für uns, aber auch für unsere Kunden, die unsere Designs so sehen können, als wären sie codiert.
Diese Lösungen sind zwar sehr ausgereift, werden jedoch seit einiger Zeit von der Adobe-Suite und insbesondere von Adobe XD auf die Probe gestellt. Die XD-Suite bietet einerseits ein Design-Tool, andererseits aber auch interessante Tools zum Teilen von Bildern. Bei Talk to me sind jedoch Sketch + Invision unsere Favoriten!
3. Eine Komponentenbibliothek, die den Entwicklern zur Verfügung steht
Sobald die Schnittstellen validiert sind, besteht die Herausforderung darin, die Veröffentlichung und Versionierung der visuellen Komponenten zu verwalten, damit diese so nah wie möglich an ihrem ursprünglichen Design codiert werden. Dazu führen wir sogenannte Komponentenbibliotheken ein, die als visuelles Wörterbuch für den Entwickler dienen.
Wir haben uns dafür entschieden, mit der Plattform Zeplin.io zu arbeiten. Diese integriert sich auch nahtlos in Sketch mithilfe eines Plugins, das es ermöglicht, mit einem Klick Komponenten oder Symbole in eine sichere Cloud zu exportieren.
Jede Komponente wird dann in der Bibliothek in visueller Form aufgelistet, aber auch als CSS- oder SCSS-Code oder je nach Bedarf in React Native. Das spart unserem Team viel Zeit. Darüber hinaus dient die Bibliothek als Referenz für alle zukünftigen Entwicklungen. Sie listet nicht nur die Bildschirme und Komponenten auf, sondern auch die Textstile und Farbcodes.
Ein Prozess, der das Design und die Nutzererfahrung wieder in den Mittelpunkt stellt
Unsere Leidenschaft gilt dem Interface Design (UI) und der User Experience (UX). Die Einführung dieser Tools hat es uns ermöglicht, UI und UX stets in den Mittelpunkt unseres Entwicklungsprozesses zu stellen, und hat uns die nötige Agilität verliehen, um große Projekte mit Gelassenheit und Qualität anzugehen.
Wenn Sie mehr erfahren möchten, kontaktieren Sie uns bitte unter lets@talk-to-me.ch. Wir würden uns freuen, Ihr Projekt mit Ihnen besprechen zu können.
