Was sind die Best Practices für Rapid Prototyping mit ausschließlich HTML / CSS / JS [geschlossen]

8

Ich entwickle einen Prototyp einer Webanwendung. Ich möchte nur HTML, CSS und Javascript verwenden. Ich bevorzuge es, meinen Texteditor zu verwenden und muss kein neues Tool wie Axure lernen (oder dafür bezahlen).

Was wären Ihrer Meinung nach die besten Praktiken? Für mich gibt es viele Eigenschaften für einen guten Prototyp:

  • Schnell entwickelt
  • Leicht zu verbessern
  • Faire Wiedergabetreue in Bezug auf UX (dies disqualifiziert Tools wie Omnigraffle oder PowerPoint, die sich eher dem Wireframing widmen).

Ich versuche so schnell wie möglich zu lernen, aber ich würde aufgrund Ihrer Erfahrung gerne wissen, wie Sie es geschafft haben, schnell und agil zu sein.

Referenz:

charlax
quelle
1
Normalerweise schreibe ich nur Modelle in HTML / CSS / JS. Ich kann dann die meisten Dinge, die ich für das Modell geschrieben habe, wiederverwenden, wenn ich die Web-App anschließe.
Dietbuddha
Gehören CSS und JS wirklich zu einem GUI-Prototyp? Ich verstehe den Zweck eines GUI-Prototyps, um dem Kunden den Eindruck zu vermitteln, "welche Felder in welche GUI-Form gehen" und "welche Schaltflächen / Aktionen vorhanden sind, um zur nächsten GUI-Form zu gelangen". Das GUI-Formular sollte fest codierte Beispieldaten und keine Funktionen mehr enthalten, um von einem Formular zum nächsten zu gelangen. Können wir Ihre Frage auf "Welcher statische HTML-Editor eignet sich am besten zum Erstellen von GUI-Prototypen" reduzieren?
K3B
Vielen Dank für Ihren Kommentar. Nein, ich denke, es ist umfassender als nur Felder und Formen anzuzeigen. Manchmal sind Animationen und Übergänge genauso wichtig wie das Layout (z. B. für ein TV-Interface). Es ist jedoch mühsam und ineffizient, diese mit Worten zu beschreiben, wenn man sie nur auf einem Bildschirm zeigt und dann experimentiert.
Charlax

Antworten:

6

Wenn Sie den Prototyp wegwerfen und später mit der realen App neu beginnen möchten, würde ich vorschlagen, dass Sie ein Tool wie PowerPoint oder Balsamiq oder sogar Papier verwenden. Durch die niedrige Wiedergabetreue können sich Ihre Benutzer auf die Interaktion konzentrieren und weniger auf Ihre Farben oder sprudelnden Schaltflächen. Mit weniger Investitionen wie diesen werden tatsächlich mehr Knicke schneller behoben.

Wenn Sie Ihren Code irgendwann als Grundlage für eine echte App verwenden möchten, würde ich empfehlen, sich etwas Leichtes wie Webmatrix oder eine gleichwertige Ruby / Java-IDE anzusehen . Webmatrix ist ein kostenloses Tool, eine IDE, mit der Sie Ihre Site sehr schnell entwerfen und verspotten und sogar SQL Express, IIS Express und die anderen Teile des .NET-Webstacks (alle kostenlos) lokal verwenden können. Wenn Sie sich später für ein Upgrade auf Visual Studio entscheiden, können Sie dies ohne Änderungen an Ihrer App tun.

Ryan Hayes
quelle
Ich dachte mehr an einen Prototyp als an ein Drahtmodell. Ich weiß, dass ich einen Prototyp mit PowerPoint oder Omnigraffle erstellen kann, aber ich würde es gerne mit HTML, CSS und Javascript tun.
Charlax
5

Sie können einen Prototyp ziemlich schnell zur eigentlichen Anwendung bringen, wenn Sie die richtigen Werkzeuge auswählen. Ich habe kürzlich ein internes Tool als Prototyp entwickelt, das schließlich eine archaische Sammlung von Bildschirmen ersetzen wird, die interne Daten verwalten. Das alte System ist nicht sehr intuitiv und für Neueinstellungen äußerst verwirrend.

Mein Stapel:

Stellen Sie dies auf ein MVC-Framework und binden Sie es an den serverseitigen Anwendungscode Ihrer Wahl. Sie können innerhalb eines Tages einsatzbereit sein.

Adrian J. Moreno
quelle
1

* WIE MAN SCHNELL PROTOTYPIERT *

Einige Leute sind davon verwirrt. Bitte nehmen Sie mit, es gibt unterschiedliche Ebenen der "Geschwindigkeit", wenn es um Prototypen geht, aber es gibt nur eine, die am schnellsten ist - und sie wird immer die schnellste sein, weil sie der Interaktionsebene am nächsten kommt. und das ist der Browser.

Wie schnell Prototypen erstellen?

1 - Versuchen Sie, alles zu finden, was es zu "Design-In-Browser" gibt - Experten sagen, dass der beste Weg zum Entwerfen des Frontends darin besteht, "so schnell wie möglich zum Code zu gelangen" - Chris Coyier.

2 - Schnell sein bedeutet Wiederverwendung. - Trick Nr. 1 für Rapid Prototyping ist ~ "Erstellen von Komponenten, die auf der anderen Komponente aufbauen können, die Sie bereits erstellt haben."

Beispiel: - Dies kann wie auf einer Seite bewährte Registerkarten sein. - Auf einer anderen Seite bewährte Diagramme. - Dann werden auf einer dritten Seite umfangreiche Comboboxen getestet

 - In a fourth page, the three prior prototypes combine into a complex-component.

 Mixing - Components together, is key. 

3 - Um Himmels willen, wenn Sie Rapid Prototyping betreiben, kann es schlampig sein. Bitte machen Sie sich nichts vor, dass ein Formatierungscode erforderlich sein wird. Schnelle Prototypen sind Thowaway-Code oder sich entwickelnder Code. In beiden Fällen kann dies lange nach Überprüfung des Prototyps behoben oder automatisiert werden. Ziel des Prototyps ist es, die architektonische Vitalität zu bestimmen. In den meisten Fällen handelt es sich um ein Produkt mit minimaler Lebensfähigkeit. Erhalten Sie daher so schnell wie möglich Arbeitscode auf der Seite. Dies ist nur der Proof of Concept, nicht der Beweis im Pudding.

4 - Ich erwähnte die Automatisierung. Eine gute IDE ist wirklich wichtig - eine mit vielen Hotkeys. "Um schnell Prototypen zu erstellen, müssen Ihre Finger fliegen, nicht Ihre Maus." - Aber es gibt noch mehr. Viele IDEs formatieren Ihren Code für Sie. Viele werden während der Arbeit fusseln und Fehler finden, während sie gemacht werden. Einige können Ihren Browser beim Speichern aktualisieren. Satzstellung markieren. Es ist einfach aber effektiv.

Schlussfolgerung: Rapid Prototyping ist eine Zusammenstellung dieser Art von Best-Practice-Merkmalen. Keiner von uns ist sofort schnell aus dem Tor: Es ist also ein Evolutionsprozess, um Ihre Geschwindigkeit zu steigern. Dies wird in Agile als Geschwindigkeit gemessen. Sie müssen überlegen, wie Sie schneller fahren und sich dann mehr nach vorne lehnen können.

** Integrieren Sie jede Entwicklungsoptimierung, die Sie im Laufe der Zeit durchführen können. ** Erstellen Sie Bibliotheken mit Prototypen von Widgets, Technologien und API-Friedhöfen. ** Wenn die Zeit gekommen ist, duplizieren Sie sie und mischen Sie sie zusammen. Behalten Sie die Originale bei, während Sie etwas Neues entwickeln. ** Dies gilt insbesondere für viele JS-Frameworks.

Ich hoffe, das hilft.

Jack Stone
quelle
Die nützlichste Antwort hier.
Theringostarrs
0

Haben Sie über Twitter's Bootstrap oder Yahoo's Pure nachgedacht ?

Beide sind sehr, sehr einfach in Betrieb zu nehmen, und Sie können einige ziemlich komplexe Schnittstellen erstellen, nur mit dem, was Sie "out of the box" erhalten.

Ich habe Bootstrap lange Zeit für das Prototyping verwendet, und meistens gelangen dieselben Knochen des Prototyps in das fertige Produkt.

BenLanc
quelle
1
Prototyping beinhaltet mehr als nur das Tool. Erwägen Sie, Ihre Antwort zu erweitern, um einige der "wie" und nur die "mit was" Aspekte zu erklären.