Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à...
-
Upload
microsoft-developpeurs -
Category
Technology
-
view
580 -
download
3
description
Transcript of Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à...
![Page 1: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/1.jpg)
![Page 2: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/2.jpg)
Design/UX/UI
Branding et ModernUI
Michel ROUSSEAUTechnical Evangelist UX,UI,Design
Microsoft
[email protected]@rousseau_michel
www.aka.ms/michel
Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant
une véritable identité
![Page 3: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/3.jpg)
Design/UX/UI#mstechdays
Dans cette session, nous balayerons les tenants et aboutissants du branding de marque pour le design applicatif. Par une approche pas à pas, nous verrons comment conformer facilement et rapidement l’identité de marque avec le design XAML dans Blend pour Visual Studio. Nous verrons également quelques trucs et astuces pour conforter votre approche par des exemples réels.
Les buts :Comprendre les composantes de l’identité dans une application Windows 8.1,Comprendre comment implémenter un design Windows 8,1 dans Blend avec du XAML.Comprendre comment orienter un dev ou une agence et où trouver des ressources pour votre projet.
Les buts et objectifs de cette session
![Page 4: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/4.jpg)
Design/UX/UI#mstechdays
Travailler avec une charte graphique, ça fait mal ?
L’identité de marque ? Faites-le vous–même !Le logoLes couleursLe fondLa police
Donner du staïlle à votre appli.Les variantes visuelles
Des exemples de la vie réelle.
Agenda
![Page 5: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/5.jpg)
Design/UX/UI
Une appli grandiose, c’est quoi ?
![Page 6: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/6.jpg)
Design/UX/UI#mstechdays
Un concept grandioseUne application stable et « responsive »Une appli bien designée (je veux dire, au niveau UX)Une appli bien designée (je veux dire, au niveau UI, aussi)Une application qui a une identité.
Une appli grandiose, c’est quoi ?
![Page 7: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/7.jpg)
Design/UX/UI#mstechdays
Mais comment je donne une identité à mon application ?
![Page 8: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/8.jpg)
Design/UX/UI#mstechdays
L’exemple Europe 1
![Page 9: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/9.jpg)
Design/UX/UI#mstechdays
![Page 10: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/10.jpg)
Design/UX/UI#mstechdays
Charte numérique Europe 1
![Page 11: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/11.jpg)
Design/UX/UI#mstechdays
![Page 12: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/12.jpg)
Design/UX/UI#mstechdays
![Page 13: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/13.jpg)
Design/UX/UI#mstechdays
Et si je n’ai pas accès à la charte ?
![Page 14: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/14.jpg)
Design/UX/UI#mstechdays
Globalement, une charte c’est …
Des couleurs Une police Un fondUn logo
![Page 15: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/15.jpg)
Design/UX/UI#mstechdays
Par défaut, Blend génère…
![Page 16: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/16.jpg)
Design/UX/UI#mstechdays
ou ceci :
![Page 17: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/17.jpg)
Design/UX/UI#mstechdays
Par l’exemple :L’appli de la compagnie aérienne
Mitch Airways
![Page 18: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/18.jpg)
Design/UX/UI#mstechdays
Suivre un vol.Assurer du contenu institutionnel.Donner des infos business.
Que fera cette application?
![Page 19: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/19.jpg)
Design/UX/UI#mstechdays
Plutôt que des mots,démo.Le template standard(et un champ de data fonctionnel)
![Page 20: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/20.jpg)
Design/UX/UI#mstechdays
Étape n°1trouver la bonne couleur
![Page 21: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/21.jpg)
Design/UX/UI#mstechdays
![Page 22: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/22.jpg)
Design/UX/UI#mstechdays
Transformer ces couleursen « brushes » XAML(ne pas oublier de parler des thèmes)
![Page 23: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/23.jpg)
Design/UX/UI#mstechdays
Étape n°2
trouver la bonne police
![Page 24: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/24.jpg)
Design/UX/UI#mstechdays
Suis-je obliger de me servir de police SEGOE ?
![Page 25: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/25.jpg)
Design/UX/UI#mstechdays
![Page 26: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/26.jpg)
Design/UX/UI#mstechdays
![Page 27: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/27.jpg)
Design/UX/UI#mstechdays
![Page 28: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/28.jpg)
Design/UX/UI#mstechdays
Étape n°2 (suite)Intégrer la police
![Page 29: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/29.jpg)
Design/UX/UI#mstechdays
Étape n°3
Créer ou trouver un logo
![Page 30: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/30.jpg)
Design/UX/UI#mstechdays
Haaa…Je ne suis pas designer… Où puis-je trouver un logo?
![Page 31: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/31.jpg)
Design/UX/UI#mstechdays
MSPaint ?
![Page 32: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/32.jpg)
Design/UX/UI#mstechdays
Clipart ?
![Page 33: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/33.jpg)
Design/UX/UI#mstechdays
Haaa…Je ne suis pas designer… Où puis-je trouver un logo?
Icomonstr.com
![Page 34: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/34.jpg)
Design/UX/UI#mstechdays
![Page 35: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/35.jpg)
Design/UX/UI#mstechdays
![Page 36: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/36.jpg)
Design/UX/UI#mstechdays
Étape n°3 (suite)Insérez son logo
![Page 37: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/37.jpg)
Design/UX/UI#mstechdays
Étape n°4Insérer un background
![Page 38: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/38.jpg)
Design/UX/UI#mstechdays
On évite les clichés.On se renseigne sur les droits relatifs à l’image.On se méfie des images de stocks photo.Les images donnent souvent des textes difficiles à lire.On favorise des dégradés classes et sobres……ou un élément de charte simple.
Trouver le bon background
![Page 39: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/39.jpg)
Design/UX/UI#mstechdays
![Page 40: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/40.jpg)
Design/UX/UI#mstechdays
Pour toi public : Donner encore un peu(plus) de personnalité.
![Page 41: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/41.jpg)
Design/UX/UI#mstechdays
![Page 42: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/42.jpg)
Design/UX/UI#mstechdays
Résumons-nous un peu :1. Le branding, c’est primordial.2. Pas besoin d’être designer.(enfin, si, un peu, mais ça se soigne)
![Page 43: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/43.jpg)
Design/UX/UI#mstechdays
Un logo Des couleurs Une police Un fond
![Page 44: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/44.jpg)
Design/UX/UI#mstechdays
Les couleurs : https://https://kuler.adobe.com/ http://colorlovers.com
Les icônes : http://iconmonstr.com/ http://thenounproject.com/
Les polices : http://fontsquirrel.com
Les ressources
![Page 46: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/46.jpg)
Design/UX/UI#mstechdays
Vous en voulez encore ??? Bon, encore quelques exemples.
![Page 47: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/47.jpg)
Design/UX/UI#mstechdays
![Page 48: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/48.jpg)
Design/UX/UI#mstechdays
L’EXEMPLE SUNGUARD
![Page 49: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/49.jpg)
Design/UX/UI#mstechdays
![Page 50: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/50.jpg)
Design/UX/UI#mstechdays
![Page 51: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/51.jpg)
Design/UX/UI#mstechdays
![Page 52: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/52.jpg)
Design/UX/UI#mstechdays
![Page 53: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/53.jpg)
Design/UX/UI#mstechdays
Depuis votre smartphone sur :http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les Techdays !
Donnez votre avis !
![Page 54: Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité](https://reader034.fdocuments.net/reader034/viewer/2022051817/547fb2d8b4af9f5a528b47de/html5/thumbnails/54.jpg)
Design/UX/UI
La validation UX du Store
Michel ROUSSEAUTechnical Evangelist UX,UI,Design
Microsoft
[email protected]@rousseau_michel
www.aka.ms/michel
TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SANS JAMAIS OSER LE DEMANDER...