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 ?

7. 7 Meetup langages visuels

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

39. Meetup langages visuels 39 L’harmonie

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

48. Meetup langages visuels 48

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

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

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

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…

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

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

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 audrey.hacq@backelite.com Florian CORDIER Directeur de Création florian.cordier@backelite.com Jules MAHÉ Lead UI Designer jules.mahe@backelite.com Backelite - Digital Service Design by Capgemini https://www.backelite.com/fr/

Meetup langages visuels - Backelite - novembre 2017

Meetup langages visuels - Backelite - novembre 2017

Recommandé

Contenu connexe

Tendances

Tendances(8)

Similaire à Meetup langages visuels - Backelite - novembre 2017

Similaire à Meetup langages visuels - Backelite - novembre 2017(20)

Plus de Idean France

Plus de Idean France(20)

Meetup langages visuels - Backelite - novembre 2017