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