Le savant mélange d'une image de marque et du style moderne

1 062 vues

Publié le

Intégrer l'identité de sa marque au style moderne de Microsoft ne paraît pas toujours évident. Voyons comment adapter et valoriser sa marque au sein de l'écosystème Microsoft (Windows 8 et Windows Phone), tout en respectant l'expérience utilisateur.

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 062
Sur SlideShare
0
Issues des intégrations
0
Intégrations
196
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le savant mélange d'une image de marque et du style moderne

  1. 1. Le savant mélange d’uneimage de marque et dustyle moderne
  2. 2. Nathalie BELVALExperte XAML – Soat@nbelvalCyril CATHALAExpert XAML/C# - Soat@CyrilCathala
  3. 3. PlanImage de marque et rappelsL’essentiel pour se démarquer : refléter votre personnalitéEn harmonie avec son environnement, adapter son identitéConclusion 29/11/2012 3
  4. 4. IntroductionQu’est-ce que l’image de marque ? ■ Identité propre ■ Stable dans le tempsFinalité ■ Se distinguer des autres applications ■ Attirer un public ciblé ■ Conserver son public 29/11/2012 4
  5. 5. Microsoft Design Language : rappels Charte visuelle de Microsoft Impression de confort d’environnement ■ Ne pas perdre l’utilisateur ■ Mettre en avant le contenu 5 principes fondamentaux : ■ Peaufiner les détails ■ En faire plus avec moins ■ Rapidité et fluidité ■ Faire preuve d’authenticité numérique ■ Gagner en équipe 29/11/2012 5
  6. 6. L’ESSENTIEL POUR SE DÉMARQUER  refléter votre personnalité
  7. 7. Comment s’adapter et se démarquer ?      Logo Couleurs Graphismes Images Typographie     Nommage Silhouette Animations Tuiles NavigationDesignerDéveloppeur 29/11/2012 7
  8. 8. LogoLogo de l’application = image ou texte ■ Pensez aux différents formats / déclinaisons ■ Adaptez-le à l’environnement Windows Iconographie  ■ Restez digital 29/11/2012 8
  9. 9. TuilesVitrine de l’applicationPremier élément visible de l’applicationAnimé, contenu frais 29/11/2012 9
  10. 10. Couleurs Couleur de personnalité Associée à l’image de marque ■ Aide à trouver votre application visuellement Windows Phone ■ Couleur d’accentuation ■ Thème utilisateur Windows 8 ■ Pas d’accentuation ■ Thème libre 29/11/2012 10
  11. 11. 29/11/2012 11
  12. 12. 29/11/2012 12
  13. 13. DEMONSTRATIONCARREFOUR
  14. 14. Graphismes Donner du caractère à la présentation Mise en avant du contenu A utiliser avec modération, rester simple Pas de décoration gênant le contenu 29/11/2012Avant Après 15
  15. 15. SilhouetteApplication Windows Store reconnaissableLa composition générale donne l’identitéAlignement en grilleFavoriser la découverte ■ Pivot, scrolling horizontal 29/11/2012 16
  16. 16. DEMONSTRATIONNATURE SPACEYOUBOOX
  17. 17. TypographieMet en avant le contenu ■ Approprié ■ Lisibilité : différenciation entre titres et corps du texte ■ A associer avec votre couleur d’accentuationCaractérise votre marquePolices recommandées par défaut ■ Segoe UI, Calibri, Cambria 29/11/2012 18
  18. 18. DEMONSTRATIONDAILY ELLE
  19. 19. ImagesUtilisez des illustrations en rapport avec le contexte : ■ en fond ■ pour illustrer le contenuImportance images en haute qualitéMeilleure mise en avant sous Windows 8Attention aux droits 29/11/2012 20
  20. 20. DEMONSTRATIONSMARTSHOPPINGLA REDOUTE
  21. 21. Nom de l’applicationFédérer son identitéCohérence ■ « Horaires/Résa. » ou « Voyages-SNCF » ? 29/11/2012 22
  22. 22. AnimationsAnimations utiles ■ Raconte une histoire ■ Transmet des informations ■ Vecteur d’originalité 29/11/2012 23
  23. 23. DEMONSTRATIONCOCKTAIL FLOW
  24. 24. EN HARMONIE AVEC SON ENVIRONNEMENT  adapter son identité
  25. 25. S’intégrer au systèmeNe pas casser les habitudes de lutilisateur tout en apportant sa touche personnelleRespecter l’expérience utilisateurNavigationSpécificités ■ AppBar, Snapped View … 29/11/2012 27
  26. 26. ETUDE DE CASVOYAGES-SNCF
  27. 27. iOS 29/11/2012 29
  28. 28. Android 29/11/2012 30
  29. 29. Windows 29/11/2012 31
  30. 30. 29/11/2012 32
  31. 31. 29/11/2012 33
  32. 32. Imposer son styleS’approprier l’identité visuelle du système ■ Disposition sur l’interfaceStyle épuré VS skeuomorphismeEvitez les distractions mais ne limitez pas la découverteAjouter sa touche personnelle 29/11/2012 34
  33. 33. ETUDE DE CASCOCKTAIL FLOW
  34. 34. Cocktail Flow : mobiles 29/11/2012 36
  35. 35. Peaufiner les détailsSentiment dun travail soigné et bien fini (alignements, ergonomie…)Parsemer d’idées originales ■ Ex.: ProgressBar 29/11/2012 37
  36. 36. ConclusionRevendiquer une identité forteSe distinguer en brillant d’originalitéEn harmonie avec son environnementS’approprier le style moderne ! 29/11/2012 38
  37. 37. Nathalie BELVAL@nbelvalCyril CATHALA@CyrilCathalaQUESTIONS ?REPONSES !

×