it-swarm-eu.dev

Welche Prototyping-Tools?

Dies hängt stark mit der folgenden Frage zusammen:

Ich wollte die Vorschläge jedoch nicht auf "webbasierte" Tools beschränken. Ich habe in der Vergangenheit die folgenden Tools für Prototyping, Wireframing und Mockups mit einigem Erfolg gefunden und verwendet:

Mir ist auch bewusst, dass einige Designer Grafikanwendungen wie Photoshop und Illustrator für diese Aufgabe verwenden.

Dies ist eine Community-Wiki-Frage. Veröffentlichen Sie Ihre Gedanken, versuchen Sie, sie auf ein Paket pro Antwort zu beschränken, damit wir eine Vorstellung davon bekommen, wie die Community zu diesen Tools steht.

34
Richard Slater

Für mich ist es wichtig, mein Prototyping in mindestens zwei und drei Threads zu halten, wenn ich versuche, detaillierte Interaktionen mit Animationen zu verstehen.

Thread 1: Ablauf, Funktion, Form und Daten

  • Beginnen Sie auf dem Papier (normalerweise eine Whiteboard-Design-Sitzung mit anderen). Konzentrieren Sie sich auf den Bildschirmfluss, dann auf wichtige Funktionen und mögliche Layouts besonders wichtiger Bildschirme. Versuchen Sie es mit mindestens zwei verschiedenen Ideen.
  • Nächste Stufe der Treue in Balsamiq. Fügen Sie funktionale Details hinzu, optimieren Sie das Layout, fügen Sie dem Bildschirm konkrete, aussagekräftige Beispieldaten hinzu (im Kontext eines demonstrierbaren Szenarios).
  • Erstellen Sie einen Workflow-Prototyp, indem Sie ein schrittweises Einzelpfadszenario mit Bildschirmen und bestimmten erwarteten Interaktionen aneinanderreihen, um zum nächsten Bildschirm zu gelangen. Ich neige dazu, PowerPoint zu verwenden und alle Bildschirmmodelle nacheinander anzuordnen. Mit diesem Prototyp erhalten Sie frühzeitig Feedback zu echten Benutzern über pluralistische Durchgänge , die sehr effektiv zur Verfeinerung von Konzepten, Workflows, funktionalen Anforderungen, Terminologie usw. sind.
  • Iterieren Sie früh, oft und schnell.

Thread 2: Visuelles Programm und Stil

  • Visualisieren Sie einige der wichtigsten Modelle aus Thread 1 (als Kompositionen) in Details auf Pixelebene mit Photoshop oder einem anderen ähnlichen Mechanismus. Erforschen Sie Farbe, Proportionen, visuelle Metaphern, Typografie usw. Generieren Sie mindestens 3 Ideen.
  • Erhalten Sie unabhängig von den Workflow-Prototypen Feedback dazu. Verwenden Sie Präferenztests, AB-Tests, Kritiken, Charettes usw.
  • Iterieren und verfeinern.

Thread 3: Detaillierte Interaktion und Animation

  • Wenn Sie sich auf eine einzelne, detaillierte Interaktion oder Animationssequenz konzentrieren, hacken Sie einen funktionalen Prototyp in den für Sie am besten geeigneten Tools zusammen: HTML/CSS/JS, Flash, untergeordnete Programmiersprachen, Frameworks/Bibliotheken für UI-Komponenten usw. Mindestens zwei alternative Interaktionen .
  • Führen Sie eine kleine Anzahl kurzer Usability-Tests durch, einschließlich der Erfassung von Zeitdaten. Vergleichstests durchführen. Zählen Sie Tastenanschläge/Mausklicks/Gesten.
  • Iterieren und verfeinern.

Zusammenfassend lässt sich sagen, dass Sie bestimmte Arten von Prototypen für bestimmte Zwecke erstellen, um bestimmte Fragen zu beantworten. Kein Typ funktioniert für alle Situationen. Halten Sie die ästhetischen Belange von der Workflow-/Funktionsrückkopplungsschleife fern. Verwenden Sie geeignete, effektive Methoden für die verschiedenen Arten von Fragen. "Überquere nicht die Bäche."

Ich habe festgestellt, dass fast alle grundlegenden Designverbesserungen von Thread 1 und Thread 2 stammen, aber Thread 3 ist erforderlich, wenn Sie über die Standardsteuerelemente hinausgehen oder Ihre Domäne neu/komplex/spezifisch ist (z. B. gestische Interaktionen, mehrdimensionales Modell) Manipulation, benutzerdefinierte Steuerelemente für ein schickes neues Betriebssystem, Optimierung der menschlichen Leistung in einigen Dimensionen).

35
Jim Jarrett

Pencil ist ein gutes Werkzeug zum Erstellen von UI-Modellen. Es ist als Firefox-Addon oder als eigenständige Anwendung verfügbar.

alt text

Es hat einen Vorteil gegenüber einigen der anderen genannten Tools, da es kostenlos und Open Source ist.

12
david4dev

Ich habe vor einiger Zeit einen sehr interessanten Artikel mit dem Titel "Skizzieren oder nicht skizzieren" gelesen - Sie sollten einen Blick darauf werfen: Skizzenfrage Wann immer Kreativität benötigt wird, sollten Sie Ihre Gedanken nicht mit Werkzeugen einschränken Sie nutzen. Meine persönliche Wahl für spätere Aufräumarbeiten ist ein Tool in der Nähe des Bereichs, mit dem ich arbeite. Bei HTML/CSS beginne ich normalerweise mit einfachen Layouts und erhöhe die Details Schritt für Schritt. Das gleiche könnte sich auch für andere Bereiche als nützlich erweisen. Prototyping von niedrigen bis höheren Details. Ich kann also kein bestimmtes Tool empfehlen ... es kommt darauf an.

Ich kann also kein bestimmtes Tool empfehlen ... es kommt darauf an .

10

Ich persönlich verwende Balsamiq für die ersten Überarbeitungen und gehe dann mit einem CSS-Framework wie Blueprint direkt zu einem HTML-Prototyp.

8

Interessant, dass Adobe Fireworks auf dieser Seite wenig Liebe gefunden hat.

Unter anderem habe ich genossen

  1. Bauen in verschiedenen Staaten
  2. Masterseiten
  3. HTML-Objekte wie Links und Symbole können mit einem Export-Markup versehen werden (interne und externe Links, Metadaten, all diese Vorteile).
  4. Exportiert standardkonforme, CSS-basierte Layouts mit aktuellen Stylesheets
  5. Native Illustrator- und Photoshop-Integration für Logos usw.

Ich mag Balsamiq, weil er einem Kunden eine Folgenabschätzung vorgelegt hat, und dann Fireworks für einen navigierbaren Prototyp, sobald ein Designer zusammengearbeitet hat. Die in Fireworks geleistete Arbeit lässt sich leicht genug in HTML und CSS exportieren, die sich leicht genug in eine vollständige statische Site oder als Vorlagenseiten/-themen für eine dynamische Site übersetzen lassen.

8
Matt

Ich werde sagen, nur Papier ist der beste Prototyp. Ja, es ist offensichtlich, aber es ist besser als elektronisch zu starten.

  • Papier sagt dem Kunden, dass dies eine Idee ist, eine von vielen möglichen.
  • Papier lässt den Kunden nicht in Schriftarten, Farben, Formen oder Bildern hängen. Es gibt einen Grund , warum Balsamiq Drahtmodelle im Sketch-Stil gewählt hat.
  • Revisionen sind schnell
  • Es ist einfach, ihre eigentliche Handschrift darauf zu bekommen, und es schüchtert sie nicht ein, darauf zu zeichnen.
  • Sie können es scannen oder faxen, wenn Sie es für die elektronische Nutzung benötigen.

Ich bin ein großer Fan von HTML-Prototypen, aber Papier senkt die Barriere für Brainstorming und schnelle Flur-UI-Tests.

Es ist einfach, jemanden durch eine Papierskizze zu führen:

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

Wenn Sie nicht mit Skizzen beginnen und eine Benutzerüberprüfung erhalten, springen Sie mit der Waffe und es wird nur teurer, sie später rückgängig zu machen und zu wiederholen.

5
MattK

Ich bevorzuge Web-UI-Modelle in HTML/CSS.

  1. Funktionales Prototyping ist eine viel bessere Lösung, da Benutzer eine tatsächliche Erfahrung erhalten und keine nicht dimensionale Erfahrung (wenn Sie sich Photoshop ansehen).

  2. Funktionale Prototypen sind keine Wegwerfarbeiten.

  3. Es ist viel schneller, einen funktionalen Prototyp während einer Rückkopplungsschleife zu durchlaufen

4
abrudtkuhl

Ich benutze Axure .

Obwohl es ziemlich teuer ist (fast 600 US-Dollar pro Lizenz), bietet es erstaunliche Flexibilität und ermöglicht es Ihnen, fast alles anzupassen.

Die Möglichkeit, eigene Steuerelemente (oder Modelle davon), Master usw. zu verwenden, ist beim Erstellen einer Anwendung und nicht einer Website unerlässlich.

4
Dan Barak

Papier und HTML ist das Beste.

Schnelle Skizzen auf Papier. Dann erstellen Sie die reale Sache in HTML. StaticMatic Linktext eignet sich hervorragend für das Prototyping.

In der Vergangenheit habe ich Axure verwendet, aber Wireframing ist Zeitverschwendung.

3
Miki

Ich würde auch für Axure stimmen. Unser Büro verwendet seine Tools für die Zusammenarbeit, um die Verantwortlichkeiten zwischen unseren IAs und Grafikdesignern aufzuteilen.

Obwohl es kein Omnigraffle ist, sind die Wireframing-Optionen mehr als ausreichend. Die Software verfügt über eine hervorragende Master-Funktionalität, sodass wir die Wiedergabetreue eines Prototyps ziemlich schnell überprüfen können.

Und wie Dan sagte, ist es vollständig anpassbar und erstellt professionelle Spezifikationsdokumente.

r.

3

Adobe InDesign. Es mag ein bisschen seltsam aussehen, aber es gibt Funktionen, die mir gefallen:

  • Adobe-artige Oberfläche. Wenn Sie mit Photoshop oder anderen Adobe-Produkten gearbeitet haben, ist es sehr einfach, zu InDesign zu wechseln
  • leistungsstarke Tools zum Arbeiten mit Typografie, Tabellen, Stilen, Rastern usw.
  • tatsächlich können Sie nicht nur ein Drahtmodell, sondern auch ein Grafikdesign erstellen
  • sie können Drahtmodelle als anklickbare PDFs exportieren
3
Kostya

Ich stimme einigen der oben genannten Antworten zu, möchte jedoch einige zusätzliche Informationen und Tipps hinzufügen. Ich beginne fast jedes Projekt mit dem Whiteboard, Stiften in verschiedenen Farben und auch etwas Post-It. Der einfachste Weg, um Ideen zu kommunizieren und schnelles Feedback zu erhalten. Abhängig von der Art des Projekts versuche ich dann, die Hauptflussdiagramme mit einem Programm namens yEd zu skizzieren. Es ist eine einfache Möglichkeit für mich, die Ideen zu strukturieren. Wenn ich einen Mac in der Nähe habe, würde ich OmniGraffle (ein hervorragendes Programm für mehr als Flussdiagramme) wählen.

Ich mache weiterhin Prototypen in Balsamiq , Sketch Flow und Illustrator , um verschiedene Arten von Low-Fi und HiFi-Prototypen zu erhalten.

In Bezug auf diese Informationen fand ich es geeignet, eine umfangreiche Toolbox zur Auswahl zu haben. Für mich ist es wichtig, je nach Art des Projekts unterschiedliche Ansätze verfolgen zu können.

2
Anna

Ich stimme Daniel Bleisteiners Antrag zu: "Es kommt darauf an."

Betrachten Sie für 90% der Projekte meine Stimme für Papier. Die Rechtfertigung für Papier ist in diesem Thread reichlich vorhanden, daher werde ich nicht noch einmal wiederholen.

Design ist bei Projekten nie dasselbe und schon gar nicht bei Kunden. (Ich spreche von Design im vagen Sinne, d. H. Design, Entwicklung, Prototyping, Wireframing - seien wir ehrlich, sie verschmelzen alle allmählich miteinander.)

Für die anderen 10% der Projekte hängt das Protoyping-Tool vom Projekt ab. Wenn eine Zusammenarbeit über große Entfernungen erforderlich ist, ist Axure möglicherweise am besten geeignet. Wenn Sie mit dem internen Team eines Kunden zusammenarbeiten müssen, das hauptsächlich Adobe verwendet, ist Fireworks möglicherweise am besten geeignet. Es gibt viele Werkzeuge. Leider können sich Tools per Definition nicht so schnell anpassen wie die Probleme, für deren Lösung sie entwickelt wurden. Daher scheinen viele dieser Produkte einander sehr ähnlich, aber nicht ganz identisch zu sein. Und es liegt an uns zu bewerten, was für den Job am besten ist.

Zusätzlicher Gedanke: Das iPad fängt an, die Grenzen zwischen persönlicher Kundenzusammenarbeit und persönlicher Kundenbeobachtung über die Schulter zu verwischen. Omnigraffle, SketchBook, TouchDraw, Draft und andere iPad-Apps ebnen den Weg für eine verbesserte Zusammenarbeit. (Ich spreche von Verbesserung als dem Streben nach dem ultimativen Ziel, dass sich ein Kunde auf einem iPad genauso wohl fühlt wie auf Papier. Der Vorteil besteht darin, dass der Kunde einen funktionalen Prototyp anstelle einer statischen Seite verwenden kann Endziel ist nur meine Meinung.)

2
Tyler Hayes

Ich folge diesen Schritten ...

1. Prototyping. Ich benutze Balsamiq Mockups weil es einfach ist. Der springende Punkt beim Prototyping ist es, das grundlegende Layout der Dinge herauszufinden. Dies ist die Phase, in der Sie drastische Änderungen vornehmen. Glücklicherweise gibt Balsamiq nicht vor, etwas zu sein, was es nicht ist, und bleibt extrem einfach zu bedienen. Es ist für mich schneller, Balsamiq zu verwenden, als es zu zeichnen. Und es hat den Vorteil, dass Elemente über den Bildschirm gezogen werden können, anstatt sie zu löschen und neu zu zeichnen.

2. Finalisieren Sie das Design. Ich verwende dafür Photoshop und manchmal ein wenig Illustrator, damit ich die Grafiken perfektionieren kann, bevor ich Code schreibe.

Es ist schwieriger, drastische Änderungen an Ihrem Design in Photoshop vorzunehmen, da wir dazu neigen, von Pixel-Perfektion mitgerissen zu werden. Und es ist noch schwieriger, wenn es in Ihrer Anwendung ist. Das ist also der Grund für meinen Fortschritt und warum ich mit dem einfachsten Werkzeug beginne, das möglich ist ... Balsamiq.

2
Steve Wortham

Ich bin ein Skizzenblock/Bleistift-erster und Balsamiq - zweiter Typ. Anschließend kann Photoshop die Details ausarbeiten, bis genug vorhanden ist, um in HTML und CSS zu springen.

1
blackant

Balsamiq. Es ist auch gut für Desktop-basierte Software und sehr einfach zu erlernen.

1
franz976

Auch einen Besuch wert gomockingbird was gerade aus der Beta kommt

1
Paul McKeever

Die interaktive Agentur meiner Frau hatte Erfolg mit:

http://www.mockflow.com/

Schneller Einstieg und eine angemessene Anzahl integrierter Steuerelemente und Bildschirme für Prototypen und Drahtmodelle.

1
noluckmurphy

In der Frage wird die Notwendigkeit eines Prototyping-Tools erwähnt, jedoch nicht, wie realistisch Ihr Prototyp sein muss. Für einen skizzenhaften Drahtmodell-Prototyp stimme ich den meisten Kommentaren hier zu, dass Stift/Papier, Balsamiq oder sogar Visio gute Werkzeuge sind. Wenn Sie jedoch einen realistischeren Prototyp benötigen, reicht dies nicht aus. Dann würde ich vorschlagen, sich Axure oder Adobe Fireworks/Catalyst anzusehen (iRise ist viel zu teuer), und obwohl es Probleme gibt, würde ich mich für Axure entscheiden .

0
Geert

Ich benutze auch Pencil, obwohl es einige Nachteile hat:

  • no Table Data Handling: Wenn Sie eine Tabelle mit einem Drahtmodell versehen möchten, sind Sie verloren.
  • kein WordWrap in Textfeldern. Wenn ich versuche, etwas Lorem Ipsum zu platzieren, muss ich die Verpackung selbst machen. Das ist Scheiße.

ich mag dieses Tool jedoch sehr.

0
cukabeka

Manchmal benutze ich dieses Tool http://www.hotgloo.com/

0
512x512

Da es bei Ihrer Frage speziell um das Prototyping ging, gehe ich davon aus, dass Sie alle Schritte ausführen, die Sie vor dem Prototyping für erforderlich halten, z. B. Skizzieren usw.

Wenn Ihr Produkt über das Web geliefert wird, erstellen Sie Ihre Prototypen über das Web (HTML, CSS, JS). Am Ende ist es schneller, billiger und genauer als alles andere, was Sie verwenden könnten. Ich habe festgestellt, dass Tools wie Axure für einfache Dinge in Ordnung sind, aber dann eine steile Lernkurve erfordern, um etwas mäßig Komplexes zu tun. Zu diesem Zeitpunkt verbringen Sie Zeit damit, ein proprietäres Tool zu erlernen, wenn Sie Webstandards erlernen könnten, die auf lange Sicht für Sie vorteilhafter sind.

Wenn Sie sich Sorgen machen, dass ein Kunde denkt, es sei "fertig", können Sie das Styling bis zum Ende weglassen. Ich habe jedoch festgestellt, dass Ihr Prototyp umso einfacher zu bewerten ist, je "realer" er ist.

0
Craig Villamor

Es kommt wirklich darauf an, was das Projekt ist.

Wenn die Website, für die Sie einen Prototyp erstellen, nur wenige Seiten mit statischem Inhalt umfasst, ist die Verwendung eines Grafikeditors wie Photoshop oder Fireworks wahrscheinlich in Ordnung. Der Rat, Designelemente "um jeden Preis" vom Prototyping fernzuhalten, ist hier möglicherweise nicht angemessen.

Am anderen Ende des Spektrums, wo Sie eine große Anwendung mit vielen Anwendungsfällen erstellen, würde ich jedoch eher die Antwort von Jim Jarrett empfehlen. Ich würde hinzufügen, dass Apps in großem Maßstab ein iterativer Prozess sind (oder zumindest sein sollten): Sie werden Prototypen für Phase I und dann erneut Prototypen für eine Phase II-Version usw. erstellen. Jede dieser Phasen des Prototyping erfordert möglicherweise unterschiedliche Detaillierungsgrade . Möglicherweise möchten Sie am Build/Prototyp der aktuellen Phase arbeiten, oder es ist an der Zeit, zu den ersten Prinzipien zurückzukehren und von vorne zu beginnen.

0
skybondsor

Axure ist ein großartiges Tool für Wireframing/Prototyping/Spezifikation. Sie können sich auf das konzentrieren, was Sie erstellen, und Dinge wie Anmerkungen, Notizen und Interaktionen sind sehr einfach anzugeben.

Das Plus ist, dass wenn Sie Interaktionen angeben und Prototypen aus Ihren Drahtgittern generieren, diese Interaktionen in echte funktionierende Widgets übersetzt werden. (Axure generiert HTML-Prototypen)

Sie können auch ein Bildschirmdesign (z. B. in JPEG) verwenden, um das Bild zu importieren, Bereiche des Bildes mit dem Tool "Image Map" zu aktivieren und dann effektiv einen Prototyp mit höherer Wiedergabetreue zu erhalten!

Mit Axure können Sie auch Aktionen basierend auf Variablen erstellen (Sie können diese festlegen oder lesen). Es gibt auch das Konzept, ein Widget zum Generieren eines Ereignisses zu veranlassen. Sie können das Ereignis von einem anderen Widget abhören lassen, und dann kann dieses Widget auf irgendeine Weise reagieren.

Ich kann weiter und weiter machen ... Der Nachteil sind die Kosten ~ 550 $, aber die Zeitersparnis ist es absolut wert. Die Kundenbetreuung per E-Mail ist großartig. Normalerweise melden sie sich innerhalb von ein paar Stunden bei mir ... manchmal sofort.

0
milesmeow

Ich fand Mockingbird für einfache Drahtgitter in Ordnung. Ich werde Omnigraffle nicht so schnell verlassen, aber es ist ziemlich gut für ein webbasiertes Tool: http://gomockingbird.com/

0
fluxd

Schauen Sie sich App Sketcher (derzeit bei Release Candidate) an, um zu sehen, ob es Ihren Anforderungen entspricht. Es ist ein schnelles HTML-Prototyping-Tool zum Erstellen von Wireframe- und interaktiven Webanwendungsprototypen. Es verwendet einen eingebetteten WebKit-Browser als Entwurfsoberfläche, auf der Sie HTML-Komponenten, jQuery-UI-Komponenten und Web-Widgets (wie Google Maps und YouTube Player) hinzufügen und mit jQuery-Design und CSS-Eigenschaften formatieren können. Es können auch einfache Aktionen definiert werden. Benutzer können den Prototyp in ihrem Standardbrowser ausführen/testen und HTML/CSS/JavaScript-Quellen exportieren, sobald sie mit dem Design zufrieden sind. Dieses Tool ist eher auf Axure-ähnliche Erfahrungen ausgerichtet, legt jedoch den Schwerpunkt auf "Design im Browser für die Ausführung im Browser", da es sicherstellt, dass die Modelle/Drahtmodelle in der Entwicklungsphase mit Webtechnologien realisierbar sind.

Ich bin der Entwickler dieser Anwendung. Tut mir leid wegen dieser schamlosen Eigenwerbung. Trotzdem denke ich, dass es ein gutes HTML-Prototyping-Tool sein kann und einen Blick wert ist.

0
Feng Chen