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

1. Modern UI Design
Patrick Getzmann, Peter Nowak

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. Ü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. Agenda

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. Das Modern UI Design

7. Modern UI Design (Foursquare und 4th &
Mayor)
Beispiel Anfang 2012
iOS vs Windows Phone

8. Modern UI Design

9. Modern UI Design
Content, not Chrome
Typographie

10. Modern UI Design
Animationen
Zustand: Offen, Geschlossen
Dazwischen findet eine
„Animation“ statt

11. Modern UI Design
Quelle: http://www.youtube.com/watch?v=qD-66f7QAtA

12. Modern UI Design
Content, not Chrome
Typographie
Animation

13. Modern UI Design
Authentically digital

14. Modern UI Design
Content, not Chrome
Typographie
Animation
Authentically Digital

15. Modern UI Design

16. Modern UI Design
Content, not Chrome
Typographie
Animation
Authentically Digital
Use the Modern UI, where usefull

17. Modern UI Design

18. Missverständnisse von Modern UI

19. Missverständnisse von Modern UI
Das Template ist nur der Start
Farben
Grafiken
Schriften
Kacheln

20. Grenzen des Modern UI Designs

21. Grenzen des Modern UI Designs
Spiele
Corporate Design Basis
Replikate von „Dingen“
Multiplatform/HTML5

22. Tips & Tricks für gutes Design

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. 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. Tips & Tricks für gutes Design
Design in Abhängigkeit des Kontext
Modern UI ist nicht verpflichtend
und einengend
Modern UI
Nice UI

26. Tips & Tricks für gutes Design
Nahezu jedes Control hat ein anpassbares Template
Beispiel Panorama Control:
Einfarbiger Hintergund
Fixierter Header

27. Tips & Tricks für gutes Design
Farbwahl

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. Ressourcen im Web
Adobe Kuler
https://kuler.adobe.com/create/color-wheel/
Colourlovers
http://www.colourlovers.com/
The Noun Project
http://thenounproject.com/