Meetup langages visuels - Backelite - novembre 2017
1 j'aime531 vues
Le document décrit l'importance de la conception de services numériques à travers le design systémique en utilisant l'atomic design, qui vise à créer des composants modulaires. Il met l'accent sur l'interaction entre designers et développeurs pour améliorer l'expérience utilisateur et aborde l'évolution du médium GIF en tant qu'outil artistique. La présentation inclut également des réflexions sur la typographie moderne et son rôle dans l'expression visuelle.
Meetup langages visuels - Backelite - novembre 2017
- 1. Digital Service Design by Capgemini
- 2. 2 ATOMIC DESIGN Vive les systèmes de composants ! Meetup langages visuels
- 4. #1 Coup de foudre à Brad Frost Hill #2 Mon atomic et moi #3 Vers un système de composants et au-delà #4 Le bonheur est dans le travail d’équipe
- 5. Backelite - Digital Service Design by Capgemini Coup de foudre à Brad Frost hill 5
- 6. 6 Meetup langages visuels Comment produire du contenu pour ce nouveau médium ?
- 10. 10 Get your content ready to go anywhere, because it's going to go everywhere Brad Frost
- 11. 11 Meetup langages visuels Mais comment sortir de cette conception par écran ? Concevoir un système de composants en atomic design
- 22. Backelite - Digital Service Design by Capgemini 22 Section Title Backelite - Digital Service Design by Capgemini L'atomic design - Brad Frost
- 23. 23 Meetup langages visuels Conception par écranConception par écran
- 24. 24 Meetup langages visuels Conception par composants
- 25. 25 Meetup langages visuels ©Lonely Planet Les « living style guide »
- 26. Backelite - Digital Service Design by Capgemini Mon atomic et moi 26
- 27. 27 Meetup langages visuels Travailler en atomic design sans parler d’atomic design ?
- 28. Meetup langages visuels Métaphore #1 28
- 29. Meetup langages visuels 29Les briques de bases (atomes)
- 30. Meetup langages visuels 30Les composants (molécules & organismes)
- 31. Meetup langages visuels 31Un des résultats possibles
- 32. Meetup langages visuels 32Le style guide +
- 33. Meetup langages visuels 33Le style guide
- 34. Meetup langages visuels Métaphore #2 34 L'atomic design et la créativité
- 35. Meetup langages visuels 35Les notes (atomes)
- 36. Meetup langages visuels 36Les accords (molécules)
- 37. Meetup langages visuels 37La phrase musicale (organismes)
- 38. Meetup langages visuels 38La partition : 7 notes = une infinité de possibilités créatives
- 40. Meetup langages visuels 40 La mélodie
- 41. Meetup langages visuels 41 Le rythme
- 42. 42
- 43. 43 Meetup langages visuels Pas de bonne composition sans bon compositeur
- 44. 44 Be consistent, not uniform. Gov.uk design principles
- 45. Backelite - Digital Service Design by Capgemini Vers un système de composants et au-délà 45
- 46. Meetup langages visuels #1 commencer le système 46Set up a design system
- 47. 47 Meetup langages visuels Atomes = identité de marque
- 53. Meetup langages visuels #2 designer par composants 53Concevoir un système de composants en atomic design
- 54. 54 Meetup langages visuels Partir des fonctionnalités principales
- 55. Je ne veux pas faire un écran de login…
- 56. Je veux que mon utilisateur puisse se connecter à mon produit
- 57. 57 Meetup langages visuels Le système va se construire au fur et à mesure Composants Parcours clés
- 58. 58 Meetup langages visuels Distinguer structure et contenu
- 59. @TouchUp
- 60. @TouchUp
- 61. @TouchUp
- 62. @TouchUp
- 63. @TouchUp
- 64. @TouchUp
- 65. 65 Meetup langages visuels Concevoir le détail et l’ensemble
- 66. 66 Meetup langages visuels Garder en tête que tout est lié
- 67. 67 Meetup langages visuels Souvenez-vous, la décennie dernière…
- 68. 68 Meetup langages visuels Construire des systèmes évolutifs directement dans nos logiciels de conception
- 69. 69 Meetup langages visuels Construire des systèmes vivants et évolutifs directement dans nos logiciels de conception Sketch Figma
- 70. 70 Meetup langages visuels atomic Des composants
- 71. 71 Meetup langages visuels paramétrable s Des composants
- 72. 72 Meetup langages visuels responsives Des composants
- 73. Meetup langages visuels #3 partager le système 73
- 74. 74 Meetup langages visuels Recevoir la charte graphique du client
- 75. 75 Meetup langages visuels Télécharger un fichier Sketch regroupant les composants
- 76. 76 Meetup langages visuels Télécharger un fichier Sketch regroupant les composants
- 77. 77 Meetup langages visuels Les bibliothèques partagées Bibliothèques partagées : laquelle choisir ?
- 78. 78 Meetup langages visuels Une source unique pour aller chercher les composants
- 79. 79 Meetup langages visuels Des mises à jour simplifiées
- 80. 80 Meetup langages visuels Tous les designers d’un service partent de la même matière pour construire les interfaces
- 81. 81 Meetup langages visuels Quid des composants développés ?
- 82. 82 Meetup langages visuels Airbnb : des dessins qui génèrent directement une interface
- 83. Backelite - Digital Service Design by Capgemini Le bonheur est dans le travail d’équipe 83
- 84. 84 Meetup langages visuels S’approprier la méthode #1
- 86. 86 Meetup langages visuels Travailler comme les développeurs #2 Mirrored atomicity: designers and developers speaking the same language
- 87. 87 Meetup langages visuels Travailler comme les développeurs avec #1
- 88. 88 Meetup langages visuels Co-créons ensemble
- 89. 89 Meetup langages visuels Faire participer tout le monde #3
- 91. 91 Meetup langages visuels Nommer des garants #4
- 93. Backelite - Digital Service Design by Capgemini Le mot de la fin 93
- 94. 94 Meetup langages visuels Concevoir un système de composants #1 Le petit ET le grand #2 L’ensemble ET le détail #3 Restons Créatifs
- 95. 95 Meetup langages visuels Du temps gagné pour améliorer l’expérience de nos utilisateurs !!
- 96. Questions ? The information contained in this presentation is proprietary. © 2017 Capgemini. All rights reserved. 96
- 98. Backelite - Digital Service Design by Capgemini 98 La typo, ça vous parle ? La typographie est un language visuel qu’il faut désormais considérer non plus comme un simple outil de diffusion de l’information mais comme un moyen d’expression, une matière vivante, interactive, créative et en mutation constante.
- 99. Backelite - Digital Service Design by Capgemini 99 Bonsoir, je m’appelle Montserrat.
- 100. Backelite - Digital Service Design by Capgemini 100 Je n’ai pas été choisie par hasard Contexte Valeurs véhiculées Attributs Disponibilité
- 101. Backelite - Digital Service Design by Capgemini 101 Je n’ai pas été choisie par hasard Présentation Keynote Elégance et modernité 9 graisses et 18 styles Open source
- 102. Backelite - Digital Service Design by Capgemini 102 J’ai un message de fond à vous faire passer BIG TYPE IS THE NEXT THING
- 103. Backelite - Digital Service Design by Capgemini 103 Du coup j’y mets les formes BIG TYPE IS THE NEXT THING
- 104. Backelite - Digital Service Design by Capgemini 104 Aujourd’hui, je prends de plus en plus de place sur vos écrans
- 105. Backelite - Digital Service Design by Capgemini 105 J’ai donc besoin de suivre certaines règles pour me faire bien comprendre. https://medium.muz.li/typography-that-sacred-cow-ea7a5909ca70
- 106. Backelite - Digital Service Design by Capgemini 106 https://www.propublica.org/article/how-typography-can-save-your-life IL EST TOTALEMENT INUTILE DE ME FAIRE HURLER SUR PLUSIEURS LIGNES EN PENSANT QUE JE VAIS ME FAIRE REMARQUER.
- 107. Backelite - Digital Service Design by Capgemini IL EST TOTALEMENT INUTILE DE ME FAIRE HURLER SUR PLUSIEURS LIGNES EN PENSANT QUE JE VAIS ME FAIRE REMARQUER. 107 https://www.propublica.org/article/how-typography-can-save-your-life
- 108. Backelite - Digital Service Design by Capgemini Il est totalement inutile de me faire HURLER sur plusieurs lignes en pensant que je vais me faire remarquer. 108 https://www.propublica.org/article/how-typography-can-save-your-life
- 109. Backelite - Digital Service Design by Capgemini 109 Cela fait longtemps que les designers ont pris conscience de mon potentiel graphique
- 110. Backelite - Digital Service Design by Capgemini 110 Section Title Backelite - Digital Service Design by Capgemini
- 111. Backelite - Digital Service Design by Capgemini 111 J’ai donc été très vite adoptée par des sites expérimentaux
- 112. Backelite - Digital Service Design by Capgemini 112
- 113. Backelite - Digital Service Design by Capgemini 113 Et j’apparais progressivement dans le e-commerce
- 114. Backelite - Digital Service Design by Capgemini 114
- 115. Backelite - Digital Service Design by Capgemini 115 Même Amazon commence à prendre soin de moi…
- 116. Backelite - Digital Service Design by Capgemini 116 La typo, ça vous parle ? Backelite - Digital Service Design by Capgemini
- 117. Backelite - Digital Service Design by Capgemini 117 La typo, ça vous parle ? Backelite - Digital Service Design by Capgemini
- 118. Backelite - Digital Service Design by Capgemini 118
- 119. Backelite - Digital Service Design by Capgemini 119 Certains pensent même que je suis l’avenir de l’interface. https://www.toptal.com/designers/ui/type-design
- 120. Backelite - Digital Service Design by Capgemini 120 ++- https://www.fontself.com/ Chez Backelite, on a eu envie de me trypoter un peu
- 121. Backelite - Digital Service Design by Capgemini 121 Chez Backelite, on a eu envie de me trypoter un peu https://www.fontself.com/
- 122. Backelite - Digital Service Design by Capgemini 122 Avant de vous quitter, je voulais vous montrer une dernière chose…
- 123. Backelite - Digital Service Design by Capgemini 123
- 124. Backelite - Digital Service Design by Capgemini 124 https://www.behance.net/gallery/57732371/2017-Brand-New-Conference-Identity
- 125. Backelite - Digital Service Design by Capgemini 125 Je m’appelle Montserrat. Et je fais partie des milliers de typos qui ne demandent qu’à prendre vie dans vos designs. Merci.
- 127. Backelite - Digital Service Design by Capgemini POP ART 2.0 ? 127
- 128. Backelite - Digital Service Design by Capgemini 128
- 129. Backelite - Digital Service Design by Capgemini Meetup langages visuels 129 90’s Une enfance kikoolol 2000’s Une adolescence malmenée par Flash 1987 La naissance du GIF Le GIF a 30 ans : L’âge d’or ? 2010’s Le grand retour grâce aux réseaux sociaux Backelite - Digital Service Design by Capgemini Meetup langages visuels
- 130. Backelite - Digital Service Design by Capgemini Meetup langages visuels dans nos mails sur les articles dans nos SMS sur les réseaux sociaux et même dans nos claviers ! 130 Le GIF pour s’exprimer Backelite - Digital Service Design by Capgemini Meetup langages visuels
- 131. Backelite - Digital Service Design by Capgemini 131
- 132. Backelite - Digital Service Design by Capgemini 132 GIF : POP HEART
- 133. Backelite - Digital Service Design by Capgemini Meetup langages visuels 133 Le Pop Art pour les nuls Icones et célébrités Médias populaires Collages et contexte Répétition Backelite - Digital Service Design by Capgemini Meetup langages visuels
- 134. Backelite - Digital Service Design by Capgemini Meetup langages visuels 134 Le Pop Art pour les nuls Icons et célébrités Backelite - Digital Service Design by Capgemini Médias populaires Collages et contexte Répétition Meetup langages visuels
- 135. Backelite - Digital Service Design by Capgemini Meetup langages visuels 135Backelite - Digital Service Design by Capgemini Médias populaires Collages et contexte RépétitionIcons et célébrités Le Pop Art pour les nuls Meetup langages visuels
- 136. Backelite - Digital Service Design by Capgemini Meetup langages visuels 136Backelite - Digital Service Design by Capgemini Médias populaires RépétitionIcons et célébrités Collages et contexte Le Pop Art pour les nuls Meetup langages visuels
- 137. Backelite - Digital Service Design by Capgemini Meetup langages visuels 137Backelite - Digital Service Design by Capgemini Médias populairesIcons et célébrités Collages et contexte Répétition Le Pop Art pour les nuls Meetup langages visuels
- 138. Backelite - Digital Service Design by Capgemini Meetup langages visuels 138Backelite - Digital Service Design by Capgemini Meetup langages visuels Dans une volonté de s’inscrire dans cette ère d’industrialisation, les peintures du mouvement Pop Art reprennent les codes graphiques des impressions à grande échelle avec des techniques très économiques qui vont limiter le nombre de couleurs et créer une trame. La compression comme signature et identité graphique
- 139. Backelite - Digital Service Design by Capgemini Meetup langages visuels Pop Art 2.0 ? 139Backelite - Digital Service Design by Capgemini Meetup langages visuels Le GIF emprunte des codes du Pop Art parce qu’ils sont tous les deux connectés à notre culture populaire. Mais plus qu’un mouvement artistique, est-ce que le GIF ne serait pas plutôt un outil artistique ? Au même titre que la peinture, le cinéma, la photographie, la sculpture ou l’écriture, le GIF a-t-il sa place auprès de ces techniques d’expressions ? Il y a un véritable mouvement artistique autour du medium qu’est le GIF, de nombreux artistes (des « gifs artistes ») émergent et de véritables créations artistiques jouent avec les contraintes du GIF.
- 140. Backelite - Digital Service Design by Capgemini Meetup langages visuels 140 Cinemagraphs http://cinemagraphs.com/ Backelite - Digital Service Design by Capgemini Meetup langages visuels
- 141. Backelite - Digital Service Design by Capgemini Meetup langages visuels 141 davidope http://dvdp.tumblr.com/ Backelite - Digital Service Design by Capgemini Meetup langages visuels
- 142. Backelite - Digital Service Design by Capgemini Meetup langages visuels 142 Micaël Reynaud http://dunun-koken.dunun.com/ Backelite - Digital Service Design by Capgemini Meetup langages visuels
- 143. Backelite - Digital Service Design by Capgemini Meetup langages visuels 143 Romain Laurent http://www.romain-laurent.com/ Backelite - Digital Service Design by Capgemini Meetup langages visuels
- 144. Backelite - Digital Service Design by Capgemini Meetup langages visuels 144 INSA http://gif-iti.tumblr.com/ https://www.theguardian.com/artanddesign/jonathanjonesblog/2015/jan/26/art-gifs-insa-biggest-animated-technology Backelite - Digital Service Design by Capgemini Meetup langages visuels
- 145. Anna Hrachovec // Bernard Demenge // Cyriak // Erdal Inci // Kiszkiloszki // kyttenjanae // Nicolas Fong // Ori Toor // Said Dagdeviren // Scorpion Dagger // Sholim // Tom Morris Et tellement d’autres encore, tout ceci n’est qu’un petit échantillon de l’étendue du mouvement qui existe actuellement !
- 146. Backelite - Digital Service Design by Capgemini LE GIF DÉPASSE NOS ÉCRANS
- 147. Backelite - Digital Service Design by Capgemini Meetup langages visuels 147Backelite - Digital Service Design by Capgemini Meetup langages visuels Ce qui est particulièrement amusant avec ces usages, c'est que certains ont un tel impact et un tel succès que l'on ne peut plus voir la scène sans penser au GIF. L'appropriation et la circulation des fictions produites par les industries culturelles les transforment donc et donnent un autre sens au texte vu dans sa globalité. Quand l’oeuvre dépasse la fiction
- 148. Backelite - Digital Service Design by Capgemini Meetup langages visuels 148Backelite - Digital Service Design by Capgemini Meetup langages visuels Grâce à l’AR Kit d’Apple, les usages de la réalité augmentée se développent et l’un des premiers acteurs à se positionner n’est autre que le célèbre Giphy qui permet de faire vivre les fameuses animations dans notre quotidien. Une façon de pour le GIF de se ré-inventer et de dépasser nos écrans ? iOS 11 invite le GIF dans notre réalité (augmentée)
- 149. Backelite - Digital Service Design by Capgemini Meetup langages visuels 149Backelite - Digital Service Design by Capgemini Meetup langages visuels Depuis 2011, un groupe sur Facebook milite pour lancer le premier festival international du GIF, qui se tiendrait naturellement à Gif-Sur-Yvette ! Le Festival international du GIF
- 150. Backelite - Digital Service Design by Capgemini Meetup langages visuels 150Backelite - Digital Service Design by Capgemini Meetup langages visuels Début février 2014, la Saatchi Gallery de Londres, s’est associée à Google+ pour lancer un concours de photographies en mouvement sous format GIF. Même si Saatchi présente son initiative comme le «premier concours international» du genre, elle avait été un peu précédée par la Tate. En janvier 2014, la Tate Britain a en effet créé un nouveau prix pour l’art numérique à l’occasion duquel elle a également invité le public à créer des GIFs et à les soumettre dans le cadre d’un concours. Le GIF s’expose
- 151. #1 / 3,136.00€ #2 / 1,568.00€ #3 / 1,045.33€ #4 / 784.00€ #5 / 627.20€ #6 / 522.67€ #7 / 448.00€ #8 / 392.00€ #9 / 348.44€ #10 / 313.60€ #11 / 285.09€ #12 / 261.33€ #13 / 241.23€ #14 / 224.00€ #15 / 209.07€ #16 / 196.00€ #17 / 184.47€ #18 / 174.22€ #19 / 165.05€ #20 / 156.80€ #21 / 149.33€ #22 / 142.55€ #23 / 136.35€ #24 / 130.67€ #25 / 125.44€ #26 / 120.62€ #27 / 116.15€ #28 / 112.00€ #29 / 108.14€ #30 / 104.53€ #31 / 101.16€ #32 / 98.00€ Michael Manning Digitalarti today and tomorrow 0-Day Art Triangulation Blog Jacqui Kenny Nicolas Sassoon gli.tc/h 0-Day Art http://gifmarket.net/ http://ani-gif.com/about/
- 152. Meetup langages visuelsMeetup langages visuels En octobre 2015, Instagram lance son application Bommerang qui permet de générer une courte vidéo en boucle de quelques secondes : un héritage du GIF qui influence la vidéo ? Car si le Pop Art emprunte ses matériaux à la culture de masse, celle-ci en retour profite de ses innovations stylistiques. Et cela se traduit probablement grâce à des outils comme Boomerang qui permettent de créer soi même des GIFs non pas depuis une pub, un clip ou un film mais directement depuis notre vie réelle. Un ancrage du GIF significatif dans notre quotidien et qui influence notre réalité petit à petit. Que ce soit dans les stories ou votre fil Instagram, on voit éclore de plus en plus ces nouveaux types de GIF où nous sommes à la fois acteurs, réalisateurs et metteurs en scène de nos propres histoires. Le GIF ne se nourrit plus seulement de la culture populaire : il la crée. Retour de boomerang
- 153. Backelite - Digital Service Design by Capgemini Le GIF, un langage visuel
- 154. Backelite - Digital Service Design by Capgemini Meetup langages visuels 154Backelite - Digital Service Design by Capgemini Meetup langages visuels https://youtu.be/vlAsabCSJsM http://www.adweek.com/creativity/bacardi-liberates-a-caribbean-town-from-the-shackles-of-instagrams-boomerang/
- 155. Backelite - Digital Service Design by Capgemini Meetup langages visuels 155Backelite - Digital Service Design by Capgemini Meetup langages visuels https://youtu.be/leGIvWUFeEw http://www.adweek.com/creativity/this-crazy-gif-filled-beer-ad-pleads-for-a-break-from-the-insanity-of-gifs/
- 156. Backelite - Digital Service Design by Capgemini Meetup langages visuels Backelite - Digital Service Design by Capgemini Meetup langages visuels Dans la mode et le luxe http://www.ninaricci.com/larue/
- 157. Backelite - Digital Service Design by Capgemini Meetup langages visuels Backelite - Digital Service Design by Capgemini Meetup langages visuels Dans la mode et le luxe http://golem13.fr/prada-vahram-muratyan- printemps-ete-2012/
- 158. Backelite - Digital Service Design by Capgemini Meetup langages visuels Backelite - Digital Service Design by Capgemini Meetup langages visuels Dans la mode et le luxe https://www.fastcompany.com/1681462/steven- meisel-shoots-diesels-cinemagraphic-ad- campaign
- 159. Backelite - Digital Service Design by Capgemini Meetup langages visuels Backelite - Digital Service Design by Capgemini Meetup langages visuels Dans la mode et le luxe http://www.webandluxe.com/02/2012/burberry- offre-une-seconde-jeunesse-aux-gifs-animes/
- 160. Backelite - Digital Service Design by Capgemini Meetup langages visuels Dans la BD Backelite - Digital Service Design by Capgemini Meetup langages visuels http://stephenvuillemin.com/
- 161. Backelite - Digital Service Design by Capgemini Meetup langages visuels Yelle ou encore M.I.A. utilisent le format du GIF pour composer leurs clips ou jouer avec leur esthétique en les intégrant avec elles. Dans la musique Backelite - Digital Service Design by Capgemini Meetup langages visuels YELLE - La Musique YELLE - Ba$$in M.I.A - XOXO M.I.A - 3D GIF
- 162. Backelite - Digital Service Design by Capgemini Meetup langages visuels 162Backelite - Digital Service Design by Capgemini Meetup langages visuels Une application pour écouter l’album mais pas seulement. On y trouve notamment entre autres un générateur de gifs animés. Intéressant pour un album thématique sur le questionnement du pop art d’aujourd’hui non ? https://www.theguardian.com/technology/2013/no v/11/hands-on-with-lady-gagas-artpop-album-app Le GIF pour fédérer sa communauté
- 163. Backelite - Digital Service Design by Capgemini Meetup langages visuels 163Backelite - Digital Service Design by Capgemini Meetup langages visuels 1 2 3LE GIF EST POPULAIRE Et il se nourrit de cette culture populaire pour exister. Il nous sert à communiquer et à nous exprimer avec une palette infinie d’émotions. LE GIF NOUS INFLUENCE Et après s’être approprié notre culture populaire, il s’y intègre et prend une place telle qu’il influence notre quotidien, notre culture et tout ce qui nous entoure. LE GIF A 30 ANS Et il vit un peu son âge d’or après avoir connu des débuts douteux et difficiles. Merci les réseaux sociaux. Le GIF, le Pop Art, les langages visuels…
- 165. Merci
- 166. Backelite - Digital Service Design by Capgemini 166 Meetup langages visuels Contact Audrey HACQ Lead UI Designer [email protected] Florian CORDIER Directeur de Création [email protected] Jules MAHÉ Lead UI Designer [email protected] Backelite - Digital Service Design by Capgemini https://www.backelite.com/fr/