Media Mampf 9. August 2010

            THEMA:
   Mockups / Prototyping mit
    Balsamiq bzw. HotGloo
       & kurze Einfü...
INHALT
1.Was sind Mockups?
2.Auf was muss man achten bei der Mockup
  Erstellung?
3.Wieso überhaupt Mockups erstellen?
4.B...
1. WAS SIND MOCKUPS?
●   Der Begriff Mockup bzw. Wireframe wird benutzt, um um einen
    sehr frühen konzeptuellen Prototy...
2. AUF WAS MUSS MAN ACHTEN
BEI DER MOCKUP ERSTELLUNG?
●   Nochmals: In erster Linie geht es um die Konzeption und nicht
  ...
3. WIESO ÜBERHAUPT
      MOCKUPS ERSTELLEN? 1/2
●   Man kann dem Kunden schon früh zeigen in welche Richtung
    es geht -...
3. WIESO ÜBERHAUPT
      MOCKUPS ERSTELLEN? 2/2
●   Durch die investierte Zeit für die Mockup Erstellung spart man
    in ...
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 schn...
6. HOTGLOO - Features
●   Positiv:
         –     Komplett webbasierend
         –     User Erstellung: Editor / Reviewer
...
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...
Mockups prototyping
Mockups prototyping
Mockups prototyping
Mockups prototyping
Mockups prototyping
Mockups prototyping
Mockups prototyping
Upcoming SlideShare
Loading in...5
×

Mockups prototyping

2,265

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,265
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mockups prototyping

  1. 1. Media Mampf 9. August 2010 THEMA: Mockups / Prototyping mit Balsamiq bzw. HotGloo & kurze Einführung in Mockups allgemein
  2. 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. 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. 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. 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. 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. 7. 4. BEISPIELE
  8. 8. 5. EINFÜHRUNG IN BALSAMIQ ● http://www.balsamiq.com/ ● Video: http://www.balsamiq.com/products/mockups
  9. 9. 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)
  10. 10. 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
  11. 11. 6. EINFÜHRUNG IN HOTGLOO ● http://www.hotgloo.com/ ● http://twwc.hotgloo.com
  12. 12. FAZIT ● Balsamiq – geeignet um schnell einen Mockup zu erstellen ● HotGloo – Geeignet für Projekte bei denen Interaktionen wichtig sind --> Prototyp
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×