Design-Tools gehen aus der Spur. So können wir sie beheben.

Selten vergeht ein Tag, an dem ich nicht wenigstens einige Zeit damit verbringe, über Designwerkzeuge nachzudenken. Vor einigen Jahren habe ich ein Design-Tool gebaut, das von Marvel erworben wurde. Das war vor über zwei Jahren, aber seitdem hat sich an der Landschaft nicht viel geändert, und meine Leidenschaft, sie zu verbessern, hat sich nicht wesentlich verändert.

Kürzlich habe ich über Design-Tools getwittert - eine Sache, von der bekannt ist, dass sie von Zeit zu Zeit passiert.

Ich war nicht der einzige, der an diesem Tag meine Meinung äußerte, andere mischten sich ebenfalls ein.

Der 28. Juli 2017 war kein guter Tag für Designwerkzeuge.

In diesen Twitter-Threads steckt eine Menge großartiger Erkenntnisse, aber ich wollte mir schon lange die Zeit nehmen, um tief in das einzutauchen, was meiner Meinung nach auch beim aktuellen Design-Tool-Modell so grundlegend gebrochen ist als Hinweis auf die Richtung denke ich, wir sollten geleitet werden.

Wir alle zeichnen nur Bilder. Es ist verrückt.

Fast alle gängigen Designtools werden in Bilder exportiert. Dies ist aus mehreren Gründen problematisch:

  1. Sie können nicht mit einem Bild interagieren. Mit Prototyping-Tools können wir Bildern Bildschirmübergänge und einfache Interaktionen hinzufügen. Da unsere Produkte jedoch weiterhin fortgeschrittenere Bildschirmübergänge und Mikrointeraktionen erfordern, können Bilder einfach nicht mithalten.
  2. Bilder sind nicht flüssig. Die Kommunikation reaktionsschneller Entwurfsentscheidungen über Bilder ist normalerweise eine schwierige Aufgabe.
  3. Bilder sind nicht zustandsbehaftet. Um die verschiedenen Zustände für eine Benutzeroberfläche effektiv zu kommunizieren, sind häufig viele Bilder erforderlich.
  4. Bitmap-Bilder sind auflösungsabhängig. Mit dem Aufkommen von Netzhautgeräten können Bilder manchmal schlecht gerendert werden.
  5. Bilddateien sind in der Regel schwer und oft umständlich zu speichern, zu verwalten oder zu teilen.

Solange Design-Tools weiterhin Bilder exportieren, können sie niemals genaue Darstellungen unserer Produkte erstellen. Diese mangelnde Genauigkeit behindert die Kommunikation zwischen Designern und Entwicklern. Solange Designer weiterhin ein völlig unzureichendes Medium verwenden, um ihre Arbeit zu kommunizieren, ist diese Arbeit immer offen für Fehlinterpretationen.

Dies ist ein sehr wichtiger Punkt, da fast alle Entwurfswerkzeuge im Kern Vektorformen in Bilder konvertieren. Photoshop, Illustrator, Marvel, Adobe XD, Sketch und Figma sind in dieser Hinsicht alle gleich. Bilder können jedoch Designabsichten nur teilweise kommunizieren. Da unsere Produkte weiterhin komplexe Interaktionen, Spracheingaben, Videoeingaben, Augmented Reality, virtuelle Realität, Temperaturempfindlichkeit usw. übernehmen und unterstützen, wird der Wert, den diese Tools bieten, rapide abnehmen. Bildbasiertes Design ist eine Sackgasse.

Unsere Designtools sollten das eigentliche Produkt manipulieren, kein Bild davon.

Unsere Produkte sind interaktiv. Unsere Werkzeuge sind statisch.

Ich habe dies in meinem vorherigen Punkt angesprochen, aber es ist sehr kritisch, also dachte ich mir, ich würde ein wenig näher darauf eingehen.

Denken Sie an die Menge einfacher Interaktionen, die in fast allen unseren Produkten üblich sind, aber nicht über unsere Designtools kommuniziert werden können. Hier ist eine kurze Liste aus meinem Kopf:

  • Eine Taste schweben lassen
  • Eingabe fokussieren
  • Aktivieren eines Kontrollkästchens
  • Inhalt mit Registerkarten
  • Bereiche scrollen
  • Registerkartenindex für fokussierte Zustände
  • Tastatürkürzel

Sicher, einige dieser Funktionen können mit etwas Hacky Engineering nachgeahmt werden, aber man muss sich fragen, worum geht es in aller Welt? Warum können Designer nicht einfach das eigentliche Produkt entwerfen?! Letztendlich sind alle Modelle wegwerfbar, doch Designer verbringen Monate damit, sie perfekt zu optimieren. Diese Zeit wäre viel besser, wenn Sie das eigentliche Produkt optimieren würden.

Ich werde nicht zu weit in das Kaninchenloch gehen, in dem Designer Code schreiben sollten, aber ich schlage nicht vor, dass wir alle Code schreiben. Ich sage nur, dass es keinen guten Grund gibt, warum unsere Designtools die direkte Manipulation unserer Live-Produkte nicht unterstützen können.

Framer macht einen besseren Job als die meisten in dieser Abteilung und unterstützt fortgeschrittene und detaillierte Interaktionen. Der Rest des Rudels liegt sehr weit zurück.

Unsere Tools sollten das Layout-Paradigma des Webs unterstützen

Bis vor etwa einem Jahr war die einzige Möglichkeit, Layouts im Web zu erstellen, die Verwendung der Anzeige: Tabelle und vertikal ausgerichtete CSS-Eigenschaften. Jetzt haben wir Flexbox und bald werden wir ein CSS-Raster haben. Diese drei Layout-Engines funktionieren ziemlich ähnlich und nutzen den Fluss des DOM. Fast alle Websites werden mit einem dieser drei Layoutsysteme erstellt.

Daher ist es sinnvoll, dass unsere Designtools dasselbe Layoutmodell unterstützen. Richtig?

Nun, fast alle Design-Tools ignorieren diese Layout-Systeme und entscheiden sich stattdessen dafür, jede Ebene absolut innerhalb ihrer Zeichenfläche zu positionieren. Dies eröffnet eine Kluft zwischen der Funktionsweise des Webs und der Funktionsweise unserer Designtools und führt zu vielen Problemen:

  • Das reaktionsschnelle Design wird sehr schwierig, da jede Ebene für jeden Haltepunkt manuell neu angeordnet werden muss. Alternativ kann ein auf Einschränkungen basierendes Layoutsystem eingeführt werden, das jedoch die Komplexität erhöht, die Lernkurven steiler macht und letztendlich verhindert, dass Entwickler das Layout direkt ins Web übertragen.
  • Da sich jede Ebene außerhalb des Dokumentflusses befindet, wird das Bearbeiten von Inhalten schwierig. Wenn Sie beispielsweise ein Element zu einer Liste hinzufügen möchten, müssen Sie die anderen Elemente in dieser Liste manuell neu positionieren. Natürlich können Wiederholungsfunktionen und andere ausgefallene Funktionen eingeführt werden, um die Schmerzen zu lindern, aber auch dies führt zu zusätzlicher Komplexität und erschwert etwas, das uns das DOM kostenlos zur Verfügung stellt.
  • Die absolute Positionierung führt natürlich zu festen Pixelkoordinaten und -abmessungen. Dies führt zu Inflexibilität und ist wiederum eine große Abweichung von der Funktionsweise des Webs. Die Bahn basiert auf Fluideinheiten wie em, rem, vh, vw und%. Unsere Tools sollten diese Einheiten standardmäßig unterstützen.

Design-Tools sollten nicht dem Web und seinen Nuancen ähneln oder es widerspiegeln müssen - sie sollten nur das Web sein.

Ein monolithisches Werkzeug ist nicht der Weg

Gutes Design geschieht schrittweise. Ein gut strukturiertes Designsystem hat einige unterschiedliche Ebenen:

  1. Stilpalette Eine Sammlung von Farben, Schatten, Abständen, Randradien, Schriftarten, Schriftgrößen, Animationen und anderen Stilen, die Ihre Markenidentität bilden. Derzeit unterstützen die meisten Design-Tools nur Farbpaletten. Bis sie die anderen Stileigenschaften unterstützen, wird es äußerst mühsam sein, systematisch zu entwerfen.
  2. Assets Dies umfasst Elemente wie Symbole, Abbildungen und Bilder. Es gibt einige phänomenale Bildeditoren und Figmas Vektor-Tool ist ausgezeichnet, aber wenn es um SVG-Unterstützung geht, lassen unsere Design-Tools zu wünschen übrig.
  3. Komponentenbibliothek Eine Komponente ist eine Sammlung von Stilen und Assets, mit denen Daten in verschiedenen Variationen zu einem einzelnen Element gerendert werden. Beispiele hierfür sind Schaltflächen, Eingaben, Abzeichen usw. Wie bereits erwähnt, haben Figma und Sketch diesen Prozess kürzlich vom Hauptzeichnungsablauf abstrahiert - schade, dass es sich nur um Bilder von Komponenten und nicht um tatsächliche Komponenten handelt.
  4. Module Ein Modul / eine Komposition ist eine Sammlung von Komponenten, die Daten in verschiedenen Zuständen in einem gekapselten Teil der Benutzeroberfläche wiedergeben. Beispiele hierfür sind Kopfzeilen, Registerkartenmenüs, Anmeldeformulare, Tabellen usw. Da Module nur komplexe Komponenten sind, können Figma und Sketch diese auch verarbeiten. Obwohl es einen gewissen Wert haben kann, die beiden zu trennen.
  5. Bildschirme Ein Bildschirm ist eine Sammlung von Modulen, Komponenten und Daten, um eine vollständige Benutzeroberfläche zu bilden, mit der der Benutzer interagieren kann.

Die meisten Entwurfswerkzeuge bieten Funktionen, die jede dieser Entwurfsphasen zumindest teilweise unterstützen. Das Problem ist, dass alle Stufen zusammengeführt werden. Fast alle Entwurfswerkzeuge bieten nur einen Modus - den Zeichenmodus. Sie erstellen eine Reihe von Zeichenflächen und beginnen einfach mit dem Zeichnen von Bildern. Erst in jüngster Zeit haben Tools wie Sketch und Figma Komponenten / Symbole vom Hauptzeichnungsmodus entfernt - was seltsam ist, da Komponenten in der Front-End-Entwicklung seit vielen Jahren abstrahiert werden.

Beim Entwerfen einer Stilpalette muss ich keine Zeichenflächen oder Vektorwerkzeuge sehen. Ich möchte Werkzeuge zur Auswahl harmonischer Farben sehen. Ich möchte Voreinstellungen für Dinge wie eine 8dp-Abstandsskala oder eine Auswahl von Typenskalen.

Das Entwerfen eines Symbols erfordert eine völlig andere Denkweise als das Entwerfen eines Benutzerflusses. Ideal wäre ein einfacher SVG-Editor, mit dem ich native SVG-Rechtecke, Kreise, Linien und Pfade zeichnen und anschließend optimierten SVG-Code exportieren konnte.

Beim Entwerfen einer Komponente sollte ich nicht mehr an einzelne Stile denken - ich sollte einfach Stile aus meiner vordefinierten Stilpalette auswählen. Ich kann nicht einfach anfangen, Stile für eine Komponente zu optimieren, da dies zu Inkonsistenzen führen und die Effektivität meines Designsystems beeinträchtigen würde. Sobald eine Stilpalette vorhanden ist, sollte sie nur an der Quelle bearbeitet werden können.

Ebenso sollte ich beim Erstellen eines Moduls nur meiner vordefinierten Komponentenbibliothek ausgesetzt sein. In einer Seitenleiste sollten keine Stileigenschaften vorhanden sein. Keine Vektorwerkzeuge. Nur eine Bibliothek wiederverwendbarer Komponenten, die ich per Drag & Drop zum Erstellen von Modulen ziehen kann.

Gleiches gilt für das Erstellen von Bildschirmen. Derzeit verwenden wir nur Komponenten und Module, um eine Benutzeroberfläche zu erstellen. Wir denken nicht an Stile oder Formen oder andere kreative Bestrebungen. Wir konzentrieren uns hauptsächlich auf die Gestaltung der Inhalte und Benutzerströme.

Jede dieser Entwurfsphasen kann in separaten Werkzeugen oder nur in verschiedenen Modi innerhalb desselben Werkzeugs stattfinden. Ich denke nicht, dass es viel ausmacht. Eines ist jedoch sicher, die meisten aktuellen Designtools erkennen den Prozess nicht einmal an.

Unsere Werkzeuge sollen gutes Design fördern

Designer haben den seltenen Luxus, einem Projekt eine unendliche Anzahl einzigartiger Stile hinzufügen zu können, ohne dass dies spürbare Auswirkungen hat. Benötigen Sie eine etwas größere Schriftgröße? Stoß es einfach hoch. Kein Problem. Benötigen Sie eine etwas hellere Farbe? Optimiere es einfach. Es ist cool. Sie könnten sogar mehrere Zeichenflächen im selben Projekt erstellen, die jeweils leicht unterschiedliche Werte für ähnliche Stile verwenden, und dies würde wahrscheinlich unbemerkt bleiben.

Ihr Design-Tool wird Ihnen niemals sagen, dass Sie etwas nicht tun können. Es wird Sie nie dazu bringen, eine Farbe außerhalb der Marke zu verwenden. Es wird Sie niemals daran hindern, einen Leerzeichenwert zu verwenden, der nicht zu Ihrer Abstandsskala gehört. Es wird Sie niemals warnen, dass 20% der Bevölkerung diesen hellgrauen Text, den Sie gerade entworfen haben, buchstäblich nicht sehen können.

Und warum nicht…? Weil Design-Tools sich nicht darum kümmern.

Design-Tools sind so eigensinnig verliebt in eine Vision für unbegrenzte Kreativität, dass sie aus den Augen verloren haben, was es bedeutet, vernünftig zu entwerfen, inklusiv zu entwerfen, systematisch zu entwerfen.

Einfach ausgedrückt, mit Design-Tools können wir tun, was zum Teufel wir wollen. In gewissem Maße ist dieses Maß an grenzenloser Kreativität nützlich, insbesondere in den Ideenfindungsphasen. Als UI-Designer erfordert der Großteil unseres Workflows jedoch nicht viel Kreativität. Unser Workflow erfordert vielmehr Wiederverwendung, Wiederholung, Vertrautheit und Standardisierung. braucht, dass unsere Werkzeuge wenig tun, um zu befriedigen.

Diese unbegrenzte Freiheit steht im Widerspruch zur Realität der Webentwicklung. Da Entwickler mit dem eigentlichen Produkt arbeiten, müssen sie alle mit demselben Code arbeiten. Entwickler können der Codebasis nicht einfach isolierte Schriftgrößen oder zufällige Farbwerte hinzufügen. Erstens würde ein Linter (eine Warnmeldung, die vor schlecht geschriebenem Code warnt) wahrscheinlich sofort anfangen zu schreien. Wenn nicht, dann würde ihre miese Handwerkskunst wahrscheinlich während einer Codeüberprüfung erfasst werden. Wenn es irgendwie gelingen würde, durch die Risse zu rutschen, würde schließlich ein spürbarer Leistungseinbruch den Alarm auslösen.

Eines der störendsten Probleme, die ich bei Produktteams sehe, ist die Trennung zwischen Design- und Entwicklungsteams. Entwickler arbeiten seit Jahren mit strengen Richtlinien und Einschränkungen. Wenn unsere Entwurfswerkzeuge nicht dieselben Einschränkungen berücksichtigen, wird sich die Lücke niemals verringern.

Wir sollten mit Live-Daten entwerfen

Live-Daten wurden bis zu einem gewissen Grad von vielen Tools integriert, was sehr gut zu sehen ist. Adobe XD bietet einige wirklich nette Funktionen zum Generieren gefälschter Daten, die typischen Live-Daten ähneln. Invision Craft bietet auch einige coole Live-Datenfunktionen für Sketch.

Live-Daten sollten jedoch nicht mit Text aufhören. Andere Elemente wie Bilder und Videos können einen großen Einfluss auf die Benutzererfahrung haben, indem sie die Ladezeiten erheblich verlängern. Wenn Sie im Web arbeiten, können Sie mit den Browser-Entwicklungstools die Verbindung drosseln, um einer Vielzahl von Internetgeschwindigkeiten zu ähneln. Dann können Sie aus erster Hand sehen, wie sich ein neuer Inhalt auf die Benutzererfahrung auswirken kann.

Bieten uns unsere Designwerkzeuge diesen Luxus?

Mit einem Wort: nein.

Je näher wir dem eigentlichen Produktdesign kommen, desto hilfreicher und wirkungsvoller kann unsere Designarbeit sein.

Das Web ist offen. Unsere Werkzeuge sollten es auch sein.

Eines der wirklich schönen Dinge im Web ist seine offene Zugänglichkeit. Eine Website kann in jedem Webbrowser auf nahezu jedem Gerät angezeigt werden.

Wie ist das im Vergleich zu Design-Tools? Nun, vor ein paar Tagen hat mich mein Bruder David um eine Designprüfung einer App gebeten, die er erstellt. Er hat mir eine Skizze geschickt. Als ich es öffnete, passierte das…

Die meisten Designwerkzeuge sind ummauerte Gärten. Wenn ein Kollege in Photoshop arbeitet, kann ein anderer Kollege dieses Projekt nicht in Sketch öffnen. Es reicht nicht einmal aus, wenn Ihr gesamtes Team dasselbe Tool verwendet - es muss auch dieselbe Version dieses Tools verwenden.

Marvel und Figma leisten hier gute Arbeit und bieten kostenlose Pläne und innovative Funktionen für die Zusammenarbeit.

Wie sieht die Zukunft der Design-Tools aus?

Innovationen bei Designwerkzeugen sind äußerst wertvoll und es gab in letzter Zeit viele davon. Bei den Airbnb-Designtools haben Jon Gold und Benjamin Wilkins an React-Sketchapp gearbeitet, das React-Komponenten übernimmt und in Sketch rendert. Jon und Ben haben auch an einem atemberaubenden neuen Tool gearbeitet, das Serviettenskizzen aufnimmt und sie irgendwie in React-Komponenten verwandelt.

Adam Morse, Brent Jackson und John Otander arbeiten bei Compositor an einer Reihe von Tools, die im Grunde alle Probleme in diesem Artikel und vielleicht die ganze Welt lösen.

Ich arbeite an Modulz, einem neuen Designtool und Open-Source-Designsystem, das auch die in diesem Artikel erwähnten Probleme lösen soll. Wenn Sie interessiert sind, folgen Sie uns auf Twitter, um Updates zu erhalten.

Während Innovationen bei Werkzeugen wichtig sind, ist die eigentliche Herausforderung die Bildung. Die Design-Community ist einfach nicht bereit für ein systematisches Design-Tool. Viele Designer haben wenig bis gar kein Interesse an Gebäudesystemen. Für einige ist das JPG das Endziel - das Dribbble mag.

Wir müssen irgendwie eine Kultur der Rechenschaftspflicht inspirieren. Entwickler haben seit Jahren eine Kultur der Verantwortlichkeit. Sie haben Werkzeuge, um ihren Code in Schach zu halten. Wenn ein Entwickler wiederholt von seinen strengen Code-Richtlinien abweicht, können Sie sicher sein, dass das Problem behoben wird.

In der Zwischenzeit sammeln Designer häufig Berge von Ebenen in völliger Unordnung an, ohne die Benennung, Gruppierung und Reihenfolge der Ebenen zu berücksichtigen. Es ist sehr viel für sich. Da die Ausgabe (Rasterbild) von der Eingabe (Vektorebenen) nicht beeinflusst wird, müssen die zu organisierenden Designer nicht wirklich belastet werden. Designer entschuldigen diesen Mangel an Organisation oft, indem sie die Kunst des Designs romantisieren und sich als Zauberer malen, die für ihre Leistung auf sich allein gestellt sein müssen.

Wir müssen auch eine Kultur der Inklusion inspirieren. Wir sollten Fehlverhalten wie ultraleichte Textfarben, die das Lesen von Text für viele Menschen erschweren, oder hochqualitative Schriften, die das Laden von Webseiten verlangsamen, oder musterlose UI-Elemente, die es für farbenblinde Menschen schwierig machen, Dinge zu verstehen, aktiv unterbinden. Gegenwärtig wird diese Art von Fehlverhalten in der Design-Community begrüßt. Wenn wir ein intelligentes Designwerkzeug begrüßen wollen, müssen wir diese Kultur umkehren.

Wenn ein systematisches Entwurfswerkzeug unsere Herzen gewinnen soll, muss es zuerst erziehen.