Réconcilier l’identité de mon application avec les guidelines
•Transferir como PPTX, PDF•
0 gostou•400 visualizações
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.).
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Réconcilier l’identité de mon application avec les guidelines
Semelhante a Réconcilier l’identité de mon application avec les guidelines (20)
Mais de Microsoft Technet France
Mais de Microsoft Technet France (20)
Réconcilier l’identité de mon application avec les guidelines
- 1. 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
- 2. Réconcilier l’identité de mon application avec les guidelines (DES201) Nathalie Belval et Cyril Cathala Soat Design
- 3. Retrouvez-nous sur le stand 61 Windows Phone Windows 8 DesignAzure
- 4. Nathalie BELVAL Cyril CATHALA Experte C#/XAML nathalie.belval@soat.fr Twitter : @nbelval Blog : blog.devndesign.fr Tile’s up Smart ScanCode SmartShopping Wallbase Quoties Showrizo
- 5. Identité visuelle Microsoft Design Langage & guidelines La recette du savant mélange Agenda
- 8. Avant Après Avant Après Evolution du design
- 9. – PC – Mobile – Tablettes – TV Evolution Des identités visuelles Des interfaces Pour s’adapter à tous les formats et aux nouveaux besoins des utilisateurs Simplicité Nouveaux supports Nouveaux formats Nouvelles interactions Nouveaux besoins
- 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. 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 ?
- 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
- 15. Inspirations Le bahaus 1919-1928 Signalétiques 1980 Motion design 1980 Le style suisse 1950-1970
- 16. « 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 »
- 17. Microsoft Design Langage Des guidelines similaires pour tous les devices Windows 8 Xbox Windows Phone Pixel Sense
- 18. 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
- 19. Microsoft design langa Microsoft Design Langage Peaufiner les détails Fiable et utilisable Hiérarchie Penser aux résolutions Alignement sur la grille1
- 20. Alignements
- 21. Microsoft design langa Penser au tactile Réactivité Interaction intuitive Animations légères Mobilité Microsoft Design Langage Rapidité et fluidité 2
- 23. Microsoft design langa Adopter le support Moderne Colorée Animée Microsoft Design Langage Authenticité numérique 3
- 24. Microsoft design langa 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
- 25. Microsoft design langa Etre fort à quelque chose Ciblé et direct Contenu avant tout Inspirer la confiance Microsoft Design Langage En faire plus avec moins 5
- 26. Microsoft Design Langage Contenu avant tout Avant Après
- 27. Microsoft Design Langage Contenu avant tout
- 28. 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.
- 29. LA RECETTE DU SAVANT MÉLANGE
- 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érience utilisateur Les ingrédients La recette du savant mélange Image de marque Style moderne
- 31. 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
- 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’application 32
- 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 digital Logos 33
- 34. La recette du savant mélange Couleur de personnalité Une à deux couleurs d’accentuation Couleurs 34 Pas d’accentuation Thème libre Windows 8 Couleur d’accentuation Thème utilisateur Windows Phone
- 36. 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érentes Plus de 40 types différents Windows 8 3 tailles différentes 3 types différents Windows Phone
- 37. SHOWRIZO Vignettes La recette du savant mélange
- 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 contenu Graphismes 38
- 39. 39 Avant Après La recette du savant mélange
- 40. La recette du savant mélange Donner du caractère à la présentation Illustrations – Images : en fond ou pour habiller Images 40
- 41. BING Images La recette du savant mélange
- 42. 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
- 44. La recette du savant mélange Animations utiles – Raconte une histoire – Transmet des informations – Vecteur d’originalité Animations 44
- 45. ANIMATIONS Cocktail Flow La recette du savant mélange
- 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, Cambria Typographie 46
- 47. DAILY ELLE Typographie La recette du savant mélange
- 48. La recette du savant mélange Garder son public Créer des partenariats entre marques – Gagner en équipe ! Talismans et contrats 48
- 49. Recette réussie : VOYAGES-SNCF
- 50. Respecter l’expérience utilisateur Apporter sa touche personnelle Navigation Spécificités – AppBar, Snapped View … S’intégrer au système
- 51. iOS
- 52. Android
- 53. Windows
- 54. VOYAGES-SNCF Cas d’étude La recette du savant mélange
- 55. Recette réussie : COCKTAIL FLOW
- 56. Cocktail Flow : mobiles La recette du savant mélange 22/04/2013 56
- 57. CONCLUSION
- 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 vignettes Conclusion Conclusion
- 61. 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
Notas do Editor
- 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