SlideShare ist ein Scribd-Unternehmen logo
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.
3        Denken. Präsentieren. Umsetzen. Namics.
Fingerfood aus Viewports, Responsive
    Grids und Media Queries.




Antipasti.
4                                Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Media Queries.




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

5    14.03.2012                        Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Viewport.




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

6    14.03.2012                                         Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Responsive Layout.




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

7    14.03.2012                                         Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


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




8   14.03.2012                          Denken. Verstehen. Designkantine. Namics.
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 3




9   14.03.2012                                        Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Breakpoints.
                  iPhone
                   320px


                           iPhone
                            480px


                                     iPad
                                    768px


                                             iPad
                                            1024px


                                                 MacBook Air 13”
                                                    1440px


                               320px                    720px                       980px



                            Breakpoint 1             Breakpoint 2               Breakpoint 3

10   14.03.2012                                                     Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Mouse vs. Touch.




            Informationen können durch
            die Hand verdeckt werden




11   14.03.2012
              9                          Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


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




                    Informationen können durch
                    die Hand verdeckt werden




12   14.03.2012                                  Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


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




                    Informationen können durch
                    die Hand verdeckt werden




13   14.03.2012                                  Denken. Verstehen. Designkantine. Namics.
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.
15                             Denken. Präsentieren. Umsetzen. Namics.
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 Anbieters

16   14.03.2012                                      Denken. Verstehen. Designkantine. Namics.
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 Anbieters

17   14.03.2012                                      Denken. Verstehen. Designkantine. Namics.
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 wegen dieser Funktion / Information
    besucht
 à Wichtige Informationen und Botschaften




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

19   14.03.2012                                     Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Beispiel.
                                M                                M


                                                     M

                                                     M
                          M

                          M


20   14.03.2012                     Denken. Verstehen. Designkantine. Namics.
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 Anbieters

21   14.03.2012                                     Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Beispiel.

                           U       U




                           U
                                                 U



22   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
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 Betrachters

23   14.03.2012                                    Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Beispiel.
                        S
                                                          S




                                S


                                    S                     S
                            S




                                                         S
                  S
24   14.03.2012                         Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


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




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

25   14.03.2012                                    Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Beispiel.
                  T
                                               T           T




         T




                                T                     T
26   14.03.2012                     Denken. Verstehen. Designkantine. Namics.
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                         T
27   14.03.2012                              Denken. Verstehen. Designkantine. Namics.
Secondi
Piatti.
28        Denken. Präsentieren. Umsetzen. Namics.
Erlesene Auswahl an Websites
 serviert auf dem heissen Stein.




Secondi
Piatti.
29                                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


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




30   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
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 Anbieters

31   14.03.2012                                      Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Beispiel




32   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 Schablone
 à ca. 10. Präsentation der Ergebnisse




33   14.03.2012                              Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Resultate




34   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Resultate




35   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
Dolci.
36       Denken. Präsentieren. Umsetzen. Namics.
Frisches Sorbet aus Tipps & Tricks




Dolci.
37                             Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Ohne Maus - Kein Hover




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

38   14.03.2012                        Denken. Verstehen. Designkantine. Namics.
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.
Antipasti. Abspecken. Design.


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




 à APIs nutzen

40   14.03.2012                                         Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Keine Formulare verbiegen




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

41   14.03.2012                                       Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Unter der Haube – Datum/Uhrzeit




 à Eingabe von Datum und Uhrzeit mittels Picker-Element

42   14.03.2012                                     Denken. Verstehen. Designkantine. Namics.
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.
Antipasti. Abspecken. Design.


Prototype Testing




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

44   14.03.2012                                    Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


Responsive Layout Preview




 à http://www.responsinator.com

45   14.03.2012                    Denken. Verstehen. Designkantine. Namics.
Antipasti. Abspecken. Design.


… one last thing




46   14.03.2012                 Denken. Verstehen. Designkantine. Namics.
Grazie.
47        Denken. Präsentieren. Umsetzen. Namics.

Weitere ähnliche Inhalte

Andere mochten auch

Acta Reunió 30 07-14 M&A
Acta Reunió 30 07-14 M&AActa Reunió 30 07-14 M&A
Acta Reunió 30 07-14 M&A
podemosreus
 
Tutorial de la herramienta tumblr
Tutorial de la herramienta tumblrTutorial de la herramienta tumblr
Tutorial de la herramienta tumblr
amaciro
 
Trabajo tecnologia
Trabajo tecnologiaTrabajo tecnologia
Trabajo tecnologia
PabloBC99
 
Acosta yunuen u7_aa1
Acosta yunuen u7_aa1Acosta yunuen u7_aa1
Acosta yunuen u7_aa1
Yunae
 
Lego Anleitung Gefährt Nr. 1
Lego Anleitung Gefährt Nr. 1Lego Anleitung Gefährt Nr. 1
Lego Anleitung Gefährt Nr. 1
Jürgen Mirbach
 
Pkw Maut wird 2016 in Deutschland eingeführt
Pkw Maut wird 2016 in Deutschland eingeführtPkw Maut wird 2016 in Deutschland eingeführt
Pkw Maut wird 2016 in Deutschland eingeführt
ichwillmeinautoloswerden
 
Ogia Egiten
Ogia EgitenOgia Egiten
Ogia Egiten
geroahh
 
Buscadores y metabuscadores
Buscadores y metabuscadoresBuscadores y metabuscadores
Buscadores y metabuscadores
Carina Amasifen Valles
 
Actividaddeapredizaje2bloque4 141212091537-conversion-gate01 (1)
Actividaddeapredizaje2bloque4 141212091537-conversion-gate01 (1)Actividaddeapredizaje2bloque4 141212091537-conversion-gate01 (1)
Actividaddeapredizaje2bloque4 141212091537-conversion-gate01 (1)
BrendaColli
 
Sommergluecksmomente 2015 Schweiz
Sommergluecksmomente 2015 SchweizSommergluecksmomente 2015 Schweiz
Sommergluecksmomente 2015 Schweiz
Austrian National Tourist Office
 
Adicciones
AdiccionesAdicciones
Adicciones
Heidy Agudelo
 
Microsoft power point
Microsoft power pointMicrosoft power point
Microsoft power point
amantesuntmentes
 
La nanotecnología
 La nanotecnología La nanotecnología
La nanotecnología
sdfgdagsadsg
 
Protocolos
ProtocolosProtocolos
Protocolos
marigilgalvan
 
Pie diabético sosaelba
Pie diabético sosaelbaPie diabético sosaelba
Pie diabético sosaelba
Elba Sosa
 
Prostitucion 03
Prostitucion 03Prostitucion 03
Prostitucion 03
Menfis ...
 
Trabajo colaborativo aplicación matrimaticas.
Trabajo colaborativo aplicación matrimaticas.Trabajo colaborativo aplicación matrimaticas.
Trabajo colaborativo aplicación matrimaticas.
bguzmana
 
Libro "Colocolo el equipo que ha sabido ser campeón"
Libro "Colocolo el equipo que ha sabido ser campeón"Libro "Colocolo el equipo que ha sabido ser campeón"
Libro "Colocolo el equipo que ha sabido ser campeón"
Filial Magallanes
 
Metodología de la Investigación
Metodología de la InvestigaciónMetodología de la Investigación
Metodología de la Investigación
Yunae
 

Andere mochten auch (20)

Acta Reunió 30 07-14 M&A
Acta Reunió 30 07-14 M&AActa Reunió 30 07-14 M&A
Acta Reunió 30 07-14 M&A
 
Tutorial de la herramienta tumblr
Tutorial de la herramienta tumblrTutorial de la herramienta tumblr
Tutorial de la herramienta tumblr
 
Trabajo tecnologia
Trabajo tecnologiaTrabajo tecnologia
Trabajo tecnologia
 
Acosta yunuen u7_aa1
Acosta yunuen u7_aa1Acosta yunuen u7_aa1
Acosta yunuen u7_aa1
 
Lego Anleitung Gefährt Nr. 1
Lego Anleitung Gefährt Nr. 1Lego Anleitung Gefährt Nr. 1
Lego Anleitung Gefährt Nr. 1
 
Pkw Maut wird 2016 in Deutschland eingeführt
Pkw Maut wird 2016 in Deutschland eingeführtPkw Maut wird 2016 in Deutschland eingeführt
Pkw Maut wird 2016 in Deutschland eingeführt
 
Ogia Egiten
Ogia EgitenOgia Egiten
Ogia Egiten
 
Buscadores y metabuscadores
Buscadores y metabuscadoresBuscadores y metabuscadores
Buscadores y metabuscadores
 
Ein Winter voller Lebensfreude 2013/14 MAFO
Ein Winter voller Lebensfreude 2013/14 MAFOEin Winter voller Lebensfreude 2013/14 MAFO
Ein Winter voller Lebensfreude 2013/14 MAFO
 
Actividaddeapredizaje2bloque4 141212091537-conversion-gate01 (1)
Actividaddeapredizaje2bloque4 141212091537-conversion-gate01 (1)Actividaddeapredizaje2bloque4 141212091537-conversion-gate01 (1)
Actividaddeapredizaje2bloque4 141212091537-conversion-gate01 (1)
 
Sommergluecksmomente 2015 Schweiz
Sommergluecksmomente 2015 SchweizSommergluecksmomente 2015 Schweiz
Sommergluecksmomente 2015 Schweiz
 
Adicciones
AdiccionesAdicciones
Adicciones
 
Microsoft power point
Microsoft power pointMicrosoft power point
Microsoft power point
 
La nanotecnología
 La nanotecnología La nanotecnología
La nanotecnología
 
Protocolos
ProtocolosProtocolos
Protocolos
 
Pie diabético sosaelba
Pie diabético sosaelbaPie diabético sosaelba
Pie diabético sosaelba
 
Prostitucion 03
Prostitucion 03Prostitucion 03
Prostitucion 03
 
Trabajo colaborativo aplicación matrimaticas.
Trabajo colaborativo aplicación matrimaticas.Trabajo colaborativo aplicación matrimaticas.
Trabajo colaborativo aplicación matrimaticas.
 
Libro "Colocolo el equipo que ha sabido ser campeón"
Libro "Colocolo el equipo que ha sabido ser campeón"Libro "Colocolo el equipo que ha sabido ser campeón"
Libro "Colocolo el equipo que ha sabido ser campeón"
 
Metodología de la Investigación
Metodología de la InvestigaciónMetodología de la Investigación
Metodología de la Investigación
 

Designkantine mobile first_pdf