Mockups prototyping

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

    22-Oct-2014
  • Category

    Documents

  • view

    2.492
  • download

    0

description

 

Transcript of Mockups prototyping

Page 1: Mockups prototyping

Media Mampf 9. August 2010

THEMA:Mockups / Prototyping mit

Balsamiq bzw. HotGloo& kurze Einführung

in Mockups allgemein

Page 2: Mockups prototyping

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

Page 3: Mockups prototyping

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.

Page 4: Mockups prototyping

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

Page 5: Mockups prototyping

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)

Page 6: Mockups prototyping

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!

Page 7: Mockups prototyping

4. BEISPIELE

Page 8: Mockups prototyping
Page 9: Mockups prototyping
Page 10: Mockups prototyping
Page 11: Mockups prototyping
Page 12: Mockups prototyping
Page 13: Mockups prototyping
Page 14: Mockups prototyping
Page 15: Mockups prototyping

5. EINFÜHRUNG IN BALSAMIQ

● http://www.balsamiq.com/

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

Page 16: Mockups prototyping

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)

Page 17: Mockups prototyping

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

Page 18: Mockups prototyping

6. EINFÜHRUNG IN HOTGLOO

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

Page 19: Mockups prototyping

FAZIT

● Balsamiq– geeignet um schnell einen Mockup zu erstellen

● HotGloo– Geeignet für Projekte bei denen Interaktionen

wichtig sind --> Prototyp