Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modern UI Design - FHDW AppNight

881 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

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/

×