davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
237 Révisions
1 Branche
Aborescence: f57bf93b43
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'f57bf93b43'
${ noResults }
larlet-fr-david-cache/cache/3a000c75f747820cc701b42dd65.../index.html

index.html 38KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Faire atterrir le design (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://mcgodwin.com/articles/faire-atterrir-le-design">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Faire atterrir le design (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://mcgodwin.com/articles/faire-atterrir-le-design">Source originale du contenu</a></h3>

  463.     <p>Qu'est-ce que cela me paraît loin, quand je laisse remonter les souvenirs de ma formation de designer graphique. 2002, 2003, 2004... pas d'iPhone à l'horizon, à peine les premiers iMacs tout juste de sortie, un de mes projets d'étude était la conception d'un CD-ROM interactif. Quinze ans ont passé, le monde humain a muté à une vitesse vertigineuse et ma vision du design avec.</p>

  464. 

  465. <p>2020 est déjà désignée comme une année charnière. L'une des dernières qui ressemblera aux précédentes, si nous avons de la chance. L'une des dernières pour impulser des changements systémiques suffisamment profonds si l'on veut tenir la moindre chance de dépasser nos verrouillages en tous genres nous éloignant d'un mode de vie résilient et adapté à cet 'environnement' qui nous menace. </p>

  466. 

  467. <blockquote>

  468. <p>2020 sera pour moi l'année où je confirmerai la direction de mes travaux personnels en design. </p>

  469. </blockquote>

  470. 

  471. <p>En voici les détails, comme un contrat que je passerai avec vous autant qu'avec moi-même.</p>

  472. 

  473. <h2>Bases de réflexion</h2>

  474. 

  475. <p><a href="http://common-futures.org">Common Future[s] avait déjà bien défriché mes pensées</a>. Formaliser les objectifs du collectif, mettre des mots sur des choses telles que "refuser le dogme de la croissance exponentielle" ou "créer des outils conviviaux" m'ont permis de mettre au clair mes intentions en tant que praticienne du design. À force de lectures, recherches et formalisation au sein de conférences ou d'écrits, il m'est également apparu l'évidence que tout était politique et que c'était de notre devoir de non seulement le prendre en compte, mais aussi de l'appliquer. Le design est non seulement un acte politique, mais il doit dorénavant passer à l'étape supérieure et accepter ce rôle pour devenir un instrument de re-politisation. Tout doit être re-politisé : depuis les services que nous offrons aux personnes jusqu'aux sujets sur lesquels nous acceptons de travailler. Nous devons re-politiser le code, l'implémentation des technologies, les décisions business, les décisions politiques, la politique et la fabrique des lois elles-mêmes. L'espace public aussi. Celui que nous laissons à la citoyenneté, en théorie et en pratique. <strong>Re-politiser, c'est offrir à toute personne la possibilité de regagner tout son pouvoir d'intention, son <em>agency</em>, pour "se construire sa propre radicalité"</strong> (je cite Corrine Morel-Darleux), l'une des pierres angulaires du changement systémique dont nous avons besoin au plus vite.</p>

  476. 

  477. <h2>L'Anthropocène comme nouveau sol</h2>

  478. 

  479. <p>Ce qui est vraiment nouveau depuis un an, c'est l'omniprésence de l'Anthropocène. <a href="http://www.bruno-latour.fr/node/754.html">La définition sur laquelle je me base est celle de Bruno Latour</a> : </p>

  480. 

  481. <blockquote>

  482. <p>L'Anthopocène est le fait indéniable que la Terre réagit à notre action, et ce de manière irréversible.</p>

  483. </blockquote>

  484. 

  485. <p>Ce fait, j'en suis convaincue, doit urgemment devenir la base fondatrice d'absolument tout. Design, éducation, politiques publiques et partisanes, vivre ensemble, modèles économiques, modes d'habitation et de vie... L'Anthropocène est notre nouveau sol, et ce sol est mouvant, imprévisible et sera de moins en moins accueillant.</p>

  486. 

  487. <p>Ce n'est pas un fait anodin. Cela signifie que nous devons dès aujourd'hui composer avec un climat de moins en moins stable, des épisodes naturels plus surprenants et intenses qu'avant et des ressources en constante raréfaction. Si tout ce qui nous entoure réagit à notre action, et plus gravement, à nos actions passées avec une latence ankylosante, il est clair que nous devons redoubler de prudence quant à nos choix actuels. L'écologie (que certaines et certains voient à juste titre comme un concept limitant nous autorisant à nous garder distantes et distants de cet "environnement naturel" dont nous ne faisons pas pleinement partie, puisque nous avons réussi durant les deux derniers siècles à nous affranchir progressivement de ses contraintes) reste un sujet clivant au sein du design. Il est encore permis de la voir comme "une option", comme une sous-branche du design concentrée sur notre rapport à la nature. Je comprends tout à fait les réticences de mes consœurs et confrères à l'écoute des théories de l'Anthropocène et au fait qu'elle devrait occuper la base même de nos réflexions au lieu d'être "un des axes de recherche du design". <strong>Mais sans sol, sans planète à habiter, sans stabilité climatique et territoriale, sans matériau à façonner, alors que faire du design ?</strong></p>

  488. 

  489. <figure><img src="https://mcgodwin.com/content/3-articles/faire-atterrir-le-design/impact-infrastructures.png" alt=""/></figure>

  490. 

  491. <p><strong>Faire atterrir le design dans les limites planétaires est forcément le premier sujet qui va habiter mes pensées, recherches et actions.</strong> Par la création de précédents, par la rédaction d'articles et le partage de réflexions, je tenterai de faire ma part de travail dans cette mission à l'échelle sans précédent.</p>

  492. 

  493. <p>Comment fait-on atterrir quelque chose dans les limites planétaires, <a href="https://www.lemonde.fr/idees/article/2019/10/04/les-grandes-ecoles-doivent-former-a-la-redirection-ecologique_6014262_3232.html">comment, pour paraphraser Alexandre Monnin, Diego Landivar et Emmanuel Bonnet, devenir des redirectrices et des redirecteurs écologiques</a>, des personnes qui redirigent les choses au sein de ces limites ? C'est précisément là que va se porter mon attention.</p>

  494. 

  495. <p>Les premières pistes sont celles que j'entrevois depuis quelques temps déjà : ré-encapacitation des individus, libération des savoirs et préservation des communs, mise à disposition et vulgarisation des données et des connaissances liées à l'Anthropocène, remise en question des modes d'enseignement...</p>

  496. 

  497. <h2>Décolonialiser la pensée design</h2>

  498. 

  499. <p>Le décolonialisme est un sujet qui me hante depuis quelques mois maintenant. Plus j'avance dans la déconstruction de mon propre privilège de femme blanche éduquée et de designer européano-centrée, plus j'entre en contact avec des sujets qui touchent à la reconnaissance de l'exploitation de personnes, de territoires, de pays et d'ethnies et de la réparation des préjudices engendrés. Décolonialiser le design, c'est prendre la mesure du fait que sans cette exploitation qui a eu lieu et a encore lieu, pas de design moderne. Pas d'accès aux ressources et à la main d'œuvre scandaleusement peu chères. Décolonialiser le design, c'est faire en sorte de reconnaître, réparer, et faire autrement. À laisser la place aussi, laisser aux designers différent·es l'espace de pratiquer. Laisser notre place quand il le faut.</p>

  500. 

  501. <p>Mais le décolonialisme prend également du sens quand on aborde le design sous son angle glorifié : les mythes du design universaliste et du designer tout-puissant participent à un imaginaire colonial à mon sens, ou tout du moins exploitatif. Dans nos postures de praticiennes et de praticiens, il y a un véritable travail très profond à faire qui touche à notre façon d'être et à la déconstruction de notre propre imaginaire autour de notre métier et notre industrie. Il y a des mutations profondes elles-aussi à enclencher sur notre façon de faire et d'aborder les gens. Les exemples pleuvent dans le design de services, où certaines de nos solutions s'adressent à des publics dits défavorisés à travers lesquelles nous leur dictons des façons de faire en niant parfois leur vécu réel. Nous les écoutons, certes. Le design centré "utilisateurs et utilisatrices" est là pour ça. Mais au delà de nos jolis verbatims sur nos personas et autres <em>experience maps</em>, que reste-t-il comme espace pour elles et eux pour faire valoir leur existence ? Pour mettre en œuvre leur intentionnalité dans l'espace qui est le leur et que nous venons envahir avec nos belles méthodes ?</p>

  502. 

  503. <p>Décolonialiser le design, c'est aussi le dé-californianiser et prendre un recul fondamental sur l'américano-centrisme, voire l'européano-centrisme de nos pratiques. C'est un imaginaire difficile à faire basculer tant il est puissant et vecteur d'un confort infini, d'une promesse d'un monde toujours meilleur. <strong>Mais ce qu'il cache de plus abject, c'est qu'il y a toujours quelqu'un (ou quelque chose) qui vient payer pour ce monde prétendument meilleur. Qui ne finit par être meilleur que pour une part infime de la population. Non. Ce n'est pas de ce design que je veux.</strong></p>

  504. 

  505. <h2>Internet n'a jamais été gratuit</h2>

  506. 

  507. <p>"Also, I think we’re finding out the actual price of free. Twitter is free. Facebook is free. Both those idiots need to make money somehow. So they sell your data to people who want to sell you other shit.", <a href="https://monteiro.substack.com">nous dit Mike Monteiro dans sa dernière newsletter</a> avant de nous proposer de payer un abonnement de 50 dollars par an à Medium. Je n'aurai ni le temps ni l'envie de m'épancher sur les dérives de cette plateforme propriétaire qui, elle aussi, a commencé sa carrière sur la promesse du tout gratuit avant d'installer des paywalls à son tour. Mieux vaut tard que jamais, mais une promesse brisée, surtout celle d'être une plateforme amie empreinte de belles valeurs prônant l'écriture pour l'écriture pour ensuite devenir un service commercial, reste une immense preuve d'irrespect.</p>

  508. 

  509. <p>Mais le fait est là : Internet n'a jamais été gratuit et nous découvrons aujourd'hui le prix d'avoir délégué sans notre consentement éclairé une immense partie du web à des corporations gigantesques qui ne peuvent même plus échouer (too big to fail). Nous réalisons le véritable prix d'un morceau du web à notre image, respectueux de notre vie privée. Nous découvrons, ébahi·es, que leurs promesses étaient bien du vent capitaliste. Après tout, comment comptaient-ils financer les infrastructures titanesques liées à leur expansion infinie, si quelqu'un ne payait pas à la fin ? Nous payons chaque jour de petits morceaux de notre intimité, nous nous retrouvons "exploité·es" (<a href="https://youtu.be/Ztji5I3zvPE">Aral Balkan parle des pratiques de capitalisme de surveillance comme de <em>people farming</em></a>) jusqu'au moment où il est trop tard pour faire marche arrière : nous sommes déjà enfermé·es dans des plateformes dont il devient presque impossible de se dégager.</p>

  510. 

  511. <p>Un processus de <a href="https://degooglisons-internet.org/fr/">dé-googlisation [néologisme emprunté à Framasoft]</a> demande des mois de changements et d'ajout d'inconfort dans nos vies numériques. Cela fait quelques mois que j'ai basculé mes boites e-mail personnelles et professionnelles chez d'autres fournisseurs, notamment payants, et pourtant impossible pour moi de définitivement fermer mes boites Gmail : liées à toute la suite des outils Google, utilisés par une immense majorité de mes pairs qui me partagent une quantité de documents qui ferait peur à la moindre avocate spécialisée en droit des entreprises, comment faire pour me sortir d'un écosystème dont je suis prisonnière contre ma volonté ?</p>

  512. 

  513. <p>Ma mission pour 2020 a déjà commencé avec l'immense chance d'avoir entamé un travail avec Framasoft <a href="http://joinmobilizon.org">pour leur apporter mon aide sur le logiciel Mobilizon</a>. En 2019 déjà, nous avons défriché les objectifs, étudié les usages et commencé à architecturer un panel de solutions pour que Mobilizon puisse remplir sa mission : <strong>permettre au plus grand nombre de s'organiser dans la vraie vie dans le respect de leur vie privée</strong>. Mais Mobilizon est un logiciel d'un nouveau genre, en tout cas nouveau pour le grand public : c'est un logiciel <em>fédéré</em>.</p>

  514. 

  515. <p>J'en parlais un peu <a href="https://mcgodwin.com/articles/twitter-mastodon">dans ce billet résumant les différences entre Twitter et son alternative libre, Mastodon</a>. La fédération apporte son lot de concepts certes faciles à aborder s'ils sont bien expliqués, mais difficiles à accepter par le grand public dorénavant habitué à des solutions non seulement gratuites en apparence, mais à l'efficacité redoutable en plus d'être poussées visuellement. Devoir installer son petit morceau de web, de son côté, sans connaissances techniques poussées, mission impossible pour 95% de la population.</p>

  516. 

  517. <p>Le nouveau défi, c'est de faire de Mobilizon un véritable projet fédéré comme il se doit d'être, avec une couche en plus : celle de la pédagogie et de la facilité d'accès pour pouvoir s'assurer que tout le monde, sans exception (ou du moins le moins possible) puisse faire le premier pas vers son petit bout de web comme elle ou il l'entend. Il y a ici des enjeux pédagogiques immenses. Nous nous dirigeons vers un ébranlement significatif de l'imaginaire collectif autour du web, déformé par plus d'une décennie de plateformes surpuissantes ayant créé un précédent d'une solidité inédite. Patience, maïeutique, vulgarisation seront de mise. J'essaierai d'apporter ma pierre à l'édifice avec Mobilizon, mais aussi je l'espère avec d'autres projets de vulgarisation du web pour toutes et tous.</p>

  518. 

  519. <p>Une question sous-jacente se pose quand on évoque cette reconquête du web : qui va payer ? En temps, en compétences, ou en argent ? J'espère que de nouvelles façons de se répartir le coût des choses vont émerger. Certains modèles émergent déjà sur Mastodon, avec des expérimentations sur certaines instances qui proposent à ses membres de participer aux frais de maintenance et d'administration. <a href="https://mastodon.design/about/more">Moi-même propose aux membres de Mastodon.design de participer aux frais de mon instance</a>, je suis d'ailleurs transparente sur les coûts engendrés : entre l'hébergement, le nom de domaine et la maintenance (<a href="https://masto.host">déléguée à l'excellent Hugo de masto.host</a>), j'arrive à environ 135€ par an. (hé oui, moi aussi je suis dans l'incapacité totale de savoir installer une instance Mastodon !)</p>

  520. 

  521. <p><strong>Quels nouveaux modèles contributifs, justes et équitables allons-nous trouver pour reconquérir des morceaux du web et en faire des structures immunes au capitalisme de surveillance, surtout pour les personnes les plus fragiles ?</strong></p>

  522. 

  523. <h2>Transformation systémique</h2>

  524. 

  525. <p>Le dernier sujet qui m'intéresse en ce moment pourrait se résumer en l'étude des signaux faibles de transformations systémiques. L'un d'entre eux nous est apparu, à mon confrère Thomas et à moi, à mesure que <a href="https://mcgodwin.com/interventions/faconner-des-futurs-souhaitables-concevoir-a-l-ere-de-l-anthropocene">notre talk "Design pour des futurs souhaitables"</a> faisait le tour (modeste) de la sphère design / tech française ces derniers mois. </p>

  526. 

  527. <p>Il s'avère difficile de percevoir le progrès fait à l'échelle d'une société. Il est de plus en plus dur de déceler les signaux diffus au milieu du merdier ambiant. Montée du populisme, reculs significatifs sur les droits des humains et surtout sur ceux des femmes, attaques répétées sur les populations les plus précaires dès qu'un changement politique non souhaité va avoir lieu, constante lutte entre entités pour critiquer à qui mieux mieux les méthodes des un·es et des autres pour militer et agir... </p>

  528. 

  529. <p>Et puis au long des discussions, nous avons commencé à distinguer un changement intéressant. Les individualités ressortent, les personnes viennent nous parler de leurs parcours, de leurs doutes et de leurs espoirs, de la dissonance cognitive qu'elles ressentent au quotidien, sans trop savoir vers où se tourner, quelles actions mettre en œuvre. Elles nous parlent des changements qu'elles ont mis en place, même quand elles travaillent dans des domaines a priori très durs à faire bouger. Elles relatent leurs cheminements intimes de reconnexion à ce qui se passe autour d'elles, à la "nature" et à ce qui a plus de sens.</p>

  530. 

  531. <p>Avec le temps et le recul, j'ai l'impression que c'est de cette dissonance et de de l'incapacité des êtres à vivre avec elle trop longtemps que va émerger la force du changement. Comme le burnout est le symptôme positif qui montre la maladie de la société et du travail, la dissonance et la vitalité individuelle aideraient les personnes à refuser l'injustice de la situation. La mode / mascarade de la RSE en est un témoin : <strong>il faut dorénavant créer des "boites" au sein des organisations pour que les personnes qui ne trouvent pas de sens dans l'entreprise puissent être soulagées.</strong> Même si ce procédé est caricatural et inadapté, il témoigne d'un besoin d'autre chose.</p>

  532. 

  533. <p>Action directe ? Désobéissance civile ? Publications ? Manifestations ? Non violence ? Mesures individuelles ? À problème complexe, réponse forcément complexe elle aussi. Il en va de notre mission de ne diaboliser aucune initiative ni aucune forme pour en choisir l'une ou l'autre, mais de bien comprendre leurs impacts respectifs pour les articuler au mieux.</p>

  534. 

  535. <p>Et si le changement était poussé par l'intérieur, par ce pourcentage grandissant de personnes qui réclament autre chose dans leur travail et les structures dont elles dépendent ? Dans les professions privilégiées comme celles du développement où l'offre est (jusqu'à présent) supérieure à la demande, je vois fleurir des profils de développeurs qui cherchent des organisations éthiques, du temps partiel pour se consacrer à leurs projets personnels, et exigent des entreprises qui les emploient d'afficher leurs valeurs, la plupart du temps en accord avec l'écologie (ou l'idée que l'on s'en fait dans la tech). C'est un début. 2019 a vu nombre d'étudiantes et étudiants prononcer des discours, signer des moratoires et faire part de leur déception quant à ce que l'on enseigne encore : un savoir dénué de liens avec notre réalité actuelle, des outils inefficaces pour aborder cette situation inédite dont nous ne savons finalement rien de son futur déroulement, si ce n'est des projections. </p>

  536. 

  537. <p>Faire du design, c'est aussi être à l'écoute de ces signaux et soutenir par nos outils et nos pratiques la possibilité de changement de l'intérieur. C'est accompagner les organisations pour qu'elles puissent dépasser les cadres limitants des outils qu'on leur propose (RSE, développement durable). C'est enseigner différemment : j'ai la fâcheuse habitude d'avoir toujours instillé dans mes cours des notions d'écologie, d'impact, d'accessibilité, de politique en somme. Ce n'était qu'un début. De plus en plus d'écoles sont en demande de cours situés, peut-être pas par rapport à l'Anthropocène, mais déjà par rapport au monde. Je n'illustre mes cours que d'exemples triés sur le volet, d'initiatives éthiques, politiquement engagées. Je propose toujours des sujets de conception centrée usages qui tournent autour de thématiques anthropocènes : "comment faire prendre conscience aux personnes de leur consommation d'énergie personnelle au quotidien ?" / "comment le design de la ville et du commerce influence-t-il la production des déchets ?" / "comment réintégrer à nos quotidien des traditions ou des techniques culinaires ancestrales et oubliées ?". Ces sujets proposent aux élèves de questionner des facettes de leurs quotidiens qu'elles et ils n'ont pas l'habitude d'explorer : quelles techniques culinaires ont-elles été évincées, au profit de quoi ? Quels seraient les bénéfices à réintégrer la fermentation, la cuisson en pot d'argile, etc dans nos quotidiens ? Qu'est-ce que cela informe de notre rapport à la nourriture et à sa préparation aujourd'hui, de notre dépendance à des réseaux de distribution et de logistique complexes ? Comment conservons-nous, les recettes comme les aliments ? Le design devient un support, une somme d'outils prétextes à questionner.</p>

  538. 

  539. <p>C'est notre rapport au monde que je m'efforce de titiller à travers ces expérimentations qui tentent d'ouvrir de nouvelles portes de réflexion chez les élèves. <strong>Soutenir toutes les formes de transformation de l'intérieur, c'est soutenir les personnes pour qu'elles deviennent elles aussi, à leur échelle, forces de redirection écologique.</strong></p>

  540. 

  541. <h2>Une tentative : les principes de design anthropocène</h2>

  542. 

  543. <p>Le premier outil qui sera proposé par Common Future(s) a enfin sa première esquisse : <strong>son but est de présenter l'ensemble des mesures nécessaires pour faire muter le design et ses pratiques</strong>. Ces principes de design s'articulent en trois grands piliers (les nouveaux départs, ces données que nous avons mis de côté à reprendre en compte immédiatement, les nouvelles postures de l'être, tout ce que nous devons faire changer en nous pour pouvoir dépasser notre hubris humain et les nouvelles modalités d'action, pour de nouvelles façons d'agir face à des problématiques inédites). Notre travail sera de détailler chaque pilier et sous-pilier, puis de trouver la meilleure forme (numérique ou pas) pour ouvrir ces principes à la contribution, l'enrichissement et l'adaptation.</p>

  544. 

  545. <figure><img src="https://mcgodwin.com/content/4-interventions/faconner-des-futurs-souhaitables-concevoir-a-l-ere-de-l-anthropocene/heuristiques-conception-anthropocene.001.gif" alt=""/></figure>

  546. 

  547. <p>Nombre de choses que j'ai déjà exposées dans ce billet se retrouvent dans ces principes, fruits de deux ans de réflexion avec Thomas Di Luccio. Nous allons nous efforcer de les faire évoluer dans la bonne direction pour qu'ils puissent servir de base à d'autres redirections d'industries de la conception au sens large.</p>

  548. 

  549. <h2>2020, année charnière</h2>

  550. 

  551. <p>L'échéance d'une issue pour le Brexit vient d'être repoussée à début 2020. C'est aussi l'année des prochaines élections municipales en France, et celle déjà source de controverses du prochain président des Etats Unis. Ce sera aussi l'année encore plus marquée de cette réalité qui nous entoure et doit faire la base de tout : ce qui nous entoure réagit à nos actions, irréversiblement.</p>

  552. 

  553. <p>Vous avez sous les yeux ma feuille de route pour "mon" design, j'espère qu'elle vous inspirera des réflexions. Bonne route à vous !</p>

  554.   </article>

  555. </section>

  556. 

  557. 

  558. <nav id="jumpto">

  559.   <p>

  560.     <a href="/david/blog/">Accueil du blog</a> |

  561.     <a href="https://mcgodwin.com/articles/faire-atterrir-le-design">Source originale</a> |

  562.     <a href="/david/stream/2019/">Accueil du flux</a>

  563.   </p>

  564. </nav>

  565. 

  566. <footer>

  567.   <div>

  568.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  569.     <p>

  570.       Bonjour/Hi!

  571.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  572.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  573.     </p>

  574.     <p>

  575.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  576.     </p>

  577.     

  578.     <p>

  579.       Voici quelques articles choisis :

  580.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  581.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  582.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  583.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  584.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  585.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  586.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  587.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  588.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  589.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  590.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  591.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  592.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  593.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  594.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  595.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  596.     </p>

  597.     <p>

  598.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  599.     </p>

  600.     <p>

  601.       Je ne traque pas ta navigation mais mon

  602.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  603.       conserve des logs d’accès.

  604.     </p>

  605.   </div>

  606. </footer>

  607. <script type="text/javascript">

  608.   ;(_ => {

  609.     const jumper = document.getElementById('jumper')

  610.     jumper.addEventListener('click', e => {

  611.       e.preventDefault()

  612.       const anchor = e.target.getAttribute('href')

  613.       const targetEl = document.getElementById(anchor.substring(1))

  614.       targetEl.scrollIntoView({behavior: 'smooth'})

  615.     })

  616.   })()

  617. </script>