davidbgk
/
larlet-fr-david-cache
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
276 Commits
1 Branch
Struktur: a82c900c1e
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „a82c900c1e“
${ noResults }
larlet-fr-david-cache/cache/4ba2b0973f61ae23d4323d4e036.../index.html

index.html 37KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748 
  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>Designers & Logiciels libres : et si on collaborait ? (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="http://maiwann.net/blog/designers-&-logiciels-libres-si-on-collaborait/">

  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.   Designers & Logiciels libres : et si on collaborait ? (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="http://maiwann.net/blog/designers-&-logiciels-libres-si-on-collaborait/">Source originale du contenu</a></h3>

  463.     <blockquote>

  464.   <p>Cet article fait suite à une conférence que j’ai donnée à MiXiT sur le thème “Designers &amp; Logiciels libres : et si on collaborait ?” (la vidéo sera bientôt disponible). Histoire d’approfondir certains points et partager plus facilement l’ensemble des ressources, voici un article complémentaire =)</p>

  465. </blockquote>

  466. 

  467. <p>Je profite de l’intro pour partager le résumé de la conférence :</p>

  468. 

  469. <blockquote>

  470.   <p>Le monde du libre est rempli de communautés de développeurs·euses passionnés. Mais où sont les designers ? Incompréhensions entre les différents corps de métier, méconnaissance de ce qu’est un logiciel libre, légende du designer-artiste qui n’en fait qu’à sa tête, possibilités de contribuer mal adaptées pour des designers, les origines de ce désamour sont nombreuses. Et si on passait à l’étape suivante, celle où devs et designers du libre se rejoignent pour créer des logiciels ensemble, histoire d’en améliorer l’expérience utilisateur ?</p>

  471. </blockquote>

  472. 

  473. <p>Mais pour démarrer sur des bases communes, passons par quelques définitions :</p>

  474. 

  475. <h1 id="cest-quoi-un-logiciel-libre-">C’est quoi un logiciel libre ?</h1>

  476. 

  477. <p>D’après Wikipédia :</p>

  478. 

  479. <blockquote>

  480.   <p>Un logiciel libre est un logiciel dont l’utilisation, l’étude, la modification et la duplication par autrui en vue de sa diffusion sont permises, techniquement et légalement, ceci afin de garantir certaines libertés induites, dont le contrôle du programme par l’utilisateur et la possibilité de partage entre individus.</p>

  481. </blockquote>

  482. 

  483. <p>On parle aussi des 4 libertés du logiciel libre :</p>

  484. 

  485. <ul>

  486.   <li>Utiliser le programme</li>

  487.   <li>Étudier son fonctionnement et le modifier</li>

  488.   <li>Redistribuer</li>

  489.   <li>Distribuer des versions modifiées</li>

  490. </ul>

  491. 

  492. <p>Si vous voulez en savoir plus, je vous recommande chaudement la présentation de <a href="https://framapiaf.org/@DelphineM">Delphine</a> “L’intérêt du libre, expliqué le dimanche midi en famille” au Capitole du libre (<a href="https://toulibre.org/pub/2017-11-18-capitole-du-libre/videos/education/malassingne-interet-du-libre-midi-en-famille.mp4">Regarder la vidéo</a> ou <a href="http://articles.nissone.com/2017/11/interet-libre-explique-dimanche-midi-famille/">voir ses slides</a>)</p>

  493. 

  494. <h2 id="et-qui-fait-les-logiciels-libres-">Et qui fait les logiciels libres ?</h2>

  495. 

  496. <p>Les logiciels libres naissent souvent d’un besoin ou d’une envie d’un développeur·euse, qui commence par développer un bout de logiciel pour y répondre. Lorsqu’il prend un peu d’ampleur et commence à se diffuser, d’autres développeurs·euses peuvent y contribuer et, en général, s’auto-organisent pour le développer de façon communautaire.</p>

  497. 

  498. <p>Sauf que… et bien sauf que si le logiciel n’est développé que par des développeurs·euses et pour des développeurs·euses, lorsqu’il s’ouvre à d’autres profils d’utilisateurs·ices, son utilisation laisse assez… dubitatif·ve.</p>

  499. 

  500. <blockquote>

  501.   <p>Sur ce point, n’hésitez pas à aller voir la super conférence <a href="https://mixitconf.org/2018/percevoir-et-communiquer-realite-et-fictions-personnelles">Percevoir et communiquer : réalité et fictions personnelles</a> de Yves Rosseti lorsque la vidéo sera sortie !</p>

  502. </blockquote>

  503. 

  504. <p>Pourquoi ça ? Eh bien parce que les développeurs·euses ont leurs propres priorités (nouvelles fonctionnalités, résoudre les bugs, garder du temps libre) et leurs propres biais (liés au fait qu’ils s’occupent du coté technique du logiciel et qu’ils l’ont initialement développé pour leurs propres besoins, et pour se faire plaisir !). Pourtant, une fois que le logiciel est ouvert à des profils d’utilisateurs·ices plus variés·es, il faut faire l’effort de penser au design du logiciel afin de leur proposer une expérience positive (et ne pas contribuer à la mauvaise réputation qu’ont les logiciels libres auprès du grand public), même si cela signifie remettre en cause pas mal de choses ce qui peut être sacrément inconfortable (mais courage, c’est pour le bien des utilisateurs·ices et la promotion du logiciel libre !).</p>

  505. 

  506. <h1 id="mais-en-fait-cest-quoi-le-design-">Mais en fait, c’est quoi le design ?</h1>

  507. 

  508. <p>Le design n’a pas de définition consensuelle (ça serait trop simple sinon), et chaque designer a sa propre définition de son métier, dépendante de ses compétences, de sa vision, de son éthique… Par exemple pour le design d’interfaces, on peut considérer qu’il est sous-composé par :</p>

  509. 

  510. <ul>

  511.   <li>la conception</li>

  512.   <li>le graphisme</li>

  513.   <li>la stratégie</li>

  514.   <li>l’ergonomie</li>

  515.   <li>l’UX · Expérience Utilisateur</li>

  516.   <li>l’identité graphique</li>

  517.   <li>l’illustration…</li>

  518. </ul>

  519. 

  520. <p>Mais cette liste n’est pas exhaustive pour autant.</p>

  521. 

  522. <p>On peut néanmoins s’accorder sur le fait que le design est une <strong>vision globale</strong> d’un produit, service, logiciel… et est trop souvent ramené au seul aspect esthétique d’un produit.</p>

  523. 

  524. <h2 id="utile-utilisable-utilisé">Utile, utilisable, utilisé</h2>

  525. 

  526. <p>Pour le dire autrement, un logiciel bien designé est un logiciel utile, utilisable &amp; utilisé :</p>

  527. 

  528. <ul>

  529.   <li>Utile car il apporte de la valeur aux utilisateurs</li>

  530.   <li>Utilisable car il peut être utilisé sans provoquer de frustration</li>

  531.   <li>Utilisé car les utilisateurs ont envie de… l’utiliser ;)</li>

  532. </ul>

  533. 

  534. <p>L’exemple que je trouve parfait pour illustrer cette explication du design c’est VLC.

  535. J’utilise VLC depuis que j’ai 15 ans. Pas parce qu’il est libre. Mais parce qu’il me permet de lancer chaque vidéo que je veux regarder sans aucune frustration. Ca n’a l’air de rien et pourtant tous les autres ont échoué à le faire aussi bien que lui.</p>

  536. 

  537. <p>Pourtant il n’a pas une interface très esthétique, mais ce n’est pas le plus important. Si votre logiciel est beau mais inutilisable, personne ne l’utilisera. S’il est utilisable mais moche, il fera mauvaise impression ce qui lui fera perdre des utilisateurs, mais il conservera ceux qui auront passé le pas.</p>

  538. 

  539. <p>Evidemment le mieux serait qu’il soit esthétique et utilisable, mais ce qu’il faut retenir c’est que le plus important, quoi qu’il arrive, c’est <strong>l’utilisabilité.</strong></p>

  540. 

  541. <h1 id="où-sont-les-designers-">Où sont les designers ?</h1>

  542. 

  543. <p>Mais alors, si le design c’est si important, où sont les designers du libre ? Ceux qui se plaignent de la mauvaise utilisabilité sans pour autant contribuer ?</p>

  544. 

  545. <p>Si nous nous plaignons et que nous ne contribuons pas, c’est parce que, mine de rien, les designers rencontrent de nombreux freins à leur intégration au monde du libre… Faisons un petit tour des différentes frustrations auxquelles nous faisons face, pour mieux comprendre ce qui nous rebute tant à contribuer. Ensuite je vous donnerai des pistes d’actions à mettre en place pour contourner ces problématiques !</p>

  546. 

  547. <h2 id="méconnaissance-de-ce-quest-un-logiciel-libre">Méconnaissance de ce qu’est un logiciel libre</h2>

  548. 

  549. <p>Lors de nos études, personne ne nous parle spécifiquement de l’existence des logiciels libres. On entend parler des droits d’auteurs et du risque de se faire voler nos créations, mais pas d’une alternative possible qui seraient de contribuer aux communs (d’ailleurs les communs on ne nous en touche pas non plus un mot).</p>

  550. 

  551. <p>De plus, alors que nous cherchons à nous entraîner, sur notre temps libre ou pour des projets de fin d’année, nous nous plaignons de ne connaître aucun développeur avec qui co-créer des sites ou logiciels. Quand on sait à quel point le monde du libre a besoin de designers, c’est risible non ?</p>

  552. 

  553. <h2 id="où-trouver-linfo-facilement-">Où trouver l’info <strong>facilement</strong> ?</h2>

  554. 

  555. <p>Lorsqu’on a envie de contribuer d’une façon ou d’une autre, il faut trouver où contribuer. Or Internet est grand, très grand, et la multitude de logiciels libres ne nous aident pas, d’autant plus qu’il n’y a pratiquement pas de “liste des besoins” ou de page “comment contribuer” nous expliquant par où commencer. On se sent alors complètement perdus·es pour trouver l’information recherchée.</p>

  556. 

  557. <h2 id="besoins-listés-de-façon-inadaptée">Besoins listés de façon inadaptée</h2>

  558. 

  559. <p>Une liste des besoins de contribution, c’est une bonne idée. Mais une fois la liste parcourue, je me suis déjà retrouvée à consulter des demandes étiquetées “design” et correspondant à… de l’illustration pour des stickers (qui est donc un sous-domaine très spécifique et ne fait pas vraiment appel à une vision globale liée au design). Arriver jusque là pour se rendre compte que notre domaine de compétence est incompris ou mélangé à d’autres, ce n’est pas terrible.</p>

  560. 

  561. <h2 id="pr-welcome">PR welcome</h2>

  562. 

  563. <p>Pour trouver où contribuer, un petit tweet ou pouet (#JoinMastodon) pour proposer son aide et on obtient plusieurs retours de personnes qui ont besoin d’un·e designer !

  564. Par contre, la réponse ressemble souvent à “Hey sur monprojet.com on a des besoins en UX, je te laisse faire un tour et n’hésites pas à faire des issues”.</p>

  565. 

  566. <p>Sauf que, premièrement, parler d’issues ou de PR à un designer, c’est souvent lui parler chinois (car même si on sait parfois  comment fonctionne git, ce n’est pas pour ça qu’on sait l’utiliser), et deuxièmement, si le design est une réflexion globale, ce n’est pas avec des issues qui sont plutôt appropriées pour traiter des problèmes à périmètre limité que l’on va s’en sortir. Donc en général, à ce stade là, soit on est perdus·es car le vocabulaire utilisé n’est pas adapté, soit on s’est enfui en courant.</p>

  567. 

  568. <h2 id="une-répartition-déséquilibrée">Une répartition déséquilibrée</h2>

  569. 

  570. <p>Un autre point qui ne nous met pas en confiance c’est que, face à une communauté déjà constituée et principalement composée de développeurs·euses, les nouvelles venues (surtout si iels ne sont pas développeurs·euses) ne sont pas forcément à l’aise. Il faut avouer que pour certains·es d’entre nous, faire face à toute une culture et une organisation à découvrir et intégrer, d’autant plus lorsqu’on voit les animosités qui perdurent entre les différents corps de métier, ça intimide.</p>

  571. 

  572. <h2 id="voir-son-travail-débattu-par-des-novices">Voir son travail débattu par des novices</h2>

  573. 

  574. <p>Collaborer c’est bien, mais voir un travail de design critiqué par des personnes qui ne s’y connaissent pas et font une platrée de retours non pertinents, c’est vraiment très agaçant (en plus de faire perdre beaucoup de temps à tout le monde). Ce n’est pas qu’on tienne à faire les divas mais si vous faites appel à quelqu’un dont c’est le métier, c’est important de lâcher prise et de lui faire confiance, et non pas de vous permettre de critiquer sous prétexte que “Tout le monde a des yeux donc tout le monde peut juger de la qualité du design”</p>

  575. 

  576. <p>Histoire de bien me faire comprendre, j’en rajoute une couche : Je sais que faire des retours démontre de l’intérêt pour le travail du designer, et que le but est d’améliorer davantage la réalisation en faisant appel à l’intelligence collective. C’est pourquoi il est, à mon avis, important que les développeurs·euses fassent attention à minimiser le nombre de retours pour ne pas submerger lae designer, ainsi que de ne pas exiger de lui telle ou telle modification. Coté designer, il reste nécessaire d’être à l’écoute des propositions pour être sûr·e de ne rien avoir oublié, ce qui n’empêche pas de faire preuve de pédagogie pour justifier certains choix qui semblerait incohérents (en cas de doute, le mieux étant toujours de faire des tests utilisateurs =p )</p>

  577. 

  578. <h2 id="le-design-par-comité">Le design <strong>par comité</strong></h2>

  579. 

  580. <p>Le pendant extrême de ce débat sur le travail du designer, c’est le design par comité : la communauté s’empare du design et, itérativement, va le modifier afin de satisfaire le maximum de ses membres. Or, comme un travail de design est (encore une fois) global, avec des décisions issues de réflexions du designer, s’en emparer et y apporter des modifications au bon vouloir de chacun·e c’est le vider de son essence dans l’espoir d’obtenir un consensus (consensus qui irait dans le sens des contributeurs·ices et pas des utilisateurs·ices donc on ne se trouve même plus dans un travail de design). Dans ce contexte, pas la peine de redemander au designer de contribuer à nouveau (n’importe lequel d’entre nous sera parti depuis longtemps).</p>

  581. 

  582. <h1 id="bon-alors-on-fait-quoi-">Bon alors on fait quoi ?</h1>

  583. 

  584. <p>Bon eh bien c’est pas joyeux tout ça. Pas étonnant qu’on y réfléchisse à deux fois avant de contribuer, vu toutes les frustrations qui peuvent s’accumuler quand on commence à chercher à contribuer (L’expérience utilisateur·ice de contribution à un logiciel libre n’est en effet pas terrible !).</p>

  585. 

  586. <p>Mais on ne va pas rester sans rien faire ! développeurs·euses du logiciel libre, voici une liste d’actions à mettre en place pour que votre projet soit d’avantage propice à accueillir des contributions de designer ↓</p>

  587. 

  588. <h2 id="étape-0--se-renseigner">Étape 0 : Se renseigner</h2>

  589. 

  590. <p>Commencez par vous renseigner sur ce qu’est le design et sur la démarche des designers, histoire de mieux comprendre nos petites lubies…</p>

  591. 

  592. <h3 id="des-tas-de-ressources-">Des tas de ressources !</h3>

  593. 

  594. <p>Ça passe par un peu de lecture 📚 ↓</p>

  595. 

  596. <h4 id="blog">Blog</h4>

  597. 

  598. <p>Pour mieux comprendre ce qu’est le design :</p>

  599. 

  600. <p>Pour découvrir l’UX Design :</p>

  601. 

  602. <h4 id="livres">Livres</h4>

  603. 

  604. <p>Pour celles et ceux qui veulent pousser plus loin :</p>

  605. 

  606. <p>Mieux collaborer avec les designers :</p>

  607. 

  608. <p>Pour mieux comprendre certains aspects du design :</p>

  609. 

  610. <h3 id="étape-1--diffuser">Étape 1 : Diffuser</h3>

  611. 

  612. <p>Une fois que vous êtes bien renseignés·es, il est temps d’essaimer  ↓</p>

  613. 

  614. <h4 id="allez-dans-les-écoles-de-design">Allez dans les écoles de design</h4>

  615. 

  616. <p>Contactez et rencontrez les différentes promos de futurs·es designers histoire de trouver des contributeurs·ices, que se soit maintenant ou plus tard, sur leur temps libre ou pour des travaux liés aux études. Essayez également de voir avec les enseignants si ils sont intéressés par le fait de monter un projet autour de votre logiciel (d’habitude on fait des réalisations qui ne serviront jamais alors pourquoi pas ?)</p>

  617. 

  618. <p>Je vous recommande d’aller voir :</p>

  619. 

  620. <ul>

  621.   <li>les BTS Design Graphique option médias numériques, qui forment spécifiquement des designers d’interface. Le site national du design et arts appliqués les a listés <a href="http://designetartsappliques.fr/content/btscvmma">par ici</a></li>

  622.   <li>les DUT MMI (Métiers du Multimédia et de l’Internet) qui sont plus généralistes (on y fait du design, du code et plein d’autres choses). Le blog du MMI a fait <a href="https://blogdummi.fr/liste-des-dut-mmi/">une liste</a></li>

  623.   <li>Certaines <a href="https://blogdummi.fr/poursuite-etudes-apres-dut-mmi/">licences ou licences pros</a> doivent aussi être réceptives mais c’est à voir au cas par cas</li>

  624.   <li>Idem pour les écoles privées, je ne me prononce pas mais pourquoi pas essayer…</li>

  625. </ul>

  626. 

  627. <h4 id="organisez-des-rencontres-irl">Organisez des rencontres IRL</h4>

  628. 

  629. <p>Organisez-vous pour vous retrouver et inviter les nouveaux·elles autour d’un thé, café, chocolat, apéro pour faire connaissance, comprendre ce que vous faites et surtout comment vous le faites, comment vous vous organisez… Ça pourrait même vous permettre d’échanger à propos de vos besoins et de créer du lien 👌</p>

  630. 

  631. <h4 id="formulez-vos-besoins-clairement-et-publiez-les">Formulez vos besoins clairement et publiez-les</h4>

  632. 

  633. <p>Demandez-vous quels sont les problèmes qui pourraient être résolus par un designer et efforcez-vous de les formuler sans énoncer de solution : “Je vais rajouter une nouvelle fonctionnalité et je ne sais pas comment l’intégrer au logiciel en cours”, “mes utilisateurs ne trouvent pas les fonctionnalités dont ils ont besoin”, “mes utilisateurs ne comprennent pas comment fonctionne mon logiciel”… Puis publiez-les sur une page dédiée histoire que si quelqu’un a envie de contribuer, il sache directement où aller pour commencer. Et n’hésitez pas à demander à des personnes dont c’est le métier si vous avez bien étiquetté vos besoins, afin qu’ils soient associés aux bonnes compétences :)</p>

  634. 

  635. <h3 id="Étape-2--accueillir">Étape 2 : Accueillir</h3>

  636. 

  637. <h4 id="être-très-très-accueillants">Être très très accueillants</h4>

  638. 

  639. <p>Vraiment très très accueillant : quand vous accueillez des gens chez vous pour la première fois, vous ne les faites pas rester sur le pas de la porte le temps de finir de cuisiner le plat principal ! Sur le net c’est pareil, indiquez à la personne à qui elle peut s’adresser pour faire connaissance, qui sont les personnes qui détiennent quelles informations, demandez-lui si elle a besoin de quelque chose en particulier… Et souvenez-vous qu’elle a galéré pour parvenir jusqu’à vous, vous lui devez bien ça :3

  640. Cela passe aussi par la mise en place de modes de discussion appropriés : proscrire les propositions d’issues et ouvrir un framateam pour pouvoir discuter facilement, ça facilite énormément les choses :) Si vous avez un doute, commencez par demander à la personne de quelle façon elle préfère communiquer !</p>

  641. 

  642. <h4 id="se-rendre-disponible">Se rendre disponible</h4>

  643. 

  644. <p>Restez disponible (et communiquez sur quand est-ce que vous l’êtes) pour être une personne ressource, le temps que lae nouvel·le arrivant·e se familiarise avec votre fonctionnement, ait les informations de base, sache par où démarrer… Cela lui évitera de se décourager et lui permettra de se sentira soutenue.</p>

  645. 

  646. <h4 id="communiquer-de-façon-inclusive">Communiquer de façon inclusive</h4>

  647. 

  648. <p>Les communautés du logiciel libre sont plutôt composées de devs, avec un profil correspondant plutôt aux hommes, blancs, cisgenres et hétéros (voir <a href="https://insights.stackoverflow.com/survey/2018/">l’enquête de StackOverflow</a>). Or si vous avez la volonté d’ouvrir votre communauté à des profils plus variés, communiquer de façon inclusive est une obligation pour accueillir les gens dans de bonnes conditions. Cela passe par utiliser un langage adapté aux connaissances de chacun·e (et non pas technique), ainsi qu’à proscrire toutes les blagues sexistes, LGBTphobes ou racistes.</p>

  649. 

  650. <h3 id="Étape-3--collaborer">Étape 3 : Collaborer</h3>

  651. 

  652. <p>Et pour finir, une fois que l’on est bien intégré·e :</p>

  653. 

  654. <h4 id="former-un-petit-groupe-de-travail">Former un petit groupe de travail</h4>

  655. 

  656. <p>Pour travailler sans devoir expliquer sans cesse à un grand nombre de personnes ce que l’on fait (et surtout ne pas répondre à chaque question ou retour pour ne pas perdre un temps infini), il est de bon ton de mettre en place un petit groupe de travail, composé de 4/5 personnes par exemple, histoire d’ouvrir le dialogue entre personnes se faisant confiance et ne pas mettre trop le nouveau venu en défaut face à des contributeurs·ices se connaissant déjà bien.</p>

  657. 

  658. <h4 id="former-un-binôme">Former un binôme</h4>

  659. 

  660. <p>L’idéal, c’est de former un binôme dev-designer pour qu’il soit facile de faire des ping-pong lorsqu’il y a des questions ou incompréhensions. C’est aussi l’occasion d’établir une relation de confiance, ce qui permettra au designer d’avoir plus de poids si il doit justifier ses choix à terme.</p>

  661. 

  662. <h4 id="parler-des-problèmes-pas-des-solutions">Parler des problèmes pas des solutions</h4>

  663. 

  664. <p>Une fois que le designer vous a montré les changements à mettre en place, et que malgré la confiance que vous avez en ses compétences, un choix vous semble problématique pour les utilisateurs·ices, n’hésitez pas à formuler votre interrogation en problème plutôt qu’en solution. Cela permettra au designer de vous expliquer ses choix ou de réaliser qu’un aspect de la réalisation lui avait échappé !</p>

  665. 

  666. <h4 id="et-le-design-par-comité-">Et le design par comité ?</h4>

  667. 

  668. <p>Dernier conseil (oui j’en remets une couche mais c’est important) : Arrêtez le design par comité.</p>

  669. 

  670. <h1 id="la-solution--la-communication">La solution ? La communication</h1>

  671. 

  672. <p>Apaiser les tensions entre les développeurs·euses et les designers, c’est déjà un sacré boulot. Mais contribuer ensemble ne sera pas possible si chaque partie ne mets pas de l’eau dans son vin et ne cherche pas à comprendre les problématiques rencontrées par les autres corps de métier.</p>

  673. 

  674. <h1 id="prologue--encore-un-peu-de-ressources-">Prologue : Encore un peu de ressources ?</h1>

  675. 

  676. <h1 id="remerciements">Remerciements</h1>

  677. 

  678. <p>Merci à celleux de Framasoft qui ont su m’accueillir avec enthousiasme ! (particulièrement @pyg et @pouhiou)</p>

  679. 

  680. <p>Merci aux mastonautes qui ont répondu à mes questions : @daycode@mastodon.social, @delphin@mastodon.social &amp; @Quadragondin@mamot.fr</p>

  681. 

  682. <p>Merci à @dascritch pour ses ressources</p>

  683. 

  684. <p>Merci aux relecteurs : Éric, Fabien, Marien, Théotime =)</p>

  685.   </article>

  686. </section>

  687. 

  688. 

  689. <nav id="jumpto">

  690.   <p>

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

  692.     <a href="http://maiwann.net/blog/designers-&-logiciels-libres-si-on-collaborait/">Source originale</a> |

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

  694.   </p>

  695. </nav>

  696. 

  697. <footer>

  698.   <div>

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

  700.     <p>

  701.       Bonjour/Hi!

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

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

  704.     </p>

  705.     <p>

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

  707.     </p>

  708.     

  709.     <p>

  710.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  727.     </p>

  728.     <p>

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

  730.     </p>

  731.     <p>

  732.       Je ne traque pas ta navigation mais mon

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

  734.       conserve des logs d’accès.

  735.     </p>

  736.   </div>

  737. </footer>

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

  739.   ;(_ => {

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

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

  742.       e.preventDefault()

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

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

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

  746.     })

  747.   })()

  748. </script>