← Tous les projets Étude de cas - 01 / 06

Loop, find your flavor

Inventer de A à Z l'univers d'une marque de boissons pétillantes, puis lui donner un site à sa hauteur.

Rôle
Direction artistique, UI design, intégration
Contexte
Projet académique - BUT MMI
Année
2026
Outils
Figma, HTML, CSS, JavaScript
loop - homepage
Homepage du site Loop : titre « Find your flavor, stay in the loop » et quatre canettes colorées

(01) Le brief

Partir d'une marque qui n'existe pas et lui donner une vraie personnalité

Le sujet : à partir d'une marque fictive, développer tout un univers et le site qui va avec. Loop, c'est une gamme de boissons pétillantes aromatisées, sans sucre et sans calories, déclinée en quatre recettes.

L'enjeu était de rendre la marque désirable en un coup d'œil : une identité ronde et joyeuse, des couleurs qui claquent et une homepage qui donne envie de goûter. Le tout porté par une signature : « Find your flavor. Stay in the loop. »

(02) Quatre saveurs

Quatre couleurs, quatre humeurs

Citrus Loop

Blood orange + mandarin

Canette Citrus Loop orange

Green Loop

Lime + cucumber + mint

Canette Green Loop verte

Purple Loop

Blackberry + blackcurrant

Canette Purple Loop violette

Pink Loop

Pink grapefruit + raspberry

Canette Pink Loop rose

(03) Identité

Une typo gourmande, une palette pétillante

Aa

Bagel Fat One
Les titres : ronds, généreux, à croquer.

Aa

Gochi Hand
Les touches manuscrites, comme sur les canettes.

Aa

Barlow
Les textes courants : lisibles et neutres.

Navy · #0B1B4D Loop blue · #0B8CF0 Sky · #BDE6FF Sun · #FFC83D

(04) Ce que j'ai fait

  • 01

    Identité de marque

    Logo aux formes fluides, une couleur par saveur et un système typographique pour donner à Loop une personnalité ronde et joyeuse.

  • 02

    Direction artistique

    Mise en scène des canettes et choix d'images lifestyle pour raconter les « moments Loop » : pause solo, verre entre amis, golden hour.

  • 03

    Homepage animée

    Canettes qui tombent en place, bandeau défilant, bulles, formes organiques qui se déforment et FAQ en accordéon, en HTML, CSS et JavaScript.

  • 04

    Accessibilité & responsive

    Focus visibles, textes alternatifs, contenus pour lecteurs d'écran et mise en page fluide, du mobile au grand écran.

(05) Compétences

BrandingDirection artistiqueDesign graphique UI designFigmaHTMLCSS JavaScriptAnimations CSSAccessibilitéResponsive

(06) Résultat

UniversUne marque crédible, de zéro
Gamme4 recettes, 4 couleurs
SiteUne homepage complète, du hero à la newsletter

Projet suivant - 02

Bonsaï →