Paper
Prototyping
Mit Schere, Stift & Papier zur
Website
Created by Angelo Maron / Stefan Bauckmeier / Marko Hielscher
Wer sind wir?

Stefan Bauckmeier
@emrox

Angelo Maron
@MrRaffnix

Marko Hielscher
@MarkoHiel
Wo arbeiten wir?
wir betreuen Hamburger Traditionsunternehmen, internationalen
Konzerne, Internet-Portale, Agenturen und S...
Wer von euch hat schon mal eine Website programmiert oder war
am Erschaffen einer Website beteiligt?

Quelle: http://netza...
Prototyping
(Softwareentwicklung)
Prototyping bzw. Prototypenbau ist eine Methode der
Softwareentwicklung, die schnell zu ...
Prototypen Kategorien
Proof of Concept
Grob testen ob etwas funktionieren kann.
Beispiel: Kann man am Armgelenk den Puls elektronisch messen?
Visueller Prototyp
Das Aussehen des Produktes umgesetzt. Eignet sich für
Marktstudien, Nutzerfeedback, Vorabwerbung.
Beisp...
Formstudie
Funktioniert etwas in der geplanten Größe oder im Aussehen ohne
das es funktional sein muss.
Beispiel: Sitzt de...
Funktionaler Prototyp
Umsetzen der Funktionen des Produktes.
Beispiel: Zeigt mir die Uhr meinen richtigen Puls an?
Testexemplar
In geringen Stückzahlen produziertes funktionierendes Exemplar
zum Sammeln erster Erfahrungen.
Arten von Prototypen
in der Software-Entwicklung
Grafischer Prototyp
+ Grafisch ansprechende Umsetzung
- es lassen sich evtl. nicht alle Wüsche umsetzen
- Änderungen schne...
Programmierter Prototyp
+ Interaktiv
+ Kann Gefühl vermitteln, Anwendung ist kurz vor Fertigstellung
- Teuer zu entwickeln...
Powerpoint / Keynote
/ Prototyping-Tool
+ Je nach Tool mehr oder weniger flexibel
+ einfache Interaktivität
- Abstrakt
- n...
Paperprototype
+ Schnell zu erstellen
+ kann im Team erstellt werden
+ Jeder kann mitmachen
- Abstrakt / kein Design
Fehlproduktionen
vermeiden
Warum Prototyping wichtig ist ...
Quelle: http://volksbetrugpunktnet.files.wordpress.com/2013/06/euro-tasse.jpg
Quelle: http://mein-fun.com/data/media/5/bridge_construction_fail.jpg
Quelle: http://what-the-fail.com/wp-content/uploads/2011/03/emergency-exit-design-fail.jpg
Quelle: http://p5.focus.de/img/fotos/crop382473/4442719464-w1200-h627-o-q75-p5/c5.jpg
Beispiele im Web??
zu kleine Links
zu viel Text
fehlende Suche
Komplette Fehlschläge vermeiden durch Prototyping
Prototyping

Wie machen es andere Branchen?
Flugzeugbau
Autobau
Architektur
Flugzeugbau
Experimentalflugzeuge / Forschungsflugzeuge: Werden dazu
eingesetzt, neue Dinge zu erforschen(Antriebe, Bauwei...
Autobau
1. Digitale Prototyping (am Computer)
2. Concept Cars (für "Proof of Concept")
Architektur
1. Physische Modelle (in genauem Maßstab 1:2000 - 1:1) - aus z.B.
Holz, Pappen, Kunststoff
2. Computermodelle ...
Workshop
Best Practices
Timebox
Nur einer redet
Farben für Actions festlegen
Nicht zu detailliert
App-Idee und Workshop
Ein Kunde kommt und sagt:
"Ich brauche eine iPhone-App, bei der Männer ihre Klamotten
kaufen können....
Schritte nach dem Prototyping
weitere Prototypen
Businesslogik entwickeln
Design entwickeln
Entwürfe implementieren
Bedien...
Online-Tools
https://gomockingbird.com/mockingbird/
http://iphonemockup.lkmc.ch/
http://www.mockflow.com/
http://balsamiq....
Fragen?
Created by Angelo Maron / Stefan Bauckmeier / Marko
Hielscher
Ergebnisse der WorkshopGruppen
Paper Prototyping Workshop auf der SMWHH 2014
Paper Prototyping Workshop auf der SMWHH 2014
Paper Prototyping Workshop auf der SMWHH 2014
Paper Prototyping Workshop auf der SMWHH 2014
Paper Prototyping Workshop auf der SMWHH 2014
Paper Prototyping Workshop auf der SMWHH 2014
Paper Prototyping Workshop auf der SMWHH 2014
Paper Prototyping Workshop auf der SMWHH 2014
Paper Prototyping Workshop auf der SMWHH 2014
Nächste SlideShare
Wird geladen in …5
×

Paper Prototyping Workshop auf der SMWHH 2014

2.441 Aufrufe

Veröffentlicht am

Vortrag und Workshop auf der SMWHH 2014 über Paper Prototyping

Veröffentlicht in: Technologie
1 Kommentar
2 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
2.441
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
34
Aktionen
Geteilt
0
Downloads
10
Kommentare
1
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Paper Prototyping Workshop auf der SMWHH 2014

  1. 1. Paper Prototyping Mit Schere, Stift & Papier zur Website Created by Angelo Maron / Stefan Bauckmeier / Marko Hielscher
  2. 2. Wer sind wir? Stefan Bauckmeier @emrox Angelo Maron @MrRaffnix Marko Hielscher @MarkoHiel
  3. 3. Wo arbeiten wir? wir betreuen Hamburger Traditionsunternehmen, internationalen Konzerne, Internet-Portale, Agenturen und Startups Konzeption, Entwicklung, Implementierung und Betrieb von hochinteraktiven Webapplikationen mit Ruby on Rails
  4. 4. Wer von euch hat schon mal eine Website programmiert oder war am Erschaffen einer Website beteiligt? Quelle: http://netzakrobat.wordpress.com/2012/12/12/mediensozialisation-aufwachsen-im-medienzeitalter/fragezeichen-maennchen-line
  5. 5. Prototyping (Softwareentwicklung) Prototyping bzw. Prototypenbau ist eine Methode der Softwareentwicklung, die schnell zu ersten Ergebnissen führt und frühzeitiges Feedback bezüglich der Eignung eines Lösungsansatzes ermöglicht. Dadurch ist es möglich, Probleme und Änderungswünsche frühzeitig zu erkennen und mit weniger Aufwand zu beheben, als es nach der kompletten Fertigstellung möglich gewesen wäre. Quelle: https://de.wikipedia.org/wiki/Prototyping_(Softwareentwicklung)
  6. 6. Prototypen Kategorien
  7. 7. Proof of Concept Grob testen ob etwas funktionieren kann. Beispiel: Kann man am Armgelenk den Puls elektronisch messen?
  8. 8. Visueller Prototyp Das Aussehen des Produktes umgesetzt. Eignet sich für Marktstudien, Nutzerfeedback, Vorabwerbung. Beispiel: Lebensechte 3D Darstellung der neuen Uhr
  9. 9. Formstudie Funktioniert etwas in der geplanten Größe oder im Aussehen ohne das es funktional sein muss. Beispiel: Sitzt der Uhr gut am Arm?
  10. 10. Funktionaler Prototyp Umsetzen der Funktionen des Produktes. Beispiel: Zeigt mir die Uhr meinen richtigen Puls an?
  11. 11. Testexemplar In geringen Stückzahlen produziertes funktionierendes Exemplar zum Sammeln erster Erfahrungen.
  12. 12. Arten von Prototypen in der Software-Entwicklung
  13. 13. Grafischer Prototyp + Grafisch ansprechende Umsetzung - es lassen sich evtl. nicht alle Wüsche umsetzen - Änderungen schnell sehr kompliziert - Nur durch Grafiker erstellbar
  14. 14. Programmierter Prototyp + Interaktiv + Kann Gefühl vermitteln, Anwendung ist kurz vor Fertigstellung - Teuer zu entwickeln - Änderungen schnell sehr kompliziert - Kann endgültiges Programm zu früh festlegen - Nur durch Programmierer erstellbar
  15. 15. Powerpoint / Keynote / Prototyping-Tool + Je nach Tool mehr oder weniger flexibel + einfache Interaktivität - Abstrakt - nur durch Einzelperson erstellbar - Einarbeitung in Tool erforderlich
  16. 16. Paperprototype + Schnell zu erstellen + kann im Team erstellt werden + Jeder kann mitmachen - Abstrakt / kein Design
  17. 17. Fehlproduktionen vermeiden Warum Prototyping wichtig ist ...
  18. 18. Quelle: http://volksbetrugpunktnet.files.wordpress.com/2013/06/euro-tasse.jpg
  19. 19. Quelle: http://mein-fun.com/data/media/5/bridge_construction_fail.jpg
  20. 20. Quelle: http://what-the-fail.com/wp-content/uploads/2011/03/emergency-exit-design-fail.jpg
  21. 21. Quelle: http://p5.focus.de/img/fotos/crop382473/4442719464-w1200-h627-o-q75-p5/c5.jpg
  22. 22. Beispiele im Web?? zu kleine Links zu viel Text fehlende Suche
  23. 23. Komplette Fehlschläge vermeiden durch Prototyping
  24. 24. Prototyping Wie machen es andere Branchen? Flugzeugbau Autobau Architektur
  25. 25. Flugzeugbau Experimentalflugzeuge / Forschungsflugzeuge: Werden dazu eingesetzt, neue Dinge zu erforschen(Antriebe, Bauweisen etc.) Quelle: http://commons.wikimedia.org/wiki/File:Vought_V.173.jpg
  26. 26. Autobau 1. Digitale Prototyping (am Computer) 2. Concept Cars (für "Proof of Concept")
  27. 27. Architektur 1. Physische Modelle (in genauem Maßstab 1:2000 - 1:1) - aus z.B. Holz, Pappen, Kunststoff 2. Computermodelle (CAAD/CAAM) Hier lässt sich viel simulieren (z.B. Physik, Beleuchtung, Thermik) Quelle: http://de.wikipedia.org/wiki/Modell_(Architektur)
  28. 28. Workshop
  29. 29. Best Practices Timebox Nur einer redet Farben für Actions festlegen Nicht zu detailliert
  30. 30. App-Idee und Workshop Ein Kunde kommt und sagt: "Ich brauche eine iPhone-App, bei der Männer ihre Klamotten kaufen können." "Also eigentlich ein Zalando - aber nur für Männer." "JA GENAU!"
  31. 31. Schritte nach dem Prototyping weitere Prototypen Businesslogik entwickeln Design entwickeln Entwürfe implementieren Bedienabläufe definieren
  32. 32. Online-Tools https://gomockingbird.com/mockingbird/ http://iphonemockup.lkmc.ch/ http://www.mockflow.com/ http://balsamiq.com http://www.invisionapp.com/ App: POP
  33. 33. Fragen? Created by Angelo Maron / Stefan Bauckmeier / Marko Hielscher
  34. 34. Ergebnisse der WorkshopGruppen

×