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