Alles, was Sie schon immer über Prototyping wissen wollten (aber nie zu fragen wagten)

Prototypen sind mein Rahmen zum Erlernen neuer Tools, Plattformen und Techniken. Ein Prototyp ist ein harter Beweis dafür, dass eine Idee funktioniert oder nicht funktioniert. Es ist von zentraler Bedeutung für meinen gesamten kreativen Prozess und das Medium, das ich verwende, um eine Beziehung zu den Menschen und Unternehmen aufzubauen, mit denen ich zusammenarbeite.

Ich bin begeistert von Prototypen, weil ich denke, dass sie Wunder wirken können , aber ich denke auch, dass sie nicht bekommen, was sie verdienen. Prototyping wird normalerweise überhaupt nicht in Projektzeitpläne integriert oder, falls doch, normalerweise als Nebenprodukt eines größeren Projekts. Es kann mehr sein, wenn Sie es wollen!

Ich möchte Sie davon überzeugen, das Prototyping tiefer in Ihren Workflow einzubauen. Diese Herangehensweise an Projekte könnte die Art und Weise verändern, wie Sie als kreative Person zusammenarbeiten, lernen und wachsen. Hier ist der Deal: Ich werde versuchen, eine gute Definition zu Papier zu bringen, und dann untersuchen, wie Sie das Prototyping für Ihre Praxis genauso wichtig machen können wie für meine . Und um den Topf zu versüßen, stelle ich einige Prototypen zur Verfügung, die ich für ein von mir erstelltes Spiel, Melody Jams, erstellt habe, das von Apple in 130 Ländern vorgestellt wurde und für kurze Zeit die Kinder-App Nummer eins im Store war.

Was ist ein Prototyp?

Die klassische Definition eines Prototyps ist, dass es sich um eine maßstabsgetreue Demo einer Sache in Originalgröße handelt, die Sie herstellen möchten. Ein Prototyp kann teilweise gebaut oder entworfen werden, um ein bestimmtes Merkmal eines größeren Systems zu demonstrieren. Das ist eine ziemlich gute Definition, aber ich stelle mir Prototypen gerne als etwas noch breiteres vor. Meine Definition eines Prototyps? Es ist ein greifbares Artefakt, das eine Idee erforscht .

Es könnte so einfach sein wie einige grobe Skizzen auf Papier. Vielleicht ist es rein designt, wie eine animierte Anleitung, wie eine Benutzeroberfläche in After Effects funktioniert. Vielleicht ist es eine grobe Demo, die auf Codepen geworfen wurde. Oder es könnte etwas viel Höheres in der Wiedergabetreue sein. Wenn jemand einen Prototyp sieht, sollte es keine Zweideutigkeit in seiner Antwort geben. Mit anderen Worten, wenn die Person fragen würde: „Was wäre, wenn die App blau wäre?“, dann ist das kein Prototyp. Wenn Sie zeigen, wie die App aussehen würde, wenn sie blau wäre, dann ist sie es.

Es gibt auch verschiedene Arten von Prototypen, jeder mit einem anderen Zweck: intern, extern und öffentlich .

Interner Prototyp

Ein interner Prototyp vermittelt nicht unbedingt unmittelbaren Wert für irgendjemanden außerhalb von mir oder meinem Team. Es kann so rau und schnell sein, wie ich es machen möchte. In der Website-Welt baue ich vielleicht eine einfache Komponente mit Vanilla CSS, HTML und JavaScript, React, Angular oder Vue, nur um ein Gefühl dafür zu bekommen, wie es funktioniert und um die Vor- und Nachteile abzuwägen. Diese Art von Prototypen taucht in meinem Prozess in der Regel sehr früh auf – tatsächlich am ersten Tag, an dem ein Projekt beginnt. Bei diesen Prototypen muss ich keine Angst haben, dass es jemand nicht „kapiert“ oder dass es mehr schadet als nützt. Ich kann nach eigenem Ermessen entscheiden, einem Kunden oder Interessenvertreter interne Prototypen zu zeigen, um den Wert des Prototyping-Prozesses zu verstärken, aber das ist noch nicht der Punkt – im Moment möchte ich Ideen schnell, schnell, schnell zeigen.

Externer Prototyp

Ein externer Prototyp verdeutlicht die Richtung, in die Sie gehen möchten, um Fortschritte zu zeigen oder zu demonstrieren, wie etwas funktioniert. Wenn ein Kunde ein Verwaltungstool benötigt, eröffne ich vielleicht einen kurzen Blog in Craft, WordPress und Contentful (ja, alle drei!), um ihm einen Eindruck davon zu vermitteln, wie jedes Tool funktioniert, damit er eine fundiertere Entscheidung darüber treffen kann, was es ist das Beste für sie. Diese Prototypen eignen sich hervorragend in der mittleren und späteren Phase eines Projekts. Ich kann mich an ein Projekt erinnern, bei dem ein Kunde über eine Änderung nachdachte, um die API eines neuen Dienstanbieters aufzunehmen. Das Zusammenstellen eines Prototyps zeigte dem Kunden, was der Anbieter tun konnte, wie schnell wir ihn integrieren konnten und welche Auswirkungen es auf den Rest des Projekts haben würde.

Öffentlicher Prototyp

Ein öffentlicher Prototyp ist in der weiten Welt da draußen. Im Grunde geht es darum, den eigentlichen Designprozess in die Wildnis zu schicken, zu lernen, was Benutzer tun, und von dort aus zu iterieren. Es könnte ein vollwertiges Pilotprodukt oder etwas sein, das einer kleinen Untergruppe von Benutzern zugänglich ist. Es ist die ausgefeilteste Art von Prototyp und kommt der traditionellen Definition, auf die ich mich zuvor bezogen habe, am nächsten. Es passt in der Regel in ein größeres Projekt als Teil einer Testphase irgendeiner Art.

Sind schnelle Prototypen gute Prototypen?

Die kurze Antwort ist ja. Prototyp schnell und so schnell wie möglich in einem Projekt. Um Ihnen ein Gefühl dafür zu geben, warum, versuchen wir es mit einer Übung.

Stellen Sie sich vor, wie ein Stuhl aussieht. Haben Sie eine gute Vorstellung davon? War es dieser Stuhl?

Wahrscheinlich nicht, oder? Sie haben vielleicht an einen Outdoor-Stuhl, einen Sessel, einen Bürostuhl oder einen Hocker gedacht. An einen fotorealistischen Stuhl haben Sie vielleicht noch gar nicht gedacht! Jetzt, da Sie ein Bild von diesem Stuhl haben, gibt es keine Zweideutigkeit. Das ist der Stuhl, von dem ich spreche, und das wissen wir fortan alle. Wir haben jetzt einen gemeinsamen Bezugsrahmen.

Wenn Ihr Kunde sagt: „Ich möchte, dass sich meine Website modern anfühlt“, woher wissen Sie, was das bedeutet? Ohne ein greifbares Artefakt wie ein Moodboard wird jeder eine andere Definition von „modern“ im Kopf haben, genau wie bei dem obigen Stuhl. Das Problem ist nicht spezifisch für das Design. Es geht um die Funktionsweise eines Login-Flows oder um die Wahl zwischen Hosting-Umgebungen. Dinge schnell zu machen erzwingt Gespräche und Reaktionen. All das nebulöse Zeug wird schneller herausgefunden.

Wichtig ist, dass der Prototyp nicht das Problem lösen muss, das Sie von ihm erwarten . Durch einfaches Erstellen und Teilen werden manchmal Ideen, Inspirationen, Herausforderungen oder Bedenken freigesetzt, die den Menschen nicht bewusst waren. Je schneller und häufiger Sie Prototypen erstellen, desto früher tauchen all diese guten Sachen auf.

Dies ist der Schlüssel. Prototyping setzt Ihre Fähigkeit frei, in einer Sandbox zu experimentieren, zu scheitern, zu lernen und zu wachsen. Sie verbessern gleichzeitig sich selbst und das Produkt, an dem Sie arbeiten.

Wer sollte Prototypen erstellen?

Jeder! Prototyping ist eine Gelegenheit, Mauern zwischen Disziplinen niederzureißen. Designer sollten Prototypen erstellen, damit sie die Einschränkungen, Komplexitäten und Möglichkeiten des Projekts kennenlernen. Programmierer können natürlich Prototypen erstellen, um die Machbarkeit zu testen, aber auch, um sich stärker am kreativen Prozess zu beteiligen. Projektleiter, Produzenten, Texter, jeder, der eine Idee hat, kann mitmachen.

Auch hier geht es beim Prototyping nicht unbedingt darum, etwas Verrücktes zu programmieren – oder überhaupt zu programmieren! Es geht darum, Ideen mit realen Dingen zu generieren und zu testen, mit denen man spielen und die man erkunden kann.

Da das Prototyping so einfach oder so komplex sein kann, wie Sie es möchten, werden Sie eine Menge Wert daraus ziehen, es als Teil Ihrer Praxis zu übernehmen. Lassen Sie uns einige der Vorteile durchgehen.

Kratzt einen kreativen Juckreiz

Manchmal möchten Sie einfach versuchen, etwas zu bauen, das Sie noch nie zuvor gesehen haben, oder etwas nachahmen, das Sie für cool halten. Es könnte eine verrückte Idee oder der nächste UI-Trend sein – wer weiß? Herauszufinden, wie Dinge funktionieren, ist zumindest einer der befriedigendsten Aspekte des Designerdaseins, und das Prototyping bietet einen fruchtbaren Boden.

Fügt Raum für Tapferkeit und radikale Ideen hinzu

Es ist schwierig, gleichzeitig zu versuchen, etwas zu liefern, das die Benutzer verstehen und erfinderisch sind. Selbst wenn Sie ein Projekt nur mit der „Prototyping Week“ beginnen, ist das eine Woche, in der der Himmel die Grenze ist.

Steigert die Fachkompetenz

Jede Entwicklungswerkstatt, die ich kenne, scheint tiefes Fachwissen in einer Plattform zu haben und wünscht sich insgeheim Arbeit darüber hinaus (ich bin sicher, dass dies für Designer dasselbe ist). Du baust alles in PHP und möchtest in Rails einsteigen? Erstellen Sie ein paar Prototypen, wenn Sie ein Projekt starten, auch wenn sie für das Geschäftsziel irrelevant sind.

Mindert das Risiko

Etwas zu machen, was man noch nie zuvor gemacht hat, ist beängstigend. Grob und schnell herauszufinden, beseitigt psychologische Barrieren. Plötzlich dauert das Unmögliche nur noch ein oder zwei Tage.

Erstellt einen Ideenkatalog

Während Ihre Bibliothek mit Prototypen von Projekt zu Projekt wächst, werden Ideen überarbeitet. Manchmal wird der Müll eines Projekts zum Schatz für das nächste.

Befähigt alle

Wenn Sie gerade erst anfangen, Dinge herauszufinden, sollten Titel, jahrelange Erfahrung und Fähigkeiten keine Rolle spielen. Gute Ideen können von jedem kommen, aber das ist schwierig, wenn der leitende kreative So-und-so von oben kommt, um das Denken zu lenken. Beginnend mit einem reinen Maker-Prozess schmelzen Titel weg und sprudeln gute Ideen von unten nach oben.

Passt Ihren Prozess an

Ich habe mit einer Reihe von Designern und Agenturen zusammengearbeitet, und sie scheinen immer wieder überwältigt zu sein, wie schnell ich mit der Arbeit beginne. Ich warte nicht darauf, dass die Anforderungen ausgefüllt werden, die künstlerische Leitung genehmigt wird oder irgendetwas anderes. Indem ich voll durchstarte, kann ich das Projekt viel schneller voranbringen.

Wie man anfängt

Der falsche Weg zum Prototypen ist, sich Sorgen zu machen, dass man Prototypen auf die falsche Weise erstellt. Wie Bruce Lee sagte: „Strive not strebe.“ Vor diesem Hintergrund finden Sie hier einige Richtlinien, die Ihnen helfen sollen, eine schnelle Prototyping-Praxis zu fördern.

Schreiben Sie Problembeschreibungen

Zerlegen Sie die Sache, die Sie zu lernen oder zu lösen versuchen, in atomare Einheiten und behandeln Sie jede davon als eigenständigen Prototypen. „Wie lade ich eine Karte in iOS?“ „Wie positioniere ich die Karte an einem bestimmten Ort?“ „Wie zeichne ich eine Form auf der Karte?“ „Wie platziere ich eine Stecknadel auf der Karte?“ Vier Statements, vier Prototypen, vier schnell gelernte Dinge.

Beginnen Sie mit etwas, von dem Sie wissen, wie es geht

Wie beim Dehnen vor dem Training kommt man nicht in einen Rhythmus, indem man mit voller Geschwindigkeit anfängt. Wenn Sie ein Programmierer sind, der eine Website prototypisiert, möchten Sie vielleicht damit beginnen, Ihre eigene Boilerplate zu erstellen: eine statische HTML-Datei, eine Gulp-Konfiguration und so etwas. Dies bringt Ihre Kreativität zum Fließen, sodass Ihr Mojo bereits funktioniert, wenn Sie sich auf unbekanntem Terrain befinden.

Hässlich bauen

Verwenden Sie Comics Sans MS und helles Limettengrün für Ihre Schriftarten. Benennen Sie Ihre Ebenen nicht. Brich alle Regeln. Jetzt ist nicht die Zeit für Pixelperfektion; Es ist an der Zeit, Ideen zu Papier zu bringen.

Halten Sie die anfänglichen Prototypen auf maximal 60 Minuten

Prototyping und Komplexität sind Todfeinde. Wenn Sie es richtig machen, sollten Sie am Ende Ihres ersten Projekttages in der Lage sein, mindestens vier Prototypen am laufenden Band zu produzieren.

Priorisieren Sie nach Gefühl, nicht nach Dringlichkeit

Was möchtest du heute machen? Hat das nichts mit dem Projekt zu tun? Bekämpfe es nicht. Mach es. Wer weiß? Vielleicht hat es noch unentdeckten Wert!

Gabel

Überschreiben Sie niemals einen Prototyp. Erstellen Sie stattdessen eine Kopie und iterieren Sie von dort aus. Auf diese Weise werden Ihre Prototypen immer so einfach wie möglich sein, können in verschiedene Richtungen gegabelt werden und sind leicht zu lernen.

Überteilen

Zeigen Sie allen, was Sie machen! Sei stolz darauf! Die positive Energie, die Sie rund um die Praxis aufbauen, fließt in den gesamten Lebenszyklus des Projekts ein. Allein dieser Schritt kann die Kultur eines Projekts dramatisch verbessern.

Dokumentieren Sie, was Sie prototypisieren und die Ergebnisse

Dies kann so einfach wie eine README-Datei in einem Verzeichnis oder eine Nachricht auf Slack sein. Gehen Sie immer zurück, um aus dem zu lernen, was Sie getan haben.

Schreiben Sie Ihre Ängste auf, während Sie gehen, und verwandeln Sie sie in Problembeschreibungen

Sie haben gerade Ihre erste Website zu Heroku gepusht, machen sich aber Sorgen darüber, wie Sie ein SSL-Zertifikat einrichten? Kein Problem. Stellen Sie es später für das Prototyping in die Warteschlange.

Wie Sie dies in Ihr Projekt einplanen

Hier ist die Sache: Du tust es nicht. Dies ist keine Art von Upselling. So mache ich es. Dieser Artikel hat aus einem bestimmten Grund das Wort „Prozess“ im Titel: Hier geht es nicht nur darum, wie man einen Prototyp erstellt. Es ist ein Leitprinzip, wie man Sachen baut.

Sie würden mit dem Prototyping an dem Tag beginnen, an dem Sie ein Projekt beginnen. Sie würden nicht aufhören, bis es nichts mehr zum Prototypen gibt. Ein Prototyp ist nicht dasselbe wie Ihr Hauptcode oder Ihre Designdateien. Am Anfang sollten Ihre Prototypen zu grob sein, um für die Produktion bereit zu sein. Wenn es sich später sinnvoll anfühlt, einen Weg zum Übergang zu finden, ist das in Ordnung. Es ist eine projektweise Entscheidung. Prototyping ist immer eine Konstante. Wenn es so aufgebaut ist, gibt es keinen gescheiterten Prototypen oder Fehler.

Wenn ich mit einem potenziellen Kunden spreche, erkläre ich ihm, dass dieser Prozess dazu neigt, viel schneller viel mehr Output zu generieren, als er es von meinen Konkurrenten (sprich: Ihnen) erwarten würde. Diese Ausgabe könnte helfen, eine API zu definieren oder die technische Machbarkeit zu beweisen oder eine beängstigende Aufgabe zu überprüfen. Besonders wirkungsvoll ist es bei Designern und internen Designteams – sie lieben es, auf diese Weise zu arbeiten, weil ich mit ihnen sehr schnell im Unkraut bin und Dinge herausfinde. Ich produziere qualitativ hochwertigere, individuellere und weniger fehleranfällige Arbeiten. Da sich jeder daran gewöhnt, harte Arbeit zu sehen, besteht kein Risiko, dass ein fehlgeschlagener Prototyp einen Kunden alarmiert – einige Dinge, die nicht funktionieren, sind nur ein erwarteter Teil des Prozesses.

Es positioniert mich auch langfristig gut, weil ich in der Lage bin, neue Technologien sehr schnell aufzugreifen. Meine Kunden wissen, dass sie mich für eine Installation, ein Physical-Computing-Projekt, eine App oder eine Website jeder Größenordnung kontaktieren können, weil sie wissen, dass der Ansatz erfolgreiche Ergebnisse garantiert.

Dabei geht es mir nicht um Gewinnmaximierung. Es geht darum, meinen Lebensunterhalt damit zu verdienen, das zu tun, was ich tun möchte. Ich wollte nie gut in Websites oder Apps sein – tatsächlich gab es diese Dinge noch nicht, als ich anfing! Ich wollte coole, interessante Dinge mit Code lernen. Ich möchte, dass meine Karriere lang und erfüllend und aufregend ist und ständig voller neuer Dinge, die ich lernen kann. Ein prototypgetriebener Prozess ist dafür perfekt.

Werkzeuge

Heutzutage scheint es, als ob man das Wort „Prototyp“ nicht sagen kann, ohne an InVision zu denken – es ist wie das Kleenex des Prototypings. Falls Sie InVision noch nie zuvor verwendet haben, ist es ein großartiges Tool für Designer, um Projekte durchzuklicken, ohne dass ein Programmierer erforderlich ist. Es ist das einzig Wahre: schnell, intuitiv und einfach zu erlernen.

Da Sketch immer beliebter wird, tauchen unzählige Plugins auf, um die Verwendung von Prototypen zu erleichtern. Framer ist ein fantastisches Beispiel; Es importiert Sketch-Dateien und mit ein wenig Programmierkenntnissen können Sie benutzerdefinierte Demos erstellen, z. B. Tippanimationen. InVision hat auch ein Sketch-Plugin. Andere, darunter Marvel und Craft, sind es wert, erkundet zu werden. Es gibt eine Menge Tools zum Ausprobieren.

Sie müssen kein Programmierer sein oder sogar Software zum Erstellen von Prototypen verwenden. Das Erstellen von Papierprototypen ist eine großartige Möglichkeit, mit dem UI-Design zu experimentieren, ohne einen Computer zu benötigen. Sie können auch Whiteboards verwenden. Diese Techniken funktionieren sogar für das Spieldesign.

Sie wissen nicht, womit Sie anfangen sollen? Erwägen Sie einen Prototyping-Sprint mit jedem dieser Tools!

Zurück in der Welt der Web- und Softwareentwicklung baue ich gerne ein GitHub-Repository speziell für Prototypen auf. Ich habe eine README-Datei beigefügt, die einige der Regeln beschreibt, die mir beim Prototyping wichtig sind, die Sie verwenden oder forken können, um eine Chance zu geben.

Fallstudie: Melody Jams

Vor ungefähr einem Jahr habe ich mit ein paar Freunden ein iOS-Spiel für Kinder namens Melody Jams entwickelt und auf den Markt gebracht (und darüber einen Artikel für das Smashing Magazine geschrieben!). Dieses Spiel wurde in etwa drei Monaten zu Nüssen codiert. Es gab einige Herausforderungen: Der Designer hatte noch nie zuvor eine App erstellt, er lebte 3000 Meilen von mir entfernt und wir hatten uns noch nie getroffen. Außerdem hatte ich seit einem Jahr keine iOS-App mehr codiert, sodass meine Koteletts erheblich zurückgegangen waren.

Das Spiel beinhaltet das Ziehen von Monstern vom unteren Bildschirmrand in bestimmte Hotspots auf der Bühne. Allein von diesem einen Design gingen mir eine Reihe von Problemstellungen durch den Kopf:

• Wie erstelle ich eine iOS-App?
• Wie erstelle ich ein iOS-Spiel?
• Wie erstelle ich etwas im Spiel?
• Wie kann ich auf das Ding tippen?
• Wie ziehe ich das Ding?
• Wie kann ich mehrere Dinge ziehen?
• Wie erkenne ich, wenn sich eine Sache in der Nähe einer anderen Sache befindet?

Und so weiter. Jeder von ihnen wurde zu einem individuellen, maßgeschneiderten Prototypen – eine iOS-App für jeden – bis alle gelöst waren. Jeder hat ein Problem gelöst, und einige haben neue Probleme aufgeworfen – zum Beispiel, wie animiere ich ein Ding, wenn ich es fertig gezogen habe?

Ich habe diese Prototypen in Swift 3 neu erstellt, damit Sie sehen können, wie das Prototyp-Repository aussehen könnte, wenn es heute erstellt würde. Eine Sache, die Ihnen auffallen wird, ist, dass die Dokumentation dazu ziemlich leicht ist – eine README-Datei und ein Screenshot oder GIF in jedem Verzeichnis, aber nicht eine Menge detaillierter Dokumentation. Wenn es hilft, unsere Kommentare zu drucken, tun Sie es auf jeden Fall. Für mich geht es darum, eine Progression zu sehen. Hier gibt es keine Theorie, keinen Blogbeitrag oder Tutorial. Prototyp 3 leitet sich aus Prototyp 2 ab, der aus Prototyp 1 hervorgeht. Mit genügend Übung können Sie die Nuancen der Programmiersprache schnell erfassen, auch wenn Sie sie noch nie zuvor gesehen haben.

Wir folgten diesem Ablauf in den ersten Wochen des Projekts und entwickelten größtenteils Prototypen, ohne an der Kernanwendung zu arbeiten. Am Ende des Projekts hatten wir über 50 verschiedene Prototypen, die verschiedene Arten von Animationen, Ladeschemata, Caching, Soundtests und UI-Mechaniken getestet haben.

Währenddessen erstellte der Designer Prototypen für Logos, Bewegungstests, App-Icons und so weiter. Der Sounddesigner lieferte Beispiele für Songs, an die er dachte. Und jeder liebte, was wir die ganze Zeit über gemacht haben.

Fazit

Nach meiner breiten Definition betreiben Sie wahrscheinlich bereits Prototyping, ohne es überhaupt als solches zu betrachten. Vielleicht besteht der nächste Schritt für Sie darin, häufiger mit Ihren Kollegen zu teilen oder zu behaupten, dass Prototyping der Startschuss für Ihr nächstes Projekt sein wird.

Prototyping tief in Ihren kreativen Prozess zu integrieren, kann transformativ sein . Es kann zu einer positiveren, bereichernden Teamkultur führen. Es kann ein Mechanismus für Entwickler sein, um neue Sprachen zu lernen, oder für Designer, um neue Tools zu lernen. Projekte werden schneller und in höherer Qualität erledigt und machen mehr Spaß. Ihre Kunden haben einen besseren Einblick in den Prozess und sind bereit, die Dinge mit einer geringeren Genauigkeit zu sehen, was es häufiger und weniger schmerzhaft macht, Dinge mit ihnen zu teilen. Sie werden auch so aussehen, als würden Sie viel schneller arbeiten als Ihre Konkurrenten und in der Lage sein, an einer größeren Vielfalt von Projekten zu arbeiten.

Was gibt es bei all diesen Vorteilen nicht zu mögen? Also, sag mir, bist du überzeugt? Inspiriert? Wie sieht Ihr nächster Schritt aus?