01L'intention
J'ai voulu un site qui présente un travail avant de présenter une personne : un lieu blanc, léger et rapide, où la mise en forme reste en retrait au profit des réalisations.
Depuis 2024, j'ai retiré à chaque version ce qui détournait l'attention : le beige, les ombres, les coins arrondis, les effets décoratifs. Ce que je retire compte autant que ce que je conserve.
02Le nom
Imène est mon prénom ; Be, les deux premières lettres de mon nom, Bentifraouine. Je l'ai voulu court, afin qu'il tienne sur un logo comme dans une barre d'adresse, et qu'il se retienne d'un coup d'œil.
J'en détaille l'histoire, ainsi que celle de la couleur et du logo, dans l'article « Pourquoi Imène Be ».
03Les couleurs
J'ai retenu une palette presque entièrement blanche et encre, relevée d'une seule teinte : un violet.
Le violet est la couleur de l'entre-deux : ni le bleu du calme, ni le rouge de l'énergie, mais leur mélange. Mon travail se tient de la même manière entre le code et l'image. Je ne l'emploie qu'en touches mesurées, car une couleur étalée perd sa force.
- Blanc#FFFFFFFond de toutes les pages : il s'efface pour ne laisser voir que ce qui est montré.
- Encre#0C0C0CTexte et grands blocs sombres (studio, portfolio, pied de page). Un noir adouci, moins dur à lire qu'un noir pur.
- Lavande#573A78Teinte d'accent : étoile, repères, survols et numéros.
- Lavande claire#C2B0D6La même teinte sur fond sombre, pour qu'elle reste lisible.
- Brume#F1EBF6Aplat très léger, réservé aux citations et aux respirations.
04La typographie
J'utilise une seule police pour l'ensemble du site : Hanken Grotesk. Ses formes sont géométriques mais douces, sans empattements, et restent lisibles à toutes les tailles. Je l'ai choisie pour ce qu'elle ne fait pas : elle ne cherche pas à se faire remarquer et laisse la place aux réalisations.
Hanken Grotesk
Un trait juste, une page claire.
AaBbCcDdEeFfGg 0123456789
- Mentions légalesExtra-légère · titres
- Un design qui a du sens, un code qui fait la différence.Légère · texte courant
- Sélection de projetsNormale · libellés en capitales
Je ne retiens que ces trois graisses, volontairement fines : elles donnent au texte de l'air et de l'élégance. Une seule police, c'est aussi un seul fichier à charger, donc des pages plus rapides.
Les petites capitales espacées tiennent lieu de libellés et de légendes, à la manière des cartels d'exposition.
Ma signature manuscrite est la seule exception : elle se trace à l'ouverture du site. Elle est le seul élément dessiné à la main, pour qu'une personne se devine derrière l'écran.
05Les formes et les traits
- Des angles droits. Un cadre, une page imprimée, un cartel : tout ce qui entoure une œuvre est droit. Les coins arrondis évoquent plutôt une application ; l'angle droit donne l'impression de rigueur que j'attends d'un travail soigné. Pour la même raison, il n'y a pas d'ombres marquées.
- Des traits fins. Un filet qui se dessine sous un lien au survol : il guide le regard sans alourdir, là où un bouton plein ou un cadre ajouterait du poids.
- Une étoile à huit branches. Je l'ai dessinée pour ce site et je l'ai voulue comme un éclat plutôt que comme une étoile classique à cinq pointes. Elle accompagne chaque titre de section et tourne lentement sur elle-même. C'est le seul motif que je répète : un repère constant suffit.
06L'accueil
J'ai pensé l'accueil comme une succession de chapitres, dans l'ordre des questions d'un visiteur : qui est-ce, que fait-elle, qu'en a-t-elle réalisé, comment la joindre.
- La photographie en plein écran et la signature donnent un visage avant toute explication.
- Le studio, sur fond encre, expose les trois domaines avant les preuves.
- Les projets défilent horizontalement quand on descend la page : chacun a le temps d'exister, plutôt que d'être serré dans une grille.
- Les sites réalisés passent l'un après l'autre : le visiteur les voit tous sans avoir à cliquer.
- Le portfolio en PDF, le parcours et le formulaire de contact concluent.
07Le carnet de bord
Je l'ai conçu comme un index : les articles se succèdent d'eux-mêmes, l'aperçu se met à jour à gauche et un trait violet signale l'article en cours. Le visiteur embrasse ainsi tous les sujets d'un regard, sans avoir à choisir à l'aveugle ; le survol interrompt le défilement pour lui laisser la main.
Dans un article, le titre et le sommaire demeurent fixes à gauche : le contexte reste sous les yeux pendant la lecture, et une barre indique l'avancée. Je valide les commentaires avant leur publication, afin de préserver la qualité des échanges.
08Les illustrations
Je me suis inspirée des pages d'œuvres des galeries. Chaque dessin est présenté entier, sans recadrage, car un dessin recadré est un dessin trahi ; son titre et sa technique figurent à côté, comme sur un cartel. Une fiche en plein écran, dotée d'une loupe, permet d'examiner le trait de près.
09Les finitions
Quatre exigences guident mes finitions :
- La rapidité, parce qu'une page qui tarde est une page que l'on quitte : une police unique, des images allégées et seulement les animations utiles.
- Le clavier : l'ensemble du site se parcourt sans souris, afin que chacun puisse l'utiliser.
- Les préférences de l'appareil : les animations sont réduites lorsque celui-ci le demande.
- Le téléphone : chaque page est conçue pour le petit écran avant d'être agrandie, car beaucoup de visiteurs la liront sur un petit écran.
Cette note décrit la version actuelle du site ; elle évolue avec lui.