Tod, um Maschinen zu verarbeiten!

Finden Sie Ihren idealen Entwurfsprozess, indem Sie sich an ein paar einfache Prinzipien anstelle eines starren Skripts halten.

Sie hören eine Menge verschiedener Ratschläge zum richtigen und falschen Weg, um eine App oder Website zu entwerfen.

"Sie sollten Sketch verwenden."
"Design Systems oder GTFO."
"Echte Designer entwerfen 100% im Code."
"Wireframes sind Zeitverschwendung."
"Wenn Sie keine Prototypen herstellen, machen Sie es nicht richtig."
"Sie müssen auf dem Papier beginnen."

Sie denken, es gibt keinerlei Übereinstimmung über den richtigen Entwurf, aber es gibt einen Punkt, der weitgehend unumstritten ist: Ihr Prozess sollte linear sein.

Der klassische lineare Ansatz sieht ungefähr so ​​aus:
Forschung → Skizze → Drahtmodell → statische Kompositionen → Prototyp → Code

Es ist wie bei den Rube Goldberg-ähnlichen Produktionsmaschinen, mit denen Doritos und Ding-Dongs hergestellt werden. Lassen Sie eine Idee in die Prozessmaschine fallen, und nachdem sie zerdrückt und geformt wurde, während sie sich durch die Stufen wickelt, springt ein fertiges Produkt auf die andere Seite! Vorhersagbar! Effizient!

So'ne Art.

Prozessmaschinen funktionieren, aber nur, wenn sie funktionieren. Sie passen sich nicht an, und das macht sie zerbrechlich. Alles, was Sie brauchen, ist ein kleiner Sabot, um Ihre Prozessmaschine zum Stillstand zu bringen.

Hank, a.k.a. "der Sabot"

Ich habe in letzter Zeit Finding Dory mit meinem Kind gesehen und ein Teil des Making-of-Filmmaterials springt immer wieder auf mich los.

Im Film gibt es diesen Oktopus mit dem Namen Hank:

Disney / Pixar

Septopus, technisch gesehen. Sein Charaktermodel war so mühsam zu bearbeiten, dass sie ein Tentakel absprangen, um ihn animieren zu können. Trotzdem war es unglaublich schwierig, mit 4.000 verschiedenen Bedienelementen zu arbeiten.

Zu diesem Zeitpunkt sind sie weit hinter Skizzen, Renderings und Animationen zurückgeblieben - jene Stufen mit geringerer Wiedergabetreue, mit denen Sie eine Reihe von Ideen schnell und kostengünstig überprüfen können. Sie haben auch schon Real. Das Charakter-Rig wurde gebaut, technische Details ausgearbeitet, grundlegende Fragen beantwortet.

Sie befinden sich in der letzten Animationsphase - 3D-Modelle in 3D-Umgebungen. Sie hätten auf Kosten des Produktionsplans und des Budgets weitersoldieren können. Stattdessen machten sie etwas wirklich Interessantes - sie gingen zurück zum Skizzieren.

Disney / Pixar

Indem sie die komplexe Bewegung von Hanks Tentakeln auf Papier skizzierten, konnten sie in einem Bruchteil der Zeit die perfekte, flüssige Animation finden, nach der sie suchten. Sobald sie mit der Sequenz zufrieden waren, animierten sie sie in 3D, um sie abzugleichen. Sie haben in kürzerer Zeit ein besseres Produkt erhalten, weil sie sich dafür entschieden haben, Prozessprinzipien anstelle von Prozessvorschriften zu bewerten.

Das Heilmittel für einen verschreibungspflichtigen Prozess

Das Finding Dory-Team hat ein besseres Produkt schneller gemacht, indem Entscheidungen getroffen wurden, bei denen Geschwindigkeit und Qualität im Vordergrund standen, anstatt sich an einen reinen Prozess zu halten.

Sie können auch andere Dinge wählen, die Sie bewerten möchten. Wenn Sie jedoch in einem kommerziellen Umfeld arbeiten, sollte die Konzentration auf den optimalen Punkt zwischen Geschwindigkeit und Qualität ganz oben auf Ihrer Liste stehen. Für professionelle Designer und Künstler ist es schließlich eine große Sache, gute Arbeit schnell zu erledigen.

Die Definition der Prinzipien, die Ihren Prozess bestimmen, ist erst der Anfang. So können Sie sie in die Praxis umsetzen.

Beginnen Sie mit den großen Fragen

Wenn Sie Wert auf Geschwindigkeit legen, beginnen Sie ein Projekt, indem Sie die wichtigsten und grundlegendsten Fragen herausfinden. In Getting Real wird dies als "Epizentrendesign" bezeichnet:

Beginnen Sie mit dem Kern der Seite und bauen Sie nach außen
Das Design des Epizentrums konzentriert sich auf das wahre Wesen der Seite - das Epizentrum - und baut dann nach außen. Das bedeutet, dass Sie zu Beginn die Extremitäten ignorieren: Navigation / Tabs, Fußzeile, Farben, Seitenleiste, Logo usw. Stattdessen beginnen Sie im Epizentrum und entwerfen zuerst den wichtigsten Inhalt.
Was auf der Seite überhaupt nicht zu finden ist, ist der Epizentrum. Wenn Sie beispielsweise eine Seite entwerfen, auf der ein Blogbeitrag angezeigt wird, ist der Blogbeitrag selbst das Epizentrum. Nicht die Kategorien in der Seitenleiste, nicht die Kopfzeile oben, nicht das Kommentarformular unten, sondern der eigentliche Blogbeitrag. Ohne die Blogpost-Einheit ist die Seite kein Blogpost.
Erst wenn diese Einheit vollständig ist, werden Sie anfangen, über das zweitkritische Element auf der Seite nachzudenken. Nach dem zweitwichtigsten Element wechseln Sie zum dritten und so weiter. Das ist das Design des Epizentrums.
Das Epicenter-Design vermeidet das traditionelle Modell "Lassen Sie uns den Frame erstellen und dann den Inhalt einfügen". In diesem Prozess wird die Seitenform erstellt, dann die Navigation und dann das Marketing-„Zeug“.
 wird eingefügt, und schließlich wird die Kernfunktionalität, der eigentliche Zweck der Seite, in den verbleibenden Platz eingegossen. Es ist ein Rückwärtsprozess, der die höchste Priorität hat und sie für das Ende speichert.

Hier ist ein Beispiel dafür, warum dies von entscheidender Bedeutung ist. Ich arbeitete an einer kleinen Nebenprojekt-iOS-App, die ein einzigartiges, möglicherweise nicht funktionierendes Audio-Interface verwendete. Wenn ich Geschwindigkeit nicht gewürdigt hätte, hätte ich unzählige Stunden damit verbringen können, die unzähligen Details zu entwerfen, die auf der Grundlage dieser einen seltsamen Idee entstanden. Design steht im klassischen linearen Prozess immerhin vor Code.

Stattdessen fing ich mit dem Code an, um herauszufinden, ob diese Idee realisierbar war oder nicht. Es war nicht so! Also habe ich meine Pläne angepasst und mir enorm viel Zeit und Energie gespart.

Einfach fragen, WMGMTCATMQITLAOT?

Wenn Sie die Fragen kennen, die zuerst beantwortet werden müssen, fragen Sie sich:
„Welches Medium gibt mir in kürzester Zeit die klarste Antwort auf meine Fragen?“

Bei meinem Nebenprojekt lautete die Antwort Code. Für eine Seite auf Basecamp.com ist die Antwort häufig Text oder eine Skizze. Für Sie könnte es etwas ganz anderes sein.

Wissen, wann man einen Gang wechselt

Das gibt Ihnen einen Ausgangspunkt, aber woher wissen Sie, wann es Zeit ist, auf ein anderes Medium zu wechseln? Wenn Sie auf Widerstand stoßen.

Denken Sie daran, ein Auto zu fahren. Sie fahren die Autobahn entlang - der Motor schnurrt wie ein zufriedenes Kätzchen. Aber dann fängst du an, einen Hügel hinaufzufahren. Die Ausrüstung, in der Sie sich befinden, war großartig zum Cruisen, aber nicht zum Bergsteigen. Um Ihre Geschwindigkeit zu halten, schalten Sie in einen neuen Gang.

Das selbe hier. Aber im Gegensatz zu Autos gibt es keinen soliden Anhaltspunkt dafür, dass Sie in einem Medium Ihrer Wahl zu viel Widerstand geleistet haben. Glücklicherweise haben die meisten Designer und Künstler einen soliden Griff, wenn Sie zu einem Medium wechseln müssen, das mehr Wiedergabetreue bietet. Dies ist der Teil, der schließlich mit dem klassischen linearen Verfahren mit niedriger Wiedergabetreue → hoher Wiedergabetreue übereinstimmt. Sie wissen, dass Sie bereit sind, das Skizzieren fortzusetzen, wenn das Skizzieren aufhört, Ihnen nützliche Einblicke zu geben.

Wenn Sie diesen Punkt erreicht haben, finden Sie die nächsten wichtigen Fragen heraus und stellen Sie sich erneut die Frage: "Welches Medium gibt mir in kürzester Zeit die klarste Antwort auf meine Fragen?"

Der zweite Fall - das Zurückschalten auf eine niedrigere Wiedergabetreue - ist schwieriger. Sowohl weil die Leute weniger geübt sind als auch weil es schwierig ist. Nimm das Arbeiten im Code. Sie arbeiten zu 100% mit Wiedergabetreue, sodass die Fähigkeit des Mediums zur Beantwortung von Fragen unbegrenzt ist. Ihre Fähigkeit, Fragen schnell zu beantworten, ist jedoch begrenzt.

Wenn Sie das Gefühl haben, keine Wege zu gehen, weil es sich nach zu viel Arbeit anfühlt, ist dies ein gutes Zeichen dafür, dass Sie zurücktreten müssen. Wenn sich die Dinge so anfühlen, als würden sie nicht so klicken, wie sie sollten, ist es Zeit für eine Neubewertung. Sei achtsam und du wirst anfangen, ein Gefühl dafür zu entwickeln.

Verwenden Sie ein Medium zu Ihrem Vorteil

Es gibt einen dritten Fall für den Wechsel zu einem Medium oder das Festhalten an einem Medium. Diesem geht es nicht um Widerstand, es geht nur um eine fundamentale Wahrheit; Prozess beeinflusst Ergebnis. So wie das Zeichnen mit einem Bleistift anders aussieht als das Zeichnen mit einem Marker, führt das Entwerfen im Browser zu einem anderen Ergebnis als das Entwerfen in Sketch.

Je besser Sie verstehen, wie sich ein Medium auf Ihre Arbeit auswirkt - je mehr Werkzeugspuren es hinterlässt - desto mehr können Sie es zu Ihrem Vorteil einsetzen. Möchten Sie, dass Ihr Design ausdrucksstark ist? Wahrscheinlich besser mit einem visuellen Werkzeug wie Sketch, Illustrator oder sogar * keuch * Photoshop zu arbeiten. Wünschen Sie ein minimales, leichtes Design? Bleibe beim Entwerfen im Code.

Ein praktisches Beispiel

Jetzt, da ich über die Gefahren des Verordnungsprozesses geärgert habe, möchte ich mit Ihnen ... meinen Prozess teilen. Nicht für Sie, Schritt für Schritt zu folgen! Nur um Ihnen ein reales Beispiel zu geben, wie Sie Prinzipien als Leitfaden für Ihren Prozess verwenden können.

Wir starten eine neue Art der Zusammenarbeit mit Kunden in Basecamp. Meine Aufgabe war es, eine neue Seite auf Basecamp.com zu erstellen, um sie zu vermarkten. So lief es ab:

Große Fragen stellen, ein Medium auswählen

Dies ist keine neue Website oder ein völlig neues Layout. Zuerst musste ich herausfinden, wozu diese Seite dient, was sie zu sagen versucht und wie sie insgesamt aufgebaut ist.

„Welches Medium gibt mir in kürzester Zeit die klarste Antwort auf meine Fragen?“

Comps und Skizzieren sind raus. Dies wird in ein vorhandenes Design und eine vorhandene Vorlage eingefügt. Ich könnte direkt zum Code springen, aber das Markup ist an dieser Stelle ein Rauschen. Der Text ist genau richtig.

Ein paar halbgebackene Exemplare

Steigende Wiedergabetreue

Ich habe mich nicht lange genug an den Text gehalten, um die gesamte Kopie für die Seite fertigzustellen. Nachdem ich einen Überblick und eine Vorstellung davon hatte, wie ich über die Funktion sprechen wollte, habe ich die Gänge in Code geändert.

Warum?

Ein Textdokument konnte mir nichts darüber sagen, ob eine Zeile eine Witwe hinterlassen würde, ob ein Absatz sich lang anfühlte, wie die Bilder fließen würden usw. Ich brauchte mehr Wiedergabetreue. Einige der neuen Fragen hätten von einem statischen Comp beantwortet werden können, aber das hätte Fragen zur Kopieranpassung nicht beantwortet, es sei denn, ich habe Zeit damit verschwendet, den Comp genau auf den Code abzustimmen. Nein Danke.

Bearbeiten von Kopien im Code

Selektiv abnehmende Wiedergabetreue

Nach einigen weiteren Überarbeitungen nahm die Seite langsam Gestalt an. Optisch war es mechanisch und überwältigend. Ich wollte, dass es ausdrucksvoller wird, und wechselte zu Sketch, um einige Ideen zu diskutieren.

Ich hätte größtenteils im Code bleiben können, aber mit Sketch konnte ich eine Reihe von Ideen viel schneller abfeuern, als ich sie codieren konnte. Außerdem konnte ich diese Ideen direkt miteinander vergleichen und würde nicht das Nest einer CSS-Ratte von der ganzen Abwanderung verschont lassen. Win-Win-Win.

Ein paar halbgebackene Sketch-Comps

Beachten Sie, wie keine von ihnen vollständig gebacken sind? Es ist, weil sie keine Rolle spielen! Diese sind nicht für eine Kundenpräsentation oder für die Entwicklerübergabe gedacht. Sie sind da, um mir zu helfen, etwas herauszufinden, dann sind sie Müll. Zeit zu investieren, um sie zu polieren, wäre eine völlige Verschwendung von Mühe gewesen.

Beenden

Sobald ich einen Sinn für die Richtung hatte, war es Code für den Rest des Weges. Polieren von Kopien, Festnageln von Screenshots und immer Auswerten anhand der letzten Schlüsselfrage: "Ist das versandbereit?". Hier können Sie einen Blick auf die Live-Clients in Basecamp-Seite werfen.

So läuft nicht jedes Projekt ab. Manchmal skizziere ich etwas in Procreate, manchmal beginne ich mit einer schnellen und unsauberen visuellen Komposition, manchmal schreibe ich eine Kopie in Sketch, manchmal arbeite ich zu 100% im Code. Das hängt alles vom jeweiligen Projekt ab.

Hoffentlich erhalten Sie so einen Einblick, wie Sie Prinzipien verwenden können, um Ihren Prozess von Fall zu Fall zu steuern, ohne das Gefühl zu haben, dass Sie das Rad ständig neu erfinden.

Denken Sie an Ihren Prozess und die Art der Arbeit, die Sie tun. Definieren Sie die Grundsätze, die für Sie wichtig sind, konzentrieren Sie sich zuerst auf das Wesentliche und stellen Sie sich immer wieder die Frage, ob das Medium, in dem Sie arbeiten, für den Moment das richtige ist. Ihre Arbeit wird besser dafür sein.