Prototyping im Code

Lassen Sie uns zunächst etwas aus dem Weg räumen. Prototyping in Code ist im Kontext dessen, was wir diskutieren werden, eine Art Fehlbezeichnung. Code klingt beängstigend, das tun Programmierer. Worüber wir hier sprechen, ist weit weniger beängstigend - alles, was wir fördern wollen, ist das Grundkonzept, dass Sie mit sehr einfachem HTML und ein bisschen CSS Prototypen erstellen können, die Ihre Ideen weitaus besser kommunizieren als jedes Diagramm- oder Wireframing-Tool jemals könnte.

Weder HTML noch CSS erfordern irgendeine Programmierung. HTML beschreibt die Struktur einer Seite und CSS übernimmt das Layout und die Dekoration. Es gibt kein Voodoo, keine versteckten Fallen oder irgendetwas, das auf mysteriöse Weise schief gehen kann. Was Sie schreiben, ist das, was Sie bekommen. Es ist auch eine sehr sofortige Form der Befriedigung.

Das Schreiben von Markups hat sich in vielen Agentur-Workflows mit Entwicklungsaufgaben verbunden. Designer, die Markups schreiben, sind so selten wie Rocking Horse Poo, was eher im Widerspruch zu der Richtung zu stehen scheint, in die sich das Web bewegt. Da Responsive Design immer beliebter wird und die Web-Typografie endlich zu einem Zustand heranreift, in dem Web-Schriftarten verwendet werden können, sind die Tage der Erstellung von Bildern von Websites gezählt. Wenn Designer nicht reagieren, wird es eine sehr unangenehme Zeit geben, während wir uns an die neue Art des Denkens und Entwerfens für das Web anpassen.



Das Prototyping in Code bringt eine ganze Reihe von Vorteilen und nur sehr wenige Nachteile mit sich. Dieser Artikel ist nicht als Tutorial zu HTML oder CSS gedacht (es gibt viele davon: Schauen Sie sich zum Beispiel den Crashkurs von Anna Debenham an ), sondern eher eine exemplarische Darstellung einiger Gründe, Tricks, Prozesse und Techniken, mit denen Sie HTML-Prototyping in Ihren Workflow integrieren können.

Die Vorteile

Das Entwerfen einer Benutzererfahrung für Websites oder Apps mithilfe von Diagramm- oder Wireframing-Tools ist aus mehreren Gründen problematisch. Erstens und wahrscheinlich am wichtigsten ist, dass Sie vor allem die Erfahrung vortäuschen. Unabhängig davon, wie schwierig oder interaktiv Ihre Tools sind, ist die Ausgabe im Allgemeinen nichts anderes als eine echte Website. Die wenigen Tools, die es gibt, die tatsächlich HTML ausspucken, machen das Rendern von HTML so schlecht. Sie verbringen mehr Zeit damit, Ihre Diagramme zu hacken, um Ihre Gebote abzugeben, und die Dateien werden so unhandlich, dass es ein Albtraum ist, sie zu warten und damit zu arbeiten.

Noch wichtiger ist, dass Sie durch die Verwendung eines Tools zum Ausarbeiten Ihres HTML-Codes nicht wirklich lernen, was HTML ist und tut, und daher die Gelegenheit verpassen, sich mit den Grenzen und Nuancen der Technologie vertraut zu machen, mit der unsere Ideen erstellt werden. Jared Spool, ein großer Verfechter von Designern und UX-Anwendern, die Code kennen, bringt es auf den Punkt: „Sie werden das Medium, in dem Sie arbeiten, besser verstehen“ und fährt fort: „Wenn Sie wissen, was einfach zu codieren und was schwierig zu codieren ist, Sie können Ihre Ideen schneller umsetzen (und mehr davon, da die Entwicklungszeit eine begrenzte Ressource ist). Wenn Sie verstehen, was Ihr Medium gut macht und wo es nicht so effektiv ist, können Sie fundiertere Entwurfsentscheidungen treffen. '

Wenn man es unter diesen Bedingungen betrachtet, scheint es verrückt zu sein, dass jeder, der für das Web entwirft, dieses Zeug nicht versteht. Selbst wenn Sie nicht für das Produktions-Markup verantwortlich sind (wir werden später mehr darüber sprechen), können Sie fundiertere Diskussionen mit denjenigen führen, die dies tun, und natürlich eine fundierte Anleitung geben, was genau Sie bauen möchten.

Der zweite offensichtliche Vorteil des Prototyping in nativem HTML ist, dass das Design Ihrer Website oder App dort präsentiert wird, wo es hingehört: in einem Browser. Nicht in einem PDF oder auf Papier oder in einer schwungvollen Powerpoint-Präsentation. Die Benutzer, an denen Sie es testen, oder der Kunde, dem Sie es vorstellen, können sich mit dem Produkt in seinem natürlichen Lebensraum beschäftigen. Interaktionen sind real, Klick- / Berührungsverhalten ist völlig natürlich, Text sieht aus und reagiert auf eine Weise, mit der Menschen vertraut sind, und Formulare funktionieren so, wie sie sollten. Wenn Sie den Prototyp näher an die tatsächlich beabsichtigte Erfahrung bringen, erhalten Sie viel genaueres Feedback von Benutzern und Kunden. Es gibt keine Lücke im kognitiven Prozess oder in der Vorstellungskraft, die erforderlich ist, damit sich der Benutzer auf natürliche Weise mit dem Proto befasst. Das macht Ihr Leben als Designer so viel einfacher, wenn Sie in einem Paradigma arbeiten, das tatsächlich der beabsichtigten Lieferung des von Ihnen entworfenen Objekts entspricht.

Abgesehen von den offensichtlichen Vorteilen, tatsächliche Interaktionen erstellen zu können, und keine Annäherungen an diese, ist die Tatsache, dass Sie Ihre Arbeit auf anderen Geräten problemlos anzeigen und testen können, ein Glücksfall. Derzeit gibt es keine andere Möglichkeit, eine reaktionsfähige Website effektiv zu gestalten als das Markup. Wenn Ihr Projekt also erfordert, dass Sie diesen Bedarf decken, müssen Sie die Technik ziemlich schnell anwenden, oder jemand anderes muss dieses Projekt abholen.

Die Tatsache, dass Sie Ihre Arbeit auf anderen Geräten anzeigen und testen können, ist ein Glücksfall (Dank an Nathan Ford für die Handmodellierung)

Die Tatsache, dass Sie Ihre Arbeit auf anderen Geräten anzeigen und testen können, ist ein Glücksfall (Dank an Nathan Ford für die Handmodellierung)

Die Mythen entlarven

Prototyping in Code ist (für die meisten Menschen) kein Weg, ein Frontend-Entwickler zu werden, oder ich sollte wahrscheinlich darauf hinweisen, dass es eine Bedrohung für einen Frontend-Entwickler darstellt. Rein pragmatisch ausgedrückt verwenden Sie nur HTML als Werkzeug, um Ihre Ideen auszudrücken, wenn auch in der natürlichen Sprache des Webs. Und hier kommt es gelegentlich zu Streitigkeiten, wenn Entwickler das Gefühl haben, dass ihre Zehen getreten werden, und sich über Ihre Bemühungen lustig machen könnten. Es ist nicht nur verletzend und unglaublich entmutigend, wenn Sie neu in all dem sind, sondern auch völlig sinnlos. Beim Prototyping gibt es keinen Platz für Code-Snobismus. Wenn Sie klarstellen, dass HTML und CSS, die Sie erstellen, nur einen Job machen und nicht dazu gedacht sind, es in die Produktion zu schaffen, werden sich die Leute entspannen. Das bedeutet auch, dass Sie sich nicht darum kümmern müssen, Ihr Markup und CSS perfekt zu machen. Es soll rein funktional sein, und da es sich um einen Prototyp handelt, der sich unweigerlich bis zur Unkenntlichkeit ändert und / oder weggeworfen wird - je schneller und manchmal schmutziger, desto besser.

Außerdem sollte ich hier wahrscheinlich kurz die Werkzeuge erwähnen. Sie können jetzt mit dem Prototyping von HTML beginnen, ohne etwas auf Ihrem PC oder Mac zu installieren. Natürlich können Sie spezielle Software kaufen, die das Bearbeiten von Text ein wenig schmackhafter macht, aber die Wahl des Texteditors ist eine ziemlich persönliche Sache. Probieren Sie ein paar aus und finden Sie heraus, welche Ihnen am besten gefällt. Die meisten haben eine kostenlose Testversion, spielen Sie also und sehen Sie, welche für Sie funktioniert.

Betrügen

Was mich ordentlich zu meinem nächsten Punkt führt. Im Zweifelsfall betrügen. Die meisten intelligenten Entwickler machen nie zweimal dasselbe. Sie verwenden Code wieder. Es ist eine gute Praxis. Aber darüber hinaus und wenn Sie Ihr eigenes Teileset erstellen (mehr dazu gleich), schauen Sie sich im Internet um.

Da Sie in HTML und CSS arbeiten, werden Sie ziemlich bald ziemlich geschickt darin sein, die Motorhaube (Rechtsklick, Quelltext anzeigen) auf einer Website zu öffnen und sich selbst einen Quellcode zu besorgen. Warum das Rad neu erfinden? Wenn es ein Formular gibt, das dem von Ihnen benötigten ähnlich ist, schnappen Sie es sich. Wenn es eine Bildergalerie gibt, die der von Ihnen entworfenen ziemlich ähnlich ist, leihen Sie sie aus.

Natürlich gibt es hier eine große Einschränkung. Sie müssen einen gesunden Menschenverstand zeigen und Ihren moralischen Kompass auf Anstand einstellen. Es ist absolut nicht cool, nur eine ganze Website im Großhandel zu stehlen oder diesen „geliehenen“ Code ohne ausdrückliche Genehmigung des Autors in die Produktion zu bringen. Um ehrlich zu sein, gibt es viele hilfreiche Tutorial-Sites und Open-Source-Musterbibliotheken (z. B. hackbook.hackasaurus.org/) : Das solltest du eigentlich nie brauchen, aber du wurdest gewarnt!

Mozilla

Mozillas Hackbooks sind eine praktische Snippet-Codebibliothek für Ihre Hacks

Abgesehen davon, dass Sie vorgefertigte Markups aus anderen Quellen erhalten, gibt es zahlreiche Online-Tools, die Sie bei den mühsameren und maßgeschneiderten Anforderungen eines Prototyps unterstützen. Die zwei größten Zeitverluste und Ursachen für Frustration sind Formen und Tabellen. Selbst Ihr hartnäckigster Frontend-Entwickler wird darüber stöhnen, dass er eine komplexe Tabelle oder Form erstellen muss. Lassen Sie sich also nicht entmutigen, wenn Sie sie als mühsam und etwas knifflig empfinden. Zum Glück gibt es unzählige intelligente Online-Tools, die einen Großteil dieser Arbeit für uns erledigen und über eine einfache Benutzeroberfläche automatisch ziemlich anständige Markups generieren. Eine schnelle Google-Suche bietet eine Vielzahl von Tools, die viele dieser schmerzhaften Aufgaben abdecken und Ihnen Codefragmente liefern, die Sie einfach selbst erstellen und bei Bedarf anpassen können. So sparen Sie unzählige Stunden und viel Ärger.

Zwei, die ich als Referenz in meinem Lesezeichenordner aufbewahre, sind: Kotatsu Dies ist ein übersichtlicher Tabellenersteller, mit dem Sie ganz einfach Klassen in Zellen und Zeilen einfügen können pForm Dies ist ein wirklich cleverer Drag & Drop-Formularersteller, der das Zusammenstellen selbst sehr komplexer Formulare zum Kinderspiel macht. Zweifellos werden Sie Ihre eigenen Favoriten finden, aber seien Sie versichert, wenn Sie gegen etwas kämpfen, können Sie ziemlich sicher sein, dass jemand anderes das Gleiche vor Ihnen erlebt und dann ein kleines Skript oder Widget erstellt hat, um diesen Schmerz zu lindern.

960 gs

Nathan Smith ist ein Supersmart-Designer und Entwickler, der alles zusammengestellt hat 960 gs , ein fantastisches kleines Paket von Werkzeugen, die das Prototyping (und die Produktion, wenn Sie möchten) mithilfe eines Rasters für das Layout zu einem absoluten Kinderspiel machen. Das Paket enthält alles, was Sie jemals brauchen würden, von Rastervorlagen und Anleitungen für Fireworks und Photoshop bis hin zu Skizzenblättern und vor allem der von ihm erstellten CSS-Bibliothek, die die ganze Magie entfaltet.

Die Verwendung von 960 ist lächerlich einfach. Verweisen Sie einfach auf die CSS-Datei in Ihrem HTML-Code, und Sie können in wenigen Minuten robuste Prototypen mit sehr einfachen Klassennamen in Ihrem Markup erstellen. Unter net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/ gibt es ein ziemlich definitives Tutorial. Wir werden also nicht versuchen, das hier zu behandeln, aber wenn Sie es einmal getan haben. ' Wenn Sie sich mit den Grundlagen befasst haben, werden Sie sich fragen, warum Sie es anders gemacht haben.

Das 960-Rastersystem macht das Prototyping mithilfe eines Rasters für das Layout zu einem Kinderspiel

Das 960-Rastersystem macht das Prototyping mithilfe eines Rasters für das Layout zu einem Kinderspiel

Prozess

Das Prototyping in Code beschleunigt sicherlich Ihren Arbeits- und Testprozess, sobald Sie sich mit den Grundlagen vertraut gemacht haben. Wahrscheinlich müssen Sie jedoch Ihren eigenen Workflow ein wenig anpassen, um sich daran anzupassen. Ich habe für die meisten Projekte fast das Wireframing eingestellt. Anstatt jedes Detail eines Entwurfs, an dem ich arbeite, akribisch grafisch darzustellen, arbeite ich mit einfachen Skizzen schneller und lockerer. Oft nicht von ganzen Seiten, sondern von Elementen: Ich beginne mit dem Prototyping gegen die Ziele und Bedürfnisse der Benutzer, dann kommen diese als vollständigere Layouts zusammen.

Skizze zuerst: Zeichnen Sie einige einfache Skizzen von Elementen auf der Seite, die später, wenn Sie mit dem Prototyping beginnen, als vollständige Layouts zusammengefasst werden

Skizze zuerst: Zeichnen Sie einige einfache Skizzen von Elementen auf der Seite, die später, wenn Sie mit dem Prototyping beginnen, als vollständige Layouts zusammengefasst werden

Dies ist eine großartige Übung, um Ihre Entscheidungen zu bestätigen und die Einfachheit zu fördern. Anstatt alles auf der Seite munter zu werfen und sie dann zu mischen, wie es beim Zeichnen von Feldern in einem Diagrammwerkzeug allzu einfach ist, neigen Sie dazu, jede Entscheidung zu rationalisieren. Konzentrieren Sie sich auf das, was wirklich wichtig ist, um das zu erledigen, was Sie tun müssen, und legen Sie Hierarchien, Topografie und Fluss auf einer tatsächlichen Seite fest. Wenn Sie sich mit einer echten Seite beschäftigen, ist es überraschend, wie sehr sich Ihre Sichtweise darauf ändert, wie eine Idee zusammenkommt.

Wir arbeiten für die meisten Prototypen in der Regel in einem freigegebenen Dropbox-Ordner und gewähren Clients Zugriff auf diesen Ordner. Wie Sie Ihre freigeben möchten, hängt von Ihrem persönlichen Setup ab. Sie können sehr lo-fi arbeiten und von Ihrem lokalen Computer aus arbeiten und einfach eine Zip-Datei senden. Wenn Sie einen freundlichen Systemadministrator und einen Staging-Server haben, können Sie die Dateien jederzeit dort ablegen. Ein kurzer Hinweis zur Verwendung eines Webservers über das Ausführen des Prototyps aus Ihrem Dokumentenordner oder was auch immer hinaus. Sie haben später viel mehr Optionen für erweiterte Prototypen, wenn Sie serverseitiges Scripting mit einfachem PHP oder Aspx hinzufügen. Eine Überlegung wert, da es wirklich einfach ist, einige sehr nützliche Funktionen für sehr wenig Aufwand oder Codierungsfähigkeit zu erhalten.

wie man Videospielcharaktere erstellt

Change Management ist offensichtlich wichtig. Das Ausführen Ihrer Prototypen in Ordnern und das Duplizieren und anschließende Inkrementieren von Versionsnummern ist eine ziemlich einfache, aber effektive Methode. Es ist wahrscheinlich übertrieben, zu diesem Zeitpunkt über eine ordnungsgemäße Versionsverwaltung nachzudenken, aber es lohnt sich, in Zukunft darüber nachzudenken, ob Ihre Prototypen komplex werden oder mehrere Personen daran arbeiten.

Erweiterte Tipps

Abgesehen von den Grundlagen des Lernens von grundlegendem HTML werden Sie zweifellos eine Reihe von raffinierten Tricks und Tipps entwickeln, die Ihnen viel Zeit und Mühe sparen, wenn Sie sich mit den Vor- und Nachteilen der von Ihnen erstellten Seiten vertraut machen. Jedes Projekt bringt seine eigenen Anforderungen mit sich, aber wenn ich Ihnen zwei Ratschläge geben kann, die Ihnen unzählige Stunden ersparen, dann wären dies:

  1. Baue eine Bibliothek mit Dingen. Es spielt keine Rolle, wie Sie es tun. Es könnte sich um einen Ordner mit Snippets handeln oder um etwas Strukturierteres wie Coda Clips (kleine Codestücke, die Sie durch Ziehen auf Ihr Dokument wiederverwenden können). In jedem Fall werden Sie bald einen Haufen Bits entwickeln, aus denen Sie so ziemlich Frankenstein zu allem zusammenfügen können.
  2. Verwendung beinhaltet. Wenn Sie auf jeder Seite Dinge verwenden, die möglicherweise im gesamten Prototyp geändert werden müssen oder nicht (Navi, Fußzeile usw.), müssen Sie diesen Abschnitt nur herausziehen und dynamisch in Ihr Dokument aufnehmen in einem Platz. Wenn Sie es ändern, wird es automatisch auf jede Seite angewendet, die es verwendet. Früher war dies auf serverseitiges Scripting mit beschränkt PHP oder ASP.

Dank der Wunder von jQuery können Sie jetzt unglaublich einfach dasselbe erreichen Johann Burkards fantastisch einfaches inc.js-Skript . Unabhängig davon, für welche Route Sie sich entscheiden, sparen Sie sich mit dieser Technik buchstäblich Stunden.

inc enthält in IE ohne ActiveX-Steuerelemente deklarative Einbeziehung von Remote-Inhalten sowie Rückrufe vor und nach der Aufnahme, um Inhalte zu transformieren

inc enthält in IE ohne ActiveX-Steuerelemente deklarative Einbeziehung von Remote-Inhalten sowie Rückrufe vor und nach der Aufnahme, um Inhalte zu transformieren

Treue

Zu guter Letzt ist die Frage der Treue. Das Schöne am Prototyping mit HTML und CSS ist, dass Sie mit einem Satz HTML unterschiedliche Stile des Stils auf dasselbe Dokument anwenden können, indem Sie einfach das CSS ausschalten. So können Sie sehr einfache Schwarz-Weiß-Boxen wie ein herkömmliches Drahtmodell starten und dann die Wiedergabetreue für bestimmte Anwendungsfälle erhöhen. Benutzer (und Kunden) haben häufig Schwierigkeiten, sich auf sehr reduzierte Drahtmodelle zu beziehen. Daher können Sie zum Testen mehr UI-Glanz anwenden, damit sich der Prototyp einem echten Produkt näher fühlt. Sie können dies natürlich selbst tun oder mit Ihrem Designteam zusammenarbeiten, um frühzeitig mit der visuellen Sprache zu beginnen und zu sehen, wie es den Benutzern in einem realen Kontext ergeht.

Für alle, die nervös sind, Prototyping in Code auszuprobieren, würde ich sagen: Sei es nicht. Fangen Sie klein und langsam an und arbeiten Sie sich nach oben. Bitten Sie einen Frontend-Entwickler um Hilfe und Rat, wenn Sie diese benötigen (sie beißen nicht). Und wenn Sie schnell auf dem Laufenden bleiben möchten, können Sie die UX Bootcamp Kurs ist sehr billig und bringt Sie in nur wenigen Tagen zum Laufen.

Wenn Ihnen diese Funktion gefällt, lesen Sie auch den Crashkurs von Anna Debenham Erstellen von Prototypen in HTML und CSS .