Le savant mélange d’uneimage de marque et dustyle moderne
Nathalie BELVALExperte XAML – Soat@nbelvalCyril CATHALAExpert XAML/C# - Soat@CyrilCathala
PlanImage de marque et rappelsL’essentiel pour se démarquer : refléter votre personnalitéEn harmonie avec son environne...
IntroductionQu’est-ce que l’image de marque ? ■ Identité propre ■ Stable dans le tempsFinalité ■ Se distinguer des autre...
Microsoft Design Language : rappels Charte visuelle de Microsoft Impression de confort d’environnement   ■ Ne pas perdre...
L’ESSENTIEL POUR SE DÉMARQUER             refléter votre personnalité
Comment s’adapter et se démarquer ?                                                             Logo       Couleurs  ...
LogoLogo de l’application = image ou texte  ■ Pensez aux différents formats / déclinaisons  ■ Adaptez-le à l’environnemen...
TuilesVitrine de l’applicationPremier élément visible de l’applicationAnimé, contenu frais                             ...
Couleurs Couleur de personnalité Associée à l’image de marque   ■ Aide à trouver votre application visuellement Windows...
29/11/2012       11
29/11/2012       12
DEMONSTRATIONCARREFOUR
Graphismes Donner du caractère à la présentation Mise en avant du contenu A utiliser avec modération, rester simple Pa...
SilhouetteApplication Windows Store reconnaissableLa composition générale donne l’identitéAlignement en grilleFavorise...
DEMONSTRATIONNATURE SPACEYOUBOOX
TypographieMet en avant le contenu ■ Approprié ■ Lisibilité : différenciation entre titres et corps du texte ■ A associer...
DEMONSTRATIONDAILY ELLE
ImagesUtilisez des illustrations en rapport avec le contexte : ■ en fond ■ pour illustrer le contenuImportance images en...
DEMONSTRATIONSMARTSHOPPINGLA REDOUTE
Nom de l’applicationFédérer son identitéCohérence ■ « Horaires/Résa. » ou « Voyages-SNCF » ?                            ...
AnimationsAnimations utiles ■ Raconte une histoire ■ Transmet des informations ■ Vecteur d’originalité                   ...
DEMONSTRATIONCOCKTAIL FLOW
EN HARMONIE AVEC SON      ENVIRONNEMENT       adapter son identité
S’intégrer au systèmeNe pas casser les habitudes de lutilisateur tout en apportant sa touche personnelleRespecter l’expé...
ETUDE DE CASVOYAGES-SNCF
iOS      29/11/2012             29
Android          29/11/2012                 30
Windows          29/11/2012                 31
29/11/2012       32
29/11/2012       33
Imposer son styleS’approprier l’identité visuelle du système ■ Disposition sur l’interfaceStyle épuré VS skeuomorphisme...
ETUDE DE CASCOCKTAIL FLOW
Cocktail Flow : mobiles                          29/11/2012                                 36
Peaufiner les détailsSentiment dun travail soigné et bien fini (alignements, ergonomie…)Parsemer d’idées originales ■ Ex...
ConclusionRevendiquer une identité forteSe distinguer en brillant d’originalitéEn harmonie avec son environnementS’app...
Nathalie BELVAL@nbelvalCyril CATHALA@CyrilCathalaQUESTIONS ?REPONSES !
Prochain SlideShare
Chargement dans…5
×

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

1 046 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 046
Sur SlideShare
0
Issues des intégrations
0
Intégrations
196
Actions
Partages
0
Téléchargements
10
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 !

×