réconcilier l’identité de mon application avec les guidelines
TRANSCRIPT
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
Nathalie BELVAL Cyril CATHALAExperte C#/XAML [email protected] Twitter : @nbelval Blog : blog.devndesign.fr
Tile’s upSmart
ScanCodeSmartShopping Wallbase Quoties Showrizo
– 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
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
« 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
Microsoft Design Langage
Charte visuelle de Microsoft Modernité, clarté, dynamisme, simplicité et
ergonomie 5 principes fondamentaux :
Microsoft Design Langage
Peaufiner les détails
En faire plus avec moins
Rapidité et fluidité
Authenticité numérique
Gagner en équipe
Microsoft design langage
Microsoft Design Langage
Peaufiner les détails
Fiable et utilisable Hiérarchie Penser aux résolutions Alignement sur la grille1
Microsoft design langage Penser au tactile Réactivité Interaction intuitive Animations légères Mobilité
Microsoft Design Langage
Rapidité et fluidité
2
Microsoft design langage Adopter le support Moderne Colorée Animée
Microsoft Design Langage
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
Microsoft Design Langage
Gagner en équipe
4
Microsoft design langage Etre fort à quelque
chose Ciblé et direct Contenu avant tout Inspirer la confiance
Microsoft Design Langage
En faire plus avec moins
5
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.
• 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 du savant mélange
La recette : points clés pour se démarquer
Nommage
Images
Graphismes
Logos Silhouette
Couleurs
Vignettes
Animations
Talisman et contrats
Typographie
La recette du savant mélange
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
La recette du savant mélange
Logo de l’application = image ou texte– Pensez aux différents formats / déclinaisons– Adaptez-le à l’environnement Windows
Iconographie– Restez digital
Logos
33
La recette du savant mélange
Couleur de personnalité Une à deux couleurs d’accentuation
Couleurs
34
Pas d’accentuationThème libre
Windows 8Couleur d’accentuationThème utilisateur
Windows Phone
La recette du savant mélange
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
La recette du savant mélange
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
La recette du savant mélange
Donner du caractère à la présentation Illustrations– Images : en fond ou pour habiller
Images
40
La recette du savant mélange
Application Windows Store reconnaissable– Alignement en grille
Favoriser la découverte – Pivot, scrolling horizontal
Résolutions Navigation
Silhouette
42
La recette du savant mélange
Animations utiles– Raconte une histoire– Transmet des informations– Vecteur d’originalité
Animations
44
La recette du savant mélange
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
La recette du savant mélange
Garder son public Créer des partenariats entre
marques– Gagner en équipe !
Talismans et contrats
48
Respecter l’expérience utilisateur Apporter sa touche personnelle Navigation Spécificités – AppBar, Snapped View …
S’intégrer au système
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