From Scrach

Projet de product & design pour From Scratch, un collectif qui apprend au public à reconnaître les instruments, samples et techniques de production en remontant les époques du rap, ponctué d’une performance live. J’ai conçu et réalisé leur site web en scroll horizontal, pensé comme une ligne du temps immersive.

Projet de product & design pour From Scratch, un collectif qui apprend au public à reconnaître les instruments, samples et techniques de production en remontant les époques du rap, ponctué d’une performance live. J’ai conçu et réalisé leur site web en scroll horizontal, pensé comme une ligne du temps immersive.

Projet de product & design pour From Scratch, un collectif qui apprend au public à reconnaître les instruments, samples et techniques de production en remontant les époques du rap, ponctué d’une performance live. J’ai conçu et réalisé leur site web en scroll horizontal, pensé comme une ligne du temps immersive.

Projet de product & design pour From Scratch, un collectif qui apprend au public à reconnaître les instruments, samples et techniques de production en remontant les époques du rap, ponctué d’une performance live. J’ai conçu et réalisé leur site web en scroll horizontal, pensé comme une ligne du temps immersive.

Client

from scrach

Année

2024

Catégorie

Design

Projet live

Découvrir

Concept

Concept

Concept

Transformer l’apprentissage en parcours narratif : voir – entendre – comprendre. Chaque “chapitre” associe extrait audio, indices visuels (instruments, machines, effets) et repères culturels (périodes, courants). Le live n’est pas un add-on mais l’apothéose du parcours : on explore, on écoute, on apprend… puis on vit l’expérience sur scène.

Transformer l’apprentissage en parcours narratif : voir – entendre – comprendre. Chaque “chapitre” associe extrait audio, indices visuels (instruments, machines, effets) et repères culturels (périodes, courants). Le live n’est pas un add-on mais l’apothéose du parcours : on explore, on écoute, on apprend… puis on vit l’expérience sur scène.

Transformer l’apprentissage en parcours narratif : voir – entendre – comprendre. Chaque “chapitre” associe extrait audio, indices visuels (instruments, machines, effets) et repères culturels (périodes, courants). Le live n’est pas un add-on mais l’apothéose du parcours : on explore, on écoute, on apprend… puis on vit l’expérience sur scène.

Transformer l’apprentissage en parcours narratif : voir – entendre – comprendre. Chaque “chapitre” associe extrait audio, indices visuels (instruments, machines, effets) et repères culturels (périodes, courants). Le live n’est pas un add-on mais l’apothéose du parcours : on explore, on écoute, on apprend… puis on vit l’expérience sur scène.

Development

Development

Development

J’ai réalisé ce projet avec Lovable, un outil no-code boosté par l’intelligence artificielle, que j’ai ensuite enrichi en travaillant directement sur le code pour obtenir le rendu souhaité.
Mon objectif était de créer une esthétique éditoriale × hip-hop : textures discrètes (grain, papier, cassette), typographies bold pour le rythme, accents lumineux pour guider l’œil, et une imagerie d’atelier (pads, faders, vinyles) en détails macro.
Le résultat : un univers en noir & blanc, rehaussé de touches colorées, qui relie héritage et modernité sans tomber dans le pastiche.

J’ai réalisé ce projet avec Lovable, un outil no-code boosté par l’intelligence artificielle, que j’ai ensuite enrichi en travaillant directement sur le code pour obtenir le rendu souhaité.
Mon objectif était de créer une esthétique éditoriale × hip-hop : textures discrètes (grain, papier, cassette), typographies bold pour le rythme, accents lumineux pour guider l’œil, et une imagerie d’atelier (pads, faders, vinyles) en détails macro.
Le résultat : un univers en noir & blanc, rehaussé de touches colorées, qui relie héritage et modernité sans tomber dans le pastiche.

J’ai réalisé ce projet avec Lovable, un outil no-code boosté par l’intelligence artificielle, que j’ai ensuite enrichi en travaillant directement sur le code pour obtenir le rendu souhaité.
Mon objectif était de créer une esthétique éditoriale × hip-hop : textures discrètes (grain, papier, cassette), typographies bold pour le rythme, accents lumineux pour guider l’œil, et une imagerie d’atelier (pads, faders, vinyles) en détails macro.
Le résultat : un univers en noir & blanc, rehaussé de touches colorées, qui relie héritage et modernité sans tomber dans le pastiche.

J’ai réalisé ce projet avec Lovable, un outil no-code boosté par l’intelligence artificielle, que j’ai ensuite enrichi en travaillant directement sur le code pour obtenir le rendu souhaité.
Mon objectif était de créer une esthétique éditoriale × hip-hop : textures discrètes (grain, papier, cassette), typographies bold pour le rythme, accents lumineux pour guider l’œil, et une imagerie d’atelier (pads, faders, vinyles) en détails macro.
Le résultat : un univers en noir & blanc, rehaussé de touches colorées, qui relie héritage et modernité sans tomber dans le pastiche.

Problem

Problem

Problem

Retranscrire l’énergie d’une performance live dans un format numérique est un défi en soi : comment capturer l’intensité, le rythme et l’atmosphère propre à une scène vivante sans en perdre la force ?
À cela s’ajoute un second enjeu : donner une dimension pédagogique au projet à travers un site internet, dans un milieu où le numérique n’est pas la priorité.
Il s’agissait donc de trouver un langage visuel et interactif capable à la fois de traduire l’expérience sensible du live et de rendre le contenu accessible et formateur, tout en respectant l’authenticité de la culture représentée.

Retranscrire l’énergie d’une performance live dans un format numérique est un défi en soi : comment capturer l’intensité, le rythme et l’atmosphère propre à une scène vivante sans en perdre la force ?
À cela s’ajoute un second enjeu : donner une dimension pédagogique au projet à travers un site internet, dans un milieu où le numérique n’est pas la priorité.
Il s’agissait donc de trouver un langage visuel et interactif capable à la fois de traduire l’expérience sensible du live et de rendre le contenu accessible et formateur, tout en respectant l’authenticité de la culture représentée.

Retranscrire l’énergie d’une performance live dans un format numérique est un défi en soi : comment capturer l’intensité, le rythme et l’atmosphère propre à une scène vivante sans en perdre la force ?
À cela s’ajoute un second enjeu : donner une dimension pédagogique au projet à travers un site internet, dans un milieu où le numérique n’est pas la priorité.
Il s’agissait donc de trouver un langage visuel et interactif capable à la fois de traduire l’expérience sensible du live et de rendre le contenu accessible et formateur, tout en respectant l’authenticité de la culture représentée.

Retranscrire l’énergie d’une performance live dans un format numérique est un défi en soi : comment capturer l’intensité, le rythme et l’atmosphère propre à une scène vivante sans en perdre la force ?
À cela s’ajoute un second enjeu : donner une dimension pédagogique au projet à travers un site internet, dans un milieu où le numérique n’est pas la priorité.
Il s’agissait donc de trouver un langage visuel et interactif capable à la fois de traduire l’expérience sensible du live et de rendre le contenu accessible et formateur, tout en respectant l’authenticité de la culture représentée.

Solution

Solution

Solution

Un scroll horizontal en chapitres (époques) avec players audio intégrés, légendes courtes et repères de timeline qui se fixent à l’écran. Navigation “swipe” fluide, repères sticky, sections Live et Ateliers (formats pédagogiques). Design system modulable pour ajouter facilement de nouveaux chapitres/époques, et micro-interactions qui rendent la lecture musicale tangible. Résultat : une expérience didactique, rythmée et scénique, prête à engager le public avant, pendant et après le live. Le tout réalisé sur Lovable.

Un scroll horizontal en chapitres (époques) avec players audio intégrés, légendes courtes et repères de timeline qui se fixent à l’écran. Navigation “swipe” fluide, repères sticky, sections Live et Ateliers (formats pédagogiques). Design system modulable pour ajouter facilement de nouveaux chapitres/époques, et micro-interactions qui rendent la lecture musicale tangible. Résultat : une expérience didactique, rythmée et scénique, prête à engager le public avant, pendant et après le live. Le tout réalisé sur Lovable.

Un scroll horizontal en chapitres (époques) avec players audio intégrés, légendes courtes et repères de timeline qui se fixent à l’écran. Navigation “swipe” fluide, repères sticky, sections Live et Ateliers (formats pédagogiques). Design system modulable pour ajouter facilement de nouveaux chapitres/époques, et micro-interactions qui rendent la lecture musicale tangible. Résultat : une expérience didactique, rythmée et scénique, prête à engager le public avant, pendant et après le live. Le tout réalisé sur Lovable.

Un scroll horizontal en chapitres (époques) avec players audio intégrés, légendes courtes et repères de timeline qui se fixent à l’écran. Navigation “swipe” fluide, repères sticky, sections Live et Ateliers (formats pédagogiques). Design system modulable pour ajouter facilement de nouveaux chapitres/époques, et micro-interactions qui rendent la lecture musicale tangible. Résultat : une expérience didactique, rythmée et scénique, prête à engager le public avant, pendant et après le live. Le tout réalisé sur Lovable.

  • plus de projets

  • plus de projets

Heckmann

Create a free website with Framer, the website builder loved by startups, designers and agencies.