eDesign Interactive | Wimpy Kid Website Build

<!DOCTYPE html> <html id="html" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>eDesign Interactive | Wimpy Kid Website Build | eDesign</title> <meta name="description" content="Website redesign for Wimpy Kid, an iconic children’s book series. Hand-drawn character animations. Collaboration with renowned author Jeff Kinney. Game integration. Tight Disney+ deadline. Optimized for speed and fun." /> <meta property="og:description" content="Website redesign for Wimpy Kid, an iconic children’s book series. Hand-drawn character animations. Collaboration with renowned author Jeff Kinney. Game integration. Tight Disney+ deadline. Optimized for speed and fun." /> <meta property="og:title" content="eDesign Interactive | Wimpy Kid Website Build | eDesign" /> <link rel="alternate" hreflang="en" href="https://edesigninteractive.com/portfolio/wimpy-kid" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:image" content="https://edesigninteractive.com/images/edesign-og-image.jpg" /> <meta name="google-site-verification" content="4NTvTTVdAanBjjIGvppT8AB5sDAopwxxf67br4WKuHY" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#fff"> <link rel="icon" href="/images/fav.ico" type="image/gif" > <link rel="stylesheet" href="/case-studies/wimpy-kid/css/wimpy_kid.css?v=20240207.2" preload> <link rel="stylesheet" href="/css/style.css?v=20240207.2" preload>  <script type="text/javascript"> var _root = '/' , _root_full = 'https://edesigninteractive.com/' , _controller = 'portfolio' , _action = 'view' , _url_for = 'https://edesigninteractive.com/portfolio/wimpy-kid' , _lang = 'en' , _langs = '[{"name":"English"}]' , _base = 'https://edesigninteractive.com/' , _timezone_offset = '-5'; </script>  <script> !function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '509962736315210'); fbq('track', 'PageView'); </script> <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=509962736315210&ev=PageView&noscript=1"/> </noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-66869522-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-66869522-1'); </script> <script type="text/javascript"> _linkedin_partner_id = "1850098"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script><script type="text/javascript"> (function () { var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s); })(); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=1850098&fmt=gif" /> </noscript> <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-66869522-1', 'auto'); ga('send', 'pageview'); </script> </head> <body id="body">  <script> // Function to check if the browser supports WebP function supportsWebP() { var elem = document.createElement('canvas'); if (!!(elem.getContext && elem.getContext('2d'))) { // was able or not to get WebP representation return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0; } return false; } // Function to replace image sources based on browser support function replaceImages() { $('img').each(function() { var originalSrc = $(this).attr('data-src') || $(this).attr('src') ; var webpSrc = originalSrc.replace(/\.(jpg|jpeg|png)$/, '.webp'); if (supportsWebP()) { if($(this).attr('src')){ $(this).attr('src', webpSrc); } if(!$(this).attr('data-src')){ $(this).attr('data-src', webpSrc); } } }); } document.addEventListener('DOMContentLoaded', function() { if(_controller === 'healthcare_marketing'){ replaceImages(); } }); </script> <div class="preloader"> <div class="preloader-box"> <div id="preloader"></div> </div> </div> <div class="cursor"> <div class="cursor__inner cursor__inner--circle"></div> <div class="cursor__inner cursor__inner--dot"></div> </div> <div class="cursor"> <div class="circle-cursor circle-cursor--inner"></div> <div class="circle-cursor circle-cursor--outer" data-width="100px" data-height="100px"> <span class="prev-cursor-arr"></span> <div class="cursor-in"> <img src="/images/icons/close_cursor.svg" alt="Close cursor" class="cursor-in-img none"> </div> <span class="next-cursor-arr"></span> <span class="next-click-cursor"> <img src="/images/icons/right-drag.svg" alt=""> </span> <span class="prev-click-cursor"> <img src="/images/icons/left-drag.svg" alt=""> </span> </div> </div> <div id="menu" class="menu"> <div class="menu-container"> <div class="menu-container-box"> <div class="menu-container-wrap center"> <div class="menu-link-box"> <div class="menu-link content__text"> <a href="/" class=" content__text-inner">Home</a> </div> </div> <div class="menu-link-box"> <div class="menu-link smaller"> <a href="/about" class="splitByLinesChars">About</a> </div> <span class="symbol_b op_0">/</span> <div class="menu-link smaller"> <a href="/team" class="splitByLinesChars">Team</a> </div> <span class="symbol_b op_0">/</span> <div class="menu-link smaller"> <a href="/careers" class="splitByLinesChars">Careers</a> </div> </div> <div class="menu-link-box"> <div class="menu-link active"> <a href="/portfolio"> <span class="text-b-b splitByLinesChars">Projects</span> <button class="text-b btn red op_0">View our portfolio </button> </a> </div> </div> <div class="menu-link-box"> <div class="menu-link"> <a href="/services" class="splitByLinesChars">Services</a> </div> </div> <div class="menu-link-box"> <div class="menu-link"> <a href="/blog" class="splitByLinesChars">Blog</a> </div> </div> <div class="menu-link-box"> <div class="menu-link"> <a href="/contact" class="splitByLinesChars">Contact</a> </div> </div> <div class="menu-link-box-social"></div> <div class="menu-privacy-policy-links mpp op_0"> <a href="/terms">Terms and Conditions</a> </div> </div> </div> </div> </div> <span class="hover-circle-inner burger-menu hover-circle-box" id="burgerMenu"> <div class="hover-circle"> <div class="parallaxMoveElem parallaxMoveCircle"></div> </div> <div class="sticked-circle"></div> <svg class="ham hamRotate ham1 none" viewBox="0 0 100 40" width="60"> <path class="line top" d="m 30,0 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40"></path> <path class="line middle" d="m 30,17 h 40"></path> <path class="line bottom" d="m 30,35 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40"></path> </svg> <span id="hamburgerAnimation"></span> </span> <h1 class="hover-circle-inner header-logo op_0"> <a aria-label="logo link" href="/" class=""> <svg version="1.1" viewBox="0 0 51.035 50.929"> <path fill="#FFF" d="M31.417 50.929c3.238-.162 4.868-1.05 7.45-4.046 2.582-2.998 3.443-3.448 6.452-6.229 3.01-2.781 3.238-8.516 3.195-10.564-.042-2.05.555-9.72 2.277-17.359 1.723-7.641-6.275-6.406-7.379 2.678-.932 9.149-5.697 6.431-9.177 1.103-3.479-5.326-8.245-13.388-9.518-15.368-1.272-1.982-3.669-.881-4.125-.435-.456.445-2.143.967.476 5.504 2.619 4.536 6.147 11.39 6.555 12.354.408.962-.659 1.084-1.746.229-1.084-.854-13.047-11.698-14.719-13.178-1.672-1.483-3.096-1.03-4.319.204-1.223 1.237-.679 2.9.87 4.465 1.549 1.566 12.319 12.806 13.765 14.316 1.113 1.164-.113 2.459-2.057 1.231-1.945-1.228-12.647-8.738-13.797-9.516-1.15-.776-2.62-1.059-4.293.529s.123 3.565.735 4.111c.612.544 14.294 10.747 15.274 11.359.98.613.799 2.883-1.921 1.771-2.72-1.113-9.693-4.159-11.151-4.662-1.458-.505-3.211-1.104-4.04 1.144-.828 2.248.726 2.888 3.267 4.354 2.904 1.678 14.644 9.945 17.937 12.687 4.09 3.404 9.989 3.318 9.989 3.318z"/> </svg> </a> </h1> <div class="copyright-box op_0"> <div class="copyright vTextLR">© 2004-2024</div> </div> <div class="burger-box op_0"> <div class="burger"> <div class="burger-text"></div> <div class="burger-dots"></div> </div> </div> <a aria-label="Contact us" href="/contact" class="get-in-touch-box op_0"> <div class="get-in-touch vTextLR"> <div class="get-in-touch-icon"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18.667px" height="22.834px" viewBox="0 0 18.667 22.834" enable-background="new 0 0 18.667 22.834" xml:space="preserve"> <path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M1.167,20.065V2.923c0-0.785,0.625-1.429,1.388-1.429h10.102 c0.764,0,1.388,0.644,1.388,1.429v2.858h3.123l-3.123,3.713v10.571c0,0.787-0.624,1.431-1.388,1.431H2.554 C1.791,21.496,1.167,20.853,1.167,20.065z"/> <path id="contact-us-2" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M7.278,5.505 c0.553,0,1,0.447,1,1c0,0.551-0.447,1-1,1s-1-0.449-1-1C6.278,5.953,6.725,5.505,7.278,5.505z"/> <path id="contact-us-3" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M7.278,15.506 c0.553,0,1,0.447,1,1c0,0.551-0.447,1-1,1s-1-0.449-1-1C6.278,15.953,6.725,15.506,7.278,15.506z"/> <path id="contact-us-4" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M7.278,10.506 c0.553,0,1,0.447,1,1c0,0.551-0.447,1-1,1s-1-0.449-1-1C6.278,10.953,6.725,10.506,7.278,10.506z"/> </svg> </div> <div class="get-in-touch-text"><span>Get in touch</span></div> </div> </a> <div class="social-icons-box op_0"> <div class="social-icons"> <a rel="noopener" aria-label="Facebook" href="https://www.facebook.com/edesigninteractive/" target="_blank" class="social-icon fb"> <svg xmlns="http://www.w3.org/2000/svg" width="6.737" height="13.962"><path fill="#FFF" d="M6.737 4.506H4.454V3.078c0-.552.399-.661.628-.661h1.599V0H4.454C1.941 0 1.428 1.812 1.428 2.913v1.593H0v2.476h1.428v6.98h3.026v-6.98h2.055l.228-2.476z"/></svg> </a> <a rel="noopener" aria-label="Twitter" href="https://twitter.com/We_Are_eDesign" target="_blank" class="social-icon tw"> <svg width="14.361" height="13"> <defs> <style> .cls-1 { fill: #fff; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M11.305.01h2.203l-4.811,5.497,5.659,7.48h-4.43l-3.472-4.536-3.968,4.536H.281l5.144-5.88L0,.01h4.542l3.135,4.146L11.305.01ZM10.532,11.671h1.22L3.878,1.258h-1.31l7.964,10.413Z"/> </svg>  </a> <a rel="noopener" aria-label="Instagram" href="https://instagram.com/edesign_interactive/" target="_blank" class="social-icon in"> <svg xmlns="http://www.w3.org/2000/svg" width="13.474" height="13.141" viewBox="299.5 953.424 13.474 13.141"><path fill="#FFF" d="M310.383 953.424h-8.292c-1.439 0-2.591 1.122-2.591 2.526v8.088c0 1.403 1.15 2.526 2.591 2.526h8.292c1.438 0 2.591-1.123 2.591-2.526v-8.088c0-1.405-1.152-2.526-2.591-2.526zm.748 1.515h.288v2.245h-2.304v-2.245h2.016zm-6.794 3.707c.402-.563 1.15-.955 1.899-.955.748 0 1.497.393 1.899.955.288.394.461.844.461 1.347 0 1.292-1.094 2.305-2.36 2.305-1.266 0-2.361-1.013-2.361-2.305 0-.504.174-.954.462-1.347zm7.312 5.392c0 .675-.575 1.235-1.267 1.235h-8.292c-.69 0-1.268-.563-1.268-1.235v-5.393h2.017a3.532 3.532 0 0 0-.288 1.347c0 1.969 1.67 3.597 3.686 3.597s3.686-1.628 3.686-3.597a3.56 3.56 0 0 0-.287-1.347h2.015l-.002 5.393z"/></svg> </a> <a rel="noopener" aria-label="behance" href="https://www.behance.net/edesignbg" target="_blank" class="social-icon be"> <svg xmlns="http://www.w3.org/2000/svg" width="14.316" height="8.216" viewBox="298.342 955.279 14.316 8.216"><path fill="#FFF" d="M311.271 956.441h-3.587v-.82h3.587v.82zm-5.975 3.372c.23.329.347.729.347 1.202 0 .484-.13.926-.396 1.311-.166.254-.38.474-.63.646-.284.2-.619.337-1.006.411a6.803 6.803 0 0 1-1.258.111h-4.011v-8.216h4.302c1.084.018 1.853.307 2.307.874.272.352.407.769.407 1.256 0 .502-.137.902-.411 1.208-.152.171-.38.327-.679.469.454.154.797.394 1.028.728zm-4.9-1.294h1.885c.389 0 .701-.068.941-.203.241-.137.36-.377.36-.723 0-.385-.158-.637-.479-.76-.273-.086-.625-.129-1.051-.129h-1.658l.002 1.815zm3.37 2.378c0-.428-.188-.724-.566-.881-.211-.089-.509-.136-.891-.139h-1.912v2.188h1.883c.387 0 .687-.046.901-.143.389-.179.585-.519.585-1.025zm8.836-1.336c.043.269.063.658.055 1.169h-4.646c.024.591.247 1.004.667 1.24.253.148.561.221.92.221.379 0 .688-.088.926-.268.129-.099.243-.232.342-.406h1.703c-.045.351-.25.704-.618 1.063-.569.572-1.371.858-2.398.858-.851 0-1.599-.241-2.248-.723-.647-.484-.974-1.271-.974-2.357 0-1.021.292-1.802.879-2.348.589-.545 1.347-.815 2.281-.815a3.95 3.95 0 0 1 1.501.274c.444.186.813.477 1.103.872.259.352.427.76.507 1.22zm-1.676.154c-.031-.408-.181-.719-.446-.931-.265-.212-.595-.318-.989-.318-.428 0-.76.112-.994.339-.236.222-.385.524-.444.91h2.873z"/></svg> </a> </div> </div> <div class="line l1 anim-line"></div> <div class="line l2 anim-line"></div> <div class="line l3 anim-line"></div> <div class="line l4 anim-line"></div> <div class="line l5 anim-line"></div> <div class="scroll-down op_0 scroll_down"> <div class="scroll-down-text vTextLR">Scroll down</div> <div class="scroll-down-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11px" height="36.189px" viewBox="0 0 11 36.189" enable-background="new 0 0 11 36.189" xml:space="preserve"> <g> <line class="stroke-1" fill="none" stroke="#000000" stroke-width="3.0556" stroke-miterlimit="10" x1="5.5" y1="0" x2="5.5" y2="13.556"/> <g> <line class="stroke-2" fill="none" stroke="#000000" stroke-width="1.0316" stroke-miterlimit="10" stroke-dasharray="18.9727" x1="5.5" y1="36.189" x2="5.5" y2="17.216"/> </g> <g><polygon class="stroke-3" points="0,11.946 5.5,21.472 11,11.946 "/></g></g> </svg> </div> </div> <div class="scroll-down op_0 scroll_up none"> <div class="scroll-down-text vTextLR">Scroll up</div> <div class="scroll-down-icon"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11px" height="36.189px" viewBox="0 0 11 36.189" enable-background="new 0 0 11 36.189" xml:space="preserve"> <g> <line class="stroke-1" fill="none" stroke="#000000" stroke-width="3.0556" stroke-miterlimit="10" x1="5.5" y1="0" x2="5.5" y2="13.556"/> <g> <line class="stroke-2" fill="none" stroke="#000000" stroke-width="1.0316" stroke-miterlimit="10" stroke-dasharray="18.9727" x1="5.5" y1="36.189" x2="5.5" y2="17.216"/> </g> <g><polygon class="stroke-3" points="0,11.946 5.5,21.472 11,11.946 "/></g></g> </svg> </div> </div> <div class="progress" id="progress"></div> <div class="rotate-screen">  <div id="screenrotation"></div> </div> <div> <div class="viewport"> <div id="my-scrollbar" > <div class="content scroll-content "> <div data-scroll-container class="smooth-scroll-wrapper"> <section class="wimpy-hero default-section-anim prel f0"> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div data-anim-order="1" data-anim-type="fade-in-y-stagger" class="img-wrapper aspect-ratio-979-836"> <div class="book-1 pabs"> <div class="book-inner-wrap"> <div class="book"> <img width="490" height="816" data-src="/images/casestudies/wimpy-kid/book-1.png" class="b-lazy floater-element" alt=""> </div> </div> </div> <div class="book-2 pabs"> <div class="book-inner-wrap"> <div class="book"> <img width="498" height="830" data-src="/images/casestudies/wimpy-kid/book-2.png" class="b-lazy floater-element" alt=""> </div> </div> </div> <div class="book-3 pabs"> <div class="book-inner-wrap"> <div class="book"> <img width="485" height="808" data-src="/images/casestudies/wimpy-kid/book-3.png" class="b-lazy floater-element" alt=""> </div> </div> </div> </div> <h1 data-anim-order="2" data-anim-type="chars" class="section-title txt-size-72-d txt-size-40-m lh-1 ltr-spc-pos-0_04 ff-helvetica-bold"> Wimpy Kid </h1> <div data-anim-order="3" data-anim-type="fade-in" class="txt-post-rtf txt-size-14-d txt-size-14-m c-white lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>Website experience for an iconic children’s book series</p> </div> <a href="https://wimpykid.com/" rel="noopener noreferrer" target="_blank" data-anim-order="4" data-anim-type="fade-in" class="btn-wimpy-default white-border-blue-bgr inline_block prel center"> <span class="btn-bgc abs-cover-el inline_block"></span> <span class="btn-txt prel inline_block txt-size-12-d txt-size-14-m lh-1 ff-helvetica-roman ltr-spc-pos-0_05"> View website </span> </a> </div> </section> <section class="wimpy-project-summary default-section-anim prel f0"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="txt-content"> <h2 data-anim-order="1" data-anim-type="chars" class="section-title split-strong ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> Anything But <strong>Wimpy</strong> </h2> <div data-anim-order="2" data-anim-type="fade-in" class="txt-post-rtf txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>Web redesign for an iconic children’s book series. Hand-drawn character animations. Collaboration with renowned author Jeff Kinney. Game integration. Tight Disney+ deadline. Optimized for speed and fun.</p> </div> </div> <div data-anim-order="3" data-anim-type="fade-in" class="additional-content-wrap prel"> <div class="author-img-wrap"> <div data-to-left="1" data-scroll data-scroll-speed="-0.5" data-cloud-big="/images/casestudies/wimpy-kid/cloud-bgr.png" data-cloud-sm="/images/casestudies/wimpy-kid/cloud-fill.png" class="clouds-canvas-wrap img-wrapper aspect-ratio-764-522"> <canvas class="abs-cover-el clouds-canvas"></canvas> </div> <div class="img-small-el pabs img-wrapper inline-block aspect-ratio-135-92"></div> <div data-scroll data-scroll-speed="-1" class="img-wrapper aspect-ratio-1-1"> <img width="542" height="542" data-src="/images/casestudies/wimpy-kid/jeff-kinney.png" class="b-lazy" alt=""> <p class="copyright-txt w-100 center pabs lh-1_1 txt-size-20-d txt-size-14-m c-black ff-helvetica-roman ltr-spc-pos-0_01"> ™ and © 2007-2023, Wimpy Kid, Inc. </p> </div> </div> <div data-scroll data-scroll-speed="-0.75" class="author-txt-content"> <h3 class="author-title ff-helvetica-bold txt-size-90-d txt-size-30-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> Jeff Kinney </h3> <p class="author-txt lh-1_1 txt-size-20-d txt-size-14-m c-black ff-helvetica-roman ltr-spc-pos-0_01"> The Author </p> </div> <div data-canvas-renderer class="lottie-anim-el graphic-el" data-lottie-anim-name="journalistsAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/journalists.json"></div> </div> </div> </section> <section class="wimpy-challenges default-section-anim prel f0"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div data-canvas-renderer class="airplane lottie-anim-el pabs" data-lottie-anim-name="airplaneAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/the-gateway.json"></div> <div class="pabs parachute-guy stop-anim-mobile lottie-anim-el " data-lottie-anim-name="skyDivingAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/skydiver.json"></div> <div data-canvas-renderer class="pabs flying-guy section-screen-anim lottie-anim-el " data-lottie-anim-name="deltaAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/delta.json"></div> <svg data-scroll data-scroll-speed="-1.25" fill="none" viewBox="0 0 1920 852" class="pabs bgr-lines"> <path class="colored-path" fill="none" stroke="#0cc" stroke-dasharray="1,10" stroke-linecap="round" stroke-width="7" d="M-157 392c33 7.2 68.6 7.8 102.3 7.8 73.8 0 146.2-8.1 218-25.1 70.8-16.7 142-35.3 209-64 61.4-26.3 125.3-61.3 162.9-118.7 19.1-29.1 30.3-68.6 26.2-103.6-3.9-33.2-32.8-55-60.6-69.1C437.4-13 352.7 8.8 301.9 56.6c-25.5 24-44.8 55.1-62 85.4-20.9 36.7-35.4 79.5-39.6 121.6-8.9 89.9 9.2 194.8 70.2 264.2 69.6 79.1 181.5 92.9 279.2 69.9 44.8-10.5 90.1-24.9 131.8-44.7 19.2-9.1 47.3-24.5 37.6-50.1-17.9-47-94.3-57.3-136.6-46.4-39.4 10.2-60.2 30.3-61.4 71.8-1.4 45.1 12.1 94.3 45.7 126.2 59.4 56.4 138.4 88.3 214.9 113.6 47.5 15.7 96.8 24.6 145.9 33.9 64.9 12.3 130.1 21.3 195.7 29 163.1 19.1 329.1 20.6 493 13.9 177-7.2 353.5-25.5 528.3-54.3 82.5-13.6 163-32.8 242.9-57.3C2443.2 716 2495 692 2547 666" /> <path class="white-path" fill="none" stroke="#fff" stroke-dasharray="4630.34" stroke-linecap="round" stroke-width="10" d="M2547 666c-52 26-103.8 50-159.6 67.1-79.9 24.6-160.4 43.7-242.9 57.3-174.8 28.8-351.3 47.1-528.3 54.3-163.9 6.7-329.9 5.2-493-13.9-65.5-7.7-130.8-16.7-195.7-29-49.1-9.3-98.4-18.2-145.9-33.9-76.5-25.3-155.5-57.2-214.9-113.6-33.6-31.9-47-81.1-45.7-126.2 1.3-41.5 22-61.6 61.4-71.8 42.2-10.9 118.7-.6 136.6 46.4 9.8 25.6-18.3 41-37.6 50.1-41.7 19.8-86.9 34.1-131.8 44.7-97.7 23-209.6 9.2-279.2-69.9-61-69.4-79.2-174.3-70.2-264.2 4.2-42.1 18.7-84.9 39.6-121.6 17.2-30.3 36.5-61.4 62-85.4 50.8-47.8 135.5-69.6 199-37.2 27.8 14.1 56.7 35.9 60.6 69.1 4.1 35-7.1 74.5-26.2 103.6-37.6 57.4-101.5 92.4-162.9 118.7-67 28.7-138.2 47.3-209 64-71.8 17-144.2 25.1-218 25.1-33.7 0-69.3-.6-102.3-7.8" /> </svg> <div class="txt-content"> <div class="title-wrap prel"> <img width="241" height="77" data-src="/images/casestudies/wimpy-kid/challenges-section-fly.png" class="b-lazy pabs fly-img" alt=""> <h3 data-anim-type="chars" data-anim-order="1" class="section-title prel ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> Challenges </h3> </div> <div data-anim-type="fade-in" data-anim-order="2" class="txt-post-rtf prel txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>UX/UI Design, Responsive Design, ONIX Integration, Front and Back-End Development, Motion Graphics, Web Animations, Content Creation, CakePHP Custom CMS, GDPR Compliance, WCAG AA Conformance, SEO.</p> </div> </div> </div> </section> <section class="wimpy-quote default-section-anim prel f0"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div data-canvas-renderer data-has-direction="1" class="greg-bike section-screen-anim lottie-anim-el " data-lottie-anim-name="bicycleAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/biker.json"></div> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <img data-scroll data-scroll-speed="-0.75" width="370" height="272" data-src="/images/casestudies/wimpy-kid/quote-icon.png" class="quote-icon pabs b-lazy" alt=""> <div class="title-wrap prel"> <h4 data-anim-order="1" data-anim-type="chars" class="section-title long-title prel ff-helvetica-bold txt-size-120-d txt-size-30-m lh-1_1 c-black title-strong-styles ltr-spc-pos-0_01"> A big part of our company is the fun factor and the humor we use online, and we needed an agency that could work within that. </h4> <div data-scroll data-scroll-speed="-1" data-to-left="0" data-cloud-big="/images/casestudies/wimpy-kid/cloud-bgr.png" data-cloud-sm="/images/casestudies/wimpy-kid/cloud-fill.png" class="clouds-canvas-wrap img-wrapper aspect-ratio-764-522"> <canvas class="abs-cover-el clouds-canvas"></canvas> </div> </div> <div class="img-small-el pabs img-wrapper inline-block aspect-ratio-135-92"></div> <p data-anim-type="fade-in" data-anim-order="after" class="quote-by c-black ff-helvetica-roman txt-size-20-d txt-size-14-m lh-1_1 ltr-spc-pos-0_01"> — Shaelyn Germain-Dupre, Global Engagement Manager, Wimpy Kid Inc. </p> </div> </section> <section class="wimpy-deep-dive default-section-anim prel f0"> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div data-canvas-renderer data-scroll data-scroll-speed="-0.5" class="pabs turtle lottie-anim-el " data-lottie-anim-name="turtleAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/turtle.json"></div> <div data-scroll data-scroll-speed="-0.9" class="pabs diver lottie-anim-el " data-lottie-anim-name="gregDiveFooterAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/diver.json"></div> <div data-scroll data-scroll-speed="-0.65" class="img-wrapper aspect-ratio-1-1 seaweed pabs"> <img width="313" height="313" data-src="/images/casestudies/wimpy-kid/seaweed.png" class="b-lazy floater-element" alt=""> </div> <h5 data-anim-type="chars" data-anim-order="1" class="section-title split-strong ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> Deep <strong>Dive</strong> </h5> <div data-anim-type="fade-in" data-anim-order="2" class="txt-post-rtf txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>Designing the new website of Wimpy Kid was a challenging project, and oh so fun! We immersed ourselves in the world of Greg Heffley, his best friend, and other wonderful characters.</p> </div> </div> </section> <section class="wimpy-exploring-options default-section-anim prel f0"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="txt-content prel"> <h5 data-anim-order="1" data-anim-type="chars" class="section-title split-strong ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> Just the Right <strong>Touch</strong> </h5> <div data-anim-order="2" data-anim-type="fade-in" class="txt-post-rtf txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>It took several homepage concepts to create the right vibe for the cheesiest website around.</p> </div> </div> <div data-scroll data-scroll-speed="-0.45" class="img-wrapper img-first aspect-ratio-370-817 box-shadow"> <img width="370" height="817" data-src="/images/casestudies/wimpy-kid/options-img-1.png" class="b-lazy" alt=""> </div> <div data-scroll data-scroll-speed="-0.75" class="img-wrapper img-second aspect-ratio-370-817 box-shadow"> <img width="370" height="817" data-src="/images/casestudies/wimpy-kid/options-img-2.png" class="b-lazy" alt=""> </div> </div> </section> <section class="wimpy-design-to-life prel f0 default-section-anim"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="txt-content prel"> <h5 data-anim-type="chars" data-anim-order="1" class="section-title split-strong ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> Bringing the Design <strong>to Life</strong> </h5> <div data-anim-type="fade-in" data-anim-order="2" class="txt-post-rtf txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p> Jeff Kinney had previously worked with other studios, but he couldn’t find a team who was able to bring the unique style of Wimpy Kid to life. We are proud Jeff trusted us with this important task. </p> <p> Animating the characters took time, precision, and diligence. We partnered with Four Plus to create playful motion for each hand-drawn cartoon that appears on the website. </p> </div> </div> <div data-anim-type="fade-in" data-anim-order="3" class="img-wrapper aspect-ratio-770-940 section-img pabs"> <div class="greg-rowley-high-five lottie-anim-el" data-lottie-anim-name="highFiveAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/smash.json"></div> <div data-canvas-renderer class="greg-carry-box lottie-anim-el" data-lottie-anim-name="carryBoxAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/greg_box.json"></div> <div data-canvas-renderer class="the-third-wheel lottie-anim-el" data-lottie-anim-name="theThirdWheel" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/the-third-wheel.json"></div> <div class="img-wrapper aspect-ratio-610-442 next-chapter-img"> <img width="610" height="442" data-src="/images/casestudies/wimpy-kid/next_chapter.png" class="b-lazy" alt=""> </div> <div class="img-wrapper aspect-ratio-1-1 center-img"> <img width="138" height="138" data-src="/images/casestudies/wimpy-kid/design-to-life-img-center.png" class="b-lazy" alt=""> </div> </div> </div> </section> <section class="wimpy-collaboration default-section-anim prel f0"> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="txt-content prel"> <h6 data-anim-type="chars" data-anim-order="1" class="section-title ff-helvetica-bold txt-size-64-d txt-size-40-m lh-1 c-white title-strong-styles ltr-spc-pos-0_03"> Co-Creative Process </h6> <div data-anim-type="fade-in" data-anim-order="2" class="txt-post-rtf txt-size-24-d txt-size-14-m c-white lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p> Collaborating with Jeff Kinney himself was exhilarating. Our team thrives on brainstorming and sharing ideas with our clients every step of the way. </p> </div> </div> <div data-scroll data-scroll-speed="-0.4" class="img-wrapper img-first box-shadow aspect-ratio-654-391"> <img width="654" height="391" data-src="/images/casestudies/wimpy-kid/collaboration-img-1.png" class="b-lazy" alt=""> </div> <div data-scroll data-scroll-speed="0.6" class="img-wrapper img-second box-shadow aspect-ratio-270-480"> <img width="270" height="480" data-src="/images/casestudies/wimpy-kid/collaboration-img-2.png" class="b-lazy" alt=""> </div> <div data-scroll data-scroll-speed="-1.2" class="img-wrapper img-third box-shadow aspect-ratio-259-461"> <img width="259" height="461" data-src="/images/casestudies/wimpy-kid/collaboration-img-3.png" class="b-lazy" alt=""> </div> </div> </section> <section class="wimpy-cheese prel f0 default-section-anim"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="txt-content prel"> <h5 data-anim-type="chars" data-anim-order="1" class="section-title split-strong ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> <strong>Say</strong> Cheese! </h5> <div data-anim-type="fade-in" data-anim-order="2" class="txt-post-rtf txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>The cheese slice on the homepage proved tricky to develop. The java code needed to circle randomly selected, adjacent svg files and animate each cartoon character at different angles through predefined spaces. Phew!</p> </div> </div> <div class="cheese-content floater-element offset-x-mobile"> <div class="img-wrapper aspect-ratio-893-842"></div>  <img width="1200" height="1132" data-src="/images/casestudies/wimpy-kid/cheese.png" alt="cheese" class="b-lazy cheese-img abs-cover-el"> <img width="893" height="991" data-src="/images/casestudies/wimpy-kid/cheese-full.png" alt="cheese" class="b-lazy cheese-img-full">   <div class="anim-pos desktop-anim-pos" data-pos-directions="all" data-pos-id="1"></div> <div class="anim-pos desktop-anim-pos" data-pos-directions="all" data-pos-id="2"></div> <div class="anim-pos desktop-anim-pos" data-pos-directions="all" data-pos-id="3"></div> <div class="anim-pos desktop-anim-pos" data-pos-directions="all" data-pos-id="4"></div> <div class="anim-pos desktop-anim-pos" data-pos-directions="down" data-pos-id="5"></div> <div class="anim-pos desktop-anim-pos mobile-anim-pos" data-pos-directions="left,down" data-pos-id="6"></div>  <div class="anim-pos desktop-anim-pos mobile-anim-pos" data-pos-directions="to-top" data-pos-id="8"></div> <div class="anim-pos desktop-anim-pos mobile-anim-pos" data-pos-directions="to-top" data-pos-id="9"></div> <div class="anim-pos desktop-anim-pos mobile-anim-pos" data-pos-directions="to-right" data-pos-id="10"></div>  </div> </div> </section> <section class="wimpy-deadline prel f0 default-section-anim"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="txt-content prel"> <h6 data-anim-type="chars" data-anim-order="1" class="section-title split-strong ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> Lights, Camera, <strong>Deadline!</strong> </h6> <div data-anim-type="fade-in" data-anim-order="2" class="txt-post-rtf txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>Our team worked under a very tight deadline to meet Wimpy Kid’s movie launch on Disney+. We separated the website launch into two phases and passed Disney+’s approval with flying colors.</p> </div> </div> <div data-scroll data-scroll-speed="-0.45" class="img-wrapper img-frame aspect-ratio-921-932"> <img width="921" height="932" data-src="/images/casestudies/wimpy-kid/movie-frame.png" class="b-lazy" alt=""> </div> <div data-scroll data-scroll-speed="-0.75" class="img-wrapper img-disney aspect-ratio-259-141"> <img width="259" height="141" data-src="/images/casestudies/wimpy-kid/disney-plus.png" class="b-lazy" alt=""> </div> </div> </section> <section class="wimpy-phase-2 prel f0 default-section-anim"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="txt-content prel"> <h6 data-anim-type="chars" data-anim-order="1" class="section-title split-strong ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> More, More, <strong>More</strong> </h6> <div data-anim-type="fade-in" data-anim-order="2" class="txt-post-rtf txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>In phase two, we added a shop with branded apparel, accessories, and novelty gifts. We integrated the previously developed game “Wimpy Yourself” and created a fun zone with puzzles, activity sheets, and resources for teachers.</p> </div> </div> <div class="parachute-guy-wrap pabs"> <div class="parachute-guy-wrap-inner fit"> <div class="fit lottie-anim-el parachute-guy" data-lottie-anim-name="skyDivingAnim2" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/skydiver.json"></div> </div> </div> <div data-anim-type="fade-in" data-anim-order="3" class="img-wrapper aspect-ratio-870-566 section-img"> <div data-scroll data-scroll-speed="-0.4" class="img-wrapper img-1 aspect-ratio-222-333"> <img width="222" height="333" data-src="/images/casestudies/wimpy-kid/phase-2-img-1.png" class="b-lazy floater-element" alt=""> </div> <div data-scroll data-scroll-speed="-0.25" class="img-wrapper img-2 aspect-ratio-1-1"> <img width="500" height="500" data-src="/images/casestudies/wimpy-kid/phase-2-img-2.png" class="b-lazy floater-element" alt=""> </div> <div data-scroll data-scroll-speed="-0.15" class="img-wrapper img-3 aspect-ratio-1-1"> <img width="308" height="308" data-src="/images/casestudies/wimpy-kid/phase-2-img-3.png" class="b-lazy floater-element" alt=""> </div> </div> </div> </section> <section class="wimpy-fast-secure prel f0 default-section-anim"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="txt-content prel"> <h6 data-anim-type="chars" data-anim-order="1" class="section-title split-strong ff-helvetica-bold txt-size-90-d txt-size-40-m lh-1 c-wimpy-black-2 title-strong-styles ltr-spc-pos-0_02"> Honkingly <strong>Fast</strong> </h6> <div data-anim-type="fade-in" data-anim-order="2" class="txt-post-rtf txt-size-24-d txt-size-14-m c-wimpy-black-3 lh-1_3 ltr-spc-pos-0_01 ff-helvetica-roman"> <p>The website loads extremely fast and is optimized for any screen resolution. Our development team integrated ONIX, the eBooks data aggregator used by retailers in the publishing industry. The site is secure and stays protected against vulnerabilities. We provide monthly support, maintenance, and security monitoring.</p> </div> </div> <div data-anim-type="fade-in" data-anim-order="3" class="section-img pabs"> <img width="610" height="442" data-src="/images/casestudies/wimpy-kid/fast-secure-section-img.png" class="b-lazy" alt=""> </div> </div> </section> <section class="wimpy-quote-2 prel f0 default-section-anim"> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim first pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <svg data-random-scale data-random-direction data-random-y class="section-cloud-el section-screen-anim second pabs" viewBox="0 0 120 85"> <path fill="#fff" stroke="#000" d="M114.9 47.6c-2.8-3.5-7.1-5.5-11.1-7.3-.1 0-.2-.1-.2-.1.3-1.5.4-3 .2-4.6-.3-2.9-1.7-5.7-3.7-7.8-3.7-4-9.5-5.1-14.5-3.4-.7-4.5-3.2-8.8-7-11.4-5.1-3.4-12-3.6-17.3-.6-2.4-3.7-6.9-6.4-10.7-7.9-6-2.4-13.4-2-18.3 2.7-2.8 2.7-3.8 6.4-4.7 10.1-8.1-.5-20.1 1.1-23.7 9-1.8 3.9-1.8 8.9-.7 13 .8 2.7 2.5 5.2 5 6.3C4.5 51 3.8 58.3 6.9 64c2.9 5.5 8.8 8.8 14.9 9.1 0 .1 0 .2.1.4 3.4 6.1 10.8 8.3 17.4 8.3 7.3 0 14.4-2.6 20-7.2.2-.2.3-.3.3-.5 3.2 2.4 7.3 3.8 11.2 4.2 4.3.4 9.2.3 13.4-.8 3.1-.8 6.2-2.5 6.7-6 7.4 1.6 16 1 21.6-4.5 5.2-5 7-13.5 2.4-19.4z" /> </svg> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <div class="lottie-anim-el bird pabs" data-lottie-anim-name="birdAnim" data-url="/case-studies/wimpy-kid/assets/js/lottie-anims/tweet.json"></div> <img width="370" height="272" data-src="/images/casestudies/wimpy-kid/quote-icon.png" class="quote-icon pabs b-lazy" alt=""> <h5 data-anim-type="chars" data-anim-order="1" class="section-title long-title split-strong prel ff-helvetica-bold txt-size-120-d txt-size-30-m lh-1_1 c-black title-strong-styles ltr-spc-pos-0_01"> We've worked with many different companies over the last few years, and honestly, <strong>eDesign Interactive</strong> has been the <strong>best</strong> to work with. </h5> <h6 data-anim-type="fade-in" data-anim-order="after" class="sec-title ff-helvetica-bold c-black lh-1_1 txt-size-48-d txt-size-20-m ltr-spc-pos-0_01"> We gave them a challenging deadline and very specific requests, but they were great at matching our needs. </h6> <p data-anim-type="fade-in" data-anim-order="after" class="quote-by c-black ff-helvetica-roman txt-size-20-d txt-size-14-m lh-1_1 ltr-spc-pos-0_01"> — Wimpy Kid Inc. </p> </div> </section> <section class="wimpy-fast-facts prel f0 default-section-anim"> <div class="max-w-container op-0 w-1920 prel offset-x-desktop-252 offset-y-m-50 offset-x-m-30"> <h6 data-anim-type="chars" data-anim-order="1" class="section-title ff-helvetica-bold txt-size-72-d txt-size-50-m lh-1_125 c-black title-strong-styles ltr-spc-pos-0_0278"> Fast Facts </h6> <div data-anim-type="fade-in-y-stagger" data-anim-order="2" class="blocks-wrap"> <div class="single-block prel"> <h6 class="block-stats-txt title-strong-styles lh-1 txt-size-120-d txt-size-70-m ltr-spc-pos-0_025 c-black ff-helvetica-bold"> <strong>1</strong> </h6> <p class="block-info-txt c-wimpy-black-3 txt-size-24-d txt-size-14-m lh-1_25 ff-helvetica-roman ltr-spc-pos-0_083"> Disney+ movie premiere </p> </div> <div class="single-block prel"> <h6 class="block-stats-txt title-strong-styles lh-1 txt-size-120-d txt-size-70-m ltr-spc-pos-0_025 c-black ff-helvetica-bold"> 6 </h6> <p class="block-info-txt c-wimpy-black-3 txt-size-24-d txt-size-14-m lh-1_25 ff-helvetica-roman ltr-spc-pos-0_083"> weeks to launch the site </p> </div> <div class="single-block prel"> <h6 class="block-stats-txt title-strong-styles lh-1 txt-size-120-d txt-size-70-m ltr-spc-pos-0_025 c-black ff-helvetica-bold"> <strong>250M+</strong> </h6> <p class="block-info-txt c-wimpy-black-3 txt-size-24-d txt-size-14-m lh-1_25 ff-helvetica-roman ltr-spc-pos-0_083"> books in print around the world </p> </div> </div> </div> </section> <section class="other-casestudies-section default-section-anim"> <div class="op-0 max-w-container w-1920 prel"> <div data-anim-order="1" data-anim-type="fade-in"> <div class="content-grid cf"> <div class="text-col p0 c_b"> <div id="social-feed-slider" class="drag-nav"> <div class="social-feed-slider-conatiner swiper-container op_0 drag-section"> <div class="social-feed-slider-wrapper swiper-wrapper"> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/theatre-development-fund-tdf" title="TDF"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/34/others/tdf-thumb-small2_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.tdf.org/</span> </div> </a> </div>  <a href="/portfolio/theatre-development-fund-tdf" class="title sm mobile-offset plr tplr mobile-offset c_b bx">TDF</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Non Profit</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/turner-construction-company" title="Turner"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/32/others/tcco-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.turnerconstruction.com/</span> </div> </a> </div>  <a href="/portfolio/turner-construction-company" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Turner</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Construction</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/synack" title="Synack"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/33/others/synack-big-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.synack.com/</span> </div> </a> </div>  <a href="/portfolio/synack" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Synack</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Software & Electronics</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/sekure-merchants" title="Sekure Merchants"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/31/others/sekure-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://sekuremerchants.com/</span> </div> </a> </div>  <a href="/portfolio/sekure-merchants" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Sekure Merchants</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <span class="social-feed-slide-inner-box prel"> <h3 class="title m s">More <br /> projects</h3> <p class="text m op_03 _s"> <span class="text n">We use the power of digital technology to engage your audience...</span> </p> <div class="btn-box mt"> <a href="/portfolio" class="btn red anim-txt-b op_0">View portfolio</a> </div> </span> </div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/fastmail" title="Fastmail"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/28/others/fastmail-290x290-thumb-list_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://fastmail.edesigninteractive.com</span> </div> </a> </div>  <a href="/portfolio/fastmail" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Fastmail</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/associated-press" title="Associated Press Content Services"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/27/others/ap-209x209_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://contentservices.ap.org/</span> </div> </a> </div>  <a href="/portfolio/associated-press" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Associated Press Content Services</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/medspeed" title="MedSpeed"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/29/others/medspeed-290x290-thumb-list_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.medspeed.com/</span> </div> </a> </div>  <a href="/portfolio/medspeed" class="title sm mobile-offset plr tplr mobile-offset c_b bx">MedSpeed</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Healthcare</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/lasernetus" title="LaserNetUS"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/26/others/lasernetus-209x209_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://lasernetus.org/</span> </div> </a> </div>  <a href="/portfolio/lasernetus" class="title sm mobile-offset plr tplr mobile-offset c_b bx">LaserNetUS</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Government, Nonprofit</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/finch" title="Finch"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/25/others/finch_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">http://finchmoney.edesigninteractive.com/</span> </div> </a> </div>  <a href="/portfolio/finch" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Finch</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Finance</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/welchs-fruit-snacks" title="Welch’s ® Fruit Snacks"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/8/others/weltch-tmb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://welchsfruitsnacks.com/</span> </div> </a> </div>  <a href="/portfolio/welchs-fruit-snacks" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Welch’s ® Fruit Snacks</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Food & Beverage</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/blockchains" title="Blockchains"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/24/others/blockchains_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.blockchains.com/</span> </div> </a> </div>  <a href="/portfolio/blockchains" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Blockchains</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Software & Electronics</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/sundaysky" title="SundaySky"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/22/others/SundaySky_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://sundaysky.edesigninteractive.com/</span> </div> </a> </div>  <a href="/portfolio/sundaysky" class="title sm mobile-offset plr tplr mobile-offset c_b bx">SundaySky</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Software & Electronics</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/exeron" title="Exeron"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/3/others/exeron-portfolio-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://exeron.com/</span> </div> </a> </div>  <a href="/portfolio/exeron" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Exeron</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Products</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/popweaver" title="Weaver Popcorn"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/5/others/popweaver-thumb-casestudy_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://popweaver.edesigninteractive.com/</span> </div> </a> </div>  <a href="/portfolio/popweaver" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Weaver Popcorn</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Food & Beverage</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/dyrdek-machine" title="Dyrdek Machine"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/20/others/Dyrdek-Machine-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://dyrdekmachine.com/</span> </div> </a> </div>  <a href="/portfolio/dyrdek-machine" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Dyrdek Machine</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/oinj" title="The Orthopedic Institute of New Jersey"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/19/others/oinj-thumb_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://orthopedicnj.com</span> </div> </a> </div>  <a href="/portfolio/oinj" class="title sm mobile-offset plr tplr mobile-offset c_b bx">The Orthopedic Institute of New Jersey</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Healthcare</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/raritan-valley-community-college" title="Raritan Valley Community College"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/18/others/rvcc-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.raritanval.edu/</span> </div> </a> </div>  <a href="/portfolio/raritan-valley-community-college" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Raritan Valley Community College</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Education</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/frostking-house" title="Frost King"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/7/others/frost-king-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://house.frostking.com/</span> </div> </a> </div>  <a href="/portfolio/frostking-house" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Frost King</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Products</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/hardies" title="Hardie's Fresh Foods"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/4/others/hardies-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.hardies.com/</span> </div> </a> </div>  <a href="/portfolio/hardies" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Hardie's Fresh Foods</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/menada" title="Domain Menada Winery"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/14/others/menada-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.menada-winery.com/</span> </div> </a> </div>  <a href="/portfolio/menada" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Domain Menada Winery</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Spirits</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/villa-yambol" title="Villa Yambol Wines"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/17/others/villa-yambol-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://villayambol.com/</span> </div> </a> </div>  <a href="/portfolio/villa-yambol" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Villa Yambol Wines</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Spirits</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/agata-photography" title="Agata Photography"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/6/others/agata-portfolio-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://agataphotography.co.uk/</span> </div> </a> </div>  <a href="/portfolio/agata-photography" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Agata Photography</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/alaska" title="Alaska Vodka"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/10/others/alaska-vodka-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://alaskavodka.com/</span> </div> </a> </div>  <a href="/portfolio/alaska" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Alaska Vodka</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Spirits</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/brickfielder" title="Brickfielder"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/11/others/brickfielder-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://brickfielder.edesigninteractive.com/</span> </div> </a> </div>  <a href="/portfolio/brickfielder" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Brickfielder</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Products</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/diecrew" title="Die Crew"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/12/others/diecrew-portfolio-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.diecrew.de/</span> </div> </a> </div>  <a href="/portfolio/diecrew" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Die Crew</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Services</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/dangelico" title="D'Angelico Guitars"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/13/others/d-angelico-thumb_thumb-list.jpg')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">http://dangelico.edesigninteractive.com/</span> </div> </a> </div>  <a href="/portfolio/dangelico" class="title sm mobile-offset plr tplr mobile-offset c_b bx">D'Angelico Guitars</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Products</div> </div> <div class="col col-d-20 social-feed-slide swiper-slide"> <div class="social-feed-slide-box plr bx"> <a class="social-feed-slide-inner-box prel" href="/portfolio/sun-maid-chocolate-raisins" title="Sun-Maid Chocolate Raisins"> <div class="bckg-overlay cover" style="background-image:url('https://edesigninteractive.com/attachments/Project/23/others/Screenshot-2021-02-26-121121_thumb-list.png')"></div> <div class="link-box"> <img src="/images/icons/link-icon.png" alt=""> <span class="link-text">https://www.chocolateraisins.com/</span> </div> </a> </div>  <a href="/portfolio/sun-maid-chocolate-raisins" class="title sm mobile-offset plr tplr mobile-offset c_b bx">Sun-Maid Chocolate Raisins</a> <div class="text m bigger op_07 mobile-offset plr fa-star-half-fulltplr bx">Food & Beverage</div> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div> </div> <script src="/case-studies/wimpy-kid/js/manifest.js?v=20240115"></script> <script src="/case-studies/wimpy-kid/js/vendor.js?v=20240115"></script> <script src="/case-studies/wimpy-kid/js/app.js?v=20240115"></script> <script src="/js/main.js?v=20240815v2"></script> <script> App.Lottie.initPrelaoder(); App.init(); </script> <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-66869522-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>

CINXE.COM

eDesign Interactive | Wimpy Kid Website Build | eDesign