Designkantine mobile first_pdf

762 Aufrufe

Veröffentlicht am

0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
762
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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.

×