Tools für Paper-Prototyping und Wireframing
in der Produktentwicklung für Web & Mobile
Stefan Behrendt, DSP-Partners
Oktob...
Inhalt
 Methoden zur Erstellung von Produktkonzepten
- Visuelle vs. textbasierte Ansätze
- Vor- und Nachteile
 Paper Pro...
Erstellung von Produktkonzepten .1
Visuelle Ansätze

+

Vorteile

Paper-Prototyping

Textbasierte Ansätze
Digitale Wirefra...
Erstellung von Produktkonzepten .2
Visuelle Ansätze

-

Nachteile

Paper-Prototyping




Schwierig, wenn Teams verteilt
...
Paper-Prototyping Tools .1
Prototyping Notizblöcke


Diese Notizblöcke enthalten vorgefertigte Geräte-Umrisse (Browser, i...
Paper-Prototyping Tools .2
Weitere Hilfsmittel
 Neben den Templates und Notizblöcken gibt es zwei weitere interessante „H...
Standard Grafik-Programme vs. Wireframing-Tools
Standard Grafik-Programme
Powerpoint, Visio, Photoshop, Word, Excel,
Indes...
Übersicht Digitale Wireframing-Tools
Client-basiert

Penultimate

Browser-basiert

Omnigraffle

Quelle: Firmen-Websites, D...
Digitale Wireframing-Clients
Tool

Plattformen

Preis-Modell

Kosten [US$]

Adobe Fireworks

Mac, Windows

Subscription

4...
Webbasierte Wireframing-Tools
Bemerkungen

Website

kostenlos - 99$

pro Monat

http://cacoo.com

Subscription

kostenlos
...
Stefan Behrendt
Founder I Managing Partner
DSP-Partners
stefan.behrendt@dsp-partners.com
www.dsp-partners.com
www.twitter....
Nächste SlideShare
Wird geladen in …5
×

Paper Prototyping in der Produktentwicklung

1.067 Aufrufe

Veröffentlicht am

English version
The presentation provides an overview of paper-prototyping and digital wireframing tools for the development of webservices and Apps. It compares the different tools and lists pros and cons.

-> Learn more about DSP-Partners publications on Product Management at:
http://bit.ly/DSP-PM

Deutsche Version
Diese Präsentation gibt einen Überblick über Tools für Paper-Prototyping und Digital Wireframing in der Entwicklung von Webservices und Smartphone-Apps und stellt die Vor- und Nachteile der verschiedenen Methoden gegenüber.

-> Weitere Publikationen von DSP-Partners zum Thema Produktmanagement unter: http://bit.ly/DSP-PM

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.067
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
100
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Paper Prototyping in der Produktentwicklung

  1. 1. Tools für Paper-Prototyping und Wireframing in der Produktentwicklung für Web & Mobile Stefan Behrendt, DSP-Partners Oktober 2013 Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74
  2. 2. Inhalt  Methoden zur Erstellung von Produktkonzepten - Visuelle vs. textbasierte Ansätze - Vor- und Nachteile  Paper Prototyping Tools  Standard Grafik-Programme vs. Wireframing-Tools - Vor- und Nachteile  Digitale Wireframing-Tools - Übersicht - Produkte und Preise
  3. 3. Erstellung von Produktkonzepten .1 Visuelle Ansätze + Vorteile Paper-Prototyping Textbasierte Ansätze Digitale Wireframing-Tools  Schnelle, kostengünstige Erstellung von Ideenskizzen  Visueller Ansatz der die Produkte anfassbar macht  Schnelle Feedbackzyklen im Team und Kunden  Hilft es, dem Kunden, der Geschäftsführung, dem Marketing etc. die Produktidee visuell zu vermitteln    Haptischer Ansatz, der den Bedürfnissen von kreativen Produktmanagern und Designern entgegenkommt Einfachere Zusammenarbeit für Teams an einem Ort   Fördert die Interaktion mit den Kunden Verlinkungen in den Tools erlauben es, ganze Workflows zu simulieren Erlaubt es, die Ergebnisse elektronisch zu verbreiten und Feedback einzuholen – auch bei der Arbeit in verteilten Teams   Keine Einarbeitung in neue Tools nötig Hohe Geschwindigkeit bei Änderungen  z.T. automatische Überführung der Ergebnisse in HTML, Javascript  Keine Beschränkungen aus der Software oder dem Tool heraus (UIElemente etc.) Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74  Nutzt bestehende Vorgehensweisen und ITProgramme, primär Word oder anderen Texteditor  Erfordern vom Produktmanager keine Grafik-, Design- oder Layoutkenntnisse  Gute Kommunizierbarkeit in Richtung IT-Abteilungen  Erlaubt es, die Ergebnisse elektronisch zu verbreiten und Feedback einzuholen – auch bei der Arbeit in verteilten Teams
  4. 4. Erstellung von Produktkonzepten .2 Visuelle Ansätze - Nachteile Paper-Prototyping   Schwierig, wenn Teams verteilt arbeiten Textbasierte Ansätze Digitale Wireframing-Tools Langsam, sobald viele Veränderungen eingearbeitet werden müssen Sehr abstrakte Beschreibung  Kunde kann dazu schwer befragt werden Interne Kommunikation mit Bereichen wie Geschäftsführung, Marketing schwierig  Kann Begeisterung für das Produkt nicht vermitteln bzw   Kauf und Einarbeitung in neue Tools erforderlich (z.B. Photoshop, Balsamiq, …)    Nicht optimal für die Kommunikation mit Geschäftsführung oder Marketing und Vertrieb Nutzung von etablierten Tools (PowerPoint, Excel), die nicht 100% für diese Anwendung geschaffen wurden  Hang zum Perfektionismus („pixel perfect“), damit hoher Zeitaufwand  z.T. keine plattformübergreifenden Tools  Kein elektronisches Sharen und keine Workflows abbildbar Quelle: Foto http://www.flickr.com/photos/28786233@N03/4373457020; breki74
  5. 5. Paper-Prototyping Tools .1 Prototyping Notizblöcke  Diese Notizblöcke enthalten vorgefertigte Geräte-Umrisse (Browser, iPhone, iPad, etc. ), die die Seitenverhältnisse festlegen, und einzelne Interface-Elemente wie Buttons etc. enthalten  Beispiele für diese Produktkategorie sind    UXPin - kostenpflichtig Sketchbook – kostenpflichtig Behance Dot Grid Book – kostenpflichtig Prototyping-Templates zum Ausdrucken  Die elektronischen Templates liegen üblicherweise in Datenformaten wie PDF, Power-Point oder Photoshop vor – hier zwei Beispiele   Konigi Graph Paper – kostenlos, Spenden gewünscht MBTI Sketching Paper for Ideation – kostenlos
  6. 6. Paper-Prototyping Tools .2 Weitere Hilfsmittel  Neben den Templates und Notizblöcken gibt es zwei weitere interessante „Hardware“-Tools für das Paper Prototyping Phone Doo – beschreibbare Magnettafeln in Form eines iPhone (kostenpflichtig) UI-Stencils – eine Metall-Schablone mit UI-Elementen (kostenpflichtig)
  7. 7. Standard Grafik-Programme vs. Wireframing-Tools Standard Grafik-Programme Powerpoint, Visio, Photoshop, Word, Excel, Indesign, Illustrator + Vorteile Wireframing-Tools Balsamiq, Axure, Mock-Flow, … (siehe unten)  Bedienung ist meist gelernt, daher hohe Produktivität in der Erstellung von Wireframes  Spezialisiert für den Einsatz beim Wireframing mit Tools für Verlinkungen etc.  Software ist auf vielen Rechnern vorinstalliert bzw. es sind Viewer verfügbar  Grafik- und Designelemente für iPhone, Browser etc. meist vorhanden  Wireframes können weiter verfeinert und direkt als  Sharing und Collaboration meist integriert Grafiken für das UI verwendet werden  Keine Zusatzkosten wenn Software bereits vorhanden ist  Dienstleister wie Entwickler oder Designagenturen nutzen u.U. andere Tools  Hohe Performance da native Applikationen, meist PC/Mac-gestützt  Zusätzliche Lizenz- oder Subscription-Kosten  Templates und UI Elemente, die nicht im Tool Nachteile - Tools sind nicht auf Wireframing spezialisiert, z.B. Verlinkungen, Sharing, Collaboration, …  zeitraubend, wenn nicht mit fertigen Templates gearbeitet wird angelegt sind, können oftmals nicht manuell erstellt werden, z.B. bei Umstieg von iOS6 auf iOS7   Teilweise Insellösungen ohne Exportfunktion oder mit proprietären Formaten Quelle: Foto http://www.flickr.com/photos/35237095805@N01/4724099848; Al Abut
  8. 8. Übersicht Digitale Wireframing-Tools Client-basiert Penultimate Browser-basiert Omnigraffle Quelle: Firmen-Websites, DSP-Partners Analyse Flairbuilder iPhonemockup
  9. 9. Digitale Wireframing-Clients Tool Plattformen Preis-Modell Kosten [US$] Adobe Fireworks Mac, Windows Subscription 49,99 Axure Mac, Windows Lizenz 289 - 589 Linux, Mac, Windows Lizenz od. Subscription 79 einmalig od. www.balsamiq.com Subscription 12$/M Flairbuilder Mac, Windows Lizenz 99 einmalig www.flairbuilder.com Omnigraffle iPad, Mac Lizenz 49,99 einmalig www.omnigroup.com/omnigraffle Pencil Project Mac, Windows Open source kostenlos - http://pencil.evolus.vn Penultimate iPad, Mac Lizenz kostenlos zzgl. in-App Purchase ab 0,99 $ http://evernote.com/penultimate Balsamiq Mockups Bemerkungen Website pro Monat www.adobe.com/products/fireworks einmalig www.axure.com für URL bitte auf die Logos klicken Quelle: Firmen-Websites, DSP-Partners Analyse
  10. 10. Webbasierte Wireframing-Tools Bemerkungen Website kostenlos - 99$ pro Monat http://cacoo.com Subscription kostenlos pro Monat http://framebox.org Web-based Subscription kostenlos - 8,29 pro Monat www.gliffy.com Hotgloo Web-based (Flash) Subscription 14 - 54 pro Monat www.hotgloo.com iPhoneMockup Web-based Subscription kostenlos pro Monat http://iphonemockup.lkmc.ch iPlotz Web-based (Flash) Subscription kostenlos - 495$ pro Monat http://iplotz.com Justinmind Web-based Subscription 19 - 29 pro Monat www.justinmind.com Justproto I UXPin Web-based Subscription 14,99 pro Monat www.justproto.com Mockflow Web-based Subscription kostenlos - 99 pro Jahr www.mockflow.com Mockingbird Web-based Subscription 9 - 85 pro Monat http://gomockingbird.com Pidoco Web-based Subscription 9 - 59 pro Monat http://pidoco.com Protoshare Web-based Subscription 29 - 59 pro Monat www.protoshare.com Tool Plattformen Preis-Modell Kosten [US$] Cacoo Web-based Subscription Framebox Web-based Gliffy Quelle: Firmen-Websites, DSP-Partners Analyse für URL bitte auf die Logos klicken
  11. 11. Stefan Behrendt Founder I Managing Partner DSP-Partners stefan.behrendt@dsp-partners.com www.dsp-partners.com www.twitter.com/stbe

×