Download - Designkantine mobile first_pdf
Namics.Denken. Präsentieren. Umsetzen.
Mobile Fi(rs)t.Zürich, März 2012
Besser Abspecken mit Design.
1
Namics.Denken. Verstehen. Designkantine.14.03.2012
Menü.
à Antipasti.
à Primi Piatti.
à Secondi Piatti.
à Dolci.
Mobile. Design. Abspecken. Namics.
2
Namics.Denken. Präsentieren. Umsetzen.
Antipasti.3
Namics.Denken. Präsentieren. Umsetzen.
Antipasti.
Fingerfood aus Viewports, Responsive Grids und Media Queries.
4
Namics.Denken. Verstehen. Designkantine.14.03.2012
Media Queries.
Antipasti. Abspecken. Design.
à http://www.anderssonwise.com/
5
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
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
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
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
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
Informationen können durch die Hand verdeckt werden
Namics.Denken. Verstehen. Designkantine.14.03.2012
Mouse vs. Touch.
Antipasti. Abspecken. Design.
911
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
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
Namics.Denken. Präsentieren. Umsetzen.
Primi Piatti.10.9.2010 1014
Namics.Denken. Präsentieren. Umsetzen.
PrimiPiatti.
Ein leichtes Soufflés aus Weissraum, feinste Funktionen und kernigen Botschaften nach Art des Hauses.
15
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
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
18
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
M M
MM
M
M
20
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
U U
UU
22
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
S
SS
S
S
S
S
S
24
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel.
Antipasti. Abspecken. Design.
T
T
T
T
T
T
26
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
Namics.Denken. Präsentieren. Umsetzen.
Secondi Piatti.28
Namics.Denken. Präsentieren. Umsetzen.
Secondi Piatti.
Erlesene Auswahl an Websites serviert auf dem heissen Stein.
29
Namics.Denken. Verstehen. Designkantine.14.03.2012
Mitmachen
Antipasti. Abspecken. Design.
à Schere
à Leim
à iPhone Schablonen
à M-U-S-T Raster
30
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Beispiel
Antipasti. Abspecken. Design.
32
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Resultate
Antipasti. Abspecken. Design.
34
Namics.Denken. Verstehen. Designkantine.14.03.2012
Resultate
Antipasti. Abspecken. Design.
35
Namics.Denken. Präsentieren. Umsetzen.
Dolci.36
Namics.Denken. Präsentieren. Umsetzen.
Dolci.
Frisches Sorbet aus Tipps & Tricks
37
Namics.Denken. Verstehen. Designkantine.14.03.2012
Ohne Maus - Kein Hover
Antipasti. Abspecken. Design.
à http://www.abo-checker.ch/phones
38
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Das Rad nicht neu erfinden
à APIs nutzen
Antipasti. Abspecken. Design.
Termine Orte Adressen Telefonnr. Sharing Bookmarks
40
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Unter der Haube – Datum/Uhrzeit
à Eingabe von Datum und Uhrzeit mittels Picker-Element
Antipasti. Abspecken. Design.
42
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
Namics.Denken. Verstehen. Designkantine.14.03.2012
Prototype Testing
Antipasti. Abspecken. Design.
à http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow
44
Namics.Denken. Verstehen. Designkantine.14.03.2012
Responsive Layout Preview
Antipasti. Abspecken. Design.
à http://www.responsinator.com
45
Namics.Denken. Verstehen. Designkantine.14.03.2012
… one last thing
Antipasti. Abspecken. Design.
46
Namics.Denken. Präsentieren. Umsetzen.
Grazie.47