Design Windows 8: Retours d'expérience

Vous aimez ? Partagez donc ce contenu avec votre réseau

Partager

Design Windows 8: Retours d'expérience

  • 317 vues
Uploaded 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......

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.

Plus dans : Technologies
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Be the first to comment
    Be the first to like this
No Downloads

Vues

Total des vues
317
Sur Slideshare
317
From Embeds
0
Nombre d'ajouts
0

Actions

Partages
Téléchargements
4
Commentaires
0
J'aime
0

Ajouts 0

No embeds

Signaler un contenu

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
    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

  • 1. Retours d’expérience,Design Windows 8François LE PICHONDirecteur de créationSteaw & WaestDesign@iamstarkhttp://steaw-webdesign.com
  • 2. A PROPOSDesign
  • 3. Design• Studio de création, 2008• HTML5 : NeverMindTheBullets.com IE9• Windows 8 : Beta Janvier 2012, AppCircleSteaw
  • 4. UNE IDENTITE FORTEDesign Windows 8Design
  • 5. LES GRANDS PRINCIPESDesign Windows 8Design
  • 6. Design• Content before Chrome• Responsive• Typographique• Expériences unifiées• Touch-Ready• Flat DesignWindows 8 Design
  • 7. FLAT DESIGN ?Petite parenthèseDesign
  • 8. Design• La tendance 2013• Simplification desformes• Colorée, simple,accessible• Tendance Web etMobileFlat Design !
  • 9. Design
  • 10. DesignPrécurseur ?
  • 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. 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. Design2012
  • 14. Design
  • 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. RETOURS D’EXPÉRIENCEFermons la parenthèseDesign
  • 17. Design• Généralités• Larousse• News Republic– Appy Geek• Boursorama• SageExpériences
  • 18. Design• Recherche• MargesGénéralités
  • 19. DesignCherchez l’erreur
  • 20. DesignUtiliser le Charm Search
  • 21. DesignUtiliser le Charm Search
  • 22. DesignCherchez l’erreur
  • 23. DesignRespecter les marges
  • 24. Design• Dictionnaire• Hub très visuel• Photographies• Infinite (Square)Scroll• Zoom semanticsLarousse
  • 25. DesignHub très visuel, hautes tuiles
  • 26. DesignPhotographies
  • 27. DesignInfinite (Square) Scroll - Horizontal
  • 28. DesignSemantic Zoom - Utile et pertinent
  • 29. Design• Agrégateur• Tuiles photos• Dual Scroll• Appy GeekNews Republic
  • 30. DesignTuiles en image – Fond sombre
  • 31. DesignDouble Scroll Vertical – Lecture Rapide
  • 32. Design1 layout = 2 apps
  • 33. Design1 layout = 2 apps
  • 34. Design• Banque, Bourse,Actualités• Identité marque• Hub très riche• Ambiance parsecteurBoursorama
  • 35. DesignIndentité Marque
  • 36. DesignIndentité Marque
  • 37. DesignHub riche – Sections riches et dynamiques
  • 38. DesignHub riche – Sections dynamiques
  • 39. DesignInvité :Julien VANIERESage
  • 40. Design• Présentation• L’utilité des tuiles• Codes couleurs• Intuitivité• Double scrollingSage
  • 41. DesignJulien ?Présentation de Better ClientsTes impressions sur Windows 8
  • 42. DesignIntuitivité du scroll horizontal ?
  • 43. DesignAfficher facilement un contenu hétéroclite
  • 44. DesignCodes couleurs – Identification rapide
  • 45. DesignDouble Scroll – Cas complexe
  • 46. MERCIFrançois LE PICHONDirecteur de créationSteawDesign@iamstarkhttp://steaw-webdesign.com