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.
277 Commits
1 Branch
Struktur: e2553a71c2
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „e2553a71c2“
${ noResults }
larlet-fr-david-cache/cache/b78d7e8d0da19427c7dafb9fd99.../index.html

index.html 75KB
Originalformat Blame Verlauf

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033 
  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>Conférence " Design de soi " par Marie Guillaumet (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://marieguillaumet.com/design-de-soi-paris-web-2015">

  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.   Conférence " Design de soi " par Marie Guillaumet (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://marieguillaumet.com/design-de-soi-paris-web-2015">Source originale du contenu</a></h3>

  463.     <p><strong>Ceci est la retranscription intégrale de la <a class="icon-external" target="_blank" rel="external" href="http://www.paris-web.fr/2015/conferences/design-de-soi-valoriser-son-identite-et-son-expertise-sur-le-web.php">conférence</a> « Design de soi : valoriser son identité et son expertise sur le web », que je donne à Paris Web, le 2 octobre 2015.</strong></p>

  464. 

  465. <p>NB : je <del>mettrai les slides en ligne sur <a class="icon-external" target="_blank" rel="external" href="http://fr.slideshare.net/kreestal">Slideshare</a> et</del> partagerai avec vous la vidéo de la conférence dès que possible.</p>

  466. 

  467. <p><ins>Edith : <a class="icon-external" target="_blank" rel="external" href="http://www.slideshare.net/kreestal/design-de-soi-valoriser-son-identit-et-son-expertise-sur-le-web" title="Voir le support de présentation de la conférence sur Slideshare">les <i lang="en">slides</i></a> sont en ligne !</ins></p>

  468. 

  469. <h2>Introduction</h2>

  470. 

  471. <p>Je m'appelle <strong>Marie Guillaumet</strong>, et je suis actuellement designer <span lang="en">front-end</span> dans une petite agence qui s'appelle Résidence Mixte.</p>

  472. 

  473. <h3><i lang="en">Personal branding</i> vs. design de soi</h3>

  474. 

  475. <p><strong>Le design de soi est une expression que je préfère à celle de « <i lang="en">personal branding</i> ».</strong></p>

  476. 

  477. <p>Le <i lang="en">personal branding</i>, c’est un terme issu du marketing, qui veut littéralement dire « marque personnelle », et il me gêne un peu parce que nous ne sommes ni des marques, ni des produits qu’il faut vendre.</p>

  478. 

  479. <p>Je préfère parler de « design de soi ». Pour moi ça veut dire : « Je me montre moi, tel·le que je suis en vrai, sans fard, via le web et ma façon de communiquer en général. Je ne cherche pas à me vendre ni à me faire mousser, mais juste à montrer qui je suis et ce que je fais. Si ça contribue à m'apporter des opportunités, tant mieux, mais ce n'est pas forcément mon objectif premier. » </p>

  480. 

  481. <p><strong>Dans l’expression « design de soi », le design est synonyme de <em>conception</em>.</strong> Ce que vous allez concevoir, c’est une façon de révéler votre personnalité sur le web.</p>

  482. 

  483. <p>Le design, ça sert à mettre en avant une fonctionnalité ou des contenus. Ici, le contenu, c’est vous. Je vais donc vous donner des conseils pour vous mettre en avant sans tomber dans l’autopromotion à outrance.</p>

  484. 

  485. <h3>À quoi sert le design de soi ?</h3>

  486. 

  487. <p><strong>Le design de soi est un véritable atout s’il est bien maîtrisé.</strong> C'est notamment un atout professionnel.</p>

  488. 

  489. <p>Vous pensez peut-être que cela n'est utile qu'aux freelances, qui ont des services et une méthodologie à vendre, et qui vendent en plus leur approche personnelle.</p>

  490. 

  491. <p>Mais le design de soi est également utile quand on est salarié. Cela peut vous être bien utile le jour où vous cherchez un boulot, parce que les recruteurs désormais ont l'habitude de « googliser » les candidats et voir ce qu'il en ressort.</p>

  492. 

  493. <p>Globalement, le design de soi contribue à étendre votre réseau au sens large. Et un réseau, ça ne sert pas uniquement pour le boulot.</p>

  494. 

  495. <h3>Pourquoi parler du design de soi à Paris Web ?</h3>

  496. 

  497. <p>J’ai eu envie d’aborder ce sujet aujourd'hui, non seulement parce qu'il m'intéresse depuis longtemps et parce qu'il n'a jamais été traité à Paris Web, mais aussi parce que je me suis rendue compte qu’il y a un <strong>paradoxe</strong>.</p>

  498. 

  499. <p>Alors que nos métiers sont liés de près à la communication, et que nous contribuons chaque jour à concevoir des interfaces web, nous avons du mal à communiquer à titre personnel.</p>

  500. 

  501. <p>La plupart de nos sites personnels ressemblent peu ou prou à ça :</p>

  502. 

  503. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8233" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/je-suis-unique.jpg" class="block-link thumb custom-thumb" title="Tous les sites personnels se ressemblent"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/je-suis-unique-640x800.jpg" alt="Tous les sites personnels se ressemblent"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/je-suis-unique-640x800.jpg" alt="Tous les sites personnels se ressemblent"/></noscript></a><figcaption id="figcaption_attachment_8233" class="wp-caption font-2">Tous les sites personnels se ressemblent (image créée par <a class="icon-external" target="_blank" rel="external" href="http://www.novolume.co.uk/blog/all-websites-look-the-same/">Dave Ellis</a>, et publiée avec son aimable autorisation).</figcaption></figure></div>

  504. 

  505. <p><strong>Tout est <i lang="en">flat</i>, tout est minimaliste, et l’ennui est total.</strong> On n’arrive plus à distinguer qui est qui et qui fait quoi. Il pourrait tout aussi bien s’agir du portfolio de John à New York, d’Anita à Madrid que du vôtre.</p>

  506. 

  507. <blockquote><p>La folie, c’est se comporter de la même manière et s’attendre à un résultat différent.</p>

  508. <footer>Albert Einstein</footer>

  509. </blockquote>

  510. 

  511. <p><strong>Comment voulez-vous qu’on pense à vous si vous faites comme tout le monde ?</strong></p>

  512. 

  513. <p>Comment voulez-vous qu’on pense à vous pour un super projet ou un super boulot si vous êtes noyé dans la masse ?</p>

  514. 

  515. <p>Je sais que vous pouvez faire mieux que ça, car vous en avez les compétences. Vous avez de l’imagination, et vous êtes créatifs.</p>

  516. 

  517. <div class="post-img-container clearfix aligncenter full"><figure id="attachment_8234" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/imagination.jpg" class="block-link thumb custom-thumb" title="Imagination"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/imagination.jpg" alt="Imagination"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/imagination.jpg" alt="Imagination"/></noscript></a></figure></div>

  518. 

  519. <h3>L'objectif de cette présentation</h3>

  520. 

  521. <p><strong>Cette conférence a pour but de vous donner des conseils pour donner à voir davantage votre personnalité et votre expertise sur le web.</strong></p>

  522. 

  523. <p>Nous allons voir que le design de soi est un ensemble constitué des contenus que vous publiez, mais aussi de la forme que vous leur donnez. Il s’agit à la fois de <strong>design éditorial</strong>, de <strong>design graphique</strong> et de <strong>design émotionnel</strong>.</p>

  524. 

  525. <h3>Un biais socio-culturel</h3>

  526. 

  527. <p>Avant de procéder, je tiens à vous dire que cette conférence est un peu biaisée. J’ai préparé cette conférence en tenant compte du contexte socio-culturel dans lequel nous baignons, en France.</p>

  528. 

  529. <p>Par exemple, je n’ai pas voulu montrer d’exemples américains parce que je trouve que c’est trop déconnecté de notre réalité. En France, on ne communique pas de la même façon. On n’a pas la même culture de la présentation de soi que les anglo-saxons. J'ai donc abordé le sujet sous l'angle français.</p>

  530. 

  531. <h2>Question 1/8 :<br/>à quoi bon prendre la parole puisque les autres le font déjà mieux que moi ?</h2>

  532. 

  533. <p>C’est vrai qu’oser être soi-même et prendre la parole en public demande un certain courage.</p>

  534. 

  535. <p>Je sais que certains d’entre vous n’osent pas prendre la parole, parce que vous ne vous sentez pas assez experts, pas assez expérimentés et pas assez intéressants. Vous vous dites qu’il y a plein d’autres personnes plus douées, plus créatives et moins timides que vous qui le font très bien.</p>

  536. 

  537. <h3>Syndrôme de l'imposteur</h3>

  538. 

  539. <p>Si vous avez déjà réagi comme ça, vous êtes peut-être atteint du <strong>syndrôme de l’imposteur</strong>.</p>

  540. 

  541. <p>Ce syndrôme s’appelle aussi le syndrôme de l’autodidacte. Il consiste à s’auto-disqualifier en permanence. On doute de nos succès, de notre légitimité, et on rejette systématiquement le mérite lié à notre travail.</p>

  542. 

  543. <h3>Vous êtes légitimes</h3>

  544. 

  545. <p>Je vais vous révéler quelque chose de très important.</p>

  546. 

  547. <p>Quelque chose qu’on ne vous a peut-être jamais dit, mais qui peut changer votre façon de voir les choses. Quelque chose qu’une de mes profs m’a dit pendant mes études, et qui m’a beaucoup aidée.</p>

  548. 

  549. <p><strong class="stabilo">Vous êtes légitimes.</strong></p>

  550. 

  551. <p>Chacun d’entre vous est légitime. Vous aussi, vous avez quelque chose à dire. Et ce que vous avez à dire est important, quels que soient votre âge, votre expérience et votre niveau de connaissances. </p>

  552. 

  553. <p>Bien sûr, tout dépend de ce que vous allez faire de cette légitimité, mais vous avez forcément quelque chose de personnel à partager.</p>

  554. 

  555. <h2>Question 2/8 :<br/>si je m’exprime à titre personnel, cela ne va-t-il pas me rendre vulnérable ?</h2>

  556. 

  557. <p>Si je vous dis : prenez la parole, parlez un peu de vous, partagez quelque chose de personnel, vous allez probablement réagir et me dire que vous avez peur de le faire parce que cela risque de vous rendre <strong>vulnérable</strong>.</p>

  558. 

  559. <p>Vous doutez peut-être même de l’intérêt de vous exprimer sur des sujets qui sortent du cadre strictement professionnel.</p>

  560. 

  561. <h2>Professionnellement, vous n'êtes pas unique</h2>

  562. 

  563. <p><strong>Soyons honnêtes : professionnellement, vous n’êtes pas unique.</strong> Vous n'êtes pas la seule personne à faire ce que vous faites. </p>

  564. 

  565. <p><strong>En revanche, vous, vous êtes unique.</strong> Il n'y a qu'un seul vous. Qui vous êtes fera toujours la différence à niveau et à expérience égales.</p>

  566. 

  567. <p>C’est donc important de montrer non seulement ce que vous savez faire professionnellement, mais aussi qui est la personne derrière tout ça.</p>

  568. 

  569. <h2>Votre histoire personnelle est digne d'intérêt</h2>

  570. 

  571. <p><strong>C’est pour ça que votre histoire personnelle est digne d’intérêt.</strong> C’est votre histoire qui va humaniser votre CV. C’est elle qui va vous permettre de nouer un lien avec les autres, parce qu’elle est authentique.</p>

  572. 

  573. <p>Si vous parlez de façon très stricte, très scolaire, sans aucun détail ni anecdote d’aucune sorte, si vous ne parlez que boulot tout le temps de façon très distanciée, cela va être très ennuyeux. Vous dressez une barrière autour de vous. Vous empêchez les autres d’entrer en contact avec vous.</p>

  574. 

  575. <p>A contrario, si vous vous autorisez à partager des choses de façon plus naturelle et spontanée, et si vous partagez des choses qui vous sont arrivées ou des réflexions personnelles, vous avez le pouvoir de <strong>créer une connexion émotionnelle avec les autres</strong>.</p>

  576. 

  577. <h2>Acceptez votre vulnérabilité</h2>

  578. 

  579. <p>Maintenant oui, c’est vrai, révéler au grand jour qui vous êtes et d’où vous venez, c’est <strong>prendre un risque</strong> parce qu’il n’y a plus de barrière pour vous protéger.</p>

  580. 

  581. <p>Alors le plus simple, c’est d’accepter cette vulnérabilité : <strong>ayez le courage de vous révéler imparfait aux yeux des autres</strong>. Acceptez de ne pas contrôler ce qu'ils pensent de vous.</p>

  582. 

  583. <blockquote><p>Ce que les autres vous reprochent, cultivez-le : c’est vous.</p>

  584. <footer>Jean Cocteau</footer>

  585. </blockquote>

  586. 

  587. <h2>Quelques conseils</h2>

  588. 

  589. <ul>

  590. <li><strong>Cessez de vous comparer aux autres et de vous dire que votre histoire est moins intéressante que la leur.</strong> Je vous dirais même que plus vous êtes différent·e de la majorité, mieux c’est. Notre milieu manque désespérément de <strong>mixité</strong> et de <strong>diversité</strong>. Je vous encourage donc à prendre la parole pour que celle-ci ne soit pas toujours monopolisée par les mêmes.</li>

  591. <li><strong>Assumez qui vous êtes et ce que vous faites.</strong> Cultivez votre originalité.</li>

  592. <li><strong>Partagez les aspérités de votre histoire</strong>, car c’est ça qui est intéressant. Les gens qui ne font que parler de leurs succès sans arrêt sont d’un ennui mortel, non ? Personnellement, je préfère les retours d’expérience où tout ne s’est pas bien passé. Je les trouve plus enrichissants, parce que c’est ce qui se passe en vrai : tout ne se passe pas toujours bien, et pourtant on finit toujours par trouver des solutions.</li>

  593. <li><strong>Partagez vos passions, mais essayez de le faire de façon originale.</strong> Si vous dites que vous aimez l’informatique, Photoshop et Star Wars, vous ne dites en fait rien du tout puisque ce sont des goûts très largement partagés dans la communauté du web français. C’est même assez consensuel de dire ça. Il faut trouver quelque chose qui puisse piquer la curiosité. Par exemple, si vous dites : « J’aime Star Wars, le rugby et le thé matcha », ça sort un peu plus de l'ordinaire. Ce genre de petits détails peuvent faciliter la prise de contact.</li>

  594. <li><strong>Soyez la même personne sur le web que dans la vie.</strong> Exprimez-vous naturellement. Trouvez le ton juste. Si vous vous faites passer pour quelqu’un que vous n’êtes pas, les autres s’apercevront immédiatement de l’imposture lorsqu’ils vous rencontreront pour la première fois. Et ça sera très embarrassant pour vous.</li>

  595. <li><strong>Soyez naturel·le, mais relisez-vous et assurez-vous que vous êtes compréhensible.</strong> Rien de tel que des contenus blindés de fautes, ou qu’on a du mal à comprendre parce qu’ils sont mal formulés. Si l’orthographe est votre point faible, utilisez un correcteur orthographique et faites-vous relire. Si votre message est mal écrit, cela va nuire à votre propos et à votre image.</li>

  596. </ul>

  597. 

  598. <h3><i lang="en">Haters gonna hate</i></h3>

  599. 

  600. <p>Enfin, ayez conscience qu’en partageant votre histoire, vous pourrez provoquer non seulement la sympathie et l’admiration, mais aussi le dédain. </p>

  601. 

  602. <p><strong>Quoi que vous partagiez, il y aura toujours des gens qui ne comprendront pas votre démarche</strong> et qui essayeront de vous décourager. </p>

  603. 

  604. <p>Tant pis pour eux ! ¯\_(ツ)_/¯ Quand on prend la parole, on ne peut pas faire l'unanimité (ou alors, c'est louche).</p>

  605. 

  606. <div class="post-img-container clearfix aligncenter full"><figure id="attachment_8235" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/haters.jpg" class="block-link thumb custom-thumb" title="Haters gonna hate"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/haters.jpg" alt="Haters gonna hate"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/haters.jpg" alt="Haters gonna hate"/></noscript></a></figure></div>

  607. 

  608. <h2>Question 3/8 :<br/>que puis-je partager pour valoriser mon expertise ?</h2>

  609. 

  610. <p><strong>Maintenant que vous êtes convaincus de votre légitimité et de l’importance de partager quelque chose de façon personnelle, que pouvez-vous partager pour valoriser votre expertise ?</strong></p>

  611. 

  612. <h3>Le problème</h3>

  613. 

  614. <p><strong>Le web francophone est devenu passif.</strong> Quelques uns publient des contenus, mais beaucoup les consomment de manière passive.</p>

  615. 

  616. <p>Or, on est tous en attente de contenus intéressants, riches et originaux.</p>

  617. 

  618. <p>Aussi, si chacun d'entre nous se met à publier, ne serait-ce qu'un petit peu, cela provoquera un effet boule de neige, et tout le monde y gagnera. </p>

  619. 

  620. <p>Ce n'est pas une question de « se vendre », mais juste d'apporter quelque chose à la communauté en échange de ce qu'elle vous a déjà appris ou donné.</p>

  621. 

  622. <h3>La solution</h3>

  623. 

  624. <h4>Partagez votre savoir</h4>

  625. 

  626. <p><strong>Partagez votre savoir :</strong> non seulement vos connaissances, mais aussi ce que vos expériences vous ont appris. En particulier si vous avez une méthodologie ou un parcours différents. Les chemins de traverse et les avis tranchés sont toujours intéressants. N’ayez pas peur de prendre parti. Être sans arrêt consensuel est vite ennuyeux.</p>

  627. 

  628. <h4>Dévoilez votre savoir-faire</h4>

  629. 

  630. <p><strong>Dévoilez votre savoir-faire et montrez le résultat de votre travail :</strong> c’est valable que vous soyez designer ou pas. Dévoilez-nous la fabrication de ce que vous faites. Si vous le pouvez, n’attendez pas la fin d’un projet pour en parler.</p>

  631. 

  632. <h5><i lang="en">Making-of</i></h5>

  633. 

  634. <p>Cela peut prendre la forme d'un <i lang="en">making-of</i>. Cabaroc fait ça très bien : il tweete souvent des captures d’écran des projets sur lesquels il est en train de travailler. C'est un peu comme s'il ouvrait une porte et qu'il nous invitait à jeter un coup d'œil par dessus son épaule pour voir comment il fait.</p>

  635. 

  636. <div class="post-img-container clearfix aligncenter full"><figure id="attachment_8236" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/cabaroc.jpg" class="block-link thumb custom-thumb" title="Making-of d'une illustration de Cabaroc"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/cabaroc.jpg" alt="Making-of d'une illustration de Cabaroc"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/cabaroc.jpg" alt="Making-of d'une illustration de Cabaroc"/></noscript></a><figcaption id="figcaption_attachment_8236" class="wp-caption font-2">Making-of d'une illustration de Cabaroc, publiée sur son <a class="icon-external" target="_blank" rel="external" href="https://twitter.com/Cabaroc/status/600632370065182721" title="Compte Twitter de Cabaroc">compte Twitter</a>.</figcaption></figure></div>

  637. 

  638. <h5><i lang="en">Scrapbook</i> mental</h5>

  639. 

  640. <p><strong>Partagez votre « <i lang="en">scrapbook</i> mental ».</strong> J’emprunte l’expression à un auteur-illustrateur que j’aime beaucoup, Austin Kleon, qui a écrit des livres vraiment super sur la créativité.</p>

  641. 

  642. <p>Votre scrapbook mental, ce sont toutes les choses qui influencent et inspirent votre travail. </p>

  643. 

  644. <p>Partager vos influences renseigne les autres sur votre personnalité et sur votre travail, parfois même mieux que votre travail lui-même. L'histoire que vous allez raconter à propos de votre travail est très importante : cela va conditionner la façon dont les autres vont le comprendre. Et la façon dont ils vont comprendre votre travail va conditionner la valeur qu’ils lui accordent, ainsi que l’estime qu’ils vous portent.</p>

  645. 

  646. <p>Votre <i lang="en">scrapbook</i> mental est donc un levier très puissant pour donner du sens à ce que vous faites.</p>

  647. 

  648. <h4>Offrez des ressources</h4>

  649. 

  650. <p><strong>Offrez des ressources aux autres :</strong> de la veille, des bouts de code, des tutoriels, vos astuces de pro… Ne vous contentez pas juste de publier une capture d'écran et trois liens, ou bien uniquement de traductions ou de redites.</p>

  651. 

  652. <p><strong>Apportez quelque chose d'utile et d'original.</strong> Stéphanie Walter partage chaque semaine sa veille sur <a class="icon-external" target="_blank" rel="external" href="http://www.inpixelitrust.fr/blog/" title="Le blog de Stéphanie Walter">son blog</a>, et c'est vraiment une ressource de grande qualité, sans parler de <a class="icon-external" target="_blank" rel="external" href="https://twitter.com/WalterStephanie" title="Le profil Twitter de Stéphanie Walter">son compte Twitter</a> où elle partage chaque jour une veille triée sur le volet.</p>

  653. 

  654. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8260" class="post-img-figure"><span class="thumb custom-thumb"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/stephanie-640x480.jpg" alt="Le site de Stéphanie Walter"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/stephanie-640x480.jpg" alt="Le site de Stéphanie Walter"/></noscript></span></figure></div>

  655. 

  656. <h4>Contribuez à des projets <span lang="en">open source</span></h4>

  657. 

  658. <p>Si vous débutez dans le métier et que vous ne savez pas trop quoi partager, outre les projets fictifs, <strong>contribuer à des projets <span lang="en">open source</span></strong> peut également vous aider à valoriser vos compétences. </p>

  659. 

  660. <p>Participer à des projets <span lang="en">open source</span> est d'ailleurs parfois un pré-requis dans certaines offres d'emploi web.</p>

  661. 

  662. <h4>Parlez du travail des autres</h4>

  663. 

  664. <p><strong>Parlez du travail des autres :</strong> partagez leurs articles, leurs <i lang="en">tweets</i>, leurs créations, commentez ce qu’ils font, encouragez-les…</p>

  665. 

  666. <p>Tout cela, c’est du partage intéressant car il n'est pas égocentré. Il montre que vous vous intéressez aux autres et que vous suivez un peu l'actualité de la communauté.</p>

  667. 

  668. <h3>Publiez utile et adressez-vous à tout le monde</h3>

  669. 

  670. <p><strong>Quoi que vous publiez, publiez utile.</strong> À choisir, publiez peu, mais publiez bien. Partagez toujours des informations de bonne qualité.</p>

  671. 

  672. <p><strong>Ayez aussi l’humilité de vous adresser à tout le monde</strong>, et pas uniquement à votre petit microcosme. En particulier, c’est important de publier aussi des contenus pour les débutants, parce qu’à force de ne publier que des contenus très pointus, on n’aide qu’une fraction de gens.</p>

  673. 

  674. <p><strong>Je vous donne deux astuces pour être plus inclusif :</strong></p>

  675. 

  676. <ol>

  677. <li>Écrivez comme si vous parliez à votre meilleure amie ;</li>

  678. <li>Partez toujours du principe que ceux qui vous lisent ne connaissent strictement rien au sujet.</li>

  679. </ol>

  680. 

  681. <p>Cela vous aidera à écrire de façon <strong>plus naturelle et plus pédagogique</strong>.</p>

  682. 

  683. <p>Bref, soyez <strong>une force positive</strong>, quelqu’un qui tire les autres vers le haut. </p>

  684. 

  685. <p>Tout ce que vous allez partager de positif, d’utile et d'original va contribuer à <strong>forger votre réputation en tant qu’expert·e</strong> sur le web, et <strong>associer votre nom à ce que vous savez faire de mieux</strong>. C’est la meilleure preuve que vous pouvez donner de votre expertise.</p>

  686. 

  687. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8237" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/force-positive.jpg" class="block-link thumb custom-thumb" title="Biouman"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/force-positive-640x360.jpg" alt="Biouman"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/force-positive-640x360.jpg" alt="Biouman"/></noscript></a></figure></div>

  688. 

  689. <h2>Question 4/8 :<br/>si je partage mon savoir, cela ne va-t-il pas le dévaloriser ?</h2>

  690. 

  691. <p><strong>Vous pourriez être tenté de croire que partager ce que vous savez va dévaloriser votre travail.</strong> </p>

  692. 

  693. <p>Après tout, si tout le monde finit par savoir ce que vous savez, ce que vous savez ne va-t-il pas perdre de la valeur, et les services que vous proposez aussi ?</p>

  694. 

  695. <h3>Le cercle vertueux du partage</h3>

  696. 

  697. <p>Hé bien non, au contraire. <strong>Partager votre savoir et vos expériences, c’est justement ce qui leur donne de la valeur.</strong></p>

  698. 

  699. <p>Si vous gardez tout pour vous, ce savoir ne sert à rien. Vous « gâchez » en quelque sorte un savoir qui pourrait être utile à d’autres.</p>

  700. 

  701. <p>Alors que si vous partagez votre savoir, <strong>vous faites le bien</strong> en aidant les autres. Plus vous allez partager votre savoir avec les autres, plus ils vont pouvoir le partager à leur tour, plus ils vont pouvoir l’enrichir, et plus ce savoir va être utile.</p>

  702. 

  703. <p>C'est un cercle vertueux.</p>

  704. 

  705. <h3>Inspiration mutuelle</h3>

  706. 

  707. <p><strong>L’autre intérêt, c’est que lorsque vous partagez quelque chose avec les autres, les autres vous apprennent toujours quelque chose en échange.</strong></p>

  708. 

  709. <p>Vous allez vous inspirer mutuellement. Quand vous partagez quelque chose d’intéressant, vous rencontrez des gens, même en dehors de votre microcosme. Et c'est souvent comme ça que naissent les rencontres les plus intéressantes.</p>

  710. 

  711. <h3>Bouche à oreille</h3>

  712. 

  713. <p>Enfin, partager votre savoir a un effet secondaire positif : <strong>il entretient le bouche à oreille</strong>.</p>

  714. 

  715. <p>Et le bouche à oreille contribue lui aussi à forger votre réputation en tant qu’expert·e ; même si ce n’est pas votre objectif principal, cela y contribue.</p>

  716. 

  717. <h2>Question 5/8 :<br/>comment ne pas me décrédibiliser ?</h2>

  718. 

  719. <p>Un écran, ça montre, mais ça peut – et doit ! – aussi cacher. Quand on parle de soi, on peut être tenté de se laisser aller à des confidences, ou à prendre un peu trop la confiance, mais il faut résister. </p>

  720. 

  721. <p>En matière de design de soi, il y a deux points sur lesquels je voudrais attirer votre attention : <strong>l'importance de préserver votre intimité</strong> d'une part, et <strong>l'écueil du <i lang="en">personal branling</i></strong> de l'autre.</p>

  722. 

  723. <h3>Préservez votre intimité</h3>

  724. 

  725. <p>Prendre la parole à titre personnel sur le web et y partager des réflexions personnelles ne veut pas dire révéler sa vie privée, au contraire.</p>

  726. 

  727. <p><strong>Vous ne contrôlez pas qui va lire ce que vous publiez</strong> : cela peut être vos amis, mais aussi votre supérieur, vos collègues, vos concurrents, vos clients mais aussi vos voisins, votre maman, des complets inconnus et même des machines.</p>

  728. 

  729. <p><strong>Ce que vous publiez a un impact au-delà de votre petit réseau.</strong></p>

  730. 

  731. <p>Or, vous ne voulez pas que tous ces gens-là sachent absolument <em>tout</em> sur vous. Tout n’est pas bon à dire ni à montrer.</p>

  732. 

  733. <p><strong>Donc, partagez votre histoire et vos réflexions personnelles, oui, mais en préservant votre intimité.</strong> Il faut dissocier l’intimité de l’extimité. <a class="icon-external" target="_blank" rel="external" href="https://fr.wikipedia.org/wiki/Extimit%C3%A9">L’extimité</a>, c’est un concept intéressant qui a été formulé par <del>l’écrivain Michel Tournier</del> <ins>par Lacan en 1969 puis repris par Serge Tisseron en 2001, puis appliqué dans un « journal extime » par Michel Tournier en 2002</ins>. </p>

  734. 

  735. <p>En gros :</p>

  736. 

  737. <ul>

  738. <li><strong>Un journal intime</strong> représente un repliement sur soi, et s’inscrit dans le registre de l’aveu et de la confession.</li>

  739. <li>A contrario, <strong>un journal extime</strong> est une ouverture vers l’extérieur. L’extimité, c’est un mouvement de découverte, où l’on se laisse saisir par le monde extérieur et où on le retranscrit. Tous les moments où vous vous frottez à ce qui vous entoure, et où ça vous apporte quelque chose, ça, c’est intéressant. Racontez vos rencontres, vos découvertes, vos expériences.</li>

  740. </ul>

  741. 

  742. <p><strong>Concentrez-vous plutôt sur vos passions et votre travail plutôt que sur votre petite personne</strong>.</p>

  743. 

  744. <h3>Évitez le <i lang="en">personal branling</i></h3>

  745. 

  746. <p><strong>L’autre écueil à éviter en matière de design de soi, c’est le « <i lang="en">personal branling</i> ».</strong></p>

  747. 

  748. <p>C’est vrai que par définition, le design de soi vous met au centre de l’attention, mais ne vous laissez pas emporter par votre ego.</p>

  749. 

  750. <p>L’expression « <i lang="en">personal branling</i> » est construite sur un néologisme. C'est un mélange entre l’expression anglaise « <i lang="en">personal branding</i> » (déjà défini en introduction) et le mot français « branlette ».</p>

  751. 

  752. <p>L'expression « <i lang="en">personal branling</i> » a été mise à l’honneur fin 2010 sur le Tumblr du même nom, qui a fait grincer pas mal de dents. Ce site recense les pires exemples français d'autopromotion éhontée. C'est assez jouissif mais c'est aussi assez effrayant, car chacun d'entre nous peut s'y retrouver du jour au lendemain.</p>

  753. 

  754. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8238" class="post-img-figure"><a href="http://personalbranling.tumblr.com/post/23091796958/tu-rappelleras-à-ceux-qui-font-mine-de-lignorer" class="block-link thumb custom-thumb" title="Le Tumblr Personal Branling"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/personal-branling-640x480.jpg" alt="Le Tumblr Personal Branling"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/personal-branling-640x480.jpg" alt="Le Tumblr Personal Branling"/></noscript></a></figure></div>

  755. 

  756. <p><strong>Le « <i lang="en">personal branling</i> », c’est l’autopromotion poussée à l’extrême.</strong> C’est adopter une attitude arrogante et prétentieuse ; c‘est se la jouer et feindre de ne pas s'en rendre compte. Parfois on en fait sans même s’en rendre compte, c’est pour ça que c'est assez dangereux.</p>

  757. 

  758. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8239" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/poser.jpg" class="block-link thumb custom-thumb" title="La différence entre un poseur et un véritable génie"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/poser-640x443.jpg" alt="La différence entre un poseur et un véritable génie"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/poser-640x443.jpg" alt="La différence entre un poseur et un véritable génie"/></noscript></a><figcaption id="figcaption_attachment_8239" class="wp-caption font-2">La différence entre un poseur et un véritable génie</figcaption></figure></div>

  759. 

  760. <h3>Quelques conseils</h3>

  761. 

  762. <ul>

  763. <li><strong>Ne retweetez pas tous les compliments que l'on vous fait.</strong> Un exemple très courant de « <i lang="en">personal branling</i> » sur Twitter consiste à retweeter TOUS les tweets qui parlent de vous ou de vos créations en terme élogieux. Si on vous suit sur Twitter, c'est qu'a priori on sait déjà que vous êtes compétent·e dans votre domaine d’expertise.</li>

  764. <li><strong>Évitez le <i lang="en">name dropping</i>.</strong> Ça consiste à placer dans la conversation dès que possible les noms de personnes connues dans la communauté, uniquement pour prouver que vous connaissez les grands de ce monde et que vous faites partie de leur petit cercle de privilégiés. C'est hyper prétentieux !</li>

  765. <li><strong>Ne parlez jamais de vous à la troisième personne du singulier.</strong> Vous n’êtes pas une célébrité qui a besoin d’émettre des communiqués de presse. Faites simple.</li>

  766. <li><strong>Ne ramenez pas sans arrêt votre science dès que quelqu’un a le malheur de parler de votre sujet de prédilection.</strong> Ok, faites savoir que vous êtes expert, mais ne soyez pas celui ou celle qui la ramène tout le temps au point de devenir franchement lourd·e.</li>

  767. <li>Enfin, n’utilisez pas le web comme un crachoir pour passer des coups de gueule contre les autres, y compris sur Slack. Personne n’a envie de travailler avec quelqu’un qui crache sur autrui en public.</li>

  768. </ul>

  769. 

  770. <h3>Moralité de l'histoire</h3>

  771. 

  772. <p>Gardez ceci à l’esprit : <strong>il vaut mieux que les autres parlent de vous, plutôt que vous parliez vous-même de vous</strong>. Plus vous allez parler de vous positivement, plus les autres vont parler de vous <em>négativement</em>.</p>

  773. 

  774. <p>Et inversement : moins vous allez parler de vous, plus vous allez partager des contenus utiles, plus les autres vont parler de vous <em>positivement</em>.</p>

  775. 

  776. <p><strong>Même si vous avez beaucoup d'expérience, faites preuve d'humilité pour ne pas entacher vos réputation.</strong></p>

  777. 

  778. <blockquote><p>Voulez-vous qu’on dise du bien de vous ? N’en dites point.</p>

  779. <footer>Blaise Pascal</footer>

  780. </blockquote>

  781. 

  782. <h2>Question 6/8 :<br/>comment parler de mes réussites sans paraître prétentieux ?</h2>

  783. 

  784. <p>Maintenant, il peut arriver malgré tout que vous vouliez parler d’un de vos succès : un article, un prix, une mention, quelque chose de valorisant pour vous. Comment en parler tout en laissant votre ego de côté ?</p>

  785. 

  786. <p><strong>La première solution consiste à ne pas en parler</strong> parce que Google est votre ami. Tous les contenus rattachés à votre nom sur le web parlent déjà pour vous.</p>

  787. 

  788. <div class="post-img-container clearfix alignleft ratio-thumb"><figure id="attachment_8240" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/grumpy-meme.jpg" class="block-link thumb custom-small-thumb" title="Oui mais non"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/grumpy-meme-180x222.jpg" alt="Oui mais non"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/grumpy-meme-180x222.jpg" alt="Oui mais non"/></noscript></a></figure></div>

  789. 

  790. <p><strong>Si ça vous démange quand même d’en toucher un mot, parlez-en, mais sans en faire des tonnes.</strong> La meilleure stratégie pour moi c’est de placer ça dans la conversation comme si de rien n’était : par exemple à la fin d’un billet de blog, en mode « Au fait, j’ai fait ça, voici le lien si ça vous intéresse… » – mais <em>pas</em> d’y consacrer un billet de blog entier ni de le tweeter en mode « Hey hey regardez ! On parle de moi ici, là, et là aussi ! Je suis tellement génial·e ! ». Il y a un cercle spécial en enfer réservé aux gens qui font ça.</p>

  791. 

  792. <p>Vous pouvez aussi <strong>placer cette information aux endroits stratégiques</strong>, en la réduisant à sa forme la plus simple : par exemple sur votre page À propos ou sur votre CV en ligne.</p>

  793. 

  794. <p>Toute la difficulté du design de soi réside dans <strong>cette tension permanente</strong> entre montrer et cacher, dire et se taire, être fier et faire preuve d’humilité. Dans le doute, demandez toujours l’avis de quelqu’un de bienveillant.</p>

  795. 

  796. <h2>Question 7/8 :<br/>comment retranscrire ma personnalité à l’écran ?</h2>

  797. 

  798. <p>Raconter votre histoire et partager des choses utiles, c’est bien. Le contenu prime toujours. Mais il aura davantage d’impact si vous y mettez les formes.</p>

  799. 

  800. <p><strong>Il faut donc soigner votre apparence sur le web, car la première impression que vous donnez est primordiale. </strong></p>

  801. 

  802. <p>Votre design personnel va influencer la façon dont on va percevoir vos contenus et votre démarche. Avant même de lire quoi que ce soit, on va être influencé par le design, les photos, les couleurs, la typo que vous aurez choisis.</p>

  803. 

  804. <p>À la place d’un CV froid et hyper scolaire, proposez <strong>une véritable expérience web</strong>. Vous tous ici avez le talent pour cela. Créez quelque chose d’original, d’intelligent et d’artisanal pour valoriser votre travail et votre univers personnel. C'est la clé d'un design de soi réussi.</p>

  805. 

  806. <blockquote><p>Les gens oublieront ce que vous avez dit, ils oublieront ce que vous avez fait, mais ils n'oublieront jamais ce que vous leur avez fait ressentir.</p>

  807. <footer>Maya Angelou</footer>

  808. </blockquote>

  809. 

  810. <h3>Sans le savoir, vous faites déjà du design de soi</h3>

  811. 

  812. <p>Le point positif, c’est que vous avez déjà de la matière. <strong>Inconsciemment, vous êtes déjà en train de modeler votre design personnel</strong> : chaque tweet, chaque photo que vous publiez, chaque billet de blog, l’URL de votre site, votre adresse email, votre avatar, votre pseudo… Ce sont autant d’indices sur vous et votre univers. </p>

  813. 

  814. <p>Cela constitue <strong>une matière première intéressante</strong> pour démarrer un travail d’harmonisation graphique.</p>

  815. 

  816. <h3>Constituez un <i lang="en">moodboard</i></h3>

  817. 

  818. <p>La meilleure façon de visualiser tout ça et de vous rendre compte de l’impression que ça donne, c’est de <strong>tout réunir au sein d'un tableau d'inspiration</strong> (« <i lang="en">moodboard</i> » en anglais) que vous pourrez imprimer et accrocher sur un mur si besoin.</p>

  819. 

  820. <p>L’idée est d’y coller votre carte de visite, d’imprimer votre profil Twitter, un billet de blog, votre photo, votre signature de mail, mais aussi des visuels qui vous inspirent. </p>

  821. 

  822. <p>C'est ce que j'ai fait lors de <a href="http://marieguillaumet.com/refonte-de-mon-portfolio-crea-et-design/">la refonte de mon portfolio</a> :</p>

  823. 

  824. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8241" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/moodboard.jpg" class="block-link thumb custom-thumb" title="Moodboard"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/moodboard-640x480.jpg" alt="Moodboard"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/moodboard-640x480.jpg" alt="Moodboard"/></noscript></a></figure></div>

  825. 

  826. <p>Cela m'a inspirée pour mettre au point ma charte graphique personnelle :</p>

  827. 

  828. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8242" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/branding-marie.jpg" class="block-link thumb custom-thumb" title="Ma charte graphique personnelle"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/branding-marie-640x480.jpg" alt="Ma charte graphique personnelle"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/branding-marie-640x480.jpg" alt="Ma charte graphique personnelle"/></noscript></a></figure></div>

  829. 

  830. <p>Parce que personne ne se lève un jour en se disant : « Tiens, ce qui me correspond c’est une police sans empattement, et un dégradé gris et blanc ».</p>

  831. 

  832. <p><strong>Le design se base toujours sur une analyse des objectifs et de l’existant</strong> – à part pour des marques nouvelles, mais nous, nous ne sommes ni des marques, ni des produits. Nous sommes des individus avec un parcours et une identité propres, sur lesquels il faut capitaliser. </p>

  833. 

  834. <p><strong>Bref, ne cherchez pas midi à quatorze heures : la clé de votre design personnel, c’est vous.</strong></p>

  835. 

  836. <h3>Valorisez vos points forts et vos particularités</h3>

  837. 

  838. <p><strong>Identifiez vos points forts, vos passions et vos particularités, et essayez de valoriser tout ça.</strong> Trouvez vos spécificités. Vous n’avez aucune excuse pour ne pas essayer.</p>

  839. 

  840. <p><a class="icon-external" target="_blank" rel="external" href="http://crssrd.com">Le site d’Émilie Crassard</a> est un bon exemple de design personnel réussi. Il sort de l’ordinaire, non seulement parce qu’il utilise une palette très contrastée, mais aussi parce qu’il contient des dessins,  ainsi que des informations personnelles, qui humanise son profil de graphiste et de web designer. Ça peut servir de déclic pour la contacter et pour en savoir plus.</p>

  841. 

  842. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8243" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/crssrd.jpg" class="block-link thumb custom-thumb" title="Le site d'Émilie Crassard"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/crssrd-640x451.jpg" alt="Le site d'Émilie Crassard"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/crssrd-640x451.jpg" alt="Le site d'Émilie Crassard"/></noscript></a></figure></div>

  843. 

  844. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8244" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/crssrd-about.jpg" class="block-link thumb custom-thumb" title="La page À propos d'Émilie Crassard"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/crssrd-about-640x448.jpg" alt="La page À propos d'Émilie Crassard"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/crssrd-about-640x448.jpg" alt="La page À propos d'Émilie Crassard"/></noscript></a></figure></div>

  845. 

  846. <h3>Soyez cohérent</h3>

  847. 

  848. <p>Quel que soit votre style, l’essentiel est d’<strong>être cohérent dans votre façon de vous exprimer</strong>.</p>

  849. 

  850. <p><a class="icon-external" target="_blank" rel="external" href="http://gweno.net">Gwenole Jaffredou</a> est <span lang="en">motion designer</span> à Rennes, et il a réussi à rendre très cohérent son design personnel, grâce à une illustration qu’il a réalisée tout en 3D, qui le représente parmi les toits de la capitale bretonne.</p>

  851. 

  852. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8245" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-homepage.jpg" class="block-link thumb custom-thumb" title="Le site de Gwenole Jaffrédou"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-homepage-640x454.jpg" alt="Le site de Gwenole Jaffrédou"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-homepage-640x454.jpg" alt="Le site de Gwenole Jaffrédou"/></noscript></a></figure></div>

  853. 

  854. <p>On retrouve cette même illustration sur <a class="icon-external" target="_blank" rel="external" href="https://twitter.com/gweno" title="Profil Twitter de Gwenole Jaffredou">son profil Twitter</a> ainsi que sur <a class="icon-external" target="_blank" rel="external" href="https://plus.google.com/u/0/+Gw%C3%A9nol%C3%A9Jaffr%C3%A9dou/posts" title="Profil Google+ de Gwenole Jaffredou">son profil Google+</a>. On sait immédiatement qu’on est « chez lui », en quelque sorte.</p>

  855. 

  856. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8246" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-twitter.jpg" class="block-link thumb custom-thumb" title="Le profil Twitter de Gwenole Jaffredou"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-twitter-640x437.jpg" alt="Le profil Twitter de Gwenole Jaffredou"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-twitter-640x437.jpg" alt="Le profil Twitter de Gwenole Jaffredou"/></noscript></a></figure></div>

  857. 

  858. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8247" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-google.jpg" class="block-link thumb custom-thumb" title="Le profil Google+ de Gwenole Jaffredou"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-google-640x476.jpg" alt="Le profil Google+ de Gwenole Jaffredou"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/gweno-google-640x476.jpg" alt="Le profil Google+ de Gwenole Jaffredou"/></noscript></a></figure></div>

  859. 

  860. <p><strong>Cette cohérence permet non seulement de l’identifier lui, mais surtout cela met en valeur ses aptitudes de designer.</strong> C’est donc doublement utile.</p>

  861. 

  862. <p>NB : une fois que vous aurez réalisé ce travail d'harmonisation graphique sur le web, vous pourrez l’étendre à d’autres supports, par exemple en refaisant vos cartes de visite, en appliquant votre nouveau branding à vos devis et à vos factures, et ainsi de suite. L’idée ici est d’être cohérent quel que soit le média.</p>

  863. 

  864. <h3>Trouvez le grain de sable</h3>

  865. 

  866. <p>Maintenant, on n’a pas forcément le temps de pousser les choses aussi loin. Pour créer une bonne première impression, <strong>il peut suffire d’un grain de sable, d’une petite trouvaille qui reflète votre univers et votre personnalité</strong>.</p>

  867. 

  868. <p><a class="icon-external" target="_blank" rel="external" href="http://www.redisdead.net">Laurence Vagner</a> est UX designer. En bas de son site, il y a un petit dinosaure qui crache un arc-en-ciel. Quand vous cliquez sur le dinosaure, c'est tout le site qui commence à cracher un arc-en-ciel aussi.</p>

  869. 

  870. <div class="post-img-container clearfix aligncenter full"><figure id="attachment_8249" class="post-img-figure"><a href="http://www.redisdead.net" class="block-link thumb custom-thumb" title="Le site de Laurence Vagner"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/hellgy-anim_web.gif" alt="Le site de Laurence Vagner"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/hellgy-anim_web.gif" alt="Le site de Laurence Vagner"/></noscript></a></figure></div>

  871. 

  872. <p>Ce n'est pas un détail gratuit : cela fait écho à d'autres contenus que Laurence publie sur le web, notamment ses photos.</p>

  873. 

  874. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8250" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/hellgy-photos.jpg" class="block-link thumb custom-thumb" title="Les photos de Laurence"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/hellgy-photos-640x427.jpg" alt="Les photos de Laurence"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/hellgy-photos-640x427.jpg" alt="Les photos de Laurence"/></noscript></a></figure></div>

  875. 

  876. <p>Ce grain de sable s'inscrit donc dans le cadre d'un design personnel cohérent. D'ailleurs, ce n'est pas un hasard si les <i lang="en">goodies</i> Paris Web cette année sont truffés d'arcs-en-ciel eux aussi, puisque Laurence les a réalisés !</p>

  877. 

  878. <p>Côté développeur, j'ai aussi un exemple à vous donner. Voici <a class="icon-external" target="_blank" rel="external" href="http://tut-tuuut.github.io/">le site d’Agnès Haasser</a>, qui est développeuse web, et que vous connaissez peut-être sur Twitter sous le pseudo <a class="icon-external" target="_blank" rel="external" href="https://twitter.com/tut_tuuut">@tut_tuuut</a>.</p>

  879. 

  880. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8251" class="post-img-figure"><a href="http://marieguillaumet.com/wp-content/uploads/2015/09/agnes.jpg" class="block-link thumb custom-thumb" title="Le site d'Agnès Haasser"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/agnes-640x449.jpg" alt="Le site d'Agnès Haasser"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/agnes-640x449.jpg" alt="Le site d'Agnès Haasser"/></noscript></a></figure></div>

  881. 

  882. <p>Quand vous commencez à scroller, un bouton intitulé « Arrête de bouger » apparaît en haut à gauche de l'écran son site. Le bloc constitué par le titre du site, la navigation et ce bouton sont fixes : ils suivent le défilement de la page. Mais si vous cliquez sur le bouton « Arrête de bouger », le bloc arrête de suivre le défilement de la page, et l’intitulé du bouton change, en devant « À vos ordres » ou « Oui, maître ».</p>

  883. 

  884. <div class="post-img-container clearfix aligncenter full"><figure id="attachment_8252" class="post-img-figure"><span class="thumb custom-thumb"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/tut_tuuut-anim_web.gif" alt="Le bouton rigolo sur le site d'Agnès"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/tut_tuuut-anim_web.gif" alt="Le bouton rigolo sur le site d'Agnès"/></noscript></span></figure></div>

  885. 

  886. <p>Si vous cliquez à nouveau sur le bouton, l’intitulé change encore, et le bloc recommence à suivre le scroll. Et ainsi de suite, à l’infini.</p>

  887. 

  888. <p>Ce petit détail montre la personnalité d'Agnès, pour l'utilisateur c'est amusant à manier, mais là encore ce n’est pas un grain de sable gratuit : ça permet de valoriser les compétences d'Agnès, puisqu’elle a écrit un petit algorithme JavaScript spécialement pour.</p>

  889. 

  890. <p><strong>Quel que soit votre profil et vos compétences, à vous de trouver une idée originale pour valoriser vos compétences.</strong> </p>

  891. 

  892. <p>Il n'est pas nécessaire que ça soit extraordinaire ou beau, mais un détail sympa peut marquer positivement les esprits et participer à l'impact émotionnel de votre design.</p>

  893. 

  894. <p>L’essentiel est de rester toujours cohérent avec votre profil. Cela ne doit pas être gratuit.</p>

  895. 

  896. <p>NB : le CV d'Agnès présente lui aussi quelques originalités. Elle y a d'ailleurs consacré <a class="icon-external" target="_blank" rel="external" href="http://tut-tuuut.github.io/2015/01/26/une-histoire-de-cv%20-%20copie.html">un billet de blog</a> où elle explique qu'avoir écrit « fraîche et pleine de vie » sur son CV, ce qui est assez osé, est précisément ce qui a permis de créer un contact avec son prochain employeur. Ça a facilité l’échange. </p>

  897. 

  898. <h2>Question 8/8 :<br/>et si j’ai pas le temps de faire tout ça, je fais quoi ?</h2>

  899. 

  900. <p>Si vous n’avez pas le temps de vous lancer dans un design personnel aussi acharné que les exemples précédents, <strong>envisagez les choses de façon progressive et évolutive</strong>, plutôt que comme un bloc monolithique qui va vous prendre trois ans.</p>

  901. 

  902. <p><strong>N’oubliez jamais que ce qui compte, c’est le contenu.</strong> Si vous avez envie de refaire votre site mais que vous n'avez pas le temps, refaites votre contenu, ou réorganisez-le !</p>

  903. 

  904. <p><strong>Dédramatisez le fait de ne pas tout créer vous-même.</strong> Vous avez le droit d’utiliser un thème Tumblr ou WordPress à condition de le modifier un peu et d’y publier des choses vraiment intéressantes. Si, un soir, vous avez envie de vus créer un blog, faites-le ! En une soirée, vous l’aurez déjà configuré et publié. Vous l’améliorerez après.</p>

  905. 

  906. <h3>Le design de soi en cinq minutes</h3>

  907. 

  908. <p>Chez Résidence Mixte, l'agence pour laquelle je travaille, quand on commence un design de site pour l’un de nos clients, après une phase d'analyse, on commence par leur proposer une ou deux couleurs ainsi qu'une typo. Si ça leur plaît, on met en place une page d’attente sur leur nom de domaine, ce qui leur permet de se projeter dans leur futur site, même si les maquettes n’existent pas encore. Cela leur permet de commencer à s’habituer à leur future charte.</p>

  909. 

  910. <p><strong>De la même façon, vous pouvez rapidement rénover votre design personnel.</strong></p>

  911. 

  912. <p><strong>Changez de photo de profil.</strong> Choisissez-en une belle, car c'est super important. On aime tous mettre un visage sur les pseudos que l’on croise au quotidien. Cependant, n’en profitez pas pour mettre votre photo partout.</p>

  913. 

  914. <p>Ensuite, après avoir fait tout le travail de recherche dont on a parlé, <strong>choisissez une couleur qui vous plaît et qui vous représente ; puis tartinez-en vos profils sur les réseaux sociaux</strong>.</p>

  915. 

  916. <p>C'est ce que fait <a class="icon-external" target="_blank" rel="external" href="https://twitter.com/mcpaccard">Marie-Cécile Paccard</a>, designer : elle a remplacé la photo qui orne habituellement les profils Twitter par un beau bleu cyan, qui correspond à sa couleur de cheveux, visible dans son avatar. C'est du pur design de soi !</p>

  917. 

  918. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8253" class="post-img-figure"><a href="https://twitter.com/mcpaccard" class="block-link thumb custom-thumb" title="Le profil Twitter de Marie-Cécile Paccard"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/mcpaccard-640x470.jpg" alt="Le profil Twitter de Marie-Cécile Paccard"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/mcpaccard-640x470.jpg" alt="Le profil Twitter de Marie-Cécile Paccard"/></noscript></a></figure></div>

  919. 

  920. <p><strong>Vous pouvez aussi utiliser les « couvertures » Twitter, Facebook et Google+ pour démontrer vos talents.</strong> Quand on arrive sur le profil Twitter de <a class="icon-external" target="_blank" rel="external" href="https://twitter.com/huard_olivier">Olivier Huard</a>, <i lang="en">pixel artist</i>, on voit immédiatement de quoi il est capable :</p>

  921. 

  922. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8255" class="post-img-figure"><a href="https://twitter.com/huard_olivier" class="block-link thumb custom-thumb" title="Le profil Twitter d'Olivier Huard"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/olivier-huard-640x470.jpg" alt="Le profil Twitter d'Olivier Huard"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/olivier-huard-640x470.jpg" alt="Le profil Twitter d'Olivier Huard"/></noscript></a></figure></div>

  923. 

  924. <p><strong>Dans tous les cas, je vous conseille de choisir un visuel qui vous appartient.</strong></p>

  925. 

  926. <p>Avec une belle photo de vous, une couleur et une photo de couverture bien choisies, vous aurez rénové votre charte graphique personnelle en moins de temps qu’il n’en faut pour le dire.</p>

  927. 

  928. <h3>Refaire son site : oui, mais de façon simple</h3>

  929. 

  930. <p><strong>Ensuite seulement, commencez éventuellement à plancher sur la refonte de votre site personnel.</strong> </p>

  931. 

  932. <p>Commencez par voir petit : par exemple, un site <i lang="en">single page</i>, ça suffit largement si c'est bien fait. Pas la peine d’imaginer une arborescence à 48 niveaux.</p>

  933. 

  934. <p>Le site d'<a class="icon-external" target="_blank" rel="external" href="http://www.anthonyguimard.fr/">Anthony Guimard</a>, développeur front-end, est un bon exemple. Toutes les informations qu'on a besoin de connaître sur lui tiennent en une seule page et, en plus, le design de cette page est agréable et permet de se plonger dans son univers personnel. Il a aussi mis assez haut dans la page une chouette photo de lui : la première impression est excellente.</p>

  935. 

  936. <div class="post-img-container clearfix aligncenter large"><figure id="attachment_8256" class="post-img-figure"><a href="http://anthonyguimard.fr" class="block-link thumb custom-thumb" title="Le site d'Anthony Guimard"><img class="lazy lazy-hidden colorbox-8231" src="http://marieguillaumet.com/wp-content/themes/paperbag/img/placeholder.gif" data-lazy-type="image" data-lazy-src="http://marieguillaumet.com/wp-content/uploads/2015/09/anthony-guimard-640x465.jpg" alt="Le site d'Anthony Guimard"/><noscript><img class="colorbox-8231" src="http://marieguillaumet.com/wp-content/uploads/2015/09/anthony-guimard-640x465.jpg" alt="Le site d'Anthony Guimard"/></noscript></a></figure></div>

  937. 

  938. <h3>Osez demander de l'aide</h3>

  939. 

  940. <p><strong>Si vous bloquez en design, en intégration ou en développement, osez demander de l’aide aux autres.</strong> Osez demander un coup de main à des amis en échange d’un troc équitable. </p>

  941. 

  942. <p>D'autant plus que la co-création, ça donne souvent des choses intéressantes ! 1 + 1 = 3.</p>

  943. 

  944. <h2>Amusez-vous !</h2>

  945. 

  946. <p><strong>Quoi que vous fassiez, amusez-vous !</strong> Le design de soi vous autorise à employer un ton un peu plus libre que dans le cadre d’un communication <i lang="en">corporate</i>.</p>

  947. 

  948. <p>L’humour, l’enthousiasme et le design émotionnel permettent d’établir une ambiance agréable et d’offrir aux autres une expérience mémorable.</p>

  949. 

  950. <h2>Les 8 règles d'or du design de soi</h2>

  951. 

  952. <ol>

  953. <li>Ayez confiance en vous.</li>

  954. <li>Valorisez vos points forts.</li>

  955. <li>Partagez des choses utiles.</li>

  956. <li>Préservez votre intimité.</li>

  957. <li>Restez humble.</li>

  958. <li>Soyez visuellement mémorable.</li>

  959. <li>Améliorez progressivement.</li>

  960. <li>Et surtout : amusez-vous !</li>

  961. </ol>

  962. 

  963. <p>J’espère que cette présentation vous a donné envie de vous y mettre. Je suis très impatiente de voir ce que vous allez créer.</p>

  964. 

  965. <p><strong>Merci de m'avoir lue et/ou écoutée !</strong></p>

  966. 

  967. <p class="aligncenter">***</p>

  968. 

  969. <p><strong class="stabilo">Qu'avez-vous pensé de cette conférence ?</strong> Dites-le moi en ajoutant un commentaire ci-dessous, ou bien mentionnez-moi <a class="icon-external" target="_blank" rel="external" href="https://twitter.com/kReEsTaL">sur Twitter</a> ! ^.^\m/</p>

  970.   </article>

  971. </section>

  972. 

  973. 

  974. <nav id="jumpto">

  975.   <p>

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

  977.     <a href="http://marieguillaumet.com/design-de-soi-paris-web-2015">Source originale</a> |

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

  979.   </p>

  980. </nav>

  981. 

  982. <footer>

  983.   <div>

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

  985.     <p>

  986.       Bonjour/Hi!

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

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

  989.     </p>

  990.     <p>

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

  992.     </p>

  993.     

  994.     <p>

  995.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1012.     </p>

  1013.     <p>

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

  1015.     </p>

  1016.     <p>

  1017.       Je ne traque pas ta navigation mais mon

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

  1019.       conserve des logs d’accès.

  1020.     </p>

  1021.   </div>

  1022. </footer>

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

  1024.   ;(_ => {

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

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

  1027.       e.preventDefault()

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

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

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

  1031.     })

  1032.   })()

  1033. </script>