FREN

Refonte & direction artistique2026

A.S. Velasca

Aperçu du projet A.S. Velasca

Une refonte complète, de la direction artistique jusqu’au code, pour un club qui se présente comme « la seconda squadra di Milano », la deuxième équipe de Milan.

Contexte

L’A.S. Velasca est née en 2015 au pied de la Torre Velasca, à Milan. C’est un vrai club, engagé en Terza Categoria, le plus bas niveau du football italien, et un projet artistique : chaque saison, un artiste dessine le maillot, et chaque billet de match est illustré par un artiste, un joueur ou un supporter. J’avais réalisé leur site en 2019. Il fonctionnait encore, mais il racontait mal le club : un bandeau rouge, un diaporama, des pages blanches et peu de place pour les artistes.

Ce que j’ai fait

J’ai tout repris, de la direction artistique au code, en gardant ce qui marchait : le blason, l’outil où le club publie ses contenus, la boutique PayPal, les quatre langues et toutes les anciennes adresses des pages. Le nouveau site s’organise autour de deux idées, la tour et les artistes, avec une typographie de maillot, des visuels plein écran et des animations qui donnent du rythme sans gêner la lecture.

Points clés

  • 50×plus légère : l’image d’accueil passe de 6,2 Mo à 120 Ko
  • 4 languesitalien, anglais, français et chinois
  • 0contenu à ressaisir : le club garde son outil d’édition

Étude de cas détaillée

De la tour au maillot, étape par étape.

  1. 01Le club

    Un club de foot et un projet d’artistes

    Le club a été fondé par cinq amis, entre football et art contemporain : Marco De Girolamo, Karim Khideur, Loris Mandelli, Wolfgang Natlacen et Clément Tournus. Son nom et son blason viennent de la Torre Velasca, une tour des années 1950 en forme de champignon, un peu à part dans le paysage de Milan.

    Chaque saison, un artiste dessine le maillot : Régis Sénèque, Zevs, Jiang Li, Pascale Marthine Tayou, Francesca Belgiojoso, Kendell Geers, Joël Andrianomearisoa, et d’autres depuis. Ce sont ces œuvres qui devaient porter le site.

    Écran d’entrée du site de l’A.S. Velasca : le blason, le nom du club et le choix de la langue sur fond rouge rayé.
    L’écran d’entrée : le choix de la langue, sur des rayures de maillot.

  2. 02Le point de départ

    Garder ce qui marchait

    Le site de 2019 tenait la route, mais il avait vieilli : un menu tassé dans un bandeau rouge, un diaporama plein écran sans mise en scène, des pages éditoriales sur fond blanc.

    J’ai d’abord listé ce qui ne devait pas bouger. Le club publie ses pages dans un CMS (Cockpit) : il le garde, sans rien ressaisir. Les adresses des pages restent les mêmes dans les quatre langues, pour ne pas casser les liens partagés depuis des années. La boutique continue de passer par les boutons PayPal existants.

    Ancienne page d’accueil : un bandeau de menu rouge au-dessus d’un diaporama.Nouvelle page d’accueil : le titre « La seconda squadra di Milano » en grandes capitales sur le maillot en plein écran.
    La même image d’accueil, avant et après : le maillot 2021/22 dessiné par Joël Andrianomearisoa.

  3. 03Recherche

    Partir de ce que le club produit déjà

    J’ai commencé par rassembler ce que le club crée lui-même : les maillots d’artistes, les billets de match dessinés à la main, le blason, les photos des matchs.

    Trois choses en sont sorties très vite. La tour revient partout, jusque sur les billets. Le rouge du blason suffit, inutile d’en ajouter. Et les artistes doivent passer au premier plan, pas dans une page secondaire.

    Moodboard : maillots d’artistes, billets de match dessinés, blason, dessin de la tour et nuancier, annotés à la main.

  4. 04Typographie

    Une police de maillot

    J’ai choisi Archivo, une police variable qui a un axe de largeur en plus de la graisse. Le même fichier donne des titres très serrés et très noirs, comme un flocage de maillot, et de petites étiquettes larges et espacées.

    La police est hébergée par le site lui-même : pas d’appel aux serveurs de Google, ce qui évite un transfert de données inutile et accélère le chargement.

    Le mot « Velasca » en Archivo, largeur 62 et graisse 900, avec le spécimen de l’alphabet.

  5. 05Logotype

    Le blason ne bouge pas

    Le blason est l’identité du club depuis 2015, je n’y ai pas touché. J’ai construit autour : un logotype horizontal pour l’en-tête, avec le blason, « A.S. Velasca » en condensé et « Milano · MMXV » en capitales larges, calé sur la hauteur de capitale et la ligne de base.

    Le mot « Velasca » seul, en très grand, signe le bas de chaque page.

    Construction du logotype : le blason à gauche, « A.S. Velasca » et « Milano · MMXV » à droite, avec les lignes de construction.

  6. 06Pictogramme

    La tour, étage par étage

    La Torre Velasca compte 26 étages, et le manifeste du club le dit à sa façon : pour arriver au vingt-sixième étage, il faut forcément partir du premier.

    J’ai redessiné la tour au trait, fenêtre par fenêtre, et j’en ai fait un fil conducteur. Sur l’accueil, elle s’allume d’un étage par saison jouée. En 2026-2027, c’est le douzième.

    La tour du blason redessinée au trait, avec douze étages allumés sur vingt-six.

  7. 07Couleur

    Trois couleurs, pas une de plus

    Le rouge est prélevé directement sur le blason. Il s’accompagne d’un noir d’encre pour les fonds et d’un blanc cassé, couleur papier, pour les pages de lecture.

    Un motif de rayures diagonales, comme sur un maillot, revient sur l’écran d’entrée et dans les transitions.

    • Rosso Velasca#D00520prélevé sur le blason
    • Inchiostro#0B0B0Cles fonds
    • Carta#F2EDE4les pages de lecture

  8. 08Mouvement

    Du rythme, sans gêner la lecture

    Les animations reprennent le langage du stade. Les titres se resserrent en arrivant, le mot « squadra » se remplit de rouge, les maillots de l’accueil se succèdent en volet avec un liseré lumineux, le menu s’ouvre comme un disque rouge et chaque changement de page passe par un balayage.

    Tout s’arrête si le visiteur a demandé à son système de réduire les animations.

    Le mot « Squadra » rempli de rouge, « Progetto » sur un bandeau rouge et deux rubans de texte qui se croisent.

  9. 09Sous le capot

    Un site rapide, et plus sûr

    Le club publie toujours ses contenus au même endroit. Côté site, j’ai tout reconstruit sur une base actuelle (React 19, Vite), et chaque page ne charge que ce dont elle a besoin.

    • Les images du CMS sont redimensionnées à la volée : la photo d’accueil passe de 6,2 Mo à 120 Ko.
    • Le contenu qui vient du CMS est filtré avant affichage : seuls les intégrations et les formulaires de paiement prévus passent.
    • Les dépendances sont à jour : aucune faille connue à la mise en ligne, contre 566 alertes avant la refonte.
    • Toutes les anciennes adresses fonctionnent toujours, dans les quatre langues.

  10. 10Le résultat

    Un vrai site de club

    De l’écran d’entrée à la boutique, chaque page reprend le même langage. Même la page 404 a son clin d’œil : « Offside », drapeau de juge de touche levé.

    La boutique : les maillots d’artistes en grille, avec la saison et le prix.
    Fiche produit : le maillot spécial 2026, avec le choix de la taille.
    La page « Squadra » : le titre en grand sur une photo de l’équipe, puis le contenu sur une feuille couleur papier.
    La page 404 : « Offside », avec un drapeau de juge de touche.
    L’écran d’entrée sur téléphone.
    L’accueil sur téléphone.
    Le menu sur téléphone.
    Une fiche produit sur téléphone.

Le film

La démarche en images.

Le film de présentation du projet, en motion design : recherche, typographie, logotype, couleur et résultat.

Réalisations

Autres projets

Contact

Écrivez-moi.

Un projet dans le même esprit ?

Décrivez-moi votre activité et ce que vous attendez du site. Je vous réponds avec des questions et une première estimation.

bonjour@kma.studio
Me contacter