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

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:

• http://www.boxesandarrows.com/view/prototyping-with

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.

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:

• HTML5 Boiilerplate
• Blueprint CSS für Grids & Layout
• jQuery und jQueryUI für JavaScript und Layout
• jQuery Validate für die clientseitige Formularvalidierung

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.

* 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.

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.