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

265 vues

Publié le

Contrairement aux idées reçues, Microsoft Design Language c'est bien plus que des carrés monochromes. Avoir une identité forte dans son application tout en utilisant les codes de chacune des plateformes est tout à fait possible. Néanmoins, un simple portage à l'identique depuis une autre plate-forme sera rarement suffisant. Pour se démarquer, il ne faudra pas hésiter à s'intégrer complètement au système et exploiter ses forces, à travers ses spécificités (charmes, gestion des protocoles et extensions, etc.).

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
265
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Notation
  • Intro session Windows 8, generaleou design (supprimer la mention inutile). Ne pas modifier ce template. Choisissezplutôtune slide d’intro pour votresujet et supprimez les autres.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Notation
  • Réconcilier l’identité de mon application avec les guidelines

    1. 1. Donnez votre avis !Depuis votre smartphone, sur :http://notes.mstechdays.frDe nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…Merci de nous aider à améliorer les TechDayshttp://notes.mstechdays.fr
    2. 2. Réconcilier l’identité de monapplication avec les guidelines(DES201)Nathalie Belval et Cyril CathalaSoatDesign
    3. 3.  Retrouvez-nous sur le stand 61WindowsPhone Windows 8 DesignAzure
    4. 4. Nathalie BELVAL Cyril CATHALAExperte C#/XAML nathalie.belval@soat.fr Twitter : @nbelval Blog : blog.devndesign.frTile’s up Smart ScanCode SmartShopping Wallbase Quoties Showrizo
    5. 5. Identité visuelleMicrosoft Design Langage & guidelinesLa recette du savant mélangeAgenda
    6. 6. Evolution du web
    7. 7. Evolution des devices
    8. 8. AvantAprèsAvant AprèsEvolution du design
    9. 9. – PC– Mobile– Tablettes– TVEvolutionDes identités visuellesDes interfacesPour s’adapter à tous les formats etaux nouveaux besoins desutilisateursSimplicitéNouveaux supports Nouveaux formatsNouvelles interactions Nouveaux besoins
    10. 10. IDENTITE VISUELLE
    11. 11. 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
    12. 12. 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 publicQu’est-ce que l’image de marque ?
    13. 13. 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
    14. 14. MICROSOFT DESIGN LANGAGE
    15. 15. InspirationsLe bahaus1919-1928Signalétiques1980Motion design1980Le style suisse1950-1970
    16. 16. « LES APPLICATIONSMODERN UI RÉUSSIES ONTEN COMMUN UNENSEMBLE DECARACTÉRISTIQUES QUIOFFRENT À L’UTILISATEURUNE EXPÉRIENCECOHÉRENTE, ENGAGEANTEET CONVAINCANTE »
    17. 17. Microsoft Design LangageDes guidelines similaires pour tous les devicesWindows 8XboxWindows PhonePixel Sense
    18. 18. Microsoft Design LangageCharte visuelle de MicrosoftModernité, clarté, dynamisme, simplicité etergonomie5 principes fondamentaux :Microsoft Design LangagePeaufiner lesdétailsEn faire plusavec moinsRapidité etfluiditéAuthenticiténumériqueGagner enéquipe
    19. 19. Microsoft design langaMicrosoft Design LangagePeaufiner les détailsFiable et utilisableHiérarchiePenser aux résolutionsAlignement sur la grille1
    20. 20. Alignements
    21. 21. Microsoft design langaPenser au tactileRéactivitéInteraction intuitiveAnimations légèresMobilitéMicrosoft Design LangageRapidité et fluidité2
    22. 22. ZonesGestuelleTypesIntéractions tactiles
    23. 23. Microsoft design langaAdopter le supportModerneColoréeAniméeMicrosoft Design LangageAuthenticité numérique3
    24. 24. Microsoft design langaTravailler ensemble pour denouveaux scénariosEtre dans le modèle de l’expérienceutilisateurTirer parti de l’éco-systèmeMicrosoft Design LangageGagner en équipe4
    25. 25. Microsoft design langaEtre fort à quelque choseCiblé et directContenu avant toutInspirer la confianceMicrosoft Design LangageEn faire plus avec moins5
    26. 26. Microsoft Design LangageContenu avant toutAvant Après
    27. 27. Microsoft Design LangageContenu avant tout 
    28. 28. LES GUIDELINES DEMODERNUI NE SONT PASCOMME UNE PEINTURE ÀSUIVRE À LA LETTRE.CHACUN DOIT FAIRE SESPROPRES CHOIX ETDECISIONS TOUT ENGARDANT LES MÊMESBUTS.
    29. 29. LA RECETTE DUSAVANT MÉLANGE
    30. 30. • 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érienceutilisateurLes ingrédientsLa recette du savant mélangeImage de marque Style moderne
    31. 31. La recette du savant mélangeLa recette : points clés pour se démarquerNommageImagesGraphismesLogos SilhouetteCouleursVignettesAnimationsTalisman etcontratsTypographie
    32. 32. 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’application32
    33. 33. 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 digitalLogos33
    34. 34. La recette du savant mélangeCouleur de personnalitéUne à deux couleurs d’accentuationCouleurs34Pas d’accentuationThème libreWindows 8Couleur d’accentuationThème utilisateurWindows Phone
    35. 35. Windows 8WindowsPhone
    36. 36. La recette du savant mélangeVitrine de l’applicationPremier élément visible de l’applicationAnimé, contenu fraisVignettes362 tailles différentesPlus de 40 types différentsWindows 83 tailles différentes3 types différentsWindows Phone
    37. 37. SHOWRIZOVignettesLa recette du savant mélange
    38. 38. 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 contenuGraphismes38
    39. 39. 39Avant AprèsLa recette du savant mélange
    40. 40. La recette du savant mélangeDonner du caractère à la présentationIllustrations– Images : en fond ou pour habillerImages40
    41. 41. BINGImagesLa recette du savant mélange
    42. 42. La recette du savant mélangeApplication Windows Store reconnaissable– Alignement en grilleFavoriser la découverte– Pivot, scrolling horizontalRésolutionsNavigationSilhouette42
    43. 43. Navigation hiérarchiqueNavigation plateNavigation
    44. 44. La recette du savant mélangeAnimations utiles– Raconte une histoire– Transmet des informations– Vecteur d’originalitéAnimations44
    45. 45. ANIMATIONSCocktail FlowLa recette du savant mélange
    46. 46. 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, CambriaTypographie46
    47. 47. DAILY ELLETypographieLa recette du savant mélange
    48. 48. La recette du savant mélangeGarder son publicCréer des partenariats entremarques– Gagner en équipe !Talismans et contrats48
    49. 49. Recette réussie : VOYAGES-SNCF
    50. 50. Respecter l’expérience utilisateurApporter sa touche personnelleNavigationSpécificités– AppBar, Snapped View …S’intégrer au système
    51. 51. iOS
    52. 52. Android
    53. 53. Windows
    54. 54. VOYAGES-SNCFCas d’étudeLa recette du savant mélange
    55. 55. Recette réussie : COCKTAIL FLOW
    56. 56. Cocktail Flow : mobilesLa recette du savant mélange22/04/201356
    57. 57. CONCLUSION
    58. 58.  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 vignettesConclusionConclusion
    59. 59. ConclusionRessourcesdesign.windows.comwindowsuserexperiencetraining.comhttp://www.soat.fr/expertise/les-experts-partagent
    60. 60. Questions ?REPONSES !@CyrilCathala@nbelval
    61. 61. Donnez votre avis !Depuis votre smartphone, sur :http://notes.mstechdays.frDe nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…Merci de nous aider à améliorer les TechDayshttp://notes.mstechdays.fr

    ×