1<!DOCTYPE html> 2<html data-wf-domain="cubedesigners-2024.webflow.io" data-wf-page="6a7c658a0962351950e13468" data-wf-site="65e19f3df4c2cff25ca91fa5" lang="en"> <head> 3<link rel="preload" as="image" href="65e19f3df4c2cff25ca91fa5/logo-insigne-cubedesigners-blanc.svg"> 4 <meta charset="utf-8"> <link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"> <title>Blog - Cubedesigners</title> <meta content="" name="description"> <meta content="website" property="og:type"> <meta content="https://www.cubedesigners.com/blog.html" property="og:url"> <meta content="Blog" property="og:title"> <meta content="" property="og:description"> <meta content="en" property="og:locale"> <meta content="fr" property="og:locale:alternate"> <meta content="summary" name="twitter:card"> <meta content="Blog" property="twitter:title"> <meta content="" property="twitter:description"> <meta content="width=device-width, initial-scale=1" name="viewport"> <link href="65e19f3df4c2cff25ca91fa5/css/cubedesigners-2024.webflow.shared.c13a7bea5.css" rel="stylesheet" type="text/css" crossorigin="anonymous">
4<script type="text/javascript"> 5 ! function(o, c) { 6 var n = c.documentElement, 7 t = " w-mod-"; 8 n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch") 9 }(window, document); 10 </script>
10 <link href="65e19f3df4c2cff25ca91fa5/66758b51b5d6fdd9553f2feb_Plan de travail 1.png" rel="shortcut icon" type="image/x-icon"> <link href="65e19f3df4c2cff25ca91fa5/66758ae9a4bcdefe607e0c45_favico-256.png" rel="apple-touch-icon"> <style> 11 /* Fluid Settings */ 12 html { 13 font-size: calc(0.625rem + 0.41666666666666663vw); 14 } 15 16 @media screen and (max-width:1920px) { 17 html { 18 font-size: calc(0.625rem + 0.41666666666666674vw); 19 } 20 } 21 22 @media screen and (max-width:1440px) { 23 html { 24 font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); 25 } 26 } 27 28 @media screen and (max-width:479px) { 29 html { 30 font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); 31 } 32 } 33 </style> <style> 34 /*lenis -- IMPORTANT*/ 35 html { 36 scroll-behavior: initial; 37 } 38 39 html, 40 body { 41 width: 100%; 42 height: auto !important; 43 min-height: 100%; 44 } 45 </style>
45<script async src="npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
45 <style> 46 [text-split] { 47 opacity: 0; 48 } 49 50 [data-text-split-delay] { 51 visibility: hidden; 52 } 53 54 html.w-editor [text-split] { 55 opacity: 1; 56 } 57 </style>
57<script src="npm/@finsweet/attributes-smartlightbox@1/smartlightbox.js"></script>
57
57<script async src="npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>
57 <style> 58 html:not(.w-editor) [data-gsap-hidden] { 59 visibility: hidden; 60 } 61 62 .heading-01.blanc.hero-projet { 63 visibility: hidden; 64 } 65 66 .heading-05.blanc { 67 visibility: hidden; 68 } 69 70 #h1-archive { 71 visibility: hidden; 72 } 73 74 #h2-archive { 75 visibility: hidden; 76 } 77 78 .word { 79 display: inline-block; 80 white-space: nowrap; 81 margin-right: 0em; 82 /* Ajustez cette valeur selon vos besoins */ 83 } 84 85 .char { 86 display: inline-block; 87 white-space: nowrap; 88 } 89 90 .heading-05.blanc.left { 91 opacity: 100% !important; 92 transform: none !important; 93 } 94 95 [lang="en"] #switch-en, 96 [lang="fr"] #switch-fr { 97 border-color: var(--gold); 98 background-color: var(--gold); 99 border-radius: 50%; 100 } 101 </style> <style> 102 body .transition { 103 display: block 104 } 105 106 .w-editor .transition { 107 display: none; 108 } 109 </style> <link href="/css/custom.css" rel="stylesheet"> <link rel="canonical" href="https://www.cubedesigners.com/blog.html"> <link rel="alternate" hreflang="fr" href="https://www.cubedesigners.fr/blog.html"> <link rel="alternate" hreflang="x-default" href="https://www.cubedesigners.fr/blog.html"> <link rel="alternate" hreflang="en" href="https://www.cubedesigners.com/blog.html">
109<script type="application/ld+json">{ 110 "@context": "https://schema.org", 111 "@type": "Organization", 112 "@id": "https://www.cubedesigners.fr/#organization", 113 "name": "Cubedesigners", 114 "legalName": "Cubedesigners", 115 "url": "https://www.cubedesigners.fr/", 116 "logo": "https://www.cubedesigners.fr/65e19f3df4c2cff25ca91fa5/logo-insigne-cubedesigners-noir.svg", 117 "description": "Agence de design et de communication fondée en 2002, implantée à Paris et Montpellier : communication visuelle, identité de marque, muséographie, design produit, création de sites web et applications sur mesure.", 118 "foundingDate": "2002", 119 "founder": [ 120 {"@type": "Person", "name": "Mathieu Pesme"}, 121 {"@type": "Person", "name": "Jean-François Castel"} 122 ], 123 "email": "[email protected]", 124 "telephone": "+33144241853", 125 "sameAs": [ 126 "https://fr.linkedin.com/company/cubedesigners", 127 "https://www.cubedesigners.com/", 128 "https://www.fluidbook.com/" 129 ], 130 "knowsAbout": [ 131 "Identité visuelle", 132 "Design graphique", 133 "Muséographie et scénographie d'exposition", 134 "Design produit industriel", 135 "Création de sites web", 136 "Développement web sur mesure (Laravel, WordPress)", 137 "Applications mobiles", 138 "Motion design", 139 "Packaging", 140 "Stands et signalétique", 141 "Catalogues interactifs Fluidbook" 142 ], 143 "areaServed": "FR", 144 "location": [ 145 { 146 "@type": "LocalBusiness", 147 "@id": "https://www.cubedesigners.fr/#paris", 148 "name": "Cubedesigners Paris", 149 "image": "https://www.cubedesigners.fr/65e19f3df4c2cff25ca91fcb/bureaux-cubedesigners-01.jpg", 150 "telephone": "+33144241853", 151 "email": "[email protected]", 152 "url": "https://www.cubedesigners.fr/contact.html", 153 "address": { 154 "@type": "PostalAddress", 155 "streetAddress": "59 rue du Faubourg Saint-Antoine", 156 "postalCode": "75011", 157 "addressLocality": "Paris", 158 "addressCountry": "FR" 159 }, 160 "parentOrganization": {"@id": "https://www.cubedesigners.fr/#organization"} 161 }, 162 { 163 "@type": "LocalBusiness", 164 "@id": "https://www.cubedesigners.fr/#montpellier", 165 "name": "Cubedesigners Montpellier", 166 "telephone": "+33467027147", 167 "email": "[email protected]", 168 "url": "https://www.cubedesigners.fr/contact.html", 169 "address": { 170 "@type": "PostalAddress", 171 "streetAddress": "5 Ter boulevard des Arceaux", 172 "postalCode": "34000", 173 "addressLocality": "Montpellier", 174 "addressCountry": "FR" 175 }, 176 "parentOrganization": {"@id": "https://www.cubedesigners.fr/#organization"} 177 } 178 ] 179}</script>
179<link rel="preload" as="font" type="font/woff2" href="/65e19f3df4c2cff25ca91fa5/6a3e23131983dde66540c997_silka-regular-webfont.woff2" crossorigin> <link rel="preload" as="font" type="font/woff2" href="/65e19f3df4c2cff25ca91fa5/6a3e23e566b147159ab71e89_65e19f3df4c2cff25ca9207b_silka-medium-webfont.woff2" crossorigin> </head> <body> <div bind="14596df1-487a-97c7-20ca-5ed1569ce971" class="menu-wrapper"> <div class="pixel-menu"></div> <div class="bg-menu-container"> <div class="bg-menu"></div> </div> <div class="menu-section"> <div class="menu-container"> <a href="index.html" class="logo-container w-inline-block"> <div class="logo-wrapper"> <img decoding="async" fetchpriority="high" src="65e19f3df4c2cff25ca91fa5/logo-insigne-cubedesigners-blanc.svg" loading="lazy" alt="Cubedesigners" class="logo-cube-insigne"> <div class="div-block-155"> <h1 class="logo-cube-texte">cubedesigners</h1> </div> </div> </a> <div class="nav-container-mask"> <div class="nav-container-copy"> <a href="realisations.html" class="nav-link w-inline-block"> <div class="heading-05 menu">Our work</div> <div class="heading-05 menu">Our work</div> <div class="w-embed"> <style> 180 .nav-link, 181 .nav-link-expertises { 182 transform: none !important; 183 transform-style: initial !important; 184 } 185 </style> </div> </a><a href="expertises.html" class="nav-link-expertises w-inline-block"> <div class="heading-05 menu">Expertise</div> <div class="heading-05 menu">Expertise</div> </a><a href="agence.html" class="nav-link w-inline-block"> <div class="heading-05 menu">Agency</div> <div class="heading-05 menu">Agency</div> </a><a href="contact.html" class="nav-link w-inline-block"> <div class="heading-05 menu">Contact</div> <div class="heading-05 menu">Contact</div> </a> </div> </div> <div data-w-id="14596df1-487a-97c7-20ca-5ed1569ce986" class="burger-container"> <div class="line-burger top"></div> <div class="line-burger bottom"></div> </div> </div> </div> <div class="rideau-blanc-container"> <div class="overlay-rideau"></div> <div class="rideau-blanc"></div> </div> <div class="rideau-noir-container"> <div class="overlay-rideau"></div> <div class="rideau-noir"></div> </div> <div class="menu-open-wrapper"> <div class="menu-open-container"> <div class="overlay-menu"></div> <div class="menu-open"> <div id="w-node-_9659ddc7-d5ed-a883-5a1b-4b5c37ed41bb-569ce971" class="div-block-47"> <div id="w-node-d92a4ee2-4989-8a8c-6010-66c624281de2-569ce971" class="div-block-20"> <div id="w-node-caf75c59-f8e8-2a6a-202a-46a322b21fb3-569ce971" class="div-block-21 div-block-22 div-block-23 div-block-24 div-block-25"> <h1 class="heading-05 bold">Paris</h1> <div class="heading-06">T.+33(0)1 44 24 18 53</div> <div class="heading-06">59 rue du Faubourg Saint Antoine<br>75011 Paris<br>France</div> </div> <div id="w-node-_99cbab1f-2e67-1fdc-ab02-e8cc9edd1de0-569ce971" class="div-block-21 div-block-22 div-block-23 div-block-24 div-block-25"> <h1 class="heading-05 bold">Montpellier</h1> <div class="heading-06">T.+33(0)4 67 02 71 47</div> <div class="heading-06">5 Ter Boulevard des Arceaux<br>34000 Montpellier<br>France</div> </div> <a href="mailto:[email protected]" class="link-puce menu-burger w-inline-block"> <div class="puce-button"> <div class="div-block-67"></div> <div class="div-block-68"></div> </div> <div class="div-block-116"> <div>[email protected]</div> <div class="line-button"></div> </div> </a> </div> </div> <div class="div-block-47-copy"> <div id="w-node-_133664ed-4bd6-f911-4dbe-5573ae3980d0-569ce971" class="div-block-26"> <a href="realisations.html" class="link-menu w-inline-block"> <h3 class="heading-03">Our work</h3> <h3 class="heading-03">Our work</h3> <div class="line-button burger-menu"></div> </a> <div class="div-block-13"></div> <a data-w-id="133664ed-4bd6-f911-4dbe-5573ae3980d8" href="expertises.html" class="link-menu w-inline-block"> <h3 class="heading-03">Expertise</h3> <h3 class="heading-03">Expertise</h3> <div class="line-button burger-menu"></div> </a> <div class="div-block-13"></div> <a href="agence.html" class="link-menu w-inline-block"> <h3 class="heading-03">Agency</h3> <h3 class="heading-03">Agency</h3> <div class="line-button burger-menu"></div> </a> <div class="div-block-13"></div> <a href="contact.html" class="link-menu w-inline-block"> <h3 class="heading-03">Contact</h3> <h3 class="heading-03">Contact</h3> <div class="line-button burger-menu"></div> </a> </div> </div> </div> </div> </div> <div class="transition"> <div class="transition-trigger"></div> </div> </div> <div class="intro-wrapper"> <h1 data-gsap-hidden="" data-text-split="" id="w-node-_8b0eed66-b04a-458d-0801-059a66d61b29-50e13468" class="heading-02 intro">Our articles</h1> </div> <div class="div-block-161"> <div class="w-dyn-list"> <div role="list" class="collection-list-8 w-dyn-items"> <div role="listitem" class="collection-item-4 w-dyn-item"><a href="blog-posts/creer-un-logo-avec-lia-db8c5.html" class="boite-link-blog internal-link w-inline-block"> <div class="date">27 August 2026</div> <div class="txt-news-footer title">Creating a logo with AI?</div> </a></div> <div role="listitem" class="collection-item-4 w-dyn-item"> <div class="blogimagecontainer"><img decoding="async" src="65e19f3df4c2cff25ca91fcb/vignette-cite02.jpeg" loading="lazy" alt="" sizes="100vw" srcset="65e19f3df4c2cff25ca91fcb/vignette-cite02-p-500.jpeg 500w, 65e19f3df4c2cff25ca91fcb/vignette-cite02.jpeg 747w" class="image-7"></div> <a href="blog-posts/cite-de-lespace-seize-ans-de-graphisme-dexposition-a-toulouse.html" class="boite-link-blog internal-link w-inline-block"> <div class="date">16 July 2026</div> <div class="txt-news-footer title">Cité de l'espace: sixteen years of exhibition graphics in Toulouse</div> </a> </div> </div> </div> <div class="cursor-area"> <div class="cursor"> <div class="icon-project-container"> <div class="div-block-34"></div> <div class="div-block-35"></div> </div> <div class="icon-3d-container"><img decoding="async" src="65e19f3df4c2cff25ca91fa5/6603dd70ee1ede5913280753_icon-3d-rotate.svg" loading="lazy" alt="" class="image-6"></div> <div class="icon-left-arrow-container"> <div class="div-block-34 left"></div> <div class="div-block-35 left-right"></div> </div> <div class="icon-right-arrow-container"> <div class="div-block-34 right"></div> <div class="div-block-35 left-right"></div> </div> <div class="icon-drag"> <div class="div-block-34 left drag"></div> <div class="div-block-34 right drag"></div> </div> <div class="icon-showreel-container"> <div class="text-block-2">
185Showreel</div> </div> <div class="icon-play"> <div class="text-block-2">Play</div> </div> </div> <div class="transition"> <div class="transition-trigger"></div> </div> </div> </div>
185<script src="/vendor/jquery-3-5-1-min-dc5e7f18c8-c8e1c8b386.js" type="text/javascript" crossorigin="anonymous"></script>
185
185<script src="65e19f3df4c2cff25ca91fa5/js/webflow.schunk.59db69f9bc7a3df7.js" type="text/javascript" crossorigin="anonymous"></script>
185
185<script src="65e19f3df4c2cff25ca91fa5/js/webflow.schunk.c88f91766ec77805.js" type="text/javascript" crossorigin="anonymous"></script>
185
185<script src="65e19f3df4c2cff25ca91fa5/js/webflow.7892a075.798cdeb474a2e046.js" type="text/javascript" crossorigin="anonymous"></script>
185
185<script src="gsap/3.15.0/gsap.min.js" type="text/javascript"></script>
185
185<script src="gsap/3.15.0/SplitText.min.js" type="text/javascript"></script>
185
185<script src="gsap/3.15.0/ScrollTrigger.min.js" type="text/javascript"></script>
185
185<script type="text/javascript"> 186 gsap.registerPlugin(SplitText, ScrollTrigger); 187 </script>
187
187<script> 188 let transitionTrigger = $(".transition-trigger"); 189 let introDurationMS = 0; 190 let exitDurationMS = 800; 191 let excludedClass = "no-transition"; 192 193 // On Page Load 194 if (transitionTrigger.length > 0) { 195 transitionTrigger.click(); 196 $("body").addClass("no-scroll-transition"); 197 setTimeout(() => { 198 $("body").removeClass("no-scroll-transition"); 199 }, introDurationMS); 200 } 201 // On Link Click 202 $("a").on("click", function(e) { 203 if ($(this).prop("hostname") == window.location.host && $(this).attr("href").indexOf("#") === -1 && 204 !$(this).hasClass(excludedClass) && $(this).attr("target") !== "_blank" && transitionTrigger.length > 0) { 205 e.preventDefault(); 206 $("body").addClass("no-scroll-transition"); 207 let transitionURL = $(this).attr("href"); 208 transitionTrigger.click(); 209 setTimeout(function() { 210 window.location = transitionURL; 211 }, exitDurationMS); 212 } 213 }); 214 // On Back Button Tap 215 window.onpageshow = function(event) { 216 if (event.persisted) { 217 window.location.reload() 218 } 219 }; 220 // Hide Transition on Window Width Resize 221 setTimeout(() => { 222 $(window).on("resize", function() { 223 setTimeout(() => { 224 $(".transition").css("display", "none"); 225 }, 50); 226 }); 227 }, introDurationMS); 228 </script>
228
228<script src="gh/studio-freight/lenis@latest/bundled/lenis.js"></script>
228
228<script> 229 const lenis = new Lenis({ 230 duration: 1.2, 231 easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou 232 direction: 'vertical', // vertical, horizontal 233 gestureDirection: 'vertical', // vertical, horizontal, both 234 smooth: true, 235 mouseMultiplier: 1.25, 236 smoothTouch: false, 237 touchMultiplier: 2, 238 infinite: false, 239 }) 240 241 //get scroll value 242 lenis.on('scroll', ({ 243 scroll, 244 limit, 245 velocity, 246 direction, 247 progress 248 }) => { 249 250 }) 251 252 function raf(time) { 253 lenis.raf(time) 254 requestAnimationFrame(raf) 255 } 256 257 requestAnimationFrame(raf) 258 </script>
258
258<script> 259 /* mute and add playsinline to first DOM video on the page */ 260 document.addEventListener("DOMContentLoaded", function() { 261 // Handler when the DOM is fully loaded 262 $("video").get(0).volume = 0; 263 $('video').attr('playsinline', true); 264 $('video').attr('muted', "muted"); 265 $('video').get(0).play() 266 }); 267 </script>
267
267<script> 268 gsap.registerPlugin(SplitText); 269 gsap.registerPlugin(ScrollTrigger); 270 271 document.fonts.ready.then(function() { 272 document.querySelectorAll("[data-text-split]").forEach((element) => { 273 var split = new SplitText(element, { 274 type: "lines,words", 275 position: "absolute", 276 }); 277 278 var delay = element.getAttribute('data-text-split-delay') ? parseFloat(element.getAttribute('data-text-split-delay')) : 0; 279 280 // Appliquez les classes de style aux éléments découpés 281 //split.chars.forEach((char) => char.classList.add("char")); 282 split.words.forEach((word) => word.classList.add("word")); 283 284 gsap.from(split.lines, { 285 scrollTrigger: { 286 trigger: element, 287 start: "top 80%", 288 }, 289 duration: 1, 290 yPercent: 100, 291 autoAlpha: 0, 292 ease: "power3.out", 293 stagger: 0.1, 294 delay: delay, 295 onStart: function() { 296 element.style.visibility = "visible"; 297 }, 298 onComplete: function() { 299 split.revert(); 300 element.style.visibility = "visible"; 301 } 302 }); 303 }); 304 }); 305 306 307 308 gsap.from(".radio-button-field", { 309 scrollTrigger: { 310 trigger: ".filters-wrapper", 311 start: "top 80%", 312 }, 313 yPercent: 100, 314 autoAlpha: 0, 315 duration: 1, 316 stagger: 0.1, 317 ease: "power3.out", 318 }); 319 320 // Sélectionnez tous les parents .list-services-wrapper 321 const wrappers = document.querySelectorAll(".list-services-wrapper"); 322 323 // Pour chaque parent .list-services-wrapper, créez une animation 324 wrappers.forEach((wrapper) => { 325 // Sélectionnez les enfants .list-item-expertise de ce parent 326 const items = wrapper.querySelectorAll(".list-item-expertise"); 327 328 // Créez une animation GSAP pour ces éléments 329 gsap.from(items, { 330 scrollTrigger: { 331 trigger: wrapper, 332 start: "top 80%", 333 }, 334 yPercent: 100, 335 autoAlpha: 0, 336 duration: 1, 337 stagger: 0.1, 338 ease: "power3.out", 339 }); 340 }); 341 342 var tl = gsap.timeline(); 343 tl.from(".heading-01.blanc.hero-projet", { 344 yPercent: 100, 345 autoAlpha: 0, 346 duration: 1, 347 ease: "power4.out", 348 }); 349 tl.from( 350 ".heading-05.blanc", { 351 yPercent: 100, 352 autoAlpha: 0, 353 duration: 1, 354 ease: "power4.out", 355 }, 356 "<0.35" 357 ); 358 tl.from( 359 ".heading-05.noir", { 360 yPercent: 100, 361 autoAlpha: 0, 362 duration: 1, 363 ease: "power3.out", 364 }, 365 "<" 366 ); 367 368 var tl = gsap.timeline(); 369 tl.from("#h1-archive", { 370 yPercent: 100, 371 autoAlpha: 0, 372 duration: 1, 373 ease: "power3.out", 374 }); 375 tl.from( 376 "#h2-archive", { 377 yPercent: 100, 378 autoAlpha: 0, 379 duration: 1, 380 ease: "power3.out", 381 }, 382 "<0.5" 383 ); 384 tl.to( 385 ".mask-archive", { 386 yPercent: -100, 387 duration: 1, 388 ease: "power3.out", 389 }, 390 "<0.5" 391 ); 392 </script>
392
392<script> 393 var _paq = window._paq = window._paq || []; 394 /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ 395 _paq.push(['trackPageView']); 396 _paq.push(['enableLinkTracking']); 397 (function() { 398 var u = "//stats.cubedesigners.com/"; 399 _paq.push(['setTrackerUrl', u + 'matomo.php']); 400 _paq.push(['setSiteId', '2']); 401 var d = document, 402 g = d.createElement('script'), 403 s = d.getElementsByTagName('script')[0]; 404 g.async = true; 405 g.src = u + 'matomo.js'; 406 s.parentNode.insertBefore(g, s); 407 })(); 408 </script>
408
408<script>var SWITCH_URL_fr="https://www.cubedesigners.fr/blog.html"; 409</script>
409<script src="/vendor/jquery-form-min-527d24b61d.js" crossorigin="anonymous"></script>
409<script src="/js/custom.js"></script>
409 </body> </html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.