Modern UI Design
Patrick Getzmann, Peter Nowak
Über Patrick Getzmann
Mobile Solution Architect bei einem global operierenden ICT Anbieter
Nokia Developer Champion seit 1...
Über Peter Nowak
IT Architekt im S.T.A.R.T.-Team bei der
Hönigsberg & Düvel Datentechnik GmbH
Microsoft MVP für Windows Ph...
Agenda
Modern UI Design
Was ist das Modern UI Design
Wie wird das Modern UI umgesetzt
Missverständnisse von Modern UI
Grenzen des...
Das Modern UI Design
Modern UI Design (Foursquare und 4th &
Mayor)
Beispiel Anfang 2012
iOS vs Windows Phone
Modern UI Design
Modern UI Design
Content, not Chrome
Typographie
Modern UI Design
Animationen
Zustand: Offen, Geschlossen

Dazwischen findet eine
„Animation“ statt
Modern UI Design

Quelle: http://www.youtube.com/watch?v=qD-66f7QAtA
Modern UI Design
Content, not Chrome
Typographie
Animation
Modern UI Design
Authentically digital
Modern UI Design
Content, not Chrome
Typographie
Animation
Authentically Digital
Modern UI Design
Modern UI Design
Content, not Chrome
Typographie
Animation
Authentically Digital
Use the Modern UI, where usefull
Modern UI Design
Missverständnisse von Modern UI
Missverständnisse von Modern UI
Das Template ist nur der Start
Farben
Grafiken
Schriften
Kacheln
Grenzen des Modern UI Designs
Grenzen des Modern UI Designs
Spiele
Corporate Design Basis
Replikate von „Dingen“
Multiplatform/HTML5
Tips & Tricks für gutes Design
Tips & Tricks für gutes Design
Templates sind immer gleich
AlignmentGrid aktivieren
Themes nicht vergessen
Testen mit unte...
Tips & Tricks für gutes Design
ScrollViewer ist immer eine gute Verpackung
SystemTray bietet wichtige Informationen
Screen...
Tips & Tricks für gutes Design
Design in Abhängigkeit des Kontext
Modern UI ist nicht verpflichtend
und einengend
Modern U...
Tips & Tricks für gutes Design
Nahezu jedes Control hat ein anpassbares Template
Beispiel Panorama Control:
Einfarbiger Hi...
Tips & Tricks für gutes Design
Farbwahl
Ressourcen im Web
how we design
http://dev.windowsphone.com/en-us/design
Designing for Windows Phone: Tips & Tricks Video
...
Ressourcen im Web
Adobe Kuler
https://kuler.adobe.com/create/color-wheel/
Colourlovers
http://www.colourlovers.com/
The No...
Nächste SlideShare
Wird geladen in …5
×

Modern UI Design - FHDW AppNight

695 Aufrufe

Veröffentlicht am

Was ist das Modern UI Design, wie wendet man es für Windows Phone 8 Apps an und wann lässt man es sein?

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

  • Gehören Sie zu den Ersten, denen das gefällt!

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

Keine Notizen für die Folie
  • Farbverläufe3DAbgerundeteEckenBrandingRadar
  • Android, WP8 und 4th & Mayor
  • Modern UI Design - FHDW AppNight

    1. 1. Modern UI Design Patrick Getzmann, Peter Nowak
    2. 2. Über Patrick Getzmann Mobile Solution Architect bei einem global operierenden ICT Anbieter Nokia Developer Champion seit 1. April 2013 Patrick.Getzmann@t-online.de @PatGet http://patrickgetzmann.wordpress.co m/
    3. 3. Über Peter Nowak IT Architekt im S.T.A.R.T.-Team bei der Hönigsberg & Düvel Datentechnik GmbH Microsoft MVP für Windows Phone Development Nokia Dev. Champion seit 1. April 2013 Peter.Nowak@Hotmail. de @PeNoWiMo http://winphonedev.de
    4. 4. Agenda
    5. 5. Modern UI Design Was ist das Modern UI Design Wie wird das Modern UI umgesetzt Missverständnisse von Modern UI Grenzen des Modern UI Designs Tips & Tricks für gutes Design
    6. 6. Das Modern UI Design
    7. 7. Modern UI Design (Foursquare und 4th & Mayor) Beispiel Anfang 2012 iOS vs Windows Phone
    8. 8. Modern UI Design
    9. 9. Modern UI Design Content, not Chrome Typographie
    10. 10. Modern UI Design Animationen Zustand: Offen, Geschlossen Dazwischen findet eine „Animation“ statt
    11. 11. Modern UI Design Quelle: http://www.youtube.com/watch?v=qD-66f7QAtA
    12. 12. Modern UI Design Content, not Chrome Typographie Animation
    13. 13. Modern UI Design Authentically digital
    14. 14. Modern UI Design Content, not Chrome Typographie Animation Authentically Digital
    15. 15. Modern UI Design
    16. 16. Modern UI Design Content, not Chrome Typographie Animation Authentically Digital Use the Modern UI, where usefull
    17. 17. Modern UI Design
    18. 18. Missverständnisse von Modern UI
    19. 19. Missverständnisse von Modern UI Das Template ist nur der Start Farben Grafiken Schriften Kacheln
    20. 20. Grenzen des Modern UI Designs
    21. 21. Grenzen des Modern UI Designs Spiele Corporate Design Basis Replikate von „Dingen“ Multiplatform/HTML5
    22. 22. Tips & Tricks für gutes Design
    23. 23. Tips & Tricks für gutes Design Templates sind immer gleich AlignmentGrid aktivieren Themes nicht vergessen Testen mit unterschiedlichen Akzentfarben Styles und Ressourcen machen das Leben einfacher TiltEffect.cs / Control Tilt (Toolkit) Schöne Animation = Kurze Animation
    24. 24. Tips & Tricks für gutes Design ScrollViewer ist immer eine gute Verpackung SystemTray bietet wichtige Informationen ScreenOrientation – Tastatureingabe vereinfachen Wenns mal wieder länger dauert: ProgressBar Control Teste mit verschiedenen Textgrössen – Barrierefreiheit Watermark Text als Hilfe Icon & Tiles sind wichtig
    25. 25. Tips & Tricks für gutes Design Design in Abhängigkeit des Kontext Modern UI ist nicht verpflichtend und einengend Modern UI Nice UI
    26. 26. Tips & Tricks für gutes Design Nahezu jedes Control hat ein anpassbares Template Beispiel Panorama Control: Einfarbiger Hintergund Fixierter Header
    27. 27. Tips & Tricks für gutes Design Farbwahl
    28. 28. Ressourcen im Web how we design http://dev.windowsphone.com/en-us/design Designing for Windows Phone: Tips & Tricks Video http://www.youtube.com/watch?v=JAUdDN8JwAw Jeff Wilcox’s “Metro” design guide for developers http://www.jeff.wilcox.name/2011/03/metro-designguide-v1/
    29. 29. Ressourcen im Web Adobe Kuler https://kuler.adobe.com/create/color-wheel/ Colourlovers http://www.colourlovers.com/ The Noun Project http://thenounproject.com/

    ×