realtime prototyping | "mokk.me - das tool für alle fälle"
DESCRIPTION
Die Entwicklung von mobilen Applikationen stellen Informationsarchitekten vor eine neue Herausforderung. Um diese zu meistern haben wir ein Tool entwickelt, dass die Grenzen zwischen Konzeption und Umsetzung verschmelzen lässt. Herausgekommen ist dabei mokk.me (http://www.mokk.me).TRANSCRIPT
![Page 1: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/1.jpg)
IA-Konferenz
Realtime Prototyping„Ein Tool für alle Fälle“
München, 20. Mai 2011http://www.flickr.com/photos/polvero/3466964233/
![Page 2: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/2.jpg)
2,2 Mrd. EUR Umsatz und 10 Mio. verkaufte Smartphones, 400.000
Android und 366.000 iPhone Aktivierungen pro Tag, >300.000 iPhone Apps, >200.000 Android
Apps, 4,5 Mrd. App Installationen, 10 Mrd. App Downloads im
iTunes-Store
![Page 3: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/3.jpg)
#1 Mobiles Internet ist überall
![Page 4: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/4.jpg)
http://www.flickr.com/photos/alexandremainguenaud/5400861326/
Beim Kaffee trinken
![Page 5: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/chrisjl/5664339020/
Auf dem Weg zur Party
![Page 6: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/39708943@N07/4526333882/
Beim Kamelrennen
![Page 7: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/29071099@N05/3084995941/
Während dem Schlafen
![Page 8: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/8.jpg)
#2 Das Nutzungsverhalten ist anders
![Page 9: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/9.jpg)
http://www.flickr.com/photos/recompose/2303691635/
Viel Informationen auf engem Raum
![Page 10: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/10.jpg)
http://www.flickr.com/photos/alachia/4916667666/
Eingeschränkte Bedienung
![Page 11: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/11.jpg)
http://www.flickr.com/photos/39708943@N07/4526333882/
Die User sind fokussierter
![Page 12: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/12.jpg)
Was bedeutet das für uns?
![Page 13: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/13.jpg)
Das Projekt: Die Mobile App
![Page 14: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/14.jpg)
Wir starteten sofort mit unseren Tools: Flow-Charts Sitemaps Wireframes
![Page 15: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/15.jpg)
Wireframes
![Page 16: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/16.jpg)
simyo 12:34 PM
Rufnummer
simyo
Passwort
Einloggen
simyo 12:34 PM
0174 |
Passwort
Einloggen
simyo
Q W E R T Z U I O P
A S D F G H J K L
Y X C V B N M
_123 ReturnLeerzeichen
X
simyo 12:34 PM
Loginvorgang läuft
simyo
simyo 12:34 PM
Button 4 Button 5 Button 6
Button 1 Button 2 Button 3
simyologout
Datenverbrauch
1 GB600 MB
9,95!
15.-
aufladen
Ihr Guthaben
simyo 12:34 PM
9,95!
Ihr Guthaben
simyohome
15,- Aufladen
30,- Aufladen
50,- Aufladen
simyo 12:34 PM
simyozurück
15,- Euro Aufladen
Abbrechen
Bestätigen
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
simyo 12:34 PM
34,95!
Ihr Guthaben
simyohome
15,- Aufladen
30,- Aufladen
50,- Aufladen
simyo 12:34 PM
34,95!
Ihr Guthaben
simyozurück
15,- Aufladen
30,- Aufladen
50,- Aufladen
Danke
Aufladung erfolgreich
OK
Ihre Guthabenaufladung war erfolgreich. Sie können ab sofort mit Ihrem neuen Guthaben lostelefonieren.
simyo 12:34 PM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
Kostenstoppmonat:
von 07.09. bis 06.10.2010
Ihr Tarif: simyo Tarif
simyohome
Flat simyo
Flat FestnetzBestellt
Flat SMS
Daten 1GBaktiv
simyo 12:34 PM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
Kostenstoppmonat:
von 07.09. bis 06.10.2010
Ihr Tarif: simyo Tarif
simyozurück
Flat simyo
Flat FestnetzBestellt
Flat SMS
Daten 1GBaktiv
simyo 12:34 PM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
Kostenstoppmonat:
von 07.09. bis 06.10.2010
Ihr Tarif: simyo Tarif
simyozurück
Flat simyo
Flat FestnetzBestellt
Flat SMSBestellt
Daten 1GBaktiv
Danke
OK
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
simyo 12:34 PM
simyohome
Oktober
Gesamtsumme: 23,98 !
Einzelgespräche00:45:45 Min
9,53 !
SMS-Verbindungen22 SMS
1,98 !
MMS-Verbindungen0 MMS
0,00 !
Daten50000 Kilobytes
12,47 !
Mobilzahlungen 0,00 !
simyo 12:34 PM
simyozurück
Oktober
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
Einzelgespräche
simyo 12:34 PM
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
01.10.2010 | 14:47 Uhr0176 / 4567894 0,53 !00:00:22
simyozurück
weitere x Einträge laden
simyo 12:34 PM
Name
simyo sendenzurück
E-Mail oder Rufnummer
Senden
Freunden empfehlen:
_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit
Ihre Vorteile
Rechtliche Hinweise
simyo 12:34 PM
moreverbindungaufladenhome
Max Muster |
simyo sendenzurück
E-Mail oder Rufnummer
Senden
Freunden empfehlen:
_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit
Ihre Vorteile
Rechtliche Hinweise
Q W E R T Z U I O P
A S D F G H J K L
Y X C V B N M
_123 ReturnLeerzeichen
X
simyo 12:34 PM
Name
simyo sendenzurück
E-Mail oder Rufnummer
Senden
Freunden empfehlen:
_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit
Ihre Vorteile
Rechtliche Hinweise
Danke
OK
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
simyo 12:34 PM
simyohome
News
simyo 12:34 PM
simyozurück
§1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
§2 Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
§2 Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum
Disclamer
simyo 12:34 PM
simyozurück
§1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Lorem ipsum dolor sit amet
§2 Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
§3 Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
Rechtliche Hinweise
simyo 12:34 PM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
_ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam._ Lorem ipsum dolor sit amet, consetetur _ Lorem ipsum dolor sit amet, consetetur sadipscing
Ihr Tarif: Basic Tarif
simyozurück
www.simyo.de
Login ProzessGuthaben aufladen
Verbindungen
Tarifoptionen
Tell a Friend
News
Impressum
PrepaidHome
simyo 12:34 PM
0174 |
Passwort
Einloggen
simyo
Q W E R T Z U I O P
A S D F G H J K L
Y X C V B N M
_123 ReturnLeerzeichen
X
Haben Sie sich vertippt?
Bitte überprüfen Sie, ob sie Ihre Rufnummer und Ihr Passwort richtig eingegeben haben.
OK
simyo 12:34 PM
Name
simyo sendenzurück
E-Mail oder Rufnummer
Senden
Freunden empfehlen:
_ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit _ Lorem ipsum dolor sit amit
Ihre Vorteile
Rechtliche Hinweise
Einladung fehlgeschlagen
OK
Bitte Überprüfen Sie ob sie alle Felder richtig ausgefüllt haben.
simyo 12:34 PM
simyozurück
Rechnungen
simyo 12:34 PM
simyozurück
FLAT SMS bestellen
Abbrechen
Bestätigen
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
simyo 12:34 PM
simyohome
Rechnungen
Basic Tarif
impressum
01.10.2010GuthabengesteuerteAufladung
30,00 !
01.10.2010GuthabengesteuerteAufladung
30,00 !
Das kann sich sehen lassen: simyo bietet die günstigste Handy-Flatrate für Gespräche ins deutsche Festnetz. http://bit.ly/cWZrwZ
5:17 AM Oct 22nd Via TweetDeck
RT @germanstudent: Interessantes Angebot von simyo für iPhone/iPad Besitzer. Klasse Tarifoptionen und 39! Kostenstopp http://teile.es/k5
5:17 AM Oct 22nd Via TweetDeck
RT @germanstudent: Interessantes Angebot von simyo für iPhone/iPad Besitzer. Klasse Tarifoptionen und 39! Kostenstopp http://teile.es/k5
5:17 AM Oct 22nd Via TweetDeck
RT @germanstudent: Interessantes Angebot von simyo für iPhone/iPad Besitzer. Klasse Tarifoptionen und 39! Kostenstopp http://teile.es/k5
Das kann sich sehen lassen: simyo bietet die günstigste Handy-Flatrate für Gespräche ins deutsche Festnetz. http://bit.ly/cWZrwZ
5:17 AM Oct 22nd Via TweetDeck
Das kann sich sehen lassen: simyo bietet die günstigste Handy-Flatrate für Gespräche ins deutsche Festnetz. http://bit.ly/cWZrwZ
5:17 AM Oct 22nd Via TweetDeck
01.10.2010Aufladung Guthaben 30,00 !
01.10.2010Aufladung Guthaben 30,00 !
01.10.2010Aufladung Guthaben 30,00 !
01.10.2010Aufladung Guthaben 30,00 !
simyo 12:34 PM
34,95!
Ihr Guthaben
simyozurück
15,- Aufladen
30,- Aufladen
50,- Aufladen
Danke
Aufladung fehlgeschlagen
OK
Ihre Guthabenaufladung war leider nicht erfolgreich. Bitte versuchen Sie es erneut.
simyo 12:34 PM
9,95!
Ihr Guthaben
simyohome
um Ihr Guthaben mobile aufladen zu können, müssen Sie [blubb] als Zahlart wählen.
Bitte loggen Sie sich auf www.simyo.de ein und wechseln Sie Ihre Zahlart auf [blubb]
Aufladung leider nicht möglich
simyo 12:34 PM
simyozurück
FLAT SMS bestellen
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Bestellung leider nicht möglich
um die FLAT SMS Tarifoption mobile bestellen zu können, müssen Sie [blubb] als Zahlart wählen.
Bitte loggen Sie sich auf www.simyo.de ein und wechseln Sie Ihre Zahlart auf [blubb]
Anzeige der Rechnungs PDF
Falsche Zahlungsmethode
Aufladung fehlgeschlagen
Einladung fehlgeschlagen
simyo 12:34 PM
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
Kostenstoppmonat:
von 07.09. bis 06.10.2010
Ihr Tarif: simyo Tarif
simyozurück
Flat simyo
Flat FestnetzBestellt
Flat SMS
Daten 1GBaktiv
Bestellung fehlgeschlagen
OK
Ihre Bestellung konnte leider nicht durchgeführt werden. Bitte versuchen Sie es erneut.
Falscher Login
simyo 12:34 PM
Button 4 Button 5 Button 6
Button 1 Button 2 Button 3
simyologout
Datenverbrauch
1 GB600 MB
9,95!
Letzte Monatsrechnung
PostpaidHome
simyo 12:34 PM
simyozurück
Oktober
Einzelgespräche
Bestellung fehlgeschlagen
Falsche Zahlungsmethode
simyo 12:34 PM
simyozurück
Sitemap
![Page 17: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/17.jpg)
Flow-Chart integrieren
![Page 18: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/18.jpg)
Sitemap und Flow-Chart verschmelzen zu einem Wire-Flow
![Page 19: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/19.jpg)
Der Use-Case:Ein Kunde bricht den Prozess„Aufladen“ ab.
![Page 20: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/20.jpg)
Darstellung im Wire-Flow
![Page 21: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/21.jpg)
Der Use-Case mit herkömmlichen Prototypen ohne Animation
![Page 22: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/22.jpg)
![Page 23: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/23.jpg)
![Page 24: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/24.jpg)
![Page 25: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/25.jpg)
Habe ich es jetzt
abgebrochen
Müsste hier nicht eine
Rückmeldung stehen
![Page 26: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/26.jpg)
Der gleiche Use-Case dieses Mal mit Animation
![Page 27: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/27.jpg)
Das App Feeling
Slide Back
![Page 28: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/28.jpg)
Das „App-Feeling“ ist entscheidend für die User Experience.
![Page 29: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/29.jpg)
„The medium is the message.“Marshall McLuhan
![Page 30: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/30.jpg)
Aber wie kann man das App-Feeling darstellen
![Page 31: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/31.jpg)
Omnigraffle
![Page 32: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/32.jpg)
Omnigraffle
Viele Schablonen die einfach zu integrieren sind+
![Page 33: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/33.jpg)
Omnigraffle
Viele Schablonen die einfach zu integrieren sind+
Keine Animationen und interaktive Module-
![Page 34: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/34.jpg)
Omnigraffle
Viele Schablonen die einfach zu integrieren sind+
Keine Animationen und interaktive Module-
Nur als Desktopvariante vorhanden-
![Page 35: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/35.jpg)
balsamiq
![Page 36: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/36.jpg)
balsamiq
Beteiligung des Teams über die Clipboard-Funktion+
![Page 37: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/37.jpg)
balsamiq
Beteiligung des Teams über die Clipboard-Funktion+
Zusatz Software für einen Prototyp benötigt-
![Page 38: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/38.jpg)
justinmind
![Page 39: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/39.jpg)
justinmind
Einfach zu erstellender Klickdummy+
![Page 40: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/40.jpg)
justinmind
Einfach zu erstellender Klickdummy+
Austausch nur über Export möglich-
![Page 41: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/41.jpg)
justinmind
Einfach zu erstellender Klickdummy+
Austausch nur über Export möglich-
Nur als Desktopvariante vorhanden-
![Page 42: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/42.jpg)
mockability
![Page 43: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/43.jpg)
mockability
Gute Animationen und echtes App-Feeling+
![Page 44: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/44.jpg)
mockability
Gute Animationen und echtes App-Feeling+
Gut in den internen Wireframe-Prozess integrierbar+
![Page 45: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/45.jpg)
mockability
Gute Animationen und echtes App-Feeling+
Gut in den internen Wireframe-Prozess integrierbar+
Nur auf dem iPhone verwendbar-
![Page 46: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/46.jpg)
Ein Tool für alle Fälle
![Page 47: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/47.jpg)
Ein Tool für alle Fälle
Es muss jederzeit von allen Teammitgliedern erreichbar sein
![Page 48: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/48.jpg)
Ein Tool für alle Fälle
Es muss jederzeit von allen Teammitgliedern erreichbar sein
Es muss ohne Programmierkenntnisse bedienbar sein
![Page 49: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/49.jpg)
Ein Tool für alle Fälle
Es muss jederzeit von allen Teammitgliedern erreichbar sein
Es muss ohne Programmierkenntnisse bedienbar sein
Es muss ein echtes „App-Feeling“ erzeugt werden
![Page 50: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/50.jpg)
Ein Tool für alle Fälle
Es muss jederzeit von allen Teammitgliedern erreichbar sein
Es muss ohne Programmierkenntnisse bedienbar sein
Es muss ein echtes „App-Feeling“ erzeugt werden
Der Klickdummy muss auf verschiedenen Devices laufen
![Page 51: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/51.jpg)
Ein Tool für alle Fälle
Es muss jederzeit von allen Teammitgliedern erreichbar sein
Es muss ohne Programmierkenntnisse bedienbar sein
Es muss ein echtes „App-Feeling“ erzeugt werden
Der Klickdummy muss auf verschiedenen Devices laufen
Der Klickdummy soll als Sprungbrett für die Umsetzung dienen
![Page 52: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/52.jpg)
Illustration: Steffen Stäuber
![Page 53: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/53.jpg)
easily create mobile App mocks
mokk.me
![Page 54: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/54.jpg)
easily create mobile App mocks
mokk.me
![Page 55: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/55.jpg)
Das ist mokk.me
![Page 56: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/56.jpg)
Das ist mokk.me
mokk.me ist eine reine Browser Applikation ohne Backend
![Page 57: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/57.jpg)
Das ist mokk.me
mokk.me ist eine reine Browser Applikation ohne Backend
mokk.me basiert auf HTML5, CSS3, jQuery und einer CouchDB
![Page 58: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/58.jpg)
Das ist mokk.me
mokk.me ist eine reine Browser Applikation ohne Backend
mokk.me basiert auf HTML5, CSS3, jQuery und einer CouchDB
Für den Look der Elemente und der Animationen wird kein Framework(zB. jQtouch oder sencha) verwendet.
![Page 59: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/59.jpg)
Das ist mokk.me
mokk.me ist eine reine Browser Applikation ohne Backend
mokk.me basiert auf HTML5, CSS3, jQuery und einer CouchDB
Für den Look der Elemente und der Animationen wird kein Framework(zB. jQtouch oder sencha) verwendet.
Statt dessen wird eine Widget-Library eingesetzt, die es erlaubt unterschiedliche Looks zu generieren
![Page 60: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/60.jpg)
Einfache Erstellung der Screens
![Page 61: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/61.jpg)
Verlinkungen und Übergänge
![Page 62: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/62.jpg)
Speichern und Testen
![Page 63: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/63.jpg)
User Experience
DesignerTechniker
Kunde
Speichern und Testen
![Page 64: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/64.jpg)
User Experience
DesignerTechniker
Kunde
Speichern und Testen
mokk.me
![Page 65: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/65.jpg)
User Experience
DesignerTechniker
Kunde
Speichern und Testen
mokk.me
Prototyp WEB
Prototyp Mobile
![Page 66: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/66.jpg)
Unterschiedliche Looks
![Page 67: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/67.jpg)
Das Ergebnis: Feinstes HTML5
![Page 68: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/68.jpg)
Das Ergebnis: Feinstes HTML5
![Page 69: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/69.jpg)
Und.... Action: http://www.mokk.me
![Page 70: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/70.jpg)
Special Thanks to:
Thomas „TheReincarnator“ Jacob
![Page 71: Realtime Prototyping | "mokk.me - Das Tool für alle Fälle"](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c44d0a4a79598c398b4667/html5/thumbnails/71.jpg)
Vielen DankOliver Annen, User [email protected] Twitter: @arxoren
SinnerSchrader Deutschland GmbHVölckersstraße 3822765 Hamburgwww.sinnerschrader.com