Bannière du studio miroir

Qu’est-ce que « Studio Miroir » ?

Studio Miroir est un studio de création graphique proposant des services de graphisme, de photographie et de digital.

Le Studio soutient les valeurs de transparence, d’écoute et de professionnalisme pour assurer une réponse de qualité aux besoins de ses clients et offrir une expérience humaine enrichissante.

Tout le travail du Studio se concentre sur les besoins et les valeurs de ses clients pour trouver une solution harmonieuse à leur demande.

Un site internet pour le Studio miroir ?

Avant de me contacter, le Studio Miroir ne possédait pas de site internet et souhaitait pouvoir être découvert via les moteurs de recherche. Par conséquent, on m’a demandé d’adapter des maquettes pour ordinateur préalablement conçues par le studio en un site internet.

Les besoins graphiques sont assez techniques car le studio souhaite se démarquer dans le secteur en apportant une « touche graphique » originale.

Quelles réponses aux besoins techniques ?

Afin de réaliser le site internet, j’ai utilisé le CMS WordPress et conçu un thème FSE (Full Site Editing) complètement sur mesure.

Le site s’adapte aux différents supports numériques (responsive) et est facilement modulable avec de nouvelles technologies (plugin, blocs Gutenberg, etc.).

L’éditeur est adapté aux besoins de la charte graphique et chaque couleur, espacement ou bloc présent sur celles-ci sont intégrés avec soin pour que chaque éléments puissent être réutilisé sur n’importe quelle page du site internet afin d’offrir une expérience de saisie agréable au Studio.

Gutenberg pour l’Animation de titres et de formes

Le site internet possède quelques particularités, notamment deux éléments pour lesquels il a fallu quelques heures de recherche et d’expérimentation. La première demande est l’animation de certains titres au chargement des pages sur lesquelles ils se trouvent et la seconde est de pouvoir animer une « forme » de manière la plus naturelle et fluide possible ; il faut que la forme puisse être adaptée aux couleurs de la maquette et qu’il soit possible d’y insérer une image manuellement. Voici les résultats ci-dessous :

Animation des titres du studio miroir
Animation d'une forme du studio miroir

Pour répondre à ces demandes, j’ai créé deux blocs sur l’éditeur Gutenberg : un bloc « Forme » et un bloc « Titre animé« . Pour réaliser la forme, j’ai utilisé la librairie D3.js afin de générer aléatoirement des formes et les faire transitionner de l’une à l’autre de manière « naturelle » et dite « morphique ». Pour les titres, je convertis simplement mon texte en image aux formats vectoriels sur lequel j’anime l’apparition des contours de chaque lettre, puis leur couleur de fond.

Je suis satisfait du résultat car je trouve les méthodes utilisées simples et élégantes.

Contactez-moi pour évaluer votre projet

Si vous êtes intéressé par mon travail et que vous souhaitez me contacter pour évaluer ensemble votre projet, n’hésitez pas à vous rendre sur la page de contact en utilisant le bouton ci-dessous :