Réconcilier l’identité de mon application avec les guidelines

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

http://notes.mstechdays.fr

Réconcilier l’identité de mon application avec les

guidelines (DES201)Nathalie Belval et Cyril Cathala

Soat

Design

Retrouvez-nous sur le stand 61

Windows Phone Windows 8 DesignAzure

Nathalie BELVAL Cyril CATHALAExperte C#/XAML [email protected] Twitter : @nbelval Blog : blog.devndesign.fr

Tile’s upSmart

ScanCodeSmartShopping Wallbase Quoties Showrizo

Identité visuelle Microsoft Design Langage &

guidelines La recette du savant mélange

Agenda

Evolution du web

Evolution des devices

Avant

Après

Avant Après

Evolution du design

– PC– Mobile– Tablettes– TV

Evolution

Des identités visuellesDes interfacesPour s’adapter à tous les formats et aux nouveaux besoins des utilisateurs

Simplicité

Nouveaux supports Nouveaux formats

Nouvelles interactions Nouveaux besoins

IDENTITE VISUELLE

Identité Visuelle

Représentation graphique d’une entité

Mise en place :– Logo, formes, typo, couleur, etc.– Charte graphique

Enjeux :– Marketing / Communication / Commercialisation

Cohérence, simplicité

Identité visuelle

Identité Visuelle

Identité propre– Nom– Slogan

Stable dans le temps Objectif : se distinguer de la concurrence

– Attirer un public ciblé– Se démarquer– Garder son public– Empreinte émotionnelle sur son public

Qu’est-ce que l’image de marque ?

Identité Visuelle

Cohérence dans les réalisations Intérêt :– Identité graphique uniformisée– Identification facile de la marque

Laisser suffisamment de liberté

Ambition de la charte graphique

MICROSOFT DESIGN LANGAGE

Inspirations

Le bahaus1919-1928

Signalétiques1980

Motion design1980

Le style suisse1950-1970

« LES APPLICATIONS MODERN UI RÉUSSIES ONT EN COMMUN UN ENSEMBLE DE CARACTÉRISTIQUES QUI OFFRENT À L’UTILISATEUR UNE EXPÉRIENCE COHÉRENTE, ENGAGEANTE ET CONVAINCANTE »

Microsoft Design Langage

Des guidelines similaires pour tous les devices

Windows 8XboxWindows PhonePixel Sense


Charte visuelle de Microsoft Modernité, clarté, dynamisme, simplicité et

ergonomie 5 principes fondamentaux :


Peaufiner les détails

En faire plus avec moins

Rapidité et fluidité

Authenticité numérique

Gagner en équipe

Microsoft design langage


Peaufiner les détails

Fiable et utilisable Hiérarchie Penser aux résolutions Alignement sur la grille1

Alignements

Microsoft design langage Penser au tactile Réactivité Interaction intuitive Animations légères Mobilité


Rapidité et fluidité

2

Zones Gestuelle Types

Intéractions tactiles

Microsoft design langage Adopter le support Moderne Colorée Animée


Authenticité numérique

3

Microsoft design langage Travailler ensemble pour de

nouveaux scénarios Etre dans le modèle de

l’expérience utilisateur Tirer parti de l’éco-système


Gagner en équipe

4

Microsoft design langage Etre fort à quelque

chose Ciblé et direct Contenu avant tout Inspirer la confiance


En faire plus avec moins

5


Contenu avant tout

Avant Après


Contenu avant tout

LES GUIDELINES DE MODERNUI NE SONT PAS COMME UNE PEINTURE À SUIVRE À LA LETTRE.CHACUN DOIT FAIRE SES PROPRES CHOIX ET DECISIONS TOUT EN GARDANT LES MÊMES BUTS.

LA RECETTE DU SAVANT MÉLANGE

• Cohérence• Simplicité• Identité propre et

harmonieuse• Charte graphique (logo,

typographie, couleurs, etc.)• Attirer un public ciblé• Se démarquer• Garder son public

• Harmoniser les applications

• Simplicité, dynamisme, ergonomie

• Typographie, couleurs, logos, vignettes, icônes

• Contenu• Conserver l’expérience

utilisateur

Les ingrédients

La recette du savant mélange

Image de marqueStyle moderne


La recette : points clés pour se démarquer

Nommage

Images

Graphismes

Logos Silhouette

Couleurs

Vignettes

Animations

Talisman et contrats

Typographie


Fédérer son identité Cohérence– « Horaires/Résa. » ou « Voyages-SNCF » ?– « L’appli » pour la Société Générale ?

Nom de l’application

32


Logo de l’application = image ou texte– Pensez aux différents formats / déclinaisons– Adaptez-le à l’environnement Windows

Iconographie– Restez digital

Logos

33


Couleur de personnalité Une à deux couleurs d’accentuation

Couleurs

34

Pas d’accentuationThème libre

Windows 8Couleur d’accentuationThème utilisateur

Windows Phone

Windows 8

Windows Phone


Vitrine de l’application Premier élément visible de l’application Animé, contenu frais

Vignettes

36

2 tailles différentesPlus de 40 types différents

Windows 83 tailles différentes3 types différents

Windows Phone

demoSHOWRIZOVignettes



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

Graphismes

38

39

Avant AprèsLa recette du savant mélange


Donner du caractère à la présentation Illustrations– Images : en fond ou pour habiller

Images

40

demoBINGImages



Application Windows Store reconnaissable– Alignement en grille

Favoriser la découverte – Pivot, scrolling horizontal

Résolutions Navigation

Silhouette

42

Navigation hiérarchique Navigation plate

Navigation


Animations utiles– Raconte une histoire– Transmet des informations– Vecteur d’originalité

Animations

44

demoANIMATIONSCocktail Flow



Met en avant le contenu– Approprié– Déclenche un sentiment– 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

Typographie

46

demoDAILY ELLETypographie



Garder son public Créer des partenariats entre

marques– Gagner en équipe !

Talismans et contrats

48

Recette réussie : VOYAGES-SNCF

Respecter l’expérience utilisateur Apporter sa touche personnelle Navigation Spécificités – AppBar, Snapped View …

S’intégrer au système

iOS

Android

Windows

demoVOYAGES-SNCFCas d’étude


Recette réussie : COCKTAIL FLOW

Cocktail Flow : mobiles

La recette du savant mélange 14/04/2023

56

CONCLUSION

Un potentiel énorme sur Windows 8 Les développeurs ont besoin des designers Prenez l’inspiration dans les principes de ModernUI Le contenu avant tout La typographie est essentielle Concevoir pour le touch … sans oublier clavier/souris Les photos enrichissent les applications Utilisez la barre de talismans et les contrats Utilisez des animations judicieuse N’oubliez pas les vignettes

Conclusion

Conclusion

Conclusion

Ressources design.windows.com windowsuserexperiencetraining.com http://www.soat.fr/expertise/les-experts-partagent

http://www.soat.fr/expertise/les-experts-partagent

http://www.soat.fr/expertise/les-experts-partagent

Questions ?

REPONSES !

@CyrilCathala@nbelval

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

http://notes.mstechdays.fr

Technology

Réconcilier l’identité de mon application avec les guidelines