CINXE.COM
Books of Design | Locomotive
<!doctype html> <html class="has-no-js is-first-loading is-loading" lang="fr" data-template="work-single" data-theme="default"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <base href="https://locomotive.ca/"> <title>Books of Design | Locomotive</title> <link rel="canonical" href="https://locomotive.ca/fr/projets/books-of-desing"> <meta property="og:url" content="https://locomotive.ca/fr/projets/books-of-desing"> <meta property="og:title" content="Books of Design | Locomotive"> <meta property="twitter:title" content="Books of Design | Locomotive"> <meta property="og:site_name" content="Locomotive"> <meta name="description" content="Nous sommes Locomotive®. Une agence indépendante avec un large éventail de capacités, de grandes idées, un coeur gros comme ça et une réputation mondiale."> <meta property="og:description" content="Nous sommes Locomotive®. Une agence indépendante avec un large éventail de capacités, de grandes idées, un coeur gros comme ça et une réputation mondiale."> <meta property="twitter:description" content="Nous sommes Locomotive®. Une agence indépendante avec un large éventail de capacités, de grandes idées, un coeur gros comme ça et une réputation mondiale."> <meta property="og:image" content="https://locomotive.ca/uploads/metadata/Open_Graph_Loco_%281%29.png"> <meta property="twitter:image" content="https://locomotive.ca/uploads/metadata/Open_Graph_Loco_%281%29.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@LocomotiveMTL"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="HandheldFriendly" content="true"> <!-- Appearance --> <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png"> <link rel="manifest" href="site.webmanifest"> <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> <!-- Styles --> <style media="all"> /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box}template,[hidden]{display:none}*,:before,:after{box-sizing:inherit}address{font-style:inherit}dfn,cite,em,i{font-style:italic}b,strong{font-weight:700}a{text-decoration:none}a svg{pointer-events:none}ul,ol{margin:0;padding:0;list-style:none}p,figure{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:initial;margin:0}a,area,button,input,label,select,textarea,[tabindex]{touch-action:manipulation}[hreflang]>abbr[title]{text-decoration:none}table{border-spacing:0;border-collapse:collapse}hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #CCCCCC}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio:not([controls]){display:none;height:0}img,svg{max-width:100%;height:auto}img[width],img[height],svg[width],svg[height]{max-width:none}img{font-style:italic}svg{fill:currentColor}input,select,textarea{display:block;margin:0;padding:0;width:100%;outline:0;border:0;border-radius:0;background:none transparent;color:inherit;font:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none}select{text-transform:none}select::-ms-expand{display:none}select::-ms-value{background:none;color:inherit}textarea{overflow:auto;resize:vertical}button,.c-button{display:inline-block;overflow:visible;margin:0;padding:0;outline:0;border:0;background:none transparent;color:inherit;vertical-align:middle;text-align:center;text-decoration:none;text-transform:none;font:inherit;line-height:normal;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button:focus,button:hover,.c-button:focus,.c-button:hover{text-decoration:none}:root{--spacing-micro-mobile: 8;--spacing-micro: 14;--spacing-tiny-mobile: 20;--spacing-tiny: 20;--spacing-small-mobile: 30;--spacing-small: 30;--spacing-medium-mobile: 40;--spacing-medium: 40;--spacing-large-mobile: 52;--spacing-large: 80;--spacing-big-mobile: 80;--spacing-big: 150;--spacing-huge-mobile: 100;--spacing-huge: 200;--spacing-enormous-mobile: 140;--spacing-enormous: 250;--color: #000;--color-bg: #fff;--border: solid var(--border-size);--grid-columns: 12;--grid-gutter: 20px;--grid-margin: 2.66667rem;--grid-color: var(--color);--header-height: 4rem;--head-padding-vh: 0.25;--about-head-content-offset-vh: 0.15;--menu-color: #fff;--menu-color-bg: #312DFB;--font-size: 15px;--font-size-medium: 1.73333rem;--font-size-huge: 7.63889vw;--font-size-h1: 4.66667rem;--font-size-h2: 1.73333rem;--font-size-h3: 1.46667rem;--font-size-h4: 1.33333rem;--font-size-h5: 1.2rem;--font-size-h6: 1.06667rem}@media (min-width: 1025px){:root{--border-size: 2px}}@media (max-width: 1024px){:root{--border-size: 1px}}@media (max-width: 1024px){:root{--grid-columns: 8;--grid-margin: 1.33333rem}}@media (max-width: 699px){:root{--grid-columns: 4;--grid-gutter: calc(20px/2)}}@media (max-width: 1024px){:root{--font-size-medium: 1.6rem;--font-size-h1: 3.33333rem}}@media (max-width: 699px){:root{--font-size-h1: 2.4rem;--font-size-medium: 18px;--about-head-content-offset-vh: 0.20;--font-size-huge: 40px}}@media (max-width: 699px){:root{--font-size: 15px}}@media (min-width: 700px) and (max-width: 1024px){:root{--font-size: 15px}}@media (min-width: 1025px) and (max-width: 1199px){:root{--font-size: 15px}}@media (min-width: 1200px) and (max-width: 1599px){:root{--font-size: 15px}}@media (min-width: 1600px) and (max-width: 1999px){:root{--font-size: 17px}}@media (min-width: 2000px) and (max-width: 2399px){:root{--font-size: 19px}}@media (min-width: 2400px){:root{--font-size: 21px}}html{min-height:100%;line-height:1.3;font-family:ff("primary");color:var(--color);background-color:var(--color-bg);line-height:1.3;font-size:var(--font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1);width:100%}html.is-loading{cursor:wait}html.has-scroll-smooth{overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html[data-theme="dark"]{--color-bg: #000;--color: #fff;--menu-color: #000;--menu-color-bg: #DA382E}html[data-theme="primary"]{--color-bg: #DA382E;--menu-color: #fff;--menu-color-bg: #000}html[data-theme="secondary"]{--color-bg: #312DFB;--color: #fff;--menu-color: #000;--menu-color-bg: #fff}body{width:100%}.is-first-loading body{overflow:hidden}::-moz-selection{background-color:var(--color);color:var(--color-bg);text-shadow:none}::selection{background-color:var(--color);color:var(--color-bg);text-shadow:none}a{color:currentColor}a:focus,a:hover{color:currentColor}.focus-visible:not(input):not(textarea){outline-color:var(--color);outline-style:auto;outline-width:10px;outline-offset:5px}.grecaptcha-badge{visibility:hidden}.c-preloader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;color:#fff;z-index:9999;transition:opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1)}.c-preloader svg{display:block;width:calc(min(250px, 70vw));height:10vh}html:not(.is-first-loading) .c-preloader{opacity:0;pointer-events:none}.c-preloader_outer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center}.c-preloader_logo{display:block;opacity:1;animation:preloaderAppear .9s cubic-bezier(0.215, 0.61, 0.355, 1) .3s;animation-fill-mode:backwards}@keyframes preloaderAppear{0%{opacity:0;transform:scale(0.9) translate3d(0, 0, 0)}100%{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes preloaderDisappear{0%{opacity:1;transform:scale(1) translate3d(0, 0, 0)}100%{opacity:0;transform:scale(1.1) translate3d(0, 0, 0)}} </style> <link id="main-css" rel="stylesheet" href="https://locomotive.ca/assets/styles/main.css?v=1723754399977" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true"> <script async defer src="https://www.google.com/recaptcha/api.js?render=explicit"></script> <!-- Google tag (gtag.js) --> <script type="text/plain" data-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-WYYJ9ZP43V"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-WYYJ9ZP43V'); gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied' }); </script> </head> <body data-module-load data-load="wrapper" data-module-hovers data-module-cookie-consent data-cookie-consent-config="{"language":{"autoDetect":"document","default":"fr","translations":{"fr":{"consentModal":{"title":"Nous utilisons des cookies !","description":"Ce site web utilise des témoins (cookies) essentiels pour garantir son bon fonctionnement, ainsi que des cookies de suivi pour comprendre comment vous interagissez avec lui. Ces derniers ne seront configurés qu'après avoir obtenu votre consentement. {{revisionMessage}} <button class=\"cc__link\" data-cookie-consent=\"show-preferences\">Préférences</button>","revisionMessage":"<br><br>Notre <a href=\"fr/politique-de-confidentialite?hide-cookie-consent\" target=\"_self\" rel=\"\">Politique de confidentialité</a> a changé depuis votre dernière visite.","footer":"<a href=\"fr/politique-de-confidentialite?hide-cookie-consent\" target=\"_self\" rel=\"\">politique de confidentialité</a>","acceptAllBtn":"Tout accepter","acceptNecessaryBtn":"Accepter le nécessaire"},"preferencesModal":{"title":"Préférences de témoins","acceptAllBtn":"Tout accepter","acceptNecessaryBtn":"Accepter le nécessaire","savePreferencesBtn":"Enregistrer mes préférences","closeIconLabel":"Accepter le nécessaire","sections":[{"description":"Nous utilisons certains témoins (cookies) pour personnaliser nos contenus et améliorer votre expérience numérique. D'autres sont indispensables au bon fonctionnement et à la sécurité de notre site Web et ne peuvent pas être désactivés.<br><br>Vous pouvez activer ou désactiver votre autorisation à recueillir vos données de navigation en tout temps. Si vous désactivez certains témoins, votre expérience de navigation peut être affectée.<br><br>Pour en savoir plus, consultez notre <a href=\"fr/politique-de-confidentialite?hide-cookie-consent\" target=\"_self\" rel=\"\">politique de confidentialité</a>."},{"title":"Témoins strictement nécessaires<span class=\"pm__badge\">Requis</span>","description":"Ces cookies sont stockés pour garantir le bon fonctionnement de notre site Web. Ils ne peuvent pas être désactivés.","linkedCategory":"necessary","cookieTable":{"headers":{"name":"Nom","service":"Service","duration":"Durée","purpose":"Usage"},"body":[{"name":"PHPSESSID","service":"Locomotive","duration":"Session","purpose":"Utilisé pour partager des données de fonctionnalités à travers les pages du site Web comme le suivi de la langue actuelle."},{"name":"locomotive.quickpreload","service":"Locomotive","duration":"Session","purpose":"Utilisé pour raccourcir la durée de l'écran de préchargement lors de la navigation sur les pages suivantes."},{"name":"cc_cookie","service":"Locomotive","duration":"6 mois","purpose":"Utilisé pour stocker vos préférences de consentement de témoins."},{"name":"_grecaptcha","service":"Google reCAPTCHA","duration":"6 mois","purpose":"Utilisé pour stocker l'évaluation si la visite, l'interaction, ou la soumission du formulaire, est légitime ou malveillante."},{"name":"__cf_bm","service":"Cloudflare","duration":"30 minutes","purpose":"Utilisé pour stocker l'évaluation si la visite est légitime ou malveillante."}]}},{"title":"Témoins de performance","description":"Ces cookies sont utilisés pour analyser la navigation sur le site afin d'améliorer son bon fonctionnement.","linkedCategory":"analytics","cookieTable":{"headers":{"name":"Nom","service":"Service","duration":"Durée","purpose":"Usage"},"body":[{"name":"_ga","service":"Google Analytics","duration":"2 ans","purpose":"Utilisé pour distinguer les utilisateurs uniques et compter les pages vues."},{"name":"_gat","service":"Google Analytics","duration":"1 minute","purpose":"Utilisé pour limiter la fréquence de collecte des données."},{"name":"_gid","service":"Google Analytics","duration":"1 jour","purpose":"Utilisé pour distinguer les utilisateurs uniques et compter les pages vues."}]}}]}}}},"guiOptions":{"consentModal":{"layout":"box inline","position":"bottom right","equalWeightButtons":false},"preferencesModal":{"equalWeightButtons":false}},"revision":1,"categories":{"necessary":{"enabled":true,"readOnly":true},"analytics":{"autoClear":{"cookies":[{"name":"_ga"},{"name":"_gat"},{"name":"_gid"},{"name":"/^_gat?_/"}]}}}}"> <script> window.preloaderEnterPromise = new Promise(resolve => { setTimeout(resolve, 1200); }) window.preloaderPromise = new Promise(resolve => { window.preloaderPromiseResolve = resolve; }) </script> <div class="c-preloader" aria-hidden="true" id="preloader"> <div class="c-preloader_outer"> <div class="c-preloader_inner"> <div class="c-preloader_head" id="preloaderHead" style="display: none;"> </div> <div class="c-preloader_content" id="preloaderContent" style="display: none;"> <div> Digital<br> Digital-First<br> Digital-First Design<br> Digital-First Design<br> Digital-First Agency<br> Digital-First Agency<br> </div> <div> Basée<br> Basée à<br> Basée à Montréal<br> Basée à Montréal<br> Basée à Montréal, Canada<br> Basée à Montréal, Canada<br> Basée à Montréal, Canada<br> </div> </div> <div class="c-preloader_logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 246.5033 33.28001" id="preloaderLogo"> <g> <path d="M0,.64v32H32V.64Zm30,30H2v-28H30Z" transform="translate(0 0.00001)"/> <polygon points="20.12 19.4 16.12 19.4 16.12 12.32 14.24 12.32 14.24 20.96 20.12 20.96 20.12 19.4"/> </g> <path d="M52.41557,8.24h-6.4l2.28-2.28c2.32-2.32,4-3.2,6.12-3.2s3.8.88,6.12,3.2l2.28,2.28h-6.4v1.6h7.6v7.6h1.6v-6.4l6,6,1.2-1.2-6-6h6.4V8.24h-7.6V.64h-1.6v6.4l-2.28-2.28c-2.6-2.6-4.64-3.6-7.32-3.6s-4.72,1-7.32,3.6l-2.28,2.28V.64h-1.6v7.6h-7.6v1.6h6.4l-6,6,1.2,1.2,6-6v6.4h1.6V9.84h7.6Z" transform="translate(0 0.00001)"/> <path d="M86.13717.64h-10.52v.84c3.84,0,4.16.52,4.16,2.96v24.4c0,2.44-.32,2.96-4.16,2.96v.84h18.96l.12-.52,1.92-9.48-.84-.16c-1.64,7.96-2.36,8.8-4.96,8.8h-6.84c-1.64,0-2-.4-2-2.36V4.44c0-2.44.32-2.96,4.16-2.96Z" transform="translate(0 0.00001)"/> <path d="M105.56207,10.96c-4.72,0-7.4002,5.08-7.4002,11.24,0,6.28,3.04022,11.08,7.4002,11.08,4.68,0,7.36-5.08,7.36-11.24C112.92206,15.76,109.88208,10.96,105.56207,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C110.76208,27.4,109.00208,31.96,105.56207,31.96Z" transform="translate(0 0.00001)"/> <path d="M121.77708,33.28c3.6,0,5.16-3.32,6.08-10.56l-.84-.16c-1.04,6.68-2.28,8.76-4.6,8.76-3.04,0-4.8-4.4-4.8-9.64,0-4.64,1.32-9.4,4.8-9.4a2.04221,2.04221,0,0,1,2.24,2.24c0,.84-.28,1.64-.28,2.2a1.25663,1.25663,0,0,0,1.28,1.36c1,0,1.56-.8,1.56-2.24a4.66084,4.66084,0,0,0-4.43418-4.877q-.18279-.00869-.36582-.003c-4.52,0-6.96,5.04-6.96,11.44C115.45707,28.68,117.77707,33.28,121.77708,33.28Z" transform="translate(0 0.00001)"/> <path d="M136.9881,10.96c-4.72,0-7.4,5.08-7.4,11.24,0,6.28,3.04,11.08,7.4,11.08,4.68,0,7.36-5.08,7.36-11.24C144.34808,15.76,141.30811,10.96,136.9881,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C142.18811,27.4,140.4281,31.96,136.9881,31.96Z" transform="translate(0 0.00001)"/> <path d="M146.17506,32.64h7.08V31.8c-2.2,0-2.48-.48-2.48-2.96V16.04c1.44-1.88,2.88-3.2,4.64-3.2,1.64,0,2.56,1.12,2.56,3.52V28.84c0,2.48-.28,2.96-2.48,2.96v.84h6.96V31.8c-2.2,0-2.48-.48-2.48-2.96v-13c1.4-1.76,2.84-3,4.52-3,1.6,0,2.52,1.12,2.52,3.52V28.84c0,2.48-.28,2.96-2.48,2.96v.84h7.04V31.8c-2.28,0-2.56-.48-2.56-2.96V16.28c0-3.16-1.08-5.32-3.76-5.32-2.32,0-3.88,1.56-5.32,3.76h-.08c-.32-2.28-1.44-3.76-3.68-3.76-2.28,0-3.88,1.56-5.28,3.76h-.12V12.08l-.52-.48h-4.36v.84c2.52,0,2.84.48,2.84,3v13.4c0,2.48-.28,2.96-2.56,2.96Z" transform="translate(0 0.00001)"/> <path d="M180.3681,10.96c-4.72,0-7.4,5.08-7.4,11.24,0,6.28,3.04,11.08,7.4,11.08,4.68,0,7.36-5.08,7.36-11.24C187.72809,15.76,184.68811,10.96,180.3681,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C185.56805,27.4,183.80811,31.96,180.3681,31.96Z" transform="translate(0 0.00001)"/> <path d="M199.87808,22.72l-.84-.16c-1.4,6.68-2.12,8.92-3.44,8.92-1.8,0-1.96-2.8-1.96-6.72V12.92h4.88V11.6h-4.88V6h-1c-.08,3.4-1.08,5.8-3.92,5.8v1.12h2.92V26.2c0,5.28,1.28,7.08,3.48,7.08,2.76,0,3.48-3.32,4.76-10.56Z" transform="translate(0 0.00001)"/> <g> <path d="M205.82108,28.84V12.08l-.48-.48h-4.24v.84c2.44,0,2.72.48,2.72,3v13.4c0,2.48-.28,2.96-2.6,2.96v.84h7.2V31.8C206.10107,31.8,205.82108,31.32,205.82108,28.84Z" transform="translate(0 0.00001)"/> <rect x="202.34108" y="3.36001" width="3.96001" height="3.56"/> </g> <path d="M220.75908,15.24l-3.96,13.64h-.2l-3.88-13.64c-.68-2.36-.72-2.8,2-2.8V11.6h-7.28v.84c1.8,0,2.36.44,3.08,2.8l5.2,17.76h1.12l5.28-17.76c.72-2.36,1.32-2.8,3.24-2.8V11.6h-6.56v.84c2.72,0,2.68.44,1.96,2.8Z" transform="translate(0 0.00001)"/> <path d="M236.76508,22.56c-1.04,6.68-2.68,8.8-4.76,8.8-3.24,0-5.04-4.36-5.04-9.6,0-.44,0-.84.04-1.28h10.36c0-5.56-2.16-9.52-5.92-9.52-4.16,0-6.6,5.12-6.6,11.48,0,6.28,2.36,10.84,6.56,10.84,3.44,0,5.28-3.32,6.2-10.56Zm-5.32-10.28c2.72,0,3.76,3.68,3.76,6.88h-8.08C227.52509,15.4,228.92511,12.28,231.44507,12.28Z" transform="translate(0 0.00001)"/> <g> <path d="M241.66309,0a4.86034,4.86034,0,1,0,4.84,4.92l.00012-.01178A4.87429,4.87429,0,0,0,241.66309,0Zm0,9.04q-.03132.00018-.0625,0a4.08887,4.08887,0,0,1-4.0575-4.12q-.00064-.04239-.00043-.08471A4.09794,4.09794,0,0,1,241.66309.76q.04422.00018.08856.00134A4.05635,4.05635,0,0,1,245.70306,4.92l.00068.06714A4.04677,4.04677,0,0,1,241.66309,9.04Z" transform="translate(0 0.00001)"/> <path d="M242.23743,5.24692A1.49633,1.49633,0,0,0,243.743,3.76q-.00045-.06555-.00653-.13092a1.53782,1.53782,0,0,0-1.67346-1.389h-2.16V7.48h.72V5.24h.64l1.64,2.24h.88l-1.68-2.24C242.14771,5.24429,242.19257,5.24661,242.23743,5.24692ZM240.62305,4.6V2.96h1.36c.64,0,1,.28,1,.8,0,.52-.4.84-1,.84Z" transform="translate(0 0.00001)"/> </g> </svg> </div> </div> </div> </div> <div class="c-header_bg"></div> <div data-load="container"> <header data-module-header> <div class="c-header" data-header="header"> <a href="fr" class="c-header_logo" data-header="logo"> <span class="c-header_logo_inner" data-hover-shuffle>Locomotive</span>® </a> <span aria-hidden="true" class="c-header_icon"></span> <nav class="c-header_menu || c-header-menu"> <ul class="c-header-menu_list"> <li class="c-header-menu_item"><a href="fr/projets" class="c-header-menu_link" data-hover-shuffle>Projets</a></li> <li class="c-header-menu_item"><a href="fr/agence" class="c-header-menu_link" data-hover-shuffle>Agence</a></li> <li class="c-header-menu_item"><a href="fr/carrieres" class="c-header-menu_link" data-hover-shuffle>Carrières</a></li> <li class="c-header-menu_item"> <a target="_blank" rel="noopener noreferrer" href="https://store.locomotive.ca/fr" class="c-header-menu_link" data-hover-shuffle>Store</a> </li> </ul> </nav> <a href="fr/contact" class="c-header_cta " data-hover-shuffle>Contact</a> <button class="c-header_menu-toggler" data-header="menu-toggler" data-header-open-label="Menu" data-header-close-label="Fermer" aria-expanded="false" aria-controls="mobile-menu" aria-label="Navigation mobile"> Menu </button> </div> <nav class="c-menu" data-header="menu" id="mobile-menu" aria-label="Navigation mobile"> <div class="c-menu_inner"> <ul class="c-menu_nav"> <li class="c-menu_nav_item"> <a href="fr/projets" class="c-menu_nav_link ">Projets</a> </li> <li class="c-menu_nav_item"> <a href="fr/agence" class="c-menu_nav_link ">Agence</a> </li> <li class="c-menu_nav_item"> <a href="fr/carrieres" class="c-menu_nav_link ">Carrières</a> </li> <li class="c-menu_nav_item"> <a href="fr/contact" class="c-menu_nav_link ">Contact</a> </li> <li class="c-menu_nav_item"> <a class="c-menu_nav_link" target="_blank" rel="noopener noreferrer" href="https://store.locomotive.ca/fr">Store</a> </li> </ul> <div class="c-menu_footer"> <a href="https://locomotive.ca/en/work/books-of-design" class="c-menu_langswitcher" data-load="false">English</a> <span class="c-menu_location"> <span class="u-screen-reader-text">Montréal, Quebec</span> <span aria-hidden="true">🛑🚹🚺</span> </span> </div> </div> </nav> </header> <div class="o-scroll" data-module-scroll="main" data-scroll-smooth="true" > <main> <div class="c-work-single-hero" data-module-work-single-hero> <div class="c-work-single-hero_container || o-container"> <div class="c-work-single-hero_inner"> <div class="c-work-single-hero_grid -top || o-grid -col-4 -gutters"> <div class="c-work-single-hero_content-type"> <span class="o-text -medium">Étude de cas</span> </div> <div class="c-work-single-hero_context-label"> <div class="u-screen-reader-text">Catégories</div> <ul class="o-text -medium"> <li>Branding</li> <li>Digital</li> <li>Expérience</li> <li>Contenu</li> </ul> </div> </div> <div class="c-work-single-hero_grid -bottom || o-grid -col-4 -gutters" data-work-single-hero="grid-bottom"> <div class="c-work-single-hero_title || o-padding -huge-top" data-work-single-hero="title"> <h1 class="c-heading -huge || c-work-single-hero_heading">Books of Design</h1> </div> <div class="c-work-single-hero_year"> <span class="o-text -medium">©2023</span> </div> <div class="c-work-single-hero_category"> <span class="o-text -medium"> Arts et culture <br> Montréal, Canada </span> </div> </div> </div> </div> <div class="o-container" > <div class="c-work-single-hero_visual"> <div class="c-work-single-hero_grid -visual || o-grid -col-4 -gutters"> <div class="c-work-single-hero_featured-image || o-padding -tiny-top -tiny-bottom"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/Books_of_Design/mucha-thumb-header-10w.jpg');"> <img class="c-image_img " alt="" width="900" height="566" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20900%20566'%3E%3C/svg%3E" data-src="uploads/projects/Books_of_Design/mucha-thumb-header.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate data-scroll-ignore-fold > </span> </div> <p class="c-work-single-hero_caption || o-text -medium"> <span>The Books of Design</span> <span>est un ode aux designers.</span> </p> </div> </div> </div> </div> </div> <div class="o-container"> <div class="c-work-single-pitch_wrapper"> <div class="c-work-single-pitch"> <div class="c-work-single-pitch_head"> <span>Site(s) web</span> <span><a href="https://booksofdesign.designstripe.com/artists/alphonse-mucha" target="_blank" rel="noopener noreferrer">booksofdesign.designstripe.com</a></span> </div> <div class="c-work-single-pitch_content"> <a class="c-work-single-pitch_link" href="https://booksofdesign.designstripe.com/artists/alphonse-mucha" target="_blank" rel="noopener noreferrer">booksofdesign.designstripe.com</a><span aria-hidden="true">🦉</span><p class="">célèbre les créateurs qui ont façonné l'évolution du design.</p> </div> </div> </div> </div> <div class="c-attachment || u-margin -visual"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/Books_of_Design/mucha-home-hero-10w.jpg');"> <img class="c-image_img " alt="Alphonse Mucha" width="1920" height="1336" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%201336'%3E%3C/svg%3E" data-src="uploads/projects/Books_of_Design/mucha-home-hero-2000w.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" > </span> </div> </div> <div class="c-section-overline -no-border || u-margin -huge-bottom -small-top"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">À Propos</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <div class="c-wysiwyg || o-text -medium"> The Books of Design est le résultat d'une collaboration harmonieuse entre designstripe et Locomotive, visant à rendre hommage aux pionniers du design. Cette expérience de musée virtuel associe avec élégance des images captivantes et une typographie raffinée pour célébrer les artistes, les mouvements et les médiums qui ont défini le monde du design. Grâce à une navigation intuitive et un design minimaliste, elle propose un voyage fluide dans l'histoire du design, immortalisant les récits qui continuent d'influencer le paysage créatif. </div> </div> </div> </div> </div></div> <div class="c-section-overline || u-margin -huge-top -huge-bottom"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Prix (3)</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || u-gc-2/5"> <ul class="c-list -alternative"> <li class="c-list_row"> <div class="c-list_item"> Mention honorable </div> <div class="c-list_item"> Awwwards </div> </li> <li class="c-list_row"> <div class="c-list_item"> Site du jour </div> <div class="c-list_item"> Awwwards </div> </li> <li class="c-list_row"> <div class="c-list_item"> Site du jour </div> <div class="c-list_item"> CSSDA </div> </li> </ul> </div> </div> </div> </div></div> <div class="c-attachment || u-margin -big-top -big-bottom -visuals-dual"> <div class="o-container"> <div class="o-grid -col-12 -gutters"> <div class="o-grid_item u-gc-1/6@from-small"> <div class="c-video "> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/Books_of_Design/mucha-thumb-smalll-10w.jpg');"> <img class="c-image_img " alt="" width="2000" height="1331" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201331'%3E%3C/svg%3E" data-src="uploads/projects/Books_of_Design/mucha-thumb-smalll-2000w.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> </div> </div> <div class="o-grid_item u-gc-7/13@from-small"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/Books_of_Design/mucha-mobile-layout-10w.jpg');"> <img class="c-image_img " alt="" width="2000" height="2840" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%202840'%3E%3C/svg%3E" data-src="uploads/projects/Books_of_Design/mucha-mobile-layout-2000w.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> </div> </div> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="o-container"> <div class="o-grid -col-12@from-medium -gutters"> <div class="o-grid_item u-gc-2/12@from-medium"> <div class="c-video "> <div class="o-ratio u-16:9"></div> <video class="c-video_media" playsinline muted loop data-module-video-inview poster="" data-scroll data-scroll-repeat data-scroll-call="toggle, VideoInview" > <source src="https://player.vimeo.com/progressive_redirect/playback/859040742/rendition/1080p/file.mp4?loc=external&signature=752ba9e4432adb54b2a3dd282074f743886761911f1197ef8352797a7afa25e2" type="video/mp4"> </video> </div> </div> </div> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/Books_of_Design/mucha-web-layout-10w.jpg');"> <img class="c-image_img " alt="Layout" width="2000" height="1966" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201966'%3E%3C/svg%3E" data-src="uploads/projects/Books_of_Design/mucha-web-layout-2000w.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" > </span> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="o-container"> <div class="o-grid -col-12@from-medium -gutters"> <div class="o-grid_item u-gc-2/12@from-medium"> <div class="c-video "> <div class="o-ratio u-16:9"></div> <video class="c-video_media" playsinline muted loop data-module-video-inview poster="" data-scroll data-scroll-repeat data-scroll-call="toggle, VideoInview" > <source src="https://player.vimeo.com/progressive_redirect/playback/859040700/rendition/1080p/file.mp4?loc=external&signature=4bfdcb1c9a09831337cc2b36259d9f34e1d655c28572cdfa884c84c6e110a62c" type="video/mp4"> </video> </div> </div> </div> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/Books_of_Design/mucha-footer-stories-10w.jpg');"> <img class="c-image_img " alt="Footer" width="2000" height="1323" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201323'%3E%3C/svg%3E" data-src="uploads/projects/Books_of_Design/mucha-footer-stories-2000w.jpg" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" > </span> </div> </div> <div class="o-container"> <div class="c-website-cta"> <span class="c-website-cta_label">©2023</span> <p class="c-website-cta_content"> Visiter<span aria-hidden="true">🦉</span><a href="https://booksofdesign.designstripe.com/artists/alphonse-mucha" target="_blank" rel="noopener noreferrer">booksofdesign.designstripe.com</a> </p> </div> </div> <div class="c-section-overline || u-padding -huge-top"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Credits</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <ul class="c-list -no-border-last-child -align-start"> <li class="c-list_row"> <div class="c-list_item"> Directeur de création </div> <div class="c-list_item"> Dust Leblanc </div> </li> <li class="c-list_row"> <div class="c-list_item"> Directrice artistique </div> <div class="c-list_item"> Isabel Moranta </div> </li> <li class="c-list_row"> <div class="c-list_item"> UX Designer </div> <div class="c-list_item"> Sacha Haouzi </div> </li> <li class="c-list_row"> <div class="c-list_item"> Motion Designer </div> <div class="c-list_item"> Catherine Camiré </div> </li> <li class="c-list_row"> <div class="c-list_item"> Développeur Front-End </div> <div class="c-list_item"> Lucas Bigot, Arnaud Pinot </div> </li> <li class="c-list_row"> <div class="c-list_item"> Développeur Back-End </div> <div class="c-list_item"> Pascal Rioux </div> </li> <li class="c-list_row"> <div class="c-list_item"> Gestionnaire de projet </div> <div class="c-list_item"> Maxime Moulin </div> </li> <li class="c-list_row"> <div class="c-list_item"> Directeur de compte </div> <div class="c-list_item"> Simon Regniault </div> </li> </ul> </div> </div> </div> </div></div> <article class="c-work-next || u-margin -big-top" data-module-work-next data-scroll data-scroll-module-progress data-scroll-css-progress data-scroll-position="start,end" data-scroll-offset="0,110%" > <div class="c-section-overline c-work-next_overline || "> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Prochain projet</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <div class="c-work-next_cta"> <span class="o-text -medium">Défiler vers le bas↓</span> <span class="c-work-next_progress"></span> </div> </div> </div> </div> </div></div> <div class="c-work-next_container || o-container"> <div class="c-work-next_inner"> <div class="c-work-next_grid -bottom || o-grid -col-4 -gutters"> <div class="c-work-next_title || o-padding -huge-top"> <h1 class="c-heading -huge || c-work-next_heading">Editorial New</h1> </div> <div class="c-work-next_year"> <span class="o-text -medium">©2019</span> </div> <div class="c-work-next_category"> <span class="o-text -medium"> Typographie <br> Montréal, Canada </span> </div> </div> <div class="c-work-next_visual"> <div class="c-work-next_grid -visual || o-grid -col-4 -gutters"> <div class="c-work-next_featured-image || o-padding -tiny-top -tiny-bottom" data-work-next="image"> <div class="c-image " > <span class="c-image_inner" style="background-image: url('uploads/projects/EDITORIAL/ligature_image_1-10w.png');"> <img class="c-image_img " alt="" width="1806" height="1116" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201806%201116'%3E%3C/svg%3E" data-src="uploads/projects/EDITORIAL/ligature_image_1.png" > </span> </div> </div> </div> </div> </div> </div> <a data-work-next="link" class="c-work-next_link" data-scroll href="/fr/projets/editorial-new" data-load-transition="work-next">Voir plus</a> </article> </main> </div> <div class="c-video-modal" data-module-video-modal> <button type="button" class="c-video-modal_close || o-text -medium" data-video-modal="close"> Fermer </button> <div class="c-video-modal_content"> <div class="c-video-modal_inner" data-video-modal="inner"></div> </div> </div> </div> <script src="https://locomotive.ca/assets/scripts/vendors.js?v=1723754399977" defer></script> <script src="https://locomotive.ca/assets/scripts/app.js?v=1723754399977" defer></script> </body> </html>