Tools für Designer und Coder

Neue Programme versprechen, den Kommunikationsfluss zwischen Designern und Developern zu optimieren. Interaction Designer Daniel Kränz hat für deepblue networks den momentan besten Workflow gefunden:

Konzeption, Design und Dokumentation mit …

Sketch

Das Tool wurde rein fürs UI/UX Design entwickelt – man merkt, dass hinter jeder Funktion viele Ideen und langjährige Erfahrungen in der Gestaltung digitaler Produkte stecken. Keine transparenten Kanten, kein läs­tiges Ebenensuchen, kein Antialiasing, sondern gestochen scharfer Text – und das sind nur einige der Pluspunkte. Zudem speichert es die Versio­nen in einer Historie, die wie bei einer Time Machine einsehbar ist.

Da Sketch vektorbasiert und damit für al­le Displaygrößen skalierbar ist, bietet es beste Qualität und Flexibilität im Bereich Responsive Design und SVG. Smart Guides erlauben die exak­te Bestimmung des Abstands zwischen Elementen für präzises Arbeiten im Ras­ter. Wie man es aus anderen Vektorprogrammen wie Illustrator kennt, ist es möglich, Formen zu kombinieren, zu addieren oder zu sub­tra­hieren und auf diese Weise neue Formen zu erstellen. Elemen­te, Schatten, Rah­men und Ecken lassen sich direkt durch Zah­len­eingabe ändern. Zudem kann man Korrekturen mit einem Klick auf alle aus­ge­wählten Elemente anwenden, was bedeutet, dass man nicht wie bei Photoshop jedes Element von Hand bearbeiten muss.

Sketch hat die Kommunikation zwi­schen Designer und Developer auf jeden Fall verein­facht, denn bei vielen Funktionen lassen sich Parallelen zur Programmierung erkennen. So lassen sich Farb­flächen, Schattierungen und andere Einstellungen ei­nem Element mehrmals zuweisen. CSS-Eigenschaf­ten kann man einfach mittels Rechtsklick kopieren. Die Gestaltung funk­tioniert zu einem großen Teil komponentenbasiert, womit sich Sketch an die Strukturen aus der Frontend-Entwicklung anlehnt.

In Code übersetzen mit …

Zeplin

Das praktische Tool übersetzt Designs aus Sketch. So kann der Developer Abstände, Farben, Schriftgrößen, Fonts sehr übersichtlich auf einen Blick herauslesen und diese Farb- und Schriftdefinitionen als Code in Swift, HTML oder CSS per Copy-and-paste für die Entwicklung verwenden. Das ist smart! Diese Kombination hat unseren Workflow deutlich vereinfacht.

Mehr zum Thema »Designer & Coder, versteht euch!« lesen Sie in der Titelstory in PAGE 07.2018:

Oder gleich Mini-Abo bestellen und stets auf dem Laufenden sein!

Prototyping mit …

Flinto, InVision, InVision Studio, Principle, Marvel, Atomic, Lottie

Bei der Wahl des Prototyping-Tools sollte man wissen, was man eigentlich abbilden will: einen Flow, um eine Funktiona­li­tät oder ein Feature zu zeigen, oder eine Animation, die das Verhalten ei­nes Icons visualisiert. Flinto war unser ers­tes Prototyping-Tool: Damit zieht man einfach ein paar Screens auf eine Arbeitsoberfläche und verbindet sie mit­einander. Das hält nun auch Einzug in Sketch – wird auch Zeit. Mittlerweile bieten andere Tools mehr: InVision als großer Player, der gerade InVision Studio veröffentlicht, das den Markt umdrehen könnte. Prototyping-Program­me wie Principle oder Marvel eignen sich als kleine Animationstools. Verstärkt haben wir Atomic im Einsatz, weil man damit sehr schnell interaktive Prototypen erstellen kann und es sehr schön mit Sketch zusammenarbeitet.

Auch bei Animationen wählen wir Tools, die möglichst wenig Aufwand in der Entwicklung verursachen. Zum Beispiel das Airbnb-Framework Lottie. Mit ihm können wir im Design mit After Effects arbeiten und mit dem Plug-in Bodymovin eine JSON-Datei erzeugen. Dann sieht die Animation im fertigen Produkt ebenso aus, wie wir sie in After Effects gebaut haben.

Design to Code mit …

Supernova Studio, Webflow

Design-to-Code-Pro­gramme sind die neue Verheißung, aber schon bei den ersten Tests mit Supernova Studio sind wir auf Probleme gestoßen. Diese Werkzeuge versprechen, dass durch die visuelle Gestaltung im Hintergrund der entsprechende Code geschrieben wird. Aber letztlich ist das dieselbe Diskussion wie um Website-Builder. Angeblich braucht man ja keine Agentur mehr, wenn jeder seine Site selbst hinbekommt. Doch sobald es an die Integration mit irgendwelchen Backends oder um Performance-Optimierung geht, die man für unterschied­li­che Geräte anpassen muss, ist man mit solchen Tools ganz schnell raus. Sie eignen sich eigentlich nur für Klick-Prototypen, die man direkt auf mobilen Geräten laufen lassen kann.

Im Webdesign ist momentan Webflow eines der Tools, das Design und Frontend-Development am ehesten vereint. Die webbasierte Design-to-Code-Plattform lässt sich zudem als Hosting Provider und Content-Management-System verwenden und eignet sich besonders für klei­nere Projekte wie Microsites, Landingpages und Co.

Daniel Kränz, Head of Interaction Design bei deepblue networks in Hamburg, ist überzeugt, dass Werkzeuge für Designer sich immer weiter an die Development­prozesse anlehnen werden, um schon im Konzep­tionsprozess Elemente für die Entwicklung vorzubereiten.

[4271]