Design Windows 8: Retours d'expérience

412 vues

Publié le

Les enjeux du développement graphique sur les plateformes Microsoft : retours d’expérience sur le client … ou comment réussir un design en évitant les écueils techniques et structurels du schéma de production pour Windows 8.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Design Windows 8: Retours d'expérience

  1. 1. Retours d’expérience,Design Windows 8François LE PICHONDirecteur de créationSteaw & WaestDesign@iamstarkhttp://steaw-webdesign.com
  2. 2. A PROPOSDesign
  3. 3. Design• Studio de création, 2008• HTML5 : NeverMindTheBullets.com IE9• Windows 8 : Beta Janvier 2012, AppCircleSteaw
  4. 4. UNE IDENTITE FORTEDesign Windows 8Design
  5. 5. LES GRANDS PRINCIPESDesign Windows 8Design
  6. 6. Design• Content before Chrome• Responsive• Typographique• Expériences unifiées• Touch-Ready• Flat DesignWindows 8 Design
  7. 7. FLAT DESIGN ?Petite parenthèseDesign
  8. 8. Design• La tendance 2013• Simplification desformes• Colorée, simple,accessible• Tendance Web etMobileFlat Design !
  9. 9. Design
  10. 10. DesignPrécurseur ?
  11. 11. DesignOct 2010Fun factsMicrosoft lance Windows Phone 7, le premier OS enFlat DesignBUILD, Microsoft dévoile Windows 8 : Flat DesignNouvelle identité pour Google : Flat DesignDébut des critiques sur le skeuomorphismSmashing Mag publie sur le Flat DesignWindows 8 ressort dans chaque articleSept 2011Dec 20112012Oct 2012Bonus
  12. 12. DesignThe lack of skeuomorphic effects and almostextreme flatness of the “modern” (née Metro)Windows 8 interface is remarkably forward-thinking.Daring Fireball18/01/2013
  13. 13. Design2012
  14. 14. Design
  15. 15. DesignNous sommes/entrons dans la „‟Flat Design Era‟‟Windows 8 = Flat Design = Windows 8Pour résumerA 16h avec Michel RousseauPour aller plus loin
  16. 16. RETOURS D’EXPÉRIENCEFermons la parenthèseDesign
  17. 17. Design• Généralités• Larousse• News Republic– Appy Geek• Boursorama• SageExpériences
  18. 18. Design• Recherche• MargesGénéralités
  19. 19. DesignCherchez l’erreur
  20. 20. DesignUtiliser le Charm Search
  21. 21. DesignUtiliser le Charm Search
  22. 22. DesignCherchez l’erreur
  23. 23. DesignRespecter les marges
  24. 24. Design• Dictionnaire• Hub très visuel• Photographies• Infinite (Square)Scroll• Zoom semanticsLarousse
  25. 25. DesignHub très visuel, hautes tuiles
  26. 26. DesignPhotographies
  27. 27. DesignInfinite (Square) Scroll - Horizontal
  28. 28. DesignSemantic Zoom - Utile et pertinent
  29. 29. Design• Agrégateur• Tuiles photos• Dual Scroll• Appy GeekNews Republic
  30. 30. DesignTuiles en image – Fond sombre
  31. 31. DesignDouble Scroll Vertical – Lecture Rapide
  32. 32. Design1 layout = 2 apps
  33. 33. Design1 layout = 2 apps
  34. 34. Design• Banque, Bourse,Actualités• Identité marque• Hub très riche• Ambiance parsecteurBoursorama
  35. 35. DesignIndentité Marque
  36. 36. DesignIndentité Marque
  37. 37. DesignHub riche – Sections riches et dynamiques
  38. 38. DesignHub riche – Sections dynamiques
  39. 39. DesignInvité :Julien VANIERESage
  40. 40. Design• Présentation• L’utilité des tuiles• Codes couleurs• Intuitivité• Double scrollingSage
  41. 41. DesignJulien ?Présentation de Better ClientsTes impressions sur Windows 8
  42. 42. DesignIntuitivité du scroll horizontal ?
  43. 43. DesignAfficher facilement un contenu hétéroclite
  44. 44. DesignCodes couleurs – Identification rapide
  45. 45. DesignDouble Scroll – Cas complexe
  46. 46. MERCIFrançois LE PICHONDirecteur de créationSteawDesign@iamstarkhttp://steaw-webdesign.com

×