Prototyping im Browser

0
43

Prototyping Animationen und Interaktionen ist entscheidend für eine Reihe von Gründen: Sie können Ihre Oberfläche fühlen sich täuschend schnell, Sie können helfen, den Fokus der Benutzer auf eine bestimmte Aufgabe, und Sie können Ihnen einen besseren Einblick in den aktuellen Zustand Ihrer Anwendung. Die Daten geladen werden? Ist jetzt etwas unklickbaren? Wie lange müssen Sie warten, bis Sie eine Aktion ausführen kann?

Bei Gusto, ich habe eine Menge von kleinen Interaktion, details und Prototypen in letzter Zeit aus eben diesen Gründen — leider gibt es nicht viel, dass ich zeigen kann, Sie alle im detail nur noch. Ich denke aber, dass der Prozess, wie ich bin, dies zu tun, ist weit interessanter, als was ich eigentlich arbeiten, so dass ist, was ich teilen werde hier.

Das problem habe ich konfrontiert mit prototyping-Animationen kommt es auf die Werkzeuge, weil Sie letztlich fühlen sich restriktiv auf mich. Wann immer ich habe experimentierte mit Ihnen in die Vergangenheit, ich fühle mich wie eine hand ist immer gebunden hinter meinem Rücken. Es könnte sehr gut sein, dass ich nicht mit Ihnen richtig, aber ich habe das Gefühl, dass keiner von Ihnen wirklich imitieren browser-Verhalten ganz richtig, obwohl ich fasziniert zu beobachten, tools wie Rahmer, Marvel, Zeplin und Prinzip gewinnen Traktion, ich glaube die sind nicht für mich. Zumindest noch nicht, jedenfalls.

Meiner Meinung nach, der beste Weg, um Prototypen eine Menge von Interaktionen ist noch mit plain ol’ HTML -, CSS-und (Keuchen!) eine Prise jQuery, wenn ich es brauche.

Wie ich bin-prototyping-heute

Mit meinem letzten Projekt, habe ich beschlossen, zu investieren, ein wenig Zeit in CodePen zu helfen, unser design-team schnell Prototyp Dinge. Hier ist, was ich gebaut habe:

Finden Sie den Stift Gusto Vorbild: einen Kopfball von Robin Rendle (@robinrendle) auf CodePen.

Nein, wirklich, das ist es. Es ist nur ein einfacher Prototyp, der aussieht wie unsere app.

Es ist ein Stift mit all den HTML-Code für die app-navigation — und es enthält alle CSS auch. Auf diese Weise, ein designer bei Gusto können Gabel, Stift und beginnt zu schreiben von HTML und CSS zu Experimentieren mit einer bestimmten bit-Benutzeroberfläche, ohne all den zusätzlichen Druck, schreiben zu müssen Produktions-code. Es ist wichtig zu beachten, dass dieser Prototyp nicht für herauszufinden, UX, tools wie Figma und Skizzieren Sie tun einen viel besseren job. Prototypen wie dieser sind vor allem nützlich, wenn herauszufinden, pingelig UI-Interaktionen wie Tabellen, Tabellenkalkulationen und dropdowns — Komponenten, kann kompliziert werden, sehr kurz.

Um diesem Prototyp habe ich einfach kopiert und eingefügt, alle HTML-und CSS von unserer web-app in einer neuen pen. (In Zukunft sollten wir ein system haben, wo wir immer prototyping mit den neuesten up-to-date-code aus unserer app, aber für jetzt, ich denke, das ist ein feiner Ausgangspunkt.) Dieser Stift enthält sämtliche Menü-und Navigations-Elemente, die wir brauchen, um es Aussehen wie in der Gusto-app. Wir haben einen separaten Stift für die Fußzeile schließt alle divs, die wir öffnen in der Kopfzeile. Schließlich, wir haben noch einen Stift, der die Importe die zwei anderen Stifte in etwa so:

<!– HEADER –>
[[[http://codepen.io/robinrendle/pen/481a88853820067752e28cdb479c91f3]]]

<!– HTML GEHT HIER –>
<h1>App-Prototyp</h1>
<p>Sie können diese Gabel Stift und Schreibe alle HTML-und CSS, die Sie benötigen, um Prototypen Interaktionen und Ideen zu erforschen, die Sie hier direkt in Ihrem browser.</p>

<!– FOOTER –>
[[[http://codepen.io/robinrendle/pen/0dcaa93954f06f4d03b7e23e8ea54cac]]]

Finden Sie den Stift Gusto Prototyp: Vollständige Robin Rendle (@robinrendle) auf CodePen.

Was ist das seltsame syntax mit allen [[[ ]]]? Das ist der HTML-syntax Einschließen, die für CodePen. Wenn wir die URL von einem Stift zwischen diesen Klammern, CodePen holt sich den code von diesem Stift und legen Sie es gerade in diesem neuen pen. Das ist es! Ziemlich süß, nicht wahr?

Um Dinge einpacken, die ich machen wollte, ein paar Notizen über das, was ich habe gelernt mit diesem neuen setup.

Lektion 1: Prototypen werden sollte super einfach zu teilen

Im Idealfall Prototypen sind leicht zu teilen mit anderen Designern und Ingenieuren, außergewöhnlich schnell, um die Einrichtung zu erhalten, und erfordern keine Vorherige Ausbildung oder know-how — und Codepen ist dafür perfekt. Ich mag dieses setup für eine Reihe von Gründen. Zum einen haben wir nicht, zu lehren, Designer CoffeeScript, wie wir haben, um mit Framer und wir haben nicht zu ausführen Reagieren oder Vue workshops, um Sie aufstehen und laufen mit einer komplexen prototyping app.

Ja, Leute tun müssen, um zu lernen, wie HTML und CSS funktioniert, um Prototypen zu erstellen, aber ich denke, das lernen die Grundlagen dieser beiden Sprachen ist entscheidend für eine designer arbeiten auf die web sowieso.

Lektion 2: Bad code ist ein-okay

Hier ist eine andere Sache, die ich vor kurzem gelernt, während Sie prototyping: schlechter code ist okay , in diesem Stadium. In der Tat, wir sollten schreiben, schrecklich, unverzeihlich code beim prototyping im browser. Wir schreiben sollte die Art von CSS und HTML halten würde Harry Roberts bis in der Nacht, weil sauberen, wartbaren code in die Quere kommt, den design-Prozess, wenn der Fokus sollte auf die Iteration so schnell wie möglich.

Um ganz ehrlich zu sein, ich kümmern sich nicht darum, front-end-best practices wenn ich diese Prototypen — I don ‘ T think about BEM, semantische HTML-oder auch performance. Oh, und ich sicherlich don ‘ T care über die kompetente Art und Weise zu Rendern Reagieren thingamijig.

Solange wir Graben alle, die Prototyp-code, und starten Sie von Grund auf später, und so lange, wie es den Schritt zu brechen, das design in Komponenten und gewährleisten, dass die lego-Teile sind gut wartbar, gut dokumentiert und sehr performant in unsere Produktionsumgebung, dann glaube ich, dass das schreiben schlecht, sollte nicht nur erlaubt, sondern aktiv gefördert.

Dies führt mich zu meinem abschließenden imbiss.

Lektion 3: Designer und Entwickler müssen immer Ihren code übersetzen

Ich rechne damit, dass das erste mal ein designer und/oder front-end-Entwickler schreibt code, es sollte niemals in einer produktiven Umgebung. Dass der Spielraum und die Freiheit zu verrückt mit dem code in einer sicheren Umgebung, konzentriert sich Ihre Aufmerksamkeit auf das design und machen es kompatibel mit einem browser-Einschränkungen. Nach dieser, können Sie denken über die Pflege der code aus einem heißen, dampfenden Haufen Müll in schöne, blitzsaubere Produktion-bereit Poesie. Die übersetzung der statischen Modelle in eine interaktive Prototyp ist der erste Schritt, aber es ist lebenswichtig, um einen nächsten Schritt zur Durchsetzung Ihrer code-standards.

Bietet Ihre app verwenden BEM? Wie sollte Sie Abstrakt, jede dieser Komponenten in separate Dateien? Wie nennt man all diese neuen Komponenten, die Sie sind die Einführung in das design-system?

Ich glaube, alle diese Fragen sind leichter zu beantworten, sobald Sie den interaktiven Prototyp. Und ich würde empfehlen, dass Designer und front-end-Ingenieure gleichermaßen experiment machen kleine tools wie dieses. Es könnte sich ein wenig seltsam auf den ersten, aber ich verspreche, es wird produzieren viel bessere Arbeit auf lange Sicht.