mockups prototyping
Post on 22-Oct-2014
2.511 views
DESCRIPTION
TRANSCRIPT
![Page 1: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/1.jpg)
Media Mampf 9. August 2010
THEMA:Mockups / Prototyping mit
Balsamiq bzw. HotGloo& kurze Einführung
in Mockups allgemein
![Page 2: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/7.jpg)
4. BEISPIELE
![Page 8: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/8.jpg)
![Page 9: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/9.jpg)
![Page 10: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/10.jpg)
![Page 11: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/11.jpg)
![Page 12: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/12.jpg)
![Page 13: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/13.jpg)
![Page 14: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/14.jpg)
![Page 15: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/15.jpg)
5. EINFÜHRUNG IN BALSAMIQ
● http://www.balsamiq.com/
● Video: http://www.balsamiq.com/products/mockups
![Page 16: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/18.jpg)
6. EINFÜHRUNG IN HOTGLOO
● http://www.hotgloo.com/● http://twwc.hotgloo.com
![Page 19: Mockups prototyping](https://reader034.vdocuments.site/reader034/viewer/2022051108/54473f82b1af9f02148b45f4/html5/thumbnails/19.jpg)
FAZIT
● Balsamiq– geeignet um schnell einen Mockup zu erstellen
● HotGloo– Geeignet für Projekte bei denen Interaktionen
wichtig sind --> Prototyp