Design Tooling ist noch dabei, sich selbst zu finden

Das wird es wohl immer sein, fairerweise gesagt.

Im Moment gibt es alle möglichen Dinge, mit denen Designsoftware Schwierigkeiten hat, umzugehen. Der Begriff „Screen Design“ ist gebräuchlich und bezieht sich auf die Tatsache, dass viele von uns sehr spezifisch für Bildschirme designen, nicht für Druck oder andere Anwendungen, und Bildschirme haben einzigartige Herausforderungen. Wir haben heutzutage andere Arbeitsabläufe als in der Vergangenheit. Wir haben andere Kollaborationsanforderungen. Wir haben andere technologische und wirtschaftliche Bedürfnisse.

Werfen wir einen Blick auf all diesen seltsamen Kram.

Design-Tools lernen noch über Responsive Design

Heute wird fast als selbstverständlich angesehen, dass jedes neue Webprojekt (oder jede Neugestaltung) ein Responsive Design ist. Responsive Design ist die Antwort für Bildschirme unterschiedlicher Größe und Fähigkeiten. Wir können also nicht einfach eine 1280px breite Version entwerfen und die Sache abhaken.

Software wie Sketch hat mehrere Artboards beliebiger Größe zu einem erstklassigen Bürger gemacht, um dabei zu helfen.

Das löst zwar nicht vollständig die Idee, dass wir für Bildschirme mit wild unterschiedlichen Größen, Dimensionen und Dichten designen, aber es hilft definitiv, viel mehr zu kommunizieren als nur eine einzige Größe.

Aber wie erstellt man all die verschiedenen Artboards, die man erstellen möchte? Kopieren und einfügen, Sachen vergrößern und verkleinern, und Zeug herumschieben? Das könnte man tun, aber Design-Tools fangen hier langsam an, sich selbst zu finden. Hier ist ein Sketch-Plugin namens Constraints, das versucht, dies zu erleichtern

Figma hat diese Idee von Constraints direkt eingebaut

Webflow ist ein einzigartiges Design-Tool, da man Dinge nicht ganz so willkürlich herumschiebt wie in Programmen wie Sketch oder Illustrator. Stattdessen manipuliert man Dinge, die tatsächliche 1:1-Darstellungen von echten Web-Layout-Eigenschaften sind, wie Margin, Padding und sogar Dinge wie Flexbox und Grid. Sie haben die Arbeit mit dem Webflow-Editor natürlich responsiv gemacht, und man sieht es sofort, während man arbeitet.

Design-Tools lernen noch über Kollaboration

Stellen Sie sich vor, Sie gestalten Ihre Designs mit Photoshop. Sie haben `.psd`-Dateien, die Ihre Designs sind. Wie liefern Sie diese aus? Per E-Mail? Vielleicht, aber das ist für Teams etwas unhandlich. Vielleicht haben Sie einen geteilten Dropbox-Ordner?

Adobe weiß, dass Designteams das brauchen. Sie haben „Creative Cloud“, das von der Verwaltung der eigentlichen Software, auf die Sie Zugriff haben, über den Zugriff auf Design-Assets wie Schriftarten und Stockfotos bis hin zur Unterstützung beim Teilen von Dateien alles abdeckt.

Sicher, aber das tut nichts weiter, als allen Zugriff auf diese Dateien zu gewähren. Es besteht sogar die Gefahr von Merge-Konflikten, wenn mehrere Personen an derselben Datei arbeiten.

Die Dateien selbst sind nur ein Teil der Kollaborationsgeschichte. Was ist mit der Versionshistorie? Was ist mit Notizen und Feedback? Was ist mit Genehmigungen?

Invision ist ein wichtiger Akteur bei Design-Tools, und ich würde vermuten, hauptsächlich wegen der kollaborativen Funktionen. Sie erstellen Ihre Designs größtenteils nicht in InVision, sondern laden sie dort hoch und machen dann mehr damit, zum Beispiel darüber reden.

Was wäre, wenn es gar keine „Dateien“ gäbe, mit denen man umgehen müsste? Wenn Ihre Designsoftware eine Web-App ist, sind die Design-Dokumente keine Dokumente, mit denen Sie sich selbst beschäftigen müssen, sie existieren einfach innerhalb der App. Figma ist so.

Außerdem bietet Figma Teams, was bedeutet, dass die Zusammenarbeit innerhalb eines Teams nur eine Frage des Einloggens und des gemeinsamen Zugriffs auf alles ist.

Um die Kollaboration noch weiter zu treiben, bietet Figma Echtzeit-Designfunktionen. Das heißt, Google-Docs (oder CodePen Collab Mode) Stil der gleichzeitigen Bearbeitung.

Als Beweis dafür, dass Design-Tools noch am Anfang stehen, glaube ich nicht, dass Figma diese Funktion vermarktungsseitig sehr stark bewirbt. Ich denke, sie haben festgestellt, dass echte Designteams sie trotz ihrer Spektakularität nicht wirklich mögen. Wer hätte das gedacht.

Dies ist eine interessante Lektüre von Meng To, der Figma und Sketch vergleicht.

Design-Tools lernen noch über Assets und Versionen

Design kann mehr sein als nur Mockups. Ein Designteam benötigt möglicherweise Zugriff auf ein Icon-Set, ein Branding-System, eine Farbpalette, eine Reihe von flachen Grafiken...

Werfen Sie einen Blick auf Lingo, eine App, die ausdrücklich dafür entwickelt wurde. Kollaboration ist ein Schlüsselmerkmal, aber die Teamkollaboration basiert auf Assets.

Ich kann mir vorstellen, dass ein solches Tool nicht nur die Weitergabe von Assets erleichtert, sondern auch die Versionen der Assets, die jeder verwendet, auf dem neuesten Stand hält. Das heißt, Leute daran hindern, einen „Ordner voller Icons“ auf ihrem lokalen Rechner zu haben und ihn veralten zu lassen.

Und wo wir gerade bei Versionen sind… Ich bin sicher, wir alle haben schon (und Witze darüber gehört) Dateien erlebt, die so benannt sind wie:

Startseite_v2_final_FINAL_nein_wirklich_DIES_IST_FINAL.psd

Entwickler haben dieses Problem dank Versionskontrolle kaum. Wo ist die Versionskontrolle für Designer? Apps wie Abstract versuchen, dabei zu helfen.

Abstract hilft nicht nur bei der Kollaboration, sondern auch bei der Versionsverwaltung.

Alles ist gespeichert. Nichts geht verloren. Versionskontrolle, der Sie vertrauen können.

Design-Tools lernen noch über Design-Systeme

Wie ich kürzlich sagte

Wir bauen keine Seiten, wir bauen Systeme. Styleguides. Design-Systeme. Pattern Libraries. Diese Dinge werden zu einem Standardbestandteil des Prozesses für Webprojekte. Sie werden wahrscheinlich zum Hauptliefergegenstand werden.

Wir haben gesehen, wie Designsoftware über die Jahre hinweg langsam begonnen hat, dieses Denken zu berücksichtigen. Selbst so einfache Dinge wie Zeichenstile brauchten ihre Zeit, um von Orten wie InDesign (wo sie nicht wegzudenken waren) nach Illustrator und Photoshop zu gelangen. Sie sind so offensichtlich notwendig, dass neuere Design-Tools sie immer zu haben scheinen.

Wenn Sie sich jedoch *speziell* mit Typografie beschäftigen, gibt es dafür spezielle Tool-Optionen. Tools wie Typecast sind dafür da.

Oder TypeNugget, das wir hier behandelt haben.

Ein Web-App-Design-Tool, UX Pin, konzentriert sich stark darauf, ein Design-Tool für Design-Systeme zu sein.

Das haben wir bereits zuvor behandelt, und hier erfahren Sie mehr darüber, was sie meinen.

Design-Tools lernen noch über Interaktivität

Bei all den Fortschritten, die wir bei Design-Tools sehen, stellen wir auch fest, dass es für einzelne Tools sehr schwierig ist, alles abzudecken. Interaktionsdesign ist ein großartiges Beispiel dafür.

Hover-Zustände! Swipen und Gesten! Seitenübergänge! Animationen! Tipp-Feedback!

So gut Sketch auch in bestimmten Dingen ist, für die Handhabung von Interaktivität gibt es praktisch nichts. Einerseits ist das schade. Screen-Design ist *voller* Interaktivität. Es liegt definitiv auf den Gedanken der Designer und ist für ihren Job unerlässlich. Andererseits mache ich mir vielleicht Sorgen über Bloat und mangelnden Fokus, wenn alle Design-Tools versuchen würden, Interaktivitäts-Tools einzupacken.

Schauen Sie sich Framer an, die sich direkt mit dem Thema Interaktionsdesign befassen.

Framer ist ein visuelles Design-Tool mit all den bekannten Styling-Tools (einschließlich einiger interessanter reaktionsfähiger Constraints), aber die interaktiven Elemente werden buchstäblich durch Programmierung innerhalb des Tools angesprochen.

Design-Tools lernen noch über Plattformen

Ich fühle mich jedes Mal ein kleines bisschen schuldig, wenn ich über Sketch spreche, weil ich weiß, dass es nur für macOS ist. Das schließt einen riesigen Teil der Leute aus, die an Websites arbeiten. Sie planen es nicht einmal. Bekannte Akteure wie Adobe machen ihre Produkte im Allgemeinen plattformübergreifend, aber selbst das ist im Vergleich zu webbasierten Tools, die auf jeder Plattform funktionieren, begrenzt. Ich würde sagen, webbasierte Tools wie Figma und UX Pin haben mit ihren inhärenten Kollaborations- und Freigabefähigkeiten zusammen mit der plattformübergreifenden Fähigkeit einen starken Vorteil.

Aber Desktop-Maschinen, unabhängig von der Plattform, sind nicht die einzige Geschichte. Sicherlich hatte Apple Designer mit dem iPad Pro im Sinn.

Welche Art von Designsoftware gibt es dafür? Affinity Designer scheint daran zu arbeiten.

Es ist heute ruhig im Büro und ich fühle mich schelmisch… Wer hat Lust auf ein bisschen #affinitydesigner #ipad #shakycam Teaser? 🐱 pic.twitter.com/ZfbSIJY5Vn

— Matt Priestley (@mattp4478) 12. Juli 2017

Und Tools wie Graphic.

Design-Tools lernen noch über Trends

Sie können eine Box mit *Rauschen* in Sketch füllen.

Ich bin mir nicht ganz sicher warum, aber ich stelle mir vor, dass es Designer dazu anregen könnte, Rauschen in einem Design zu verwenden. Es gibt keine Ein-Klick-Option, um einen Bereich mit winzigen Käfern zu füllen, aber ich stelle mir vor, wenn es die gäbe, würden wir mehr Divs sehen, die mit winzigen Käfern gefüllt sind.

Adobe Experience Design hat eine Funktion „Hintergrundunschärfe“, die zweifellos von den jüngsten Apple-Designs inspiriert ist.

Verdammt, ich kann ein Objekt mit „Polarkoordinaten“ in Photoshop verzerren.

Design-Tools beeinflussen das Design, und das Design beeinflusst das Design-Tooling. Was auch immer die Standard-Deckkraft-Einstellungen sind, beeinflusst das Design. Was auch immer die Standard-Farbverläufe sind. Was auch immer die Standard-Easing-Werte sind.

Design-Tools lernen noch über Daten

Ich stelle mir vor, Sie haben schon leidenschaftliche Argumente dafür und dagegen gelesen. *„Es spiegelt kein echtes Design wider!“*, könnten Sie hören. Was auch immer Sie denken, es ist wirklich interessant zu sehen, wie Design-Tools versuchen, mit echten Daten zu gestalten.

Adobe Experience Design hat einige interessante Funktionen in dieser Hinsicht. Nehmen Sie ihr Repeat Grid-Tool, das an sich schon ein interessantes Prototyping-Tool ist und auch helfen kann, echte Texte und Bilder einzufüllen.

Webflow hilft auch bei der Gestaltung mit Daten. Sie haben gesagt:

Das Design mit echten Daten gibt uns ein tieferes Verständnis dafür, wie eine Seite funktionieren wird. Zum Teil, weil es all die „Probleme“ aufzeigt, die Designer in ihren Mockups vermeiden wollen, wie lange Überschriften, minderwertige Bilder usw.

Das Design mit echtem Inhalt gibt sowohl Autoren als auch Designern bessere Einblicke in das, was sie tun müssen.

Sie haben ein integriertes CMS zum Speichern strukturierter Daten, dann Design-Tools, die helfen, diese Daten in Designs zu übertragen.

Design-Tools lernen noch über Preismodelle

Ich wette, viele von Ihnen erinnern sich noch, als Adobe-Software eine (teure) einmalige Kostenposition war. Jetzt ist die Umstellung abgeschlossen und wir sehen monatliche Kosten von 10 bis 50 Dollar für die Nutzung der Software, was sie wohl für manche zugänglicher und für manche weniger zugänglich macht.

Web-Apps sind fast immer monatliche Kosten. Figma kostet 12 $/Monat/Benutzer für Teams. Geschäftlich gesehen scheint das für die Software-Entwickler der richtige Weg zu sein. Meine eigene Erfahrung bestätigt das. Aber ich kann verstehen, wie das für ein natives Softwareprodukt abschreckend sein kann. Sketch kostet pauschal 99 $, was sich zugegebenermaßen gut anfühlt.

Das wird sich nie wirklich klären, und es geht nicht nur um einmalige Kosten vs. monatlich. Es gibt kostenlose Testversionen, Freemium-Modelle, In-App-Käufe und Add-on-Modelle, die alle experimentell über die Tool-Landschaft hinweg genutzt werden können und werden.

Zusammenfassend

Es gibt noch viel mehr dazu, und ich bin kaum die Person, die darüber berichten kann.

Zum Beispiel habe ich nicht viel über das Designen im Browser gesprochen, aber dort gibt es sicherlich Tools. Abgesehen von diesen wenigen typografie-fokussierten Apps haben wir uns nicht auf die Verbreitung von winzigen Single-Feature-Apps konzentriert. Coolors ist ein Beispiel dafür, das mir sehr gefällt. Ganz zu schweigen von den unzähligen Design-Ressourcen-Seiten. Wir haben auch keine wilden Crossover-Projekte wie React-Sketchapp besprochen.

Beenden wir dies mit einem interessanten verwandten Artikel. Colm Tuite schrieb kürzlich „Design-Tools laufen aus dem Ruder. So können wir sie reparieren.“ Hier ist einer seiner Punkte, der meiner Meinung nach wichtig ist:

Warum können Designer nicht einfach das eigentliche Produkt gestalten?! Letztendlich sind alle Mockups verwerflich, und doch verbringen Designer Monate damit, sie zur Perfektion zu verfeinern. Diese Zeit wäre viel besser damit verbracht, das eigentliche Produkt zu verfeinern.