Kurze Präsentation über den Einsatz von Mockup-Tools in der Softwareentwicklung.

1. GUI-MOCKUPS
in der Softwareentwicklung
Scott McCloud: Understanding Comics (1993)

2. PROBLEME / AUFWAND
&'4*77='+$
8#().#9$%$
!"##$%$&'()*+$ ,-./0(#'0#1$ ,)2(2(34$ ;<*6=*>2'$ 5#6#*7#$
:4"*(#$

3. PROBLEME / AUFWAND
&'4*77='+$
8#().#9$%$
!"##$%$&'()*+$ ,-./0(#'0#1$ ,)2(2(34$ ;<*6=*>2'$ 5#6#*7#$
:4"*(#$
Man redet über Farben und Formen statt über
Funktionen
Zu Design hat jede(r) eine Meinung
Entwickler müssen nicht Designer sein

4. LÖSUNGSANSATZ
&'4*77='+$
8#().#9$%$
!"##$%$&'()*+$ ,-./0(#'0#1$ ,)2(2(34$ ;<*6=*>2'$ 5#6#*7#$
:4"*(#$
?2/@=4$ A#7.+'$
Vor der Programmierung wird ein Mockup der Software mit den
gewünschten Funktionen diskutiert
Ein Mockup enthält Anordnung, Seitenabfolge und Funktionen der
Software
Das eigentliche Design (Farben, Schriften, Grafiken) kann später
(professionell) hinzugefügt werden

5. IN DER PERFEKTEN
WELT...
&'?*00-'+$
,#*(-)#. 56'06.
!"##$%$&'()*+$ =61>-?0$ 78*3-*96'$ :;412(#'2#<$
/-'012340(#$ 34"4#)-'+$
Rollenverteilung: wer übernimmt in einem Projekt die Rolle des Mockup-
Gestalters?
Projektleiter?
Programmierer?
Fachwissenschaftler?
Dezidierter GUI Mitarbeiter?
Kollaborativ?

6. STUFEN DER
ABSTRAKTION

7. PIXEL-PERFECT DESIGN

8. GROBE ANMUTUNG

9. WIREFRAME

10. WIREFRAME

11. WIREFRAME

12. DARUM WIREFRAMES
Man wird früh gezwungen, sich über logischen Aufbau und
Funktionen der Seite klar zu werden,
ohne dass man dabei von konkretem Design abgelenkt wird
Es ist binnen Minuten erstellt
Alternativen können schnell diskutiert / interaktiv in einer
Sitzung erstellt werden
Sogar Nutzertests sind bereits möglich, zur Not mit
Papierausdrücken

13. DREI STUFEN FÜR
MOCKUPS - WERKZEUGE
Pixel-perfect: Photoshop,
GIMP
Generelle Anmutung:
PowerPoint, Keynote
Wireframe:
BalsamiqMockups,
Firefox Pencil

14. VERFAHREN
Werkzeugleiste
Optionen

15. FIREFOX PENCIL
PROJECT
Open source / läuft über Firefox Browser-Engine / Plattformübergreifend /
unterschiedliche Stile (Windows, Wireframe, ...) / etwas träge in der
Bedienung / eingeschränkter Funktionsumfang

16. BALSAMIQ MOCKUPS
Muss lizensiert werden / Adobe Air Framework /
plattformübergreifend / großer Funktionsumfang /
nur ein Design / flexibler Export

17. INTEROPERABILITÄT
Firefox Pencil:
XML Dateien / wenig Unterstützung anderer
Clients / kann in Gruppen gut installiert werden /
höhere Lernkurve
Balsamiq Mockups:
XML Dateien / „Industriestandard“ (iPad Variante
etc.) / Lizenzpflichtig (SUB: 25 Lizenzen)
Alle: Export als PDF, Grafiken

18. LINKS
http://balsamiq.com/products/mockups
http://pencil.evolus.vn