Designkantine mobile first_pdf

Besser Abspecken mit Design.

Mobile Fi(rs)t.
Zürich, März 2012
1 Denken. Präsentieren. Umsetzen. Namics.

Mobile. Design. Abspecken. Namics.

Menü.
à Antipasti.
à Primi Piatti.
à Secondi Piatti.
à Dolci.

2 14.03.2012 Denken. Verstehen. Designkantine. Namics.

Antipasti.

Fingerfood aus Viewports, Responsive
Grids und Media Queries.

Antipasti.

Antipasti. Abspecken. Design.

Media Queries.

à http://www.anderssonwise.com/



Viewport.

à http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html



Responsive Layout.

à http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html



Responsive Layout.
A A
B B C B C B
C
C
A A
D
D D
D



Breakpoints.
A A
B B C B C B
C
C
A A
D
D D
D

Breakpoint 1 Breakpoint 2 Breakpoint 3



Breakpoints.
iPhone
320px

iPhone
480px

iPad
768px

iPad
1024px

MacBook Air 13”
1440px

320px 720px 980px

Breakpoint 1 Breakpoint 2 Breakpoint 3



Mouse vs. Touch.

Informationen können durch
die Hand verdeckt werden

11 14.03.2012
9 Denken. Verstehen. Designkantine. Namics.


Mouse vs. Touch.
Klickfläche
ca. 29x44px



Primi
Piatti.
10.9.2010
14 10 Denken. Präsentieren. Umsetzen. Namics.

Ein leichtes Soufflés aus Weissraum,
feinste Funktionen und kernigen Botschaften
nach Art des Hauses.

Primi
Piatti.


Inhalt und Relevanz.

Essentiell Nützlich

Primär
(Mandatory) (Useful)

Sekundär
Unterstützend Belanglos
(Supplemental) (Trivial)

Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters



MUST-Methode.


Primär

Sekundär




Beispiel.



Essentiell (Mandatory).
à 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



Beispiel.
M M

M

M
M

M



Nützlich (Useful).
à Erschliesst weitere primäre Inhalte / Funktionen
à Angebot kann ohne diesem Element nicht genutzt
werden

à Primäre Informationen und Funktionen aus Sicht des Anbieters



Beispiel.

U U

U
U



Unterstützend (Supplemental).
à 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



Beispiel.
S
S

S

S S
S

S
S


Belanglos (Trivial).
à Zusätzliche Angebote und Funktionen
à Hygieneelemente

à Sekundäre Informationen und Funktionen aus Sicht des Anbieters



Beispiel.
T
T T

T

T T


Beispiel.
T S M M
U U T S T

M
S
M
T M S S
S
U
M U

S
S T T

Secondi
Piatti.

Erlesene Auswahl an Websites
serviert auf dem heissen Stein.

Secondi
Piatti.


Mitmachen
à Schere
à Leim
à iPhone Schablonen
à M-U-S-T Raster



Mitmachen

Primär

Sekundär




Beispiel



Ablauf
à ca. 15 Min Priorisieren auf der Matrix
à ca. 10 Min Layout auf der iPhone Schablone
à ca. 10. Präsentation der Ergebnisse



Resultate


Dolci.

Frisches Sorbet aus Tipps & Tricks

Dolci.


Ohne Maus - Kein Hover

à http://www.abo-checker.ch/phones



Responsive Grids

à http://foundation.zurb.com/
à http://lessframework.com/
à http://framelessgrid.com/
à http://cssgrid.net/
à http://stuffandnonsense.co.uk/projects/320andup/



Das Rad nicht neu erfinden
Termine Orte Adressen Telefonnr. Sharing Bookmarks

à APIs nutzen



Keine Formulare verbiegen

à Dropdowns, werden je nach Plattform anders dargestellt und sind für die
jeweilige Eingabeform optimal angepasst



Unter der Haube – Datum/Uhrzeit

à Eingabe von Datum und Uhrzeit mittels Picker-Element



Unter der Haube - Text

à Anpassen der Tastatur für Ziffern, Buchstaben, E-Mail, etc.



Prototype Testing

à http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow



Responsive Layout Preview

à http://www.responsinator.com



… one last thing


Grazie.

Designkantine mobile first_pdf

Weitere ähnliche Inhalte

Andere mochten auch

Designkantine mobile first_pdf