PAGE online

Tools für Designer und Coder

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.

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.

 

Designer, Developer, Programmierer, UX Design, UI Design
Mehr zum Thema »Designer & Coder, versteht euch!« lesen Sie in der Titelstory in PAGE 07.2018:
Button, call to action, onlineshop, PAGE


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.

Interaction Design, deepblue

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]

Produkt: Download PAGE - CSS Tipps & Tricks für Designer - kostenlos
Download PAGE - CSS Tipps & Tricks für Designer - kostenlos
Typische Fallbeispiele aus der Arbeit mit Cascading Style Sheets

Kommentare zu diesem Artikel

  1. Hallo liebe PAGE-Community, vielen Dank für den Input. Ich habe Pinegrow (https://pinegrow.com) und Adobe XD (https://www.adobe.com/de/products/xd.html) in dem Artikel vernachlässigt, da unter den befragten Design Codern nur sehr vereinzelt mit diesen Werkzeugen gearbeitet wurde. Aber probiert’s doch selber aus. Beide Tools stellen eine kostenlose Testversion zur Verfügung. Daniel Kränz von deepblue networks hat in PAGE 07.2018 (Seite 19) die zurzeit in Agenturen und unter Freelancern gebräuchlichsten Tools vorgestellt.

  2. Hallo hallo!
    Ich habe beim Lesen des Artikels ganz schön gestaunt, dass das einzigartige Tool Pinegrow gar nicht erwähnt wurde. Ich kenne nichts, was dem auch nur nahe kommt – und man wird nichtmal in ein Abo-Cloud-Modell gezwungen. Die beste Leistung und das auch noch zum kleinsten Preis!
    Bitte, bitte, schaut euch das mal an!

  3. Eine Software das Design und Frontend-Development auch vereint ist https://pinegrow.com/ Es ist zwar nicht wirklich bekannt, aber empfehlenswert. Man kann HTML Konstrukte ohne Framework bauen, oder Foundation / Bootstrap, etc. einsetzen, und WordPress Themes mit Bootstrap gestalten. Es ist nichts für Anfänger, aber für Profi’s schon.

  4. Nein, ich denke nicht, dass diese Adobe-fixierten Produkte fehlen. Das Ziel soll für Designer sein, mit möglichst wenig Abhängigkeiten und finanziellem Aufwand Ergebnisse zu erzielen. Und unter diesem Aspekt ist Adobe seit des Beginns des Abo-Gefängnisses draußen.

  5. Hallo, danke für den Einblick in den Workflow ihres Teams. Es fehlen bei den UI/UX Tools aber eindeutig Adobe Xd und in der Kategorie “Design to Code”,, Psd2Xcode (Siehe http://www.psd2xcode.de) und Adobe Animate mit Air.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren