Branding et ModernUI
Des ressources et des conseils pour passer d'un template
Visual Studio à une application possédant un...
Les buts et objectifs de cette session
Dans cette session, nous balayerons les tenants et aboutissants du branding de
marq...
Agenda
Travailler avec une charte graphique, ça fait mal ?
L’identité de marque ? Faites-le vous–même !
Le logo
Les couleu...
Une appli grandiose, c’est
quoi ?

Design/UX/UI
Une appli grandiose, c’est quoi ?
Un concept grandiose
Une application stable et « responsive »
Une appli bien designée (j...
Mais comment je donne une
identité à mon application ?

#mstechdays

Design/UX/UI
L’exemple Europe 1

#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
Charte numérique
Europe 1

#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
Et si je n’ai pas accès à la charte
?

#mstechdays

Design/UX/UI
Globalement, une charte c’est …

Un logo

#mstechdays

Des couleurs

Une police

Design/UX/UI

Un fond
Par défaut, Blend génère…

#mstechdays

Design/UX/UI
ou ceci :

#mstechdays

Design/UX/UI
Par l’exemple :
L’appli de la compagnie aérienne
Mitch Airways

#mstechdays

Design/UX/UI
Que fera cette application?

Suivre un vol.
Assurer du contenu institutionnel.
Donner des infos business.

#mstechdays

De...
Plutôt que des mots,
démo.
Le template standard
(et un champ de data fonctionnel)

#mstechdays

Design/UX/UI
Étape n 1
trouver la bonne couleur

#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
Transformer ces couleurs
en « brushes » XAML
(ne pas oublier de parler des thèmes)

#mstechdays

Design/UX/UI
Étape n 2
trouver la bonne

#mstechdays

police

Design/UX/UI
Suis-je obliger de me servir de police
SEGOE ?

#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
Étape n 2 (suite)
Intégrer la police

#mstechdays

Design/UX/UI
Étape n 3

Créer ou trouver un

#mstechdays

logo

Design/UX/UI
Haaa…Je ne suis pas designer…
Où puis-je trouver un logo?

#mstechdays

Design/UX/UI
MSPaint ?

#mstechdays

Design/UX/UI
Clipart ?

#mstechdays

Design/UX/UI
Haaa…Je ne suis pas designer…
Où puis-je trouver un logo?

#mstechdays

Icomonstr.com
Design/UX/UI
#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
Étape n 3 (suite)
Insérez son logo

#mstechdays

Design/UX/UI
Étape n 4
Insérer un background

#mstechdays

Design/UX/UI
Trouver le bon background
On évite les clichés.
On se renseigne sur les droits relatifs à l’image.
On se méfie des images ...
#mstechdays

Design/UX/UI
Pour toi public :
Donner encore un peu
(plus) de personnalité.

#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
Résumons-nous un peu :
1. Le branding, c’est primordial.
2. Pas besoin d’être designer.
(enfin, si, un peu, mais ça se soi...
Un logo

#mstechdays

Des couleurs

Une police

Design/UX/UI

Un fond
Les ressources
Les couleurs : https://https://kuler.adobe.com/
http://colorlovers.com
Les icônes :

http://iconmonstr.com/...
Les ressources

www.design.windows.com

#mstechdays

Design/UX/UI
Vous en voulez encore ???
Bon, encore quelques exemples.

#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
L’EXEMPLE SUNGUARD

#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
#mstechdays

Design/UX/UI
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !...
La validation UX du Store
TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR
SANS JAMAIS OSER LE DEMANDER...

Michel ROUSSEAU
Tec...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un template Visual Studio à une application possédant...
Prochain SlideShare
Chargement dans…5
×

Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité

887 vues

Publié le

Des slides et Blend pour Visual Studio : Voilà le cocktail requis pour vous expliquer comment partir d'un template applicatif basique pour le transformer en une application brandée, possédant une identité et agréable. Nous verrons comment trouver ou créer des assets graphiques de qualité pour obtenir un résultat très agréable, et quels sont les principes à respecter pour y parvenir, le tout en 45 mns !

Speakers : Michel Rousseau (microsoft)

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
887
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Branding et ModernUI : Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité

  1. 1. Branding et ModernUI Des ressources et des conseils pour passer d'un template Visual Studio à une application possédant une véritable identité Michel ROUSSEAU Technical Evangelist UX,UI,Design Microsoft mirousse@microsoft.com @rousseau_michel www.aka.ms/michel Design/UX/UI
  2. 2. Les buts et objectifs de cette session 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. #mstechdays Design/UX/UI
  3. 3. Agenda Travailler avec une charte graphique, ça fait mal ? L’identité de marque ? Faites-le vous–même ! Le logo Les couleurs Le fond La police Donner du staïlle à votre appli. Les variantes visuelles Des exemples de la vie réelle. #mstechdays Design/UX/UI
  4. 4. Une appli grandiose, c’est quoi ? Design/UX/UI
  5. 5. Une appli grandiose, c’est quoi ? Un concept grandiose Une 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é. #mstechdays Design/UX/UI
  6. 6. Mais comment je donne une identité à mon application ? #mstechdays Design/UX/UI
  7. 7. L’exemple Europe 1 #mstechdays Design/UX/UI
  8. 8. #mstechdays Design/UX/UI
  9. 9. Charte numérique Europe 1 #mstechdays Design/UX/UI
  10. 10. #mstechdays Design/UX/UI
  11. 11. #mstechdays Design/UX/UI
  12. 12. Et si je n’ai pas accès à la charte ? #mstechdays Design/UX/UI
  13. 13. Globalement, une charte c’est … Un logo #mstechdays Des couleurs Une police Design/UX/UI Un fond
  14. 14. Par défaut, Blend génère… #mstechdays Design/UX/UI
  15. 15. ou ceci : #mstechdays Design/UX/UI
  16. 16. Par l’exemple : L’appli de la compagnie aérienne Mitch Airways #mstechdays Design/UX/UI
  17. 17. Que fera cette application? Suivre un vol. Assurer du contenu institutionnel. Donner des infos business. #mstechdays Design/UX/UI
  18. 18. Plutôt que des mots, démo. Le template standard (et un champ de data fonctionnel) #mstechdays Design/UX/UI
  19. 19. Étape n 1 trouver la bonne couleur #mstechdays Design/UX/UI
  20. 20. #mstechdays Design/UX/UI
  21. 21. Transformer ces couleurs en « brushes » XAML (ne pas oublier de parler des thèmes) #mstechdays Design/UX/UI
  22. 22. Étape n 2 trouver la bonne #mstechdays police Design/UX/UI
  23. 23. Suis-je obliger de me servir de police SEGOE ? #mstechdays Design/UX/UI
  24. 24. #mstechdays Design/UX/UI
  25. 25. #mstechdays Design/UX/UI
  26. 26. #mstechdays Design/UX/UI
  27. 27. Étape n 2 (suite) Intégrer la police #mstechdays Design/UX/UI
  28. 28. Étape n 3 Créer ou trouver un #mstechdays logo Design/UX/UI
  29. 29. Haaa…Je ne suis pas designer… Où puis-je trouver un logo? #mstechdays Design/UX/UI
  30. 30. MSPaint ? #mstechdays Design/UX/UI
  31. 31. Clipart ? #mstechdays Design/UX/UI
  32. 32. Haaa…Je ne suis pas designer… Où puis-je trouver un logo? #mstechdays Icomonstr.com Design/UX/UI
  33. 33. #mstechdays Design/UX/UI
  34. 34. #mstechdays Design/UX/UI
  35. 35. Étape n 3 (suite) Insérez son logo #mstechdays Design/UX/UI
  36. 36. Étape n 4 Insérer un background #mstechdays Design/UX/UI
  37. 37. Trouver le bon background 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. #mstechdays Design/UX/UI
  38. 38. #mstechdays Design/UX/UI
  39. 39. Pour toi public : Donner encore un peu (plus) de personnalité. #mstechdays Design/UX/UI
  40. 40. #mstechdays Design/UX/UI
  41. 41. 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) #mstechdays Design/UX/UI
  42. 42. Un logo #mstechdays Des couleurs Une police Design/UX/UI Un fond
  43. 43. Les ressources Les couleurs : https://https://kuler.adobe.com/ http://colorlovers.com Les icônes : http://iconmonstr.com/ http://thenounproject.com/ Les polices : http://fontsquirrel.com #mstechdays Design/UX/UI
  44. 44. Les ressources www.design.windows.com #mstechdays Design/UX/UI
  45. 45. Vous en voulez encore ??? Bon, encore quelques exemples. #mstechdays Design/UX/UI
  46. 46. #mstechdays Design/UX/UI
  47. 47. L’EXEMPLE SUNGUARD #mstechdays Design/UX/UI
  48. 48. #mstechdays Design/UX/UI
  49. 49. #mstechdays Design/UX/UI
  50. 50. #mstechdays Design/UX/UI
  51. 51. #mstechdays Design/UX/UI
  52. 52. Donnez votre avis ! 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 ! #mstechdays Design/UX/UI
  53. 53. La validation UX du Store TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SANS JAMAIS OSER LE DEMANDER... Michel ROUSSEAU Technical Evangelist UX,UI,Design Microsoft mirousse@microsoft.com @rousseau_michel www.aka.ms/michel Design/UX/UI

×