davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Révélez votre process (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://medium.com/france/r%C3%A9v%C3%A9lez-votre-process-d27ec133ec3b">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Révélez votre process (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://medium.com/france/r%C3%A9v%C3%A9lez-votre-process-d27ec133ec3b">Source originale du contenu</a></h3>
    <p>Un des moments que je préfère dans mon métier de designer, c’est celui où je présente mes propositions au client. Mais pour être honnête, ça n’a pas toujours été le cas. Lorsque j’ai débuté ma carrière, j’appréhendais cette étape décisive dans le déroulement d’un projet. J’avais du mal à expliquer mon travail et les remarques pouvaient me déstabiliser. Ce n’était pas que mon travail était mauvais, mais je manquais de méthode, d’expérience, et surtout, je pensais que mes propositions allaient se vendre toutes seules. Mais ce n’est pas le cas, un design ne se vend pas tout seul.</p>

<h3 name="6cf8" id="6cf8" class="graf--h3 graf--first"><strong class="markup--strong markup--h3-strong">C’est par le process que l’on s’approprie votre produit</strong></h3>

<p name="2d88" id="2d88" class="graf--p graf-after--h3">Vous êtes-vous déjà demandé : qu’est-ce qui fait qu’un client apprécie le design qu’on lui présente ? Vous allez me dire que c’est parce qu’il répond à son besoin. Pourtant, ça nous est tous déjà arrivé, lors d’une présentation, de nous voir rejeter une proposition alors qu’elle nous paraissait être une très bonne réponse à sa demande. Et d’avoir le sentiment que le client était passé complètement à côté de notre travail, qu’il n’avait pas compris nos choix. L’incompréhension génère de la frustration et il est alors beaucoup plus difficile de maintenir son attention. Le temps de se rendre compte qu’on patauge, votre client a déjà décroché et attend en silence la fin de votre speech, pour contredire point par point vos arguments. Certaines présentations se passent mal et faire du bon boulot ne suffit pas pour éviter ça. Car pour que votre design soit approuvé, vous devez gagner la confiance de votre client et pour ça il est important qu’il comprenne comment vous avez travaillé. C’est en découvrant votre process qu’il donnera toute sa valeur à votre travail et donc au produit que vous lui <em class="markup--em markup--p-em">vendez</em>.</p>

<h3 name="6efe" id="6efe" class="graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Qu’est-ce qu‘un process ?</strong></h3>

<p name="cbc3" id="cbc3" class="graf--p graf-after--h3">Le process _un mot issu de l’anglais, lui même dérivé du latin processus (<em class="markup--em markup--p-em">aller vers l’avant</em>)_ est une suite d’événements donnant naissance à un résultat. On oppose en général le process au produit (<em class="markup--em markup--p-em">product</em>). Si on prend pour comparaison un produit de consommation courante, c’est en général ce que le consommateur ne voit jamais. C’est même ce que les industriels préfèrent cacher, c’est la recette du Coca Cola ou du Nutella. On nous dit qu’ils cachent leur process pour éviter que la concurrence les copie, c’est peut-être aussi parce si on savait comment est fabriqué le Nutella, nous arrêterions aussitôt d’en acheter… À l’inverse, dans nos métiers, c’est justement notre façon de travailler qui donne envie d’adhérer à ce que nous produisons.</p>

<h3 name="2d5c" id="2d5c" class="graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Pourquoi valoriser son process ?</strong></h3>

<h4 name="7f28" id="7f28" class="graf--h4 graf-after--h3"><strong class="markup--strong markup--h4-strong">Accompagner son client</strong></h4>

<p name="797f" id="797f" class="graf--p graf-after--h4">On ne peut pas savoir à l’avance qui donnera son point de vue sur votre travail. Si vous avez de la chance, ce sera la personne qui a suivi toutes les étapes du projet depuis le début, si vous avez moins de chance, ce sera le grand patron qui découvre votre proposition (et votre devis) le jour de la présentation. Mais ça peut aussi être la femme du directeur marketing ou le stagiaire du troisième. Toutes ces personnes auront une connaissance plus ou moins claire du projet, mais surtout, vous n’aurez aucune idée des informations dont ils disposent et de leur compétence à émettre un retour. Moins on a de données sur une chose, plus on a tendance à juger de manière subjective. Alors que votre interlocuteur devrait se demander si le design répond bien à un besoin défini. Pour éviter les jugements arbitraires, il faut accompagner le client et lui donner les <em class="markup--em markup--p-em">bonnes raisons</em> d’aimer ou de détester votre travail. Et surtout il faut éviter de le laisser démuni et sans élément pour pouvoir vous faire des retours pertinents, surtout si vous proposez quelque chose d’audacieux.</p>

<h4 name="77cf" id="77cf" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Donner les clés pour pouvoir juger</strong></h4>

<p name="88ba" id="88ba" class="graf--p graf-after--h4">Il est important de s’assurer que le client a les mêmes éléments que vous pour avoir un avis. Le but est de délimiter les repères communs pour juger de la pertinence de votre proposition. Il s’agit de rappeler le brief de départ bien sûr, mais ce n’est pas suffisant. Vous pouvez par exemple expliquer la logique qui se cache derrière un choix, le cheminement de pensée qui a mené à une solution, les règles techniques qui imposent certaines contraintes, les recherches effectuées qui vous ont inspirées, les tests qui ont confirmé ou infirmé vos hypothèses, etc.</p>

<blockquote name="b641" id="b641" class="graf--pullquote pullquote graf-after--p">Dans nos métiers, c’est justement notre façon de travailler, qui donne envie d’adhérer à ce que nous produisons.</blockquote>

<p name="a928" id="a928" class="graf--p graf-after--pullquote">Il y a de grandes étapes inhérentes au processus de création en design, mais chaque designer les adapte à sa manière. À vous de donner les clés qui aideront votre client à bien comprendre comment vous êtes arrivés au résultat que vous présentez.</p>

<h4 name="16b1" id="16b1" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Rassurer sur le travail effectué</strong></h4>

<p name="ecc8" id="ecc8" class="graf--p graf-after--h4">Vous avez peut-être déjà eu ce sentiment qu’un client était insatisfait parce qu’il avait l’impression que vous n’aviez pas assez travaillé pour lui. Votre design est simple, mais lui le voit simpliste, trop <em class="markup--em markup--p-em">facile à faire</em>. Pourtant vous savez que ce n’est pas le cas, alors comment expliquer cette réaction ? Ce n’est pas forcément parce que votre client a du mal à accorder sa confiance. Mais certains clients sont inquiets de nature et ont besoin d’être sûrs qu’ils en auront pour leur argent. Et le monde à tendance à nous gaver d’une esthétique superficielle, excessive ou simplement bâclée. C’est un peu comme la tendance éphémère du glossy dans le web, à base de transparences, de fausses 3D et de reflets à outrance : C’est éblouissant sur la forme, mais creux dans le fond.</p>

<blockquote name="3388" id="3388" class="graf--pullquote pullquote graf-after--p">C’est notre rôle de designer d’apprendre aux autres à reconnaître la complexité dans la simplicité.</blockquote>

<p name="41f4" id="41f4" class="graf--p graf-after--pullquote">Avec l’habitude cette esthétique immodérée peut devenir une référence inconsciente aux esprits non éduqués à critiquer les images. C’est notre rôle de designer d’apprendre aux autres à reconnaître la complexité dans la simplicité. Expliquer votre processus de création alors que le produit a l’air simple c’est d’une part montrer que vous avez bossé et que votre tarif est justifié.</p>

<h4 name="84e0" id="84e0" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Devenir le pédagogue de son propre métier</strong></h4>

<p name="6586" id="6586" class="graf--p graf-after--h4">Pour beaucoup de designers, la présentation s’apparente à passer devant un Jury. Et cette idée n’a rien de confortable. Pourtant, la présentation n’a pas à être ce rapport de force que l’on décrit. Et nous pouvons changer cela. L’astuce consiste à en faire un moment d’apprentissage pour le client. Permettez-lui de s’enrichir grâce à vous. Durant tout le temps que dure le projet, la présentation est peut-être le moment où il sera le plus attentif, profitez-en pour lui en apprendre plus sur votre métier si ça l’aide à mieux comprendre le projet (restez bien sûr toujours concentré sur votre argumentaire). Vous montrerez que vous êtes consciencieux, professionnel et ça l’aidera à vous faire confiance. Il sera moins tenté de vous poser des questions pour justifier la qualité de votre travail.</p>

<blockquote name="fc53" id="fc53" class="graf--blockquote graf-after--p">Souvent les clients me demandent de justifier mes textes sur leurs sites internet. Plutôt que de leur dire que c’est « possible, mais très contraignant », je saisis toujours l’occasion pour leur faire un mini cours de typographie, je leur explique ce qu’est un gris typographique, comment l’œil lit un texte et pourquoi la composition sur support imprimé offre plus de possibilités. Au final, même si des choses leur échappent, ils savent que je n’ai pas fait le choix d’un texte aligné à gauche par hasard et ça renforce leur confiance en mes compétences.</blockquote>

<h4 name="59d7" id="59d7" class="graf--h4 graf-after--blockquote"><strong class="markup--strong markup--h4-strong">Donner du sens à son projet</strong></h4>

<p name="97b5" id="97b5" class="graf--p graf-after--h4">Nous aimons savoir comment sont fabriquées les choses, comment naissent les idées. Les making-of de films sont parfois plus passionnants que les films eux-mêmes. Découvrir les coulisses de la création d’un projet accentue notre attachement à celui-ci et nous aide à mieux nous l’approprier.</p>

<blockquote name="2e22" id="2e22" class="graf--blockquote graf-after--p">Dans son livre <a href="http://austinkleon.com/show-your-work/" data-href="http://austinkleon.com/show-your-work/" class="markup--anchor markup--blockquote-anchor" rel="nofollow">Show Your Work</a>, <a href="https://twitter.com/austinkleon" data-href="https://twitter.com/austinkleon" class="markup--anchor markup--blockquote-anchor" rel="nofollow">Austin Kleon</a> rapporte une expérience qui a été faite par deux auteurs d’un livre, pour démontrer le pouvoir d’une histoire sur la valeur que les gens attribuent à un objet. Ils sont allez acheter des objets insignifiants à petits prix dans des commerces divers et ils ont demandé à des écrivains d’inventer pour chacun de ces objets, une histoire qui leur donnerait une origine. Puis ils ont utilisé ces textes comme descriptifs pour les vendre sur eBay. Ce qu’ils ont acheté pour un total de 130 dollars, ils l’ont vendu plus de 3600 dollars !</blockquote>

<p name="6493" id="6493" class="graf--p graf-after--blockquote graf--last">Donnez du sens à votre travail, les gens lui donneront de la valeur. Savoir comment naissent les choses et d’où elles viennent en change notre perception. Cela peut nous aider à les comprendre et à les accepter. Votre process de fabrication donne des repères pour pouvoir apprécier votre travail, mais aussi le critiquer de manière constructive. Racontez comment naissent vos idées.</p>

<h3 name="4643" id="4643" class="graf--h3 graf--first"><strong class="markup--strong markup--h3-strong">Ne soyez pas magicien</strong></h3>

<p name="7992" id="7992" class="graf--p graf-after--h3">Pour mon travail, je dessine très souvent. Et je rencontre régulièrement des personnes qui me regardent émerveillées faire mes croquis, comme si je venais de réaliser un tour de magie devant eux. Ils me disent alors qu’ils rêvent de savoir dessiner, un peu comme si c’était un don surnaturel. J’ai souvent envie de leur répondre : « J<em class="markup--em markup--p-em">e vais te révéler mon secret, achète un bloc de papier, des crayons et réserve les vingt prochaines années de ta vie »</em>. Ce que je veux dire par là c’est que parfois, les clients prennent les designers pour des magiciens. La raison est simple, ce que nous faisons leur paraît mystérieux. Ils ne savent pas comment on produit les choses, il n’ont pas conscience du travail qu’il y a derrière, et nous n’avons pas l’habitude de leur montrer comment nous travaillons.</p>

<blockquote name="b9d6" id="b9d6" class="graf--pullquote pullquote graf-after--p">Donnez du sens à votre travail, les gens lui donneront de la valeur.</blockquote>

<p name="c2bc" id="c2bc" class="graf--p graf-after--pullquote">Mais si nous voulons être pris au sérieux, nous ne devons pas les laisser penser que le design est un don surnaturel. Nous ne devons pas les laisser nous voir comme des magiciens de la création. Pour ça, il suffit de révéler <em class="markup--em markup--p-em">comment ça marche</em>, de ne plus présenter seulement un produit, mais aussi notre process. Et si on doit impressionner nos clients, c’est par les efforts que nous mettons à trouver les idées qui répondent à leurs besoins.</p>

<p name="05d1" id="05d1" class="graf--p graf-after--p graf--last">Il y a une différence entre un magicien et un designer. Le magicien vous éblouit avec un tour parce qu’il vous cache son secret. Le designer au contraire, vous présente quelque chose d’évident, mais qui vous impressionne quand il vous révèle comment il l’a conçu.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/france/r%C3%A9v%C3%A9lez-votre-process-d27ec133ec3b">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>