Télécharger pour lire hors ligne
Téléchargé parMicrosoft Technet France
Design Windows 8: Retours d'expérience
Le document présente un retour d'expérience sur le design de Windows 8, mettant en avant son approche innovante du 'flat design' et l'emphase sur une expérience utilisateur unifiée. Il mentionne également les tendances de design de 2013, ainsi que des réflexions sur l'intuitivité et l'utilisation de tuiles pour présenter des contenus variés. Enfin, le document aborde des exemples concrets d'applications utilisant ces principes de design.
Design Windows 8: Retours d'expérience
- 1. Retours d’expérience, Design Windows8 François LE PICHON Directeur de création Steaw & Waest Design @iamstark http://steaw-webdesign.com
- 2.
- 3. Design • Studio decréation, 2008 • HTML5 : NeverMindTheBullets.com IE9 • Windows 8 : Beta Janvier 2012, AppCircle Steaw
- 4. UNE IDENTITE FORTE DesignWindows 8 Design
- 11. LES GRANDS PRINCIPES DesignWindows 8 Design
- 12. Design • Content beforeChrome • Responsive • Typographique • Expériences unifiées • Touch-Ready • Flat Design Windows 8 Design
- 13. FLAT DESIGN ? Petiteparenthèse Design
- 14. Design • La tendance2013 • Simplification des formes • Colorée, simple, accessible • Tendance Web et Mobile Flat Design !
- 15.
- 16.
- 17. Design Oct 2010 Fun facts Microsoftlance Windows Phone 7, le premier OS en Flat Design BUILD, Microsoft dévoile Windows 8 : Flat Design Nouvelle identité pour Google : Flat Design Début des critiques sur le skeuomorphism Smashing Mag publie sur le Flat Design Windows 8 ressort dans chaque article Sept 2011 Dec 2011 2012 Oct 2012 Bonus
- 18. Design The lack ofskeuomorphic effects and almost extreme flatness of the “modern” (née Metro) Windows 8 interface is remarkably forward- thinking. Daring Fireball 18/01/2013
- 19.
- 20.
- 21. Design Nous sommes/entrons dansla „‟Flat Design Era‟‟ Windows 8 = Flat Design = Windows 8 Pour résumer A 16h avec Michel Rousseau Pour aller plus loin
- 22. RETOURS D’EXPÉRIENCE Fermons laparenthèse Design
- 23. Design • Généralités • Larousse •News Republic – Appy Geek • Boursorama • Sage Expériences
- 24.
- 25.
- 26. Design Utiliser le CharmSearch
- 27. Design Utiliser le CharmSearch
- 28.
- 29.
- 30. Design • Dictionnaire • Hubtrès visuel • Photographies • Infinite (Square) Scroll • Zoom semantics Larousse
- 31. Design Hub très visuel,hautes tuiles
- 32.
- 33. Design Infinite (Square) Scroll- Horizontal
- 34. Design Semantic Zoom -Utile et pertinent
- 35. Design • Agrégateur • Tuilesphotos • Dual Scroll • Appy Geek News Republic
- 36. Design Tuiles en image– Fond sombre
- 37. Design Double Scroll Vertical– Lecture Rapide
- 38. Design 1 layout =2 apps
- 39. Design 1 layout =2 apps
- 40. Design • Banque, Bourse, Actualités •Identité marque • Hub très riche • Ambiance par secteur Boursorama
- 41.
- 42.
- 43. Design Hub riche –Sections riches et dynamiques
- 44. Design Hub riche –Sections dynamiques
- 45.
- 46. Design • Présentation • L’utilitédes tuiles • Codes couleurs • Intuitivité • Double scrolling Sage
- 47. Design Julien ? Présentation deBetter Clients Tes impressions sur Windows 8
- 48. Design Intuitivité du scrollhorizontal ?
- 49. Design Afficher facilement uncontenu hétéroclite
- 50. Design Codes couleurs –Identification rapide
- 51. Design Double Scroll –Cas complexe
- 52. MERCI François LE PICHON Directeurde création Steaw Design @iamstark http://steaw-webdesign.com
Notes de l'éditeur
- #2 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.
- #4 Créé en 20082,5 ans avec MicrosoftPartenaire de IE9 : NevermindthebulletsMembre de l’app circle, travail sur Windows 8 depuis janvier 2012
- #5 On reconnait de suite une app Windows 8
- #6 Exemple d’app Windows 8
- #7 Exemple d’app Windows 8
- #8 Exemple d’app Windows 8
- #9 Exemple d’app Windows 8
- #10 Exemple d’app Windows 8
- #11 Exemple d’app Windows 8
- #13 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 ?
- #14 .
- #16 Coincidence ?
- #19 Consécration
- #20 Le flatdesign touche le monde
- #21 Meme google, meme Apple
- #22 Le skeuomorphisme et l`approche authentiquement numérique de Microsoft (DES208)
- #25 2 pièges classiques
- #26 Interdit de mettre un champs de recherche in-app
- #27 Ca a été interdit,Puis finalement authorisé, grace au pouvoir du peuple
- #29 Interdit de mettre des éléments sous la fleche
- #30 On peut mettre des éléments en topMais jamais à gauche, sauf au scrolll biensur
- #31 Exemple de page image
- #32 Pas de contenu frais, pas de nouveautéDonc de grandes belles tuiles pour habiller l’espace
- #33 Chaque thématique a son fond photo dédié, immersion
- #34 Pas de pagination, infinite scrollMais des milestone, en sections
- #35 Ou en Zoom semanticZoom semantic : meme contenu, display simplifiéCe n’est pas un autre contenu
- #36 Exemple de page image
- #37 Tuiles photos,Le fond noir les fait ressortir, bonne pratique
- #38 Agréagateur, besoin de lire vite, scroll verticale, reprise du template « settings »
- #39 Industrialisation
- #40 Industrialisation
- #42 Identité marque : la ligne de biais
- #43 Identité marque : header de biaisPetit détail qui marque bien l’indentité
- #45 3 sectionsTuiles hautes cliquablse pour entrer dans l’universTuiles spécifiques par sections avec accès directe aux infos
- #46 Julienmonte sur le stage
- #48 Présentation par Julien
- #50 On peut afficher sur le meme écran des graphs, des chiffres, du texte, chacun dans une tuiles séparés
- #51 Vert : DatasRose : clients