Kochan & Partner
Brand
Design
Development
Mobile Patterns
Wie Apps und Co. 

digitale Interfaces revolutionieren
Markus Gr...
Kochan & Partner Brand Design Development2
Slides  http://de.slideshare.net/markusgreve/
Markus Greve
KOCHAN & PARTNER
BR...
Kochan & Partner Brand Design Development
Mobile Patterns
Wie Apps und Co. digitale Interfaces revolutionieren

Drei These...
Kochan & Partner Brand Design Development4
ONE

________
The Burger

Is Dead!
________
Kochan & Partner Brand Design Development
Vitaly Friedmann

Chefredakteur Smashing Magazine
Real-Life Responsive 

Web Des...
Kochan & Partner Brand Design Development11
4” +5,5”
Kochan & Partner Brand Design Development
Verständnis von Icons abhängig von der Zielgruppe
Je nach Kontext optimierbar du...
Kochan & Partner Brand Design Development20
TWO

________
Two Dimensions
Are Not Enough!
________
Kochan & Partner Brand Design Development21
Kochan & Partner Brand Design Development22
Kochan & Partner Brand Design Development
“Skeuomorphismus (aus dem Altgriechischen σκεῦος 

Behälter, Werkzeug und μορφή ...
Kochan & Partner Brand Design Development24
Windows 8: Modern UI (ehemals »Metro«)
Kochan & Partner Brand Design Development25
Windows Phone 8
Kochan & Partner Brand Design Development26
Microsoft Windows
Modern UI
(ehemals »Metro«)
Apple iOS (später auch Mac OS X)...
Kochan & Partner Brand Design Development27
Microsoft Windows
Modern UI
(ehemals »Metro«)
Apple iOS (später auch Mac OS X)...
Kochan & Partner Brand Design Development
Höhe
Patterns und Höhe
30
Interface Guidelines
Floating Action Button »FAB«
Rest...
Kochan & Partner Brand Design Development
Klare, aufgeräumte Gestaltung
Glatte Oberflächen
Aber: Interaktion im Interface d...
Kochan & Partner Brand Design Development35
THREE

________
Interfaces 

Get Simpler 

– And Therefor 

More Complex!
____...
Kochan & Partner Brand Design Development
Reduzierte Interfaces…
36
Wearables
Kochan & Partner Brand Design Development
Noch weniger…
37
Wearables
Kochan & Partner Brand Design Development
…bis zum absoluten Nullpunkt
38
Wearables
Kochan & Partner Brand Design Development
…bis zum absoluten Nullpunkt
39
Wearables
Apple Watch
Neu: Kurzanleitung
E-Mail Kommunikation
Einladung zum
persönlichen Setup
Video-Tutorials
In-App Lernvideos
Gegenüberstellung
Gegenüberstellung
on/off
Home
Volume + / –
Mute
Headphone
1
2
3
4
5
Gegenüberstellung
on/off
Home
Volume + / –
Mute
Headphone
Digital crown
Friends
1
2
3
4
5
1
2
Kochan & Partner Brand Design Development
Einführung neuer Bedienkonzepte
– Wake-on-Turn
– Mute-on-Cover
– Force Touch
Per...
Kochan & Partner
Brand
Design
Development
Vielen Dank!
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren
Nächste SlideShare
Wird geladen in …5
×

Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren

513 Aufrufe

Veröffentlicht am

Mein Vortrag zur Münchner Webwoche 2015

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
513
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mobile Patterns - Wie Apps und Co. digitale Interfaces revolutionieren

  1. 1. Kochan & Partner Brand Design Development Mobile Patterns Wie Apps und Co. 
 digitale Interfaces revolutionieren Markus Greve
 zur Webwoche 2015 Mit-Teilen: Wo Dich das Rascheln von Laub aufspürt, der Flügelschlag einer Graugans. Wo Ideen lässig landen und Musen sich zum Kuss aufreihen. VERSUCH ÜBER DAS GEMEINSAME: www.kochan.de/experiment
  2. 2. Kochan & Partner Brand Design Development2 Slides  http://de.slideshare.net/markusgreve/ Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT T +49 89 17860–150 E markus.greve@kochan.de  @mrmontezuma Hi, I’m Markus
  3. 3. Kochan & Partner Brand Design Development Mobile Patterns Wie Apps und Co. digitale Interfaces revolutionieren
 Drei Thesen Ich freue mich auf die anschließende Diskussion 3
  4. 4. Kochan & Partner Brand Design Development4 ONE
 ________ The Burger
 Is Dead! ________
  5. 5. Kochan & Partner Brand Design Development Vitaly Friedmann
 Chefredakteur Smashing Magazine Real-Life Responsive 
 Web Design Responsive Design ist in. (…) 
 Welche Design Patterns nutzt man und wie geht man mit komplexen Tabellen, Karten, Formularen und interaktiven Elementen um? 10 TYPO Berlin 2015
  6. 6. Kochan & Partner Brand Design Development11
  7. 7. 4” +5,5”
  8. 8. Kochan & Partner Brand Design Development Verständnis von Icons abhängig von der Zielgruppe Je nach Kontext optimierbar durch Zusatz »Menü« oder ähnlich Die Position fixiert am oberen Bildschirmrand 
 ist in den meisten Anwendungsfällen nicht nutzbar! ➜ Positionierung am Screen überdenken 19 Zusammenfassung
  9. 9. Kochan & Partner Brand Design Development20 TWO
 ________ Two Dimensions Are Not Enough! ________
  10. 10. Kochan & Partner Brand Design Development21
  11. 11. Kochan & Partner Brand Design Development22
  12. 12. Kochan & Partner Brand Design Development “Skeuomorphismus (aus dem Altgriechischen σκεῦος 
 Behälter, Werkzeug und μορφή Gestalt) ist eine Stilrichtung hauptsächlich im Design, bei der Objekte in ihrer Gestaltung 
 ein anderes Material oder eine Form eines älteren, vertrauten Gegenstandes nachahmen, ohne dass diese durch ihre 
 Funktion begründet ist. – Wikipedia 23 Design Trend: Vermeidung von Skeuomorphismus
  13. 13. Kochan & Partner Brand Design Development24 Windows 8: Modern UI (ehemals »Metro«)
  14. 14. Kochan & Partner Brand Design Development25 Windows Phone 8
  15. 15. Kochan & Partner Brand Design Development26 Microsoft Windows Modern UI (ehemals »Metro«) Apple iOS (später auch Mac OS X) Flat Design Google Android Material Design
  16. 16. Kochan & Partner Brand Design Development27 Microsoft Windows Modern UI (ehemals »Metro«) Apple iOS (später auch Mac OS X) Flat Design Google Android Material Design?
  17. 17. Kochan & Partner Brand Design Development Höhe Patterns und Höhe 30 Interface Guidelines Floating Action Button »FAB« Resting height: 6dp, pressed state 12dp
  18. 18. Kochan & Partner Brand Design Development Klare, aufgeräumte Gestaltung Glatte Oberflächen Aber: Interaktion im Interface durch klassische Metaphern wie »Höhe« ➜ Für die Konzepte des »Material Design« reichen zwei Dimensionen nicht aus. 34 Zusammenfassung
  19. 19. Kochan & Partner Brand Design Development35 THREE
 ________ Interfaces 
 Get Simpler 
 – And Therefor 
 More Complex! ________
  20. 20. Kochan & Partner Brand Design Development Reduzierte Interfaces… 36 Wearables
  21. 21. Kochan & Partner Brand Design Development Noch weniger… 37 Wearables
  22. 22. Kochan & Partner Brand Design Development …bis zum absoluten Nullpunkt 38 Wearables
  23. 23. Kochan & Partner Brand Design Development …bis zum absoluten Nullpunkt 39 Wearables
  24. 24. Apple Watch
  25. 25. Neu: Kurzanleitung
  26. 26. E-Mail Kommunikation Einladung zum persönlichen Setup Video-Tutorials
  27. 27. In-App Lernvideos
  28. 28. Gegenüberstellung
  29. 29. Gegenüberstellung on/off Home Volume + / – Mute Headphone 1 2 3 4 5
  30. 30. Gegenüberstellung on/off Home Volume + / – Mute Headphone Digital crown Friends 1 2 3 4 5 1 2
  31. 31. Kochan & Partner Brand Design Development Einführung neuer Bedienkonzepte – Wake-on-Turn – Mute-on-Cover – Force Touch Persönliche Einlernphase Massenverbreitung ➜ Wiederverwendung bereits 
 »erlernter« Patterns wichtig wie nie! 49 Zusammenfassung
  32. 32. Kochan & Partner Brand Design Development Vielen Dank!

×