PageSourceSearch

https://www.cubedesigners.com/blog.html

html cubedesigners.com collected 2026-09-29 10:46:41 UTC 21,450 bytes, 409 lines download raw bytes

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&#32;de&#32;travail&#32;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.