Besser Abspecken mit Design.Mobile Fi(rs)t.Zürich, März 20121                                  Denken. Präsentieren. Umset...
Mobile. Design. Abspecken. Namics.Menü.    à Antipasti.    à Primi Piatti.    à Secondi Piatti.    à Dolci.2    14.03....
Antipasti.3        Denken. Präsentieren. Umsetzen. Namics.
Fingerfood aus Viewports, Responsive    Grids und Media Queries.Antipasti.4                                Denken. Präsent...
Antipasti. Abspecken. Design.Media Queries.    à http://www.anderssonwise.com/5    14.03.2012                        Denk...
Antipasti. Abspecken. Design.Viewport.    à http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html6    1...
Antipasti. Abspecken. Design.Responsive Layout.    à http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.h...
Antipasti. Abspecken. Design.Responsive Layout.     A                                                         A    B      ...
Antipasti. Abspecken. Design.Breakpoints.    A                                                                        A   ...
Antipasti. Abspecken. Design.Breakpoints.                  iPhone                   320px                           iPhone...
Antipasti. Abspecken. Design.Mouse vs. Touch.            Informationen können durch            die Hand verdeckt werden11 ...
Antipasti. Abspecken. Design.Mouse vs. Touch.                    Klickfläche                    ca. 29x44px               ...
Antipasti. Abspecken. Design.Mouse vs. Touch.                    Klickfläche                    ca. 29x44px               ...
PrimiPiatti.10.9.201014          10   Denken. Präsentieren. Umsetzen. Namics.
Ein leichtes Soufflés aus Weissraum, feinste Funktionen und kernigen Botschaften nach Art des Hauses.PrimiPiatti.15       ...
Antipasti. Abspecken. Design.Inhalt und Relevanz.                    Essentiell                        Nützlich           ...
Antipasti. Abspecken. Design.MUST-Methode.                    Essentiell                        Nützlich                  ...
Antipasti. Abspecken. Design.Beispiel.18   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.Essentiell (Mandatory). à Informiert über den Zweck / Absender der Website à Wird exakt weg...
Antipasti. Abspecken. Design.Beispiel.                                M                                M                  ...
Antipasti. Abspecken. Design.Nützlich (Useful). à Erschliesst weitere primäre Inhalte / Funktionen à Angebot kann ohne d...
Antipasti. Abspecken. Design.Beispiel.                           U       U                           U                    ...
Antipasti. Abspecken. Design.Unterstützend (Supplemental). à Veranschaulicht die Funktionsweise des Angebotes à Zusätzli...
Antipasti. Abspecken. Design.Beispiel.                        S                                                          S...
Antipasti. Abspecken. Design.Belanglos (Trivial). à Zusätzliche Angebote und Funktionen à Hygieneelementeà Sekundäre In...
Antipasti. Abspecken. Design.Beispiel.                  T                                               T           T     ...
Antipasti. Abspecken. Design.Beispiel.                  T      S               M                                M         ...
SecondiPiatti.28        Denken. Präsentieren. Umsetzen. Namics.
Erlesene Auswahl an Websites serviert auf dem heissen Stein.SecondiPiatti.29                                 Denken. Präse...
Antipasti. Abspecken. Design.Mitmachen à Schere à Leim à iPhone Schablonen à M-U-S-T Raster30   14.03.2012            ...
Antipasti. Abspecken. Design.Mitmachen                                                                                    ...
Antipasti. Abspecken. Design.Beispiel32   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.Ablauf à ca. 15 Min Priorisieren auf der Matrix à ca. 10 Min Layout auf der iPhone Schablon...
Antipasti. Abspecken. Design.Resultate34   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.Resultate35   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
Dolci.36       Denken. Präsentieren. Umsetzen. Namics.
Frisches Sorbet aus Tipps & TricksDolci.37                             Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.Ohne Maus - Kein Hover à http://www.abo-checker.ch/phones38   14.03.2012                    ...
Antipasti. Abspecken. Design.Responsive Grids à http://foundation.zurb.com/ à http://lessframework.com/ à http://framel...
Antipasti. Abspecken. Design.Das Rad nicht neu erfinden Termine          Orte          Adressen   Telefonnr.       Sharing...
Antipasti. Abspecken. Design.Keine Formulare verbiegen à Dropdowns, werden je nach Plattform anders dargestellt und sind ...
Antipasti. Abspecken. Design.Unter der Haube – Datum/Uhrzeit à Eingabe von Datum und Uhrzeit mittels Picker-Element42   1...
Antipasti. Abspecken. Design.Unter der Haube - Text à Anpassen der Tastatur für Ziffern, Buchstaben, E-Mail, etc.43   14....
Antipasti. Abspecken. Design.Prototype Testing à http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow44   ...
Antipasti. Abspecken. Design.Responsive Layout Preview à http://www.responsinator.com45   14.03.2012                    D...
Antipasti. Abspecken. Design.… one last thing46   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
Grazie.47        Denken. Präsentieren. Umsetzen. Namics.
Upcoming SlideShare
Loading in …5
×

Designkantine mobile first_pdf

739 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
739
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designkantine mobile first_pdf

  1. 1. Besser Abspecken mit Design.Mobile Fi(rs)t.Zürich, März 20121 Denken. Präsentieren. Umsetzen. Namics.
  2. 2. Mobile. Design. Abspecken. Namics.Menü. à Antipasti. à Primi Piatti. à Secondi Piatti. à Dolci.2 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  3. 3. Antipasti.3 Denken. Präsentieren. Umsetzen. Namics.
  4. 4. Fingerfood aus Viewports, Responsive Grids und Media Queries.Antipasti.4 Denken. Präsentieren. Umsetzen. Namics.
  5. 5. Antipasti. Abspecken. Design.Media Queries. à http://www.anderssonwise.com/5 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  6. 6. Antipasti. Abspecken. Design.Viewport. à http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html6 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  7. 7. Antipasti. Abspecken. Design.Responsive Layout. à http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html7 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  8. 8. Antipasti. Abspecken. Design.Responsive Layout. A A B B C B C B C C A A D D D D8 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  9. 9. Antipasti. Abspecken. Design.Breakpoints. A A B B C B C B C C A A D D D D Breakpoint 1 Breakpoint 2 Breakpoint 39 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  10. 10. Antipasti. Abspecken. Design.Breakpoints. iPhone 320px iPhone 480px iPad 768px iPad 1024px MacBook Air 13” 1440px 320px 720px 980px Breakpoint 1 Breakpoint 2 Breakpoint 310 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  11. 11. Antipasti. Abspecken. Design.Mouse vs. Touch. Informationen können durch die Hand verdeckt werden11 14.03.2012 9 Denken. Verstehen. Designkantine. Namics.
  12. 12. Antipasti. Abspecken. Design.Mouse vs. Touch. Klickfläche ca. 29x44px Informationen können durch die Hand verdeckt werden12 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  13. 13. Antipasti. Abspecken. Design.Mouse vs. Touch. Klickfläche ca. 29x44px Informationen können durch die Hand verdeckt werden13 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  14. 14. PrimiPiatti.10.9.201014 10 Denken. Präsentieren. Umsetzen. Namics.
  15. 15. Ein leichtes Soufflés aus Weissraum, feinste Funktionen und kernigen Botschaften nach Art des Hauses.PrimiPiatti.15 Denken. Präsentieren. Umsetzen. Namics.
  16. 16. Antipasti. Abspecken. Design.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 Anbieters16 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  17. 17. Antipasti. Abspecken. Design.MUST-Methode. Essentiell Nützlich Primär (Mandatory) (Useful) Sekundär Unterstützend Belanglos (Supplemental) (Trivial) Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters17 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  18. 18. Antipasti. Abspecken. Design.Beispiel.18 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  19. 19. Antipasti. Abspecken. Design.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 Betrachters19 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  20. 20. Antipasti. Abspecken. Design.Beispiel. M M M M M M20 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  21. 21. Antipasti. Abspecken. Design.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 Anbieters21 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  22. 22. Antipasti. Abspecken. Design.Beispiel. U U U U22 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  23. 23. Antipasti. Abspecken. Design.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 Betrachters23 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  24. 24. Antipasti. Abspecken. Design.Beispiel. S S S S S S S S24 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  25. 25. Antipasti. Abspecken. Design.Belanglos (Trivial). à Zusätzliche Angebote und Funktionen à Hygieneelementeà Sekundäre Informationen und Funktionen aus Sicht des Anbieters25 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  26. 26. Antipasti. Abspecken. Design.Beispiel. T T T T T T26 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  27. 27. Antipasti. Abspecken. Design.Beispiel. T S M M U U T S T M S M T M S S S U M U S S T T27 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  28. 28. SecondiPiatti.28 Denken. Präsentieren. Umsetzen. Namics.
  29. 29. Erlesene Auswahl an Websites serviert auf dem heissen Stein.SecondiPiatti.29 Denken. Präsentieren. Umsetzen. Namics.
  30. 30. Antipasti. Abspecken. Design.Mitmachen à Schere à Leim à iPhone Schablonen à M-U-S-T Raster30 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  31. 31. Antipasti. Abspecken. Design.Mitmachen Primär Essentiell Nützlich (Mandatory) (Useful) Sekundär Unterstützend Belanglos (Supplemental) (Trivial) Ziele und Sicht des Besuchers Ziele und Sicht des Anbieters31 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  32. 32. Antipasti. Abspecken. Design.Beispiel32 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  33. 33. Antipasti. Abspecken. Design.Ablauf à ca. 15 Min Priorisieren auf der Matrix à ca. 10 Min Layout auf der iPhone Schablone à ca. 10. Präsentation der Ergebnisse33 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  34. 34. Antipasti. Abspecken. Design.Resultate34 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  35. 35. Antipasti. Abspecken. Design.Resultate35 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  36. 36. Dolci.36 Denken. Präsentieren. Umsetzen. Namics.
  37. 37. Frisches Sorbet aus Tipps & TricksDolci.37 Denken. Präsentieren. Umsetzen. Namics.
  38. 38. Antipasti. Abspecken. Design.Ohne Maus - Kein Hover à http://www.abo-checker.ch/phones38 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  39. 39. Antipasti. Abspecken. Design.Responsive Grids à http://foundation.zurb.com/ à http://lessframework.com/ à http://framelessgrid.com/ à http://cssgrid.net/ à http://stuffandnonsense.co.uk/projects/320andup/39 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  40. 40. Antipasti. Abspecken. Design.Das Rad nicht neu erfinden Termine Orte Adressen Telefonnr. Sharing Bookmarks à APIs nutzen40 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  41. 41. Antipasti. Abspecken. Design.Keine Formulare verbiegen à Dropdowns, werden je nach Plattform anders dargestellt und sind für die jeweilige Eingabeform optimal angepasst41 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  42. 42. Antipasti. Abspecken. Design.Unter der Haube – Datum/Uhrzeit à Eingabe von Datum und Uhrzeit mittels Picker-Element42 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  43. 43. Antipasti. Abspecken. Design.Unter der Haube - Text à Anpassen der Tastatur für Ziffern, Buchstaben, E-Mail, etc.43 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  44. 44. Antipasti. Abspecken. Design.Prototype Testing à http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow44 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  45. 45. Antipasti. Abspecken. Design.Responsive Layout Preview à http://www.responsinator.com45 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  46. 46. Antipasti. Abspecken. Design.… one last thing46 14.03.2012 Denken. Verstehen. Designkantine. Namics.
  47. 47. Grazie.47 Denken. Präsentieren. Umsetzen. Namics.

×