Media Mampf 9. August 2010

THEMA:Mockups / Prototyping mit

Balsamiq bzw. HotGloo& kurze Einführung

in Mockups allgemein

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

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.

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

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)

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!

4. BEISPIELE

5. EINFÜHRUNG IN BALSAMIQ

● http://www.balsamiq.com/

● Video: http://www.balsamiq.com/products/mockups

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)

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

6. EINFÜHRUNG IN HOTGLOO

● http://www.hotgloo.com/● http://twwc.hotgloo.com

FAZIT

● Balsamiq– geeignet um schnell einen Mockup zu erstellen

● HotGloo– Geeignet für Projekte bei denen Interaktionen

wichtig sind --> Prototyp