Die Konvergenz von Code- und Design-Tools

Letztes Wochenende schaute ich einige Schubladen an meinem Schreibtisch durch und nahm alles heraus, was ich nicht wirklich oft genug benutze. Ich fand sogar eine alte Canon-Kamera, die ich 2006 in Kalifornien gekauft habe.

Wann habe ich das letzte Mal die Kamera benutzt, fragst du? Weiss ich auch nicht mehr. Hardware mit jeweils verschiedenen Anwendungsfällen wurden über die letzten 10 Jahre in ein und dasselbe Gerät integriert: Das Smartphone.

Interessanterweise sagte Steve Jobs 1980 einmal, "Immer mehr Software wird in die Hardware integriert.... Die Software von gestern ist die heutige Hardware. Diese beiden Dinge verschmelzen. Und die Grenze zwischen Hardware und Software wird immer enger und feiner und feiner."

~40 Jahre später, also 2019, ist das für jeden offensichtlich.

Die Geschichte der Design Tools

Zuerst war da.... Freehand. Erinnerst du dich noch? Dann kaufte Adobe den Hersteller, Macromedia, da Adobe ein ähnliches Angebot auf dem Markt hatte. Natürlich sollte Freehand nicht lange überlegen. Adobe unterstützte natürlich Illustrator und ließ Freehand einen langsamen Tod sterben. Wirklich sehr langsam. Zu meiner Überraschung unterstützt Adobe Freehand immer noch.

Und es gab und gibt natürlich Photoshop. Die Visual Designer tendierten dazu, PS, die Informations Architekten und Interaktionsdesigner Adobe Illustrator oder Visio zu verwenden. Für Prototypingzwecke verwendeten die Teams beispielsweise entweder Papier, einfaches HTML-Markup oder beliebte Tools wie Axure oder Omnigraffle (neben einer Vielzahl anderer Tools). Dreamweaver irgendjemand?

Konvergenz von Software und Hardware

Dann kamen Werkzeuge wie Sketch und später Figma (um nur ein paar zu nennen). Ein vielversprechendes Werkzeug, Atomic.io, hat leider keine den Schritte in den Mainstream nicht geschafft und begann Ende 2018 eine Pivot.

In den späten 00er bis frühen 10er Jahren wurden UI-Kits populär - vor allem Twitter's Bootstrap ist einer der ersten populärsten. Frontend Entwickler begannen, plattformübergreifende UI-Kits zu entwickeln, und Google eine komplette Überarbeitung derer User Experience unterging. Dies wiederum ermöglichte die Kreation von Material Design. Ich wüsste ja gerne, ob Material Design überhaupt möglich gewesen wäre, wenn Google nicht während dem Redesign bemerkt hätte, dass Design ein gutes Geschäft ist.

Ich wüsste ja gerne, ob Material Design überhaupt möglich gewesen wäre, wenn Google nicht während dem Redesign bemerkt hätte, dass Design ein gutes Geschäft ist

Mit der Popularität von Sketch und seiner Symbolfunktion (natürlich nicht das erste Tool mit dieser Funktion) wurden Designsysteme "a thing" (Design-Nerds hatten sie bereits vor Jahren entwickelt und verwendet). Jetzt kann sich ein Unternehmen nicht mehr auf die Schulter klopfen, kein Designsystem zu haben. Außerdem bieten Sketch und Figma nun Möglichkeiten, auf die Rohdatenquellen der jeweiligen Designdateien zuzugreifen.

Richtig, und ich vergass Invision, Marvel und dergleichen. Diese Tools begannen als einfache Werkzeuge, die bitmap-basierte Visuals miteinander verbindeten. Im Jahr 2018 verwandelte sich Invision mit der Einführung von Invision Studio in eine vollwertige Designplattform. Framer, das als JS-basiertes Prototyping-Tool begann, wurde als Framer X "wiedergeboren" - mit Fokus auf Designer (und Entwickler). Es basiert auf React-Komponenten unter der Haube.

Adobe war spät dran, ist aber dank seines Cash-Flow dabei, den Rückstand aufzuholen.

“Unser Tool kann alles was euer kann… und noch ein wenig mehr”

Wie bereits kurz erwähnt, begann Invision als ein sehr einfaches Werkzeug, um Bilder zu verknüpfen und klonte dann im Wesentlichen Sketch. Oh ja, Figma klonte Sketch vorher, wechselte aber auf eine andere Plattform - das Web (und addierte Funktionen wie APIs).

Sketch wiederum begann als visuelles Designwerkzeug und wurde 2018 um Prototyping-Funktionen erweitert. Es verfügt nun auch über einen Cloud-Service (z.B. wie Invision), bei dem du jeden [Dummy] (https://dictionary.cambridge.org/dictionary/english/dummy) oder ein Visual verlinken kannst. Es verfügt noch nicht über eine vollwertige API, aber man kann online via ein Git-Repository auf Rohdaten zugreifen (wenn Dateien versioniert werden sollen).

In einem Beitrag vor 2 Jahren schrieb ich:

“Design is Code, Code is Design”

Toto Castiglione jedoch kommentierte jedoch zu Recht:

You write that developers can now make changes to the .sketch file with a simple click. Yeah that's awesome, but still not enough. Then you describe that designers can now generate any layout composition in a matter of minutes and clicks. Yeah cool! But again not enough! Designers should be able as well to push changes to code, make visual adjustments and add new components.

Ich nehme an, wir würden der Perspektive von Toto zustimmen. Genau das wollen Produktdesigner.

Die Hintergrundstory für den Artikel war, dass Sketch Anfang 2017 die Rohdatei geöffnete, die alle Konstruktionsdaten enthält. Es war ein mutiger Schachzug. Nicht nur, dass Designer jetzt von neuen Plugins und Tools profitieren würden, Sketch wurde effektiv zu einer Entwicklungsplattform**.

Hat es geklappt?

Ein interessantes neues Design Tool Lightwell -> https://lightwell.pro

Konvergenz, überall

Chris Calo, Produkt- und UX-Designer bei Google, weist darauf hin, dass Designer und Entwickler traditionell in völlig unterschiedlichen Medien arbeiten–Vektor-Grafikeditoren gegenüber Texteditoren–und das verursacht Probleme bei der Übersetzung von einem zum anderen. "Ob es nun der Designer ist, der einzelne Zustände vorhandener Codekomponenten in Sketch neu zeichnet oder der Entwickler, der die visuellen Entscheidungen eines Designers in Code übersetzt", sagt Chris, "der Aufwand wiederholt sich und Fehler werden in den Prozess neu miteingebracht".

Sketch’s open file format and access to raw data, or Figma’s API for that matter, now open up and extend the possibilities in order to deepen the exchange and close the gap between teams.

Obwohl Sketch ihr Dateiformat geöffnet hat, sehen wir immer noch häufig diese wiederholten Bemühungen und Fehler. Von 2017 bis 2018 sahen wir weiterhin viele Aktivitäten und Fortschritte im diesem Bereich. Einige Meetups zeigen diesen Fortschritt gut auf.

Das offene Dateiformat von Sketch und der Zugriff auf Rohdaten, oder auch Figmas API, eröffnen und erweitern nun die Möglichkeiten, um den Austausch zu vertiefen und die Lücke zwischen Teams zu schließen. Allerdings "sehen wir noch nicht, dass bahnbrechende Werkzeugentwicklungen, gemeinsame Standards oder Workflows entstehen, um die Lücke zwischen Design und Entwicklung vollständig zu schließen", sagt Toto Castiglione. In der Tat ist das verbleibende Problem, dass man weder in Sketch noch Figma die vielen Designentscheidungen ausdrücken kann, die wir effektiv kommunizieren müssen, sei es durch Veränderungen der Form oder der Interaktionen, zum Beispiel.

Chris Calo ist jedoch "sehr gespannt auf die Aktivitäten und Investitionen in Tools, die versuchen, die Kluft zwischen Design und Entwicklung zu überbrücken".

Diese bahnbrechende Entwicklung oder Überbrückung, die erforderlich ist, die Chris gerne sehen würde, mag nicht von den Entwicklerinnen hinter Sketch oder Figma kommen. Es kann an der Zeit sein, dass ein Außenseiter im Mittelpunkt stehen wird oder vielleicht sogar Figma oder Sketch ganz übernehmen werden.

2019 könnte sich als das Jahr erweisen, in dem neue Design-Tools Einzug in den Mainstream erlangen und teamweite Akzeptanz erhalten.

Einige der sich entwicklenden Tools, welche die Federführung übernehmen könnten sind Phase, Haiku, Interplay, Hadron, Modulz, Webflow, ProtoPie, Framer X, Relate oder Lightwell.

Wenn du die oben genannten Links angeklickt hast, wirst du ein wiederkehrendes Thema erkennen: Code. "Designer erwarten, dass Design-Tools mehr von den Fähigkeiten des Codes übernehmen", sagt Chris Calo. Nebenbei bemerkt, ich selbst bin mir nicht so sicher, ob Entwickler das Gleiche erwarten würden. In beiden Fällen wird aber deutlich, dass Benutzeroberflächen- oder Produktdesigner das Gefühl haben, dass sie mehr Mitsprache oder Kontrolle darüber wünschen, was das Team am Ende abliefert.

Das neue, interessante Design Tool Hadron -> https://hadron.app

Eine Nebenbemerkung: Damit ich hier nicht aus der Spur komme, während wir über Tools sprechen, dürfen wir zwei weitere sehr wichtige Aspekte eines ganzheitlichen Produkt Designs nicht vergessen: Teams und Prozesse. Die Klärung der technischen Aspekte des Übergangs von Design zu Code und zurück zu Design ist die einfachste Phase. Für wirklich erfolgreiche Teams und Produkte können wir die Bedeutung eines ganzheitlichen Teams und seiner gut ausgerichteten Prozesse nicht unterschätzen. Wie großartig ein Tool auch sein mag, ersteres übertrumpft letztere in ihrer Bedeutung.

Das Wesentliche für Design Tools

Mit dem Aufkommen von KIs, die Screens (UIzard und Sketch2Code) oder einzelnen Seiten bereits aus Kritzeleien oder kompletten visuellen Designs erstellen, die wirkliche tägliche Arbeit wird sich darauf konzentrieren, wie sich ein Produkt anfühlt und verhält - nicht unbedingt, wie es optisch aussieht.

Die Weiterentwicklung der Fähigkeiten und Merkmale von Design-Tools könnte etwa so aussehen:*

1. Exportieren von Code (CSS, SVG, Motion/Animation Code, etc.)
2. Importieren von Code-Komponenten
3. Spezifizieren von Verhaltensweisen, die normalerweise für Code reserviert sind (Bewegung, Datenbindung, Interaktivität, reaktionsschnelles Layout, Mikrointeraktionen, etc.)
4. Ändern von bestehendem Code

Chris zeigt dazu richtig auf:

Today there are plenty of specialized tools that export code in specific formats, and we are starting to see tools that import code components (#2). These tools have the potential to improve workflows and communication between designers and developers, but today they often impose limitations that prevent them from being useful for a variety of situations, platforms, and teams.

Designer, die an komplexen Hardware-/Softwareprodukten wie Handelsplattformen oder Blockchain-Webanwendungen arbeiten, können begeistert sein. Wir beginnen, echte Interaktionsdesign-Tools zu sehen, die in der Lage sind, ein reichhaltiges interaktives Verhalten zu spezifizieren (#3 in der Liste). "Hier freue ich mich am meisten über weitere Investitionen, denn dies ist der Moment, in dem wir Interaktionsdesigner wirklich mit Tools ausgestattet werden, die den Herausforderungen unserer Arbeit entsprechen", sagt Chris Calo.

Und die große Vision, die wir alle zu schätzen wissen, ist die "Rundreise, um bestehenden Code aufzunehmen, zu modifizieren und dann diese Änderungen zu übernehmen (#4 in der Liste)".

Josh Puckett sagte es am besten, "Design-Tools sollten die gleichen Eigenschaften haben wie das Medium, für das wir entwerfen".

Es könnte sich als ein arbeitsreiches Jahr herausstellen, in dem viele aufregende neue Tools getestet werden müssen. Also, genießt es!

Vielen Dank an Chris Calo und Toto Castiglione für ihren großartigen Beitrag.