View
729
Download
1
Category
Preview:
DESCRIPTION
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.
Citation preview
Le savant mélange d’une image de marque et du style moderne
Nathalie BELVALExperte XAML – Soat@nbelval
Cyril 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 environnement, adapter son
identité Conclusion
12/04/2023
3
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
12/04/2023
4
12/04/2023
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
L’ESSENTIEL POUR SE DÉMARQUERrefléter votre personnalité
Comment s’adapter et se démarquer ?
12/04/2023
7
Logo Couleurs Graphismes Images
Nommage Silhouette Tuiles
Typographie
DesignerDéveloppeur
NavigationAnimations
12/04/2023
8
Logo
Logo de l’application = image ou texte■Pensez aux différents formats / déclinaisons■Adaptez-le à l’environnement Windows
Iconographie■Restez digital
Tuiles
Vitrine de l’application Premier élément visible de l’application Animé, contenu frais
12/04/2023
9
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
12/04/2023
10
12/04/2023
11
12/04/2023
12
DEMONSTRATIONCARREFOUR
12/04/2023
15
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
Avant Après
12/04/2023
16
Silhouette
Application Windows Store reconnaissable La composition générale donne l’identité
Alignement en grille Favoriser la découverte
■Pivot, scrolling horizontal
DEMONSTRATIONNATURE SPACEYOUBOOX
12/04/2023
18
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
DEMONSTRATIONDAILY ELLE
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
12/04/2023
20
DEMONSTRATIONSMARTSHOPPINGLA REDOUTE
Nom de l’application
Fédérer son identité Cohérence
■« Horaires/Résa. » ou « Voyages-SNCF » ?
12/04/2023
22
Animations
Animations utiles■Raconte une histoire■Transmet des informations■Vecteur d’originalité
12/04/2023
23
DEMONSTRATIONCOCKTAIL FLOW
EN HARMONIE AVEC SON
ENVIRONNEMENT adapter son identité
S’intégrer au système
Ne pas casser les habitudes de l'utilisateur tout en apportant sa touche personnelle
Respecter l’expérience utilisateur
Navigation Spécificités
■AppBar, Snapped View …
12/04/2023
27
ETUDE DE CASVOYAGES-SNCF
iOS
12/04/2023
29
Android
12/04/2023
30
Windows
12/04/2023
31
12/04/2023
32
12/04/2023
33
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
12/04/2023
34
ETUDE DE CASCOCKTAIL FLOW
Cocktail Flow : mobiles
12/04/2023
36
Peaufiner les détails
Sentiment d'un travail soigné et bien fini (alignements, ergonomie…)
Parsemer d’idées originales■Ex.: ProgressBar
12/04/2023
37
Conclusion
Revendiquer une identité forte Se distinguer en brillant d’originalité En harmonie avec son environnement S’approprier le style moderne !
12/04/2023
38
QUESTIONS ?REPONSES !
Nathalie BELVAL@nbelval
Cyril CATHALA@CyrilCathala
Recommended