Download - Designkantine mobile first_pdf
![Page 1: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/1.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Mobile Fi(rs)t.Zürich, März 2012
Besser Abspecken mit Design.
1
![Page 2: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/2.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Menü.
à Antipasti.
à Primi Piatti.
à Secondi Piatti.
à Dolci.
Mobile. Design. Abspecken. Namics.
2
![Page 3: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/3.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Antipasti.3
![Page 4: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/4.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Antipasti.
Fingerfood aus Viewports, Responsive Grids und Media Queries.
4
![Page 5: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/5.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Media Queries.
Antipasti. Abspecken. Design.
à http://www.anderssonwise.com/
5
![Page 6: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/6.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
à http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Viewport.
Antipasti. Abspecken. Design.
6
![Page 7: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/7.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Responsive Layout.
Antipasti. Abspecken. Design.
à http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
7
![Page 8: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/8.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Responsive Layout.
Antipasti. Abspecken. Design.
C
D
BA
C
D
B
A
C
D
B
A
C
D
BA
8
![Page 9: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/9.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Breakpoints.
Antipasti. Abspecken. Design.
C
D
BA
C
D
B
A
C
D
B
A
C
D
BA
Breakpoint 1 Breakpoint 2 Breakpoint 3
9
![Page 10: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/10.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Breakpoints.
Antipasti. Abspecken. Design.
Breakpoint 1
iPhone320px
320px
Breakpoint 2
720px
Breakpoint 3
980px
iPhone480px
iPad768px
iPad1024px
MacBook Air 13”1440px
10
![Page 11: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/11.jpg)
Informationen können durch die Hand verdeckt werden
Namics.Denken. Verstehen. Designkantine.14.03.2012
Mouse vs. Touch.
Antipasti. Abspecken. Design.
911
![Page 12: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/12.jpg)
Informationen können durch die Hand verdeckt werden
Namics.Denken. Verstehen. Designkantine.14.03.2012
Mouse vs. Touch.
Antipasti. Abspecken. Design.
Klickflächeca. 29x44px
12
![Page 13: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/13.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Mouse vs. Touch.
Antipasti. Abspecken. Design.
Klickflächeca. 29x44px
Informationen können durch die Hand verdeckt werden
13
![Page 14: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/14.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Primi Piatti.10.9.2010 1014
![Page 15: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/15.jpg)
Namics.Denken. Präsentieren. Umsetzen.
PrimiPiatti.
Ein leichtes Soufflés aus Weissraum, feinste Funktionen und kernigen Botschaften nach Art des Hauses.
15
![Page 16: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/16.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Inhalt und Relevanz.
Antipasti. Abspecken. Design.
Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters
Prim
ärSe
kund
ärUnterstützend(Supplemental)
Essentiell(Mandatory)
Belanglos(Trivial)
Nützlich(Useful)
16
![Page 17: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/17.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
MUST-Methode.
Antipasti. Abspecken. Design.
Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters
Prim
ärSe
kund
ärUnterstützend(Supplemental)
Essentiell(Mandatory)
Belanglos(Trivial)
Nützlich(Useful)
17
![Page 18: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/18.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
18
![Page 19: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/19.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Essentiell (Mandatory).
Antipasti. Abspecken. Design.
à Informiert über den Zweck / Absender der Website
à Wird exakt wegen dieser Funktion / Information besucht
à Wichtige Informationen und Botschaften
à Primäre Informationen und Funktionen aus Sicht des Betrachters
19
![Page 20: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/20.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
M M
MM
M
M
20
![Page 21: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/21.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Nützlich (Useful).
Antipasti. Abspecken. Design.
à Erschliesst weitere primäre Inhalte / Funktionen
à Angebot kann ohne diesem Element nicht genutzt werden
à Primäre Informationen und Funktionen aus Sicht des Anbieters
21
![Page 22: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/22.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
U U
UU
22
![Page 23: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/23.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Unterstützend (Supplemental).
Antipasti. Abspecken. Design.
à Veranschaulicht die Funktionsweise des Angebotes
à Zusätzliche Zugänge zur Erschliessung der Inhalte
à Zusatzfunktionen die den Mehrwert/Komfort erhöhen
à Sekundäre Informationen und Funktionen aus Sicht des Betrachters
23
![Page 24: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/24.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
S
SS
S
S
S
S
S
24
![Page 25: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/25.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Belanglos (Trivial).
Antipasti. Abspecken. Design.
à Zusätzliche Angebote und Funktionen
à Hygieneelemente
à Sekundäre Informationen und Funktionen aus Sicht des Anbieters
25
![Page 26: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/26.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
T
T
T
T
T
T
26
![Page 27: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/27.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
M
M
M M
M
MU U
UU
S
SS
S
T
T
T
T
T
S T
S
S27
S
![Page 28: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/28.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Secondi Piatti.28
![Page 29: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/29.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Secondi Piatti.
Erlesene Auswahl an Websites serviert auf dem heissen Stein.
29
![Page 30: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/30.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Mitmachen
Antipasti. Abspecken. Design.
à Schere
à Leim
à iPhone Schablonen
à M-U-S-T Raster
30
![Page 31: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/31.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Mitmachen
Antipasti. Abspecken. Design.
Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters
Prim
ärSe
kund
är
Unterstützend(Supplemental)
Essentiell(Mandatory)
Belanglos(Trivial)
Nützlich(Useful)
31
![Page 32: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/32.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel
Antipasti. Abspecken. Design.
32
![Page 33: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/33.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Ablauf
Antipasti. Abspecken. Design.
à ca. 15 Min Priorisieren auf der Matrix
à ca. 10 Min Layout auf der iPhone Schablone
à ca. 10. Präsentation der Ergebnisse
33
![Page 34: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/34.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Resultate
Antipasti. Abspecken. Design.
34
![Page 35: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/35.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Resultate
Antipasti. Abspecken. Design.
35
![Page 36: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/36.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Dolci.36
![Page 37: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/37.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Dolci.
Frisches Sorbet aus Tipps & Tricks
37
![Page 38: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/38.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Ohne Maus - Kein Hover
Antipasti. Abspecken. Design.
à http://www.abo-checker.ch/phones
38
![Page 39: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/39.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Responsive Grids
Antipasti. Abspecken. Design.
à http://foundation.zurb.com/
à http://lessframework.com/
à http://framelessgrid.com/
à http://cssgrid.net/
à http://stuffandnonsense.co.uk/projects/320andup/
39
![Page 40: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/40.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Das Rad nicht neu erfinden
à APIs nutzen
Antipasti. Abspecken. Design.
Termine Orte Adressen Telefonnr. Sharing Bookmarks
40
![Page 41: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/41.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Keine Formulare verbiegen
à Dropdowns, werden je nach Plattform anders dargestellt und sind für die jeweilige Eingabeform optimal angepasst
Antipasti. Abspecken. Design.
41
![Page 42: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/42.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Unter der Haube – Datum/Uhrzeit
à Eingabe von Datum und Uhrzeit mittels Picker-Element
Antipasti. Abspecken. Design.
42
![Page 43: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/43.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Unter der Haube - Text
à Anpassen der Tastatur für Ziffern, Buchstaben, E-Mail, etc.
Antipasti. Abspecken. Design.
43
![Page 44: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/44.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Prototype Testing
Antipasti. Abspecken. Design.
à http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow
44
![Page 45: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/45.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
Responsive Layout Preview
Antipasti. Abspecken. Design.
à http://www.responsinator.com
45
![Page 46: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/46.jpg)
Namics.Denken. Verstehen. Designkantine.14.03.2012
… one last thing
Antipasti. Abspecken. Design.
46
![Page 47: Designkantine mobile first_pdf](https://reader033.vdokument.com/reader033/viewer/2022060111/55642623d8b42a2a0a8b5a20/html5/thumbnails/47.jpg)
Namics.Denken. Präsentieren. Umsetzen.
Grazie.47