<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Maxime Ridou | UX design | Portfolio</title> <meta name="description" content="Maxime Ridou. Web Design. Étudiant en UI & UX design à Montbéliard, vous retrouverez mes créations personnelles et professionnelles dans mon portfolio" /> <meta name="keywords" content="UX Design, UI Design, maxime, ridou, maxime ridou, web design, esd paris, mmi montbéliard, lpw montbéliard, esd" /> <meta name="author" content="Maxime Ridou /w codrop" /> <link rel="shortcut icon" href="fav.png"> <link rel="stylesheet" type="text/css" href="css/base.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-core.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script> <script> document.documentElement.className = "js"; var supportsCssVars = function () { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window .CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e }; supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables."); </script> </head> <body class="loading"> <svg class="hidden"> <symbol id="icon-arrow" viewbox="0 0 24 24"> <title>arrow</title> <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " /> </symbol> <symbol id="icon-drop" viewbox="0 0 24 24"> <title>drop</title> <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" /> <path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" /> </symbol> <svg id="icon-nav" viewbox="0 0 152 63"> <title>navarrow</title> <path d="M115.737 29L92.77 6.283c-.932-.92-1.21-2.84-.617-4.281.594-1.443 1.837-1.862 2.765-.953l28.429 28.116c.574.57.925 1.557.925 2.619 0 1.06-.351 2.046-.925 2.616l-28.43 28.114c-.336.327-.707.486-1.074.486-.659 0-1.307-.509-1.69-1.437-.593-1.442-.315-3.362.617-4.284L115.299 35H3.442C2.032 35 .89 33.656.89 32c0-1.658 1.143-3 2.552-3H115.737z" /> </svg> </svg> <main> <p class="message">Please view on desktop to see the full layout</p> <div class="slideshow"> <header class="codrops-header"> <h1 class="codrops-header__title">Maxime Ridou</h1> <div class="codrops-header__links"> <a href="https://www.linkedin.com/in/maxime-ridou-17317a153/" target="_blank" title="in">in</a> <a href="https://www.instagram.com/vysokoskorostno/" target="_blank" title="ig">ig</a> <a href="MAXIME_RIDOU_CV.pdf" target="_blank" title="about">about</a> <a href="mailto:maximeridou2@gmail.com" title="contact">contact</a> </div> </header> <div class="slide slide--layout-1 slide--current"> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img slide__border-black" style="background-image: url(img/ux/MAQUETTE_AMAZON.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Amazon's website prototype - Item's page</h3> <a href="https://www.instagram.com/p/CB22Vsphhvi/" target="_blank"><p class="slide__figure-description">ESD's Admission Test</p></a> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img slide__border-black" style="background-image: url(img/ux/MAQUETTE_AMAZON2.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Amazon's website prototype - Card page</h3> <a href="https://www.instagram.com/p/CB22Vsphhvi/" target="_blank"><p class="slide__figure-description">ESD's Admission Test</p></a> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img slide__border-black" style="background-image: url(img/ux/MAQUETTE_AESOP.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Aesop's website prototype - Homepage</h3> <a href="https://www.instagram.com/p/CB0VzuxB7zn/" target="_blank"><p class="slide__figure-description">Individual project, rebrand of Aesop's website</p></a> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img slide__border-black" style="background-image: url(img/ux/MAQUETTE_AESOP2.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Aesop's website prototype - Product page</h3> <a href="https://www.instagram.com/p/CB0VzuxB7zn/" target="_blank"><p class="slide__figure-description">Individual project, rebrand of Aesop's website</p></a> </figcaption> </figure> <span class="slide__number slide__number--left">01</span> <span class="slide__number slide__number--right">02</span> </div> <div class="slide slide--layout-2"> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/ui/BACKGROUND_STRECH.png)"> </div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Strech background</h3> <p class="slide__figure-description">Personal wallpaper</p> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/ui/STORY_RUSSE.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Russian poster</h3> <p class="slide__figure-description">Instagram story</p> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/ui/BACKGROUND_WAVES.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Waves background</h3> <p class="slide__figure-description">Instagram story</p> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/ui/STORY_DIT.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Covid19 Poster</h3> <a href="https://www.instagram.com/p/CB0VrxXhX2b/" target="_blank"><p class="slide__figure-description">Instagram story</p></a> </figcaption> </figure> <span class="slide__number slide__number--left">03</span> <span class="slide__number slide__number--right">04</span> </div> <div class="slide slide--layout-3"> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/entreprenariat/BUSINESS_CARD_MAXIME.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Business card - Maxime Ridou</h3> <p class="slide__figure-description">Testing my own Business card</p> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img slide__border-black" style="background-image: url(img/entreprenariat/PORTFOLIO_MAXIME.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Portfolio - Maxime Ridou</h3> <p class="slide__figure-description" target="_blank">Old portfolio for my works</p> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img slide__border-black" style="background-image: url(img/entreprenariat/SITE_INTERSTICE.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Showcase website - Interstice</h3> <a href="https://www.interstice-design.com/" target="_blank"><p class="slide__figure-description">Decoration and design furniture made in Franche-Comté</p></a> </figcaption> </figure> <span class="slide__number slide__number--left">05</span> <span class="slide__number slide__number--right">06</span> </div> <div class="slide slide--layout-4"> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img slide__border-black" style="background-image: url(img/school/MAQUETTE_MMI.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">MMI Montbeliard's website prototype - Homepage</h3> <a href="https://www.instagram.com/p/CB22rGHhtJ4/" target="_blank"><p class="slide__figure-description">Collective project, rebrand of MMI’s website</p></a> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img slide__border-black" style="background-image: url(img/school/MAQUETTE_MMI2.png)"></div> <div class="slide__figure-reveal" target="_blank"></div> </div> <figcaption> <h3 class="slide__figure-title">MMI Montbeliard's website prototype - Homepage</h3> <a href="https://www.instagram.com/p/CB22rGHhtJ4/" target="_blank"><p class="slide__figure-description">Collective project, rebrand of MMI’s website</p></a> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/school/ILLUSTRATION_FLAK.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">"Flack" brand mock-up </h3> <p class="slide__figure-description">Collective project, creation of a brand</p> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/school/POSTER_FLAK.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">"Flack" poster</h3> <p class="slide__figure-description">Collective project, creation of a brand</p> </figcaption> </figure> <span class="slide__number slide__number--left">07</span> <span class="slide__number slide__number--right">08</span> </div> <div class="slide slide--layout-5"> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/extra/freelance.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Freelance background</h3> <a href="mailto:maximeridou2@gmail.com?subject=Freelance | Questions"><p class="slide__figure-description">For any informations, contact me</p></a> </figcaption> </figure> <figure class="slide__figure"> <div class="slide__figure-inner"> <div class="slide__figure-img" style="background-image: url(img/extra/alternance_esd.png)"></div> <div class="slide__figure-reveal"></div> </div> <figcaption> <h3 class="slide__figure-title">Looking for an intership at ESD background</h3> <a href="mailto:maximeridou2@gmail.com?subject=Alternance | Questions"><p class="slide__figure-description">For any informations, contact me</p></a> </figcaption> </figure> <span class="slide__number slide__number--left">09</span> <span class="slide__number slide__number--right">10</span> </div> <!-- revealer --> <div class="revealer"> <div class="revealer__item revealer__item--left"></div> <div class="revealer__item revealer__item--right"></div> </div> <nav class="arrow-nav"> <button class="arrow-nav__item arrow-nav__item--prev"> <svg class="icon icon--nav"> <use xlink:href="#icon-nav"></use> </svg> </button> <button class="arrow-nav__item arrow-nav__item--next"> <svg class="icon icon--nav"> <use xlink:href="#icon-nav"></use> </svg> </button> </nav> <!-- navigation --> <nav class="nav"> <button class="nav__button"> <span class="nav__button-text">index</span> </button> <h2 class="nav__chapter">UX Design</h2> <div class="toc"> <a class="toc__item" href="#entry-1"> <span class="toc__item-page">01.</span> <span class="toc__item-title">UX Design</span> </a> <a class="toc__item" href="#entry-2"> <span class="toc__item-page">03.</span> <span class="toc__item-title">UI Design</span> </a> <a class="toc__item" href="#entry-3"> <span class="toc__item-page">05.</span> <span class="toc__item-title">Entrepreneurship</span> </a> <a class="toc__item" href="#entry-4"> <span class="toc__item-page">07.</span> <span class="toc__item-title">School projects</span> </a> <a class="toc__item" href="#entry-5"> <span class="toc__item-page">09.</span> <span class="toc__item-title">Extra</span> </a> </div> </nav> <!-- little sides --> <div class="slideshow__indicator"></div> <div class="slideshow__indicator"></div> </div> <!-- <div class="cursor-container"> <div class="rond"></div> <div class="cursor"></div> </div> --> <!-- The cursor elements --> <div class="cursor cursor--small"></div> <canvas class="cursor cursor--canvas" resize></canvas> </main> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/TweenMax.min.js"></script> <script src="js/demo.js"></script> </body> </html>