Raining Cats Films

Société de production audiovisuelle belge

Raining Cats Films est une société de production audiovisuelle bruxelloise qui propose des courts métrages, des documentaires et des clips musicaux. Née d’une volonté de conjuguer l’héritage du cinéma belge et les codes du cinéma de genre, la société conçoit ses films selon une éthique de production renouvelée, respectueuse du travail de chacun et attentive aux enjeux climatiques tout en accompagnant l’émergence de nouveaux talents.

Période

2026

Mission

Webdesign
Conception de site web

Type de projet

Freelance

Outils

WordPress, Figma
Illustrator

Brief et challenge

La mission consiste à concevoir un site web vitrine pour le studio, permettant d’assurer sa visibilité, d’attirer des investisseurs et de promouvoir ses productions cinématographiques. En tant que designer web spécialisé dans la conception de sites WordPress, mon rôle est de créer une expérience utilisateur fluide, intuitive et parfaitement adaptée aux attentes de la cible.

1. Penser le site

Définir le public cible

Afin de construire pertinement le site, il est important de savoir à qui il s’adresse.

Investisseurs
Professions audiovisuelles
Concours et festivals

Analyse de la concurrence

Sur les sites Internet des concurrents directs de Raining Cats Films, on retrouve une structure de site vitrine commune, avec un design minimaliste et de grandes images qui attirent l’oeil.

Définir l’architecture du site

Arborescence

Je propose une structure simple et linéaire, à l’image d’un portfolio. L’enjeu est de trouver le bon équilibre entre richesse
du contenu audiovisuel et performance du site, afin de garantir une expérience fluide et un temps de chargement optimisé.

Wireframe

Je crée ensuite la structure du site (ci-contre pour ordinateur) mais également pour téléphone et tablette. Après plusieurs allers-retours, on valide la version avec le client, et on peut attaquer le design.

Défi dans le parcours utilisateur :

le cas de la galerie d’accueil

Objectif
  • Alléger le site web visuellement et techniquement :
  • Les films sont présentés sous forme de galerie ;
  • Ils ne possèdent pas de page propre : toutes les informations doivent donc être présentes sur la page d’accueil.
  • Chaque image de la galerie redirige vers un lien vidéo externe.
Problématique

Comment intégrer tout le contenu descriptif de chaque film sur la page d’accueil ?

Première piste

Pourquoi cette piste ne fonctionne pas ?

  • La lourdeur du texte implique une surcharge visuelle et n’incite pas à lire.
  • La vidéo en arrière-plan renforce la confusion visuelle.
  • Seul le bouton est cliquable, ce qui n’est pas confortable à l’utilisation.

Ce que je propose

état normal

Synopsis : on supprime le synopsis à l’état normal. Cela allège l’aperçu de départ, et valorise l’image.

Icône : au lieu d’une vidéo en arrière blanc qui serait trop lourde, j’ajoute une icône play pour faire comprendre qu’il y a une vidéo quand on clique. L’entièreté de la zone est cliquable pour plus de facilité.

Au survol

Synopsis : le synopsis apparait uniquement au survol avec toutes les informations secondaires.

Icône : le bouton augmente en opacité, se veut plus insistant.
Il insiste sur le fait qu’on peut cliquer. L’icone remonte pour afficher le texte.

Fond : l’image de fond est un peu assombrie pour mieux faire ressortir le texte du synopsis.

cliqué

Redirection vers les liens Viméo ou Youtube de la vidéo.

Pourquoi cette piste fonctionne ?

  • Le contenu est plus léger visuellement ;
  • Une image en arrière-plan est bien moins lourde qu’une vidéo et le site chargera plus vite.
  • Toute la zone est cliquable, ce qui facilite le clic pour l’utilisateur.
  • L’animation rend le contenu plus interractif.

Et sur téléphone, on fait comment ?

Sur téléphone

On conserve le synopsis par défaut car le survol n’est pas optimal.
On agrandit la zone image. Comme les films apparaissent l’un après l’autre, on a pas la même surcharge visuelle que sur ordinateur ou les images sont trois par trois.

Résultat

2. Designer le site

Le client disposait d’un logo, mais d’aucune charte graphique. Après analyse des concurrents, nous avons opté pour une esthétique sobre et moderne : fond noir, typographie épaisse et blanche.

Design responsive

Sur Figma, je réalise des planches pour ordinateur, tablette et téléphone. La mise en page a été adaptée pour chaque type d’écran.

3. Construire le site web sur WordPress

Choix d’un hébergeur et nom de domaine
Il est important de choisir son hébergeur et son nom de domaine. Je vous conseille l’hébergeur Hostinger, qui est connu, référence bien ses sites et possède une interface intuitive pour les utilisateurs.

Les étapes d’intégration sur WordPress

Préparation de l’espace WordPress ;

Installation des différents Plugins de sécurité ;

Préparation de l’espace WordPress ;

Intégration de l’identité visuelle du site ;

Création de toutes les pages pour ordinateur, tablette et téléphone ;

Insertion du contenu texte et média fourni par le client ;

Ajout d’un peu de CSS personnalisé pour correspondre au mieux à la maquette Figma développée.

4. Référencer le site

Le client ne souhaitait pas investir dans le SEO à ce stade, mais plusieurs bonnes pratiques ont été mises en place en amont :

  • Un hébergeur favorisant l’indexation ;
  • Une structure de contenu respectant la hiérarchie des titres avec des mots-clés pertinents ;
  • Des médias optimisés pour un chargement rapide.

5. Les dernières étapes

Les tests

Une semaine a été consacrée aux tests : vérification de l’affichage sur les navigateurs et contrôle du responsive sur différentes interfaces.

Livraison

Remise d’un document protégé avec les accès.

Formation

Une formation d’une heure en présentielle ou en visio est fournie pour apprendre au client à prendre en main son site.

Maintenance

Une option de maintenance est recommandée sur les deux mois suivants, afin de corriger les éventuels problèmes post-lancement.

Résultat final

Découvrir le site complet

Conclusion

Deux défis majeurs ont marqué ce projet :

  • Le premier concernait l’affichage des vidéos : trouver le bon équilibre entre esthétique et fluidité a conduit à privilégier une solution plus classique, mais plus lisible pour l’utilisateur.
  • Le second portait sur l’adaptation du design Figma aux contraintes de WordPress, surmontée grâce à l’ajout de CSS personnalisé, facilité par le choix initial d’une interface simple et efficace.
Et le client ?

Le client était très content du site : la digitalisation de son entreprise facilite le contact avec les autres professionnels du monde du cinéma. De plus, il renforce l’expertise et l’image de marque de son entreprise, tout en proposant un portfolio en ligne moderne et élégant.