1. Media Mampf 9. August 2010
THEMA:
Mockups / Prototyping mit
Balsamiq bzw. HotGloo
& kurze Einführung
in Mockups allgemein

2. INHALT
1.Was sind Mockups?
2.Auf was muss man achten bei der Mockup
Erstellung?
3.Wieso überhaupt Mockups erstellen?
4.Beispiele
5.Einführung in Balsamiq
6.Einführung in HotGloo

3. 1. WAS SIND MOCKUPS?
● Der Begriff Mockup bzw. Wireframe wird benutzt, um um einen
sehr frühen konzeptuellen Prototypen einer Website oder eines
Software-Frontends darzustellen.
● In erster Linie geht es um die Konzeption und nicht um das
Design!
● Man kann Mockups mittels einem Tool (Mockup Tool,
Photoshop, Illustrator etc.) oder auch auf Papier skizzieren. Die
einfachste und flexibelste Methode ist die beste Methode.

4. 2. AUF WAS MUSS MAN ACHTEN
BEI DER MOCKUP ERSTELLUNG?
● Nochmals: In erster Linie geht es um die Konzeption und nicht
um das Design!
● Man benutzt abstrakte Formen (Vierecke, Kreise, etc.) zur
Darstellung der einzelnen Elemente wie Inhalt, Funktionen oder
Navigation
● Das Benützen von einfachen Formen hilft einem sich auf das
Informationsdesign zu fokussieren (Usability, Erfüllt die Seite
ihren Zweck?)
● Man bestimmt die einzelnen Bereiche einer Webseite und wo
diese hingehören: Inhalt, Funktionen, Navigation

5. 3. WIESO ÜBERHAUPT
MOCKUPS ERSTELLEN? 1/2
● Man kann dem Kunden schon früh zeigen in welche Richtung
es geht --> Kunde kann dann auch früh ins Projekt eingreifen
falls ihm was nicht passt.
(Natürlich muss man den Kunden immer wieder darauf
hinweisen, dass dies nicht das endgültige Design ist!
--> Kunden schulen, Projektverlauf aufzeigen)
● Durch Mockups wird man nicht durch tolle Fotos oder Grafiken
„geblendet“ --> Konzentration auf Informationsdesign/Struktur
(Kunde wie auch Umsetzer)
● Design/Entwicklung: Durch das dann vorhandene Konzept kann
sich der Designer/Entwickler voll und ganz auf seine Arbeit
konzentrieren ohne Stopps wegen Unklarheiten oder
konzeptionellen Fehlern (Idealfall)

6. 3. WIESO ÜBERHAUPT
MOCKUPS ERSTELLEN? 2/2
● Durch die investierte Zeit für die Mockup Erstellung spart man
in der nachfolgenden Entwicklung ein vielfaches an Zeit!
● Je umfangreicher und komplexer ein Projekt ist desto wichtiger
ist es, dass man vor der Umsetzung saubere Mockups erstellt
● Kurz: Man spart Zeit, Geld und auch Nerven!

7. 4. BEISPIELE

15. 5. EINFÜHRUNG IN BALSAMIQ
● http://www.balsamiq.com/
● Video: http://www.balsamiq.com/products/mockups

16. 5. BALSAMIQ - Features
● Positiv:
– Sehr einfach und intuitiv zu handhaben
– Man ist sehr schnell darin
– Läuft auf Win, Mac und Linux via AIR-Player
– Ganz neu: Online-Version:
http://www.balsamiq.com/builds/mockups-web-demo/
● Negativ:
– Mann kann keine klickbare Version dem Kunden
schicken, ausser er hat das Tool auch (kostenpflichtig
oder 7 Tage Testversion)

17. 6. HOTGLOO - Features
● Positiv:
– Komplett webbasierend
– User Erstellung: Editor / Reviewer
– Echtzeit Zusammenarbeit (Chat Funktion)
– Sehr hohe Interaktionsmöglichkeiten
● Negativ:
– Komplexer
– Braucht mehr Zeit für die Einschaffung
– Monatliche Gebühr

18. 6. EINFÜHRUNG IN HOTGLOO
● http://www.hotgloo.com/
● http://twwc.hotgloo.com

19. FAZIT
● Balsamiq
– geeignet um schnell einen Mockup zu erstellen
● HotGloo
– Geeignet für Projekte bei denen Interaktionen
wichtig sind --> Prototyp