SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Modern UI Design
Patrick Getzmann, Peter Nowak
Ü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/
Ü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
Agenda
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
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 unterschiedlichen Akzentfarben
Styles und Ressourcen machen das Leben einfacher
TiltEffect.cs / Control Tilt (Toolkit)
Schöne Animation = Kurze Animation
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
Tips & Tricks für gutes Design
Design in Abhängigkeit des Kontext
Modern UI ist nicht verpflichtend
und einengend
Modern UI

Nice UI
Tips & Tricks für gutes Design
Nahezu jedes Control hat ein anpassbares Template
Beispiel Panorama Control:
Einfarbiger Hintergund
Fixierter Header
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
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/
Ressourcen im Web
Adobe Kuler
https://kuler.adobe.com/create/color-wheel/
Colourlovers
http://www.colourlovers.com/
The Noun Project
http://thenounproject.com/

Weitere ähnliche Inhalte

Andere mochten auch

Los mundos virtuales
Los mundos virtualesLos mundos virtuales
Los mundos virtuales
Blanca1598
 
¿Cuánta azúcar estás consumiendo todos los días?
¿Cuánta azúcar estás consumiendo todos los días?¿Cuánta azúcar estás consumiendo todos los días?
¿Cuánta azúcar estás consumiendo todos los días?
rebehersh
 
Conteodefiguras
ConteodefigurasConteodefiguras
Conteodefiguras
betcyr
 
Location based services_dimke_dotterweich
Location based services_dimke_dotterweichLocation based services_dimke_dotterweich
Location based services_dimke_dotterweich
Dimkese
 
TRABAJO DE BORRADOR DIBUJO TÉCNICO
TRABAJO DE BORRADOR DIBUJO TÉCNICOTRABAJO DE BORRADOR DIBUJO TÉCNICO
TRABAJO DE BORRADOR DIBUJO TÉCNICO
jhonatan-kevin
 
Kapuzzenjacken Woman
Kapuzzenjacken WomanKapuzzenjacken Woman
Kapuzzenjacken Woman
Sonia Oquendo
 
Aggregation, Filterung und Visualisierung von Nachrichten aus heterogenen Que...
Aggregation, Filterung und Visualisierung von Nachrichten aus heterogenen Que...Aggregation, Filterung und Visualisierung von Nachrichten aus heterogenen Que...
Aggregation, Filterung und Visualisierung von Nachrichten aus heterogenen Que...
Torsten Lunze
 

Andere mochten auch (19)

internet segura
internet segurainternet segura
internet segura
 
Base de datos 2 parten 2014
Base de datos   2 parten 2014Base de datos   2 parten 2014
Base de datos 2 parten 2014
 
Los mundos virtuales
Los mundos virtualesLos mundos virtuales
Los mundos virtuales
 
netiqueta
netiquetanetiqueta
netiqueta
 
Redes sociales una oportunidad de hacer uso de las tic's
Redes sociales   una oportunidad de hacer uso de las tic'sRedes sociales   una oportunidad de hacer uso de las tic's
Redes sociales una oportunidad de hacer uso de las tic's
 
¿Cuánta azúcar estás consumiendo todos los días?
¿Cuánta azúcar estás consumiendo todos los días?¿Cuánta azúcar estás consumiendo todos los días?
¿Cuánta azúcar estás consumiendo todos los días?
 
Pasión por la danza
Pasión por la danzaPasión por la danza
Pasión por la danza
 
Conteodefiguras
ConteodefigurasConteodefiguras
Conteodefiguras
 
Location based services_dimke_dotterweich
Location based services_dimke_dotterweichLocation based services_dimke_dotterweich
Location based services_dimke_dotterweich
 
Welcher Genusstyp bist du?
Welcher Genusstyp bist du?Welcher Genusstyp bist du?
Welcher Genusstyp bist du?
 
La web cam
La web camLa web cam
La web cam
 
Orquideas
OrquideasOrquideas
Orquideas
 
Test
TestTest
Test
 
TRABAJO DE BORRADOR DIBUJO TÉCNICO
TRABAJO DE BORRADOR DIBUJO TÉCNICOTRABAJO DE BORRADOR DIBUJO TÉCNICO
TRABAJO DE BORRADOR DIBUJO TÉCNICO
 
Mobile Effects Mai 2012
Mobile Effects Mai 2012 Mobile Effects Mai 2012
Mobile Effects Mai 2012
 
Pedro
PedroPedro
Pedro
 
Kapuzzenjacken Woman
Kapuzzenjacken WomanKapuzzenjacken Woman
Kapuzzenjacken Woman
 
Aggregation, Filterung und Visualisierung von Nachrichten aus heterogenen Que...
Aggregation, Filterung und Visualisierung von Nachrichten aus heterogenen Que...Aggregation, Filterung und Visualisierung von Nachrichten aus heterogenen Que...
Aggregation, Filterung und Visualisierung von Nachrichten aus heterogenen Que...
 
Diapositivas felix
Diapositivas felixDiapositivas felix
Diapositivas felix
 

Ähnlich wie Modern UI Design - FHDW AppNight

Einführung in User Experience Design
Einführung in User Experience DesignEinführung in User Experience Design
Einführung in User Experience Design
chmoser79
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Peter Rozek
 
User xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch ZufallUser xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch Zufall
Daniel Muther
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Christoph Mühlbauer
 

Ähnlich wie Modern UI Design - FHDW AppNight (20)

Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Einführung in User Experience Design
Einführung in User Experience DesignEinführung in User Experience Design
Einführung in User Experience Design
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
User xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch ZufallUser xperience entsteht nicht durch Zufall
User xperience entsteht nicht durch Zufall
 
Zinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.deZinit.leistungen.webentwicklung.v1.0.de
Zinit.leistungen.webentwicklung.v1.0.de
 
Authoring Management
Authoring ManagementAuthoring Management
Authoring Management
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...
12. TANNER-Hochschulwettbewerb | Beitrag Team Schildberg (Karlsruher Institut...
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
 
Executive Summary – App Entwicklung für Entscheider
Executive Summary – App Entwicklung für EntscheiderExecutive Summary – App Entwicklung für Entscheider
Executive Summary – App Entwicklung für Entscheider
 
.NET Core Architecture (UI)
.NET Core Architecture (UI).NET Core Architecture (UI)
.NET Core Architecture (UI)
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
Touch und Multitouch zwischen den Welten // ADC Wien
Touch und Multitouch zwischen den Welten // ADC WienTouch und Multitouch zwischen den Welten // ADC Wien
Touch und Multitouch zwischen den Welten // ADC Wien
 

Modern UI Design - FHDW AppNight

  • 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
  • 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
  • 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
  • 14. Modern UI Design Content, not Chrome Typographie Animation Authentically Digital
  • 16. Modern UI Design Content, not Chrome Typographie Animation Authentically Digital Use the Modern UI, where usefull
  • 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/

Hinweis der Redaktion

  1. Farbverläufe3DAbgerundeteEckenBrandingRadar
  2. Android, WP8 und 4th & Mayor