Le téléchargement de votre SlideShare est en cours. ×
0
Retours d’expérience,Design Windows 8François LE PICHONDirecteur de créationSteaw & WaestDesign@iamstarkhttp://steaw-webde...
A PROPOSDesign
Design• Studio de création, 2008• HTML5 : NeverMindTheBullets.com IE9• Windows 8 : Beta Janvier 2012, AppCircleSteaw
UNE IDENTITE FORTEDesign Windows 8Design
LES GRANDS PRINCIPESDesign Windows 8Design
Design• Content before Chrome• Responsive• Typographique• Expériences unifiées• Touch-Ready• Flat DesignWindows 8 Design
FLAT DESIGN ?Petite parenthèseDesign
Design• La tendance 2013• Simplification desformes• Colorée, simple,accessible• Tendance Web etMobileFlat Design !
Design
DesignPrécurseur ?
DesignOct 2010Fun factsMicrosoft lance Windows Phone 7, le premier OS enFlat DesignBUILD, Microsoft dévoile Windows 8 : Fl...
DesignThe lack of skeuomorphic effects and almostextreme flatness of the “modern” (née Metro)Windows 8 interface is remark...
Design2012
Design
DesignNous sommes/entrons dans la „‟Flat Design Era‟‟Windows 8 = Flat Design = Windows 8Pour résumerA 16h avec Michel Rous...
RETOURS D’EXPÉRIENCEFermons la parenthèseDesign
Design• Généralités• Larousse• News Republic– Appy Geek• Boursorama• SageExpériences
Design• Recherche• MargesGénéralités
DesignCherchez l’erreur
DesignUtiliser le Charm Search
DesignUtiliser le Charm Search
DesignCherchez l’erreur
DesignRespecter les marges
Design• Dictionnaire• Hub très visuel• Photographies• Infinite (Square)Scroll• Zoom semanticsLarousse
DesignHub très visuel, hautes tuiles
DesignPhotographies
DesignInfinite (Square) Scroll - Horizontal
DesignSemantic Zoom - Utile et pertinent
Design• Agrégateur• Tuiles photos• Dual Scroll• Appy GeekNews Republic
DesignTuiles en image – Fond sombre
DesignDouble Scroll Vertical – Lecture Rapide
Design1 layout = 2 apps
Design1 layout = 2 apps
Design• Banque, Bourse,Actualités• Identité marque• Hub très riche• Ambiance parsecteurBoursorama
DesignIndentité Marque
DesignIndentité Marque
DesignHub riche – Sections riches et dynamiques
DesignHub riche – Sections dynamiques
DesignInvité :Julien VANIERESage
Design• Présentation• L’utilité des tuiles• Codes couleurs• Intuitivité• Double scrollingSage
DesignJulien ?Présentation de Better ClientsTes impressions sur Windows 8
DesignIntuitivité du scroll horizontal ?
DesignAfficher facilement un contenu hétéroclite
DesignCodes couleurs – Identification rapide
DesignDouble Scroll – Cas complexe
MERCIFrançois LE PICHONDirecteur de créationSteawDesign@iamstarkhttp://steaw-webdesign.com
Design Windows 8: Retours d'expérience
Design Windows 8: Retours d'expérience
Design Windows 8: Retours d'expérience
Design Windows 8: Retours d'expérience
Design Windows 8: Retours d'expérience
Design Windows 8: Retours d'expérience
Prochain SlideShare
Chargement dans... 5
×

Design Windows 8: Retours d'expérience

140

Published on

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.

Published in: Technologies
0 commentaires
0 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Be the first to like this

Aucun téléchargement
Vues
Total des vues
140
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
0
Actions
Partages
0
Téléchargements
4
Commentaires
0
J'aime
0
Ajouts 0
No embeds

No notes for slide
  • Intro session Windows 8, generale ou design (supprimer la mention inutile). Ne pas modifier ce template. Choisissez plutôt une slide d’intro pour votre sujet et supprimez les autres.
  • Créé en 20082,5 ans avec MicrosoftPartenaire de IE9 : NevermindthebulletsMembre de l’app circle, travail sur Windows 8 depuis janvier 2012
  • On reconnait de suite une app Windows 8
  • Exemple d’app Windows 8
  • Exemple d’app Windows 8
  • Exemple d’app Windows 8
  • Exemple d’app Windows 8
  • Exemple d’app Windows 8
  • Exemple d’app Windows 8
  • Pas d’habillage superflu, juste du contenuToutes tailles d’écrans, s’adapte a la taille de l’écranHiérarchie des infos par taille de typo, jouer sur les fonts peut vaoriser un designToutes les apps : machent par Tuiles, les commandes sont dans la commande bar, le partage se fait en charm, la recherche dans le charm rechercheTactile par défaut, premier OSFlat design ?
  • .
  • Coincidence ?
  • Consécration
  • Le flatdesign touche le monde
  • Meme google, meme Apple
  • Le skeuomorphisme et l`approche authentiquement numérique de Microsoft (DES208)
  • 2 pièges classiques
  • Interdit de mettre un champs de recherche in-app
  • Ca a été interdit,Puis finalement authorisé, grace au pouvoir du peuple
  • Interdit de mettre des éléments sous la fleche
  • On peut mettre des éléments en topMais jamais à gauche, sauf au scrolll biensur
  • Exemple de page image
  • Pas de contenu frais, pas de nouveautéDonc de grandes belles tuiles pour habiller l’espace
  • Chaque thématique a son fond photo dédié, immersion
  • Pas de pagination, infinite scrollMais des milestone, en sections
  • Ou en Zoom semanticZoom semantic : meme contenu, display simplifiéCe n’est pas un autre contenu
  • Exemple de page image
  • Tuiles photos,Le fond noir les fait ressortir, bonne pratique
  • Agréagateur, besoin de lire vite, scroll verticale, reprise du template « settings »
  • Industrialisation
  • Industrialisation
  • Identité marque : la ligne de biais
  • Identité marque : header de biaisPetit détail qui marque bien l’indentité
  • 3 sectionsTuiles hautes cliquablse pour entrer dans l’universTuiles spécifiques par sections avec accès directe aux infos
  • Julienmonte sur le stage
  • Présentation par Julien
  • On peut afficher sur le meme écran des graphs, des chiffres, du texte, chacun dans une tuiles séparés
  • Vert : DatasRose : clients
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×