Design Windows 8: Retours d'expérience
 

Like this? Share it with your network

Share

Design Windows 8: Retours d'expérience

le

  • 303 vues

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 ...

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.

Statistiques

Vues

Total des vues
303
Vues sur SlideShare
303
Vues externes
0

Actions

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

0 Ajouts 0

No embeds

Accessibilité

Catégories

Détails de l'import

Uploaded via as Microsoft PowerPoint

Droits d'utilisation

© Tous droits réservés

Report content

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
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire
  • 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

Design Windows 8: Retours d'expérience Presentation 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