Site portfolio et boutique pour un artiste peintre : unfocus.art

Un peintre voulait montrer ses toiles en grand, vendre l'original comme les reproductions, et parler à des visiteurs de cinq langues. Le site est en noir et crème, avec une seule police : la couleur n'appartient qu'aux tableaux. Voir unfocus.art

unfocus.art
Page d'accueil du site unfocus.art : une toile en plein écran sur fond noir, le titre « Unfocus Art » en lettres espacées, et une navigation sobre vers les œuvres et les expositions.
Unfocus Art, peintre, catalogue d'œuvres et vente en ligne. Capture du site en ligne. unfocus.art

Le client : un peintre qui travaille la matière et le relief

MORIS peint à l'acrylique et au pastel sur toile, en abstrait contemporain, avec du relief et de la texture. Il se présente comme un sculpteur d'émotions, et sa biographie tient dans des phrases qu'il a écrites lui-même : il peint des tempêtes dans des formats trop petits pour les contenir, et se dit un grain de sable dans le rouage. Il expose régulièrement, vend des originaux, et travaille sur commande.

  • Ses toiles sont regroupées en séries qu'il nomme lui-même, et une série s'ouvre à mesure qu'il peint. Le site en compte deux aujourd'hui, sur dix-sept œuvres et quatre expositions documentées.
  • Une toile ne se vend qu'une fois. Une reproduction se vend autant de fois qu'on veut. Le même objet devait donc porter deux natures de commerce très différentes sans jamais devenir confus pour le visiteur.
  • Ses visiteurs ne parlent pas tous français : il fallait servir le site en cinq langues, et sans perdre en route le titre des œuvres, qui fait partie de l'œuvre.
  • Une bonne partie du public arrive par un code à scanner affiché en salle d'exposition, donc sur un téléphone, debout, devant la toile réelle.

La direction artistique : le système s'efface pour laisser voir

Sur un site de peintre, chaque choix de couleur du site entre en concurrence avec les tableaux. La règle qu'on a posée dès la première maquette est donc radicale, et écrite noir sur blanc dans le dossier de design du projet : l'œuvre est la seule source de couleur. Quatre couleurs, une typographie, de l'espace.

  1. Noir et crème, et rien d'autre

    Ce qu'on voit
    Le site est en noir profond, avec un texte crème qui n'est pas un blanc pur. Le seul autre ton est un gris employé pour dire qu'une œuvre est vendue. Un visiteur qui préfère le mur blanc de galerie peut basculer le site en clair, et son choix est retenu pour ses prochaines visites : le crème devient alors le fond et le noir devient l'encre, la même couleur retournée.
    Pourquoi ça lui va
    Une toile abstraite pleine de rouges et d'ocres perd la moitié de sa force posée sur un fond coloré. En noir, elle brille comme dans une salle éclairée en ponctuel. Et le crème plutôt que le blanc pur évite le contraste vibrant qui fatigue les yeux quand on regarde longtemps.
    • #000000 Noir fond du site en mode sombre
    • #FFF9F1 Crème texte et filets, et fond du site en mode clair
    • #222222 Noir adouci surfaces alternées, sans rompre le fond
    • #666666 Gris vendu la seule couleur d'état : une œuvre vendue
    La palette du site, relevée sur les pages en ligne.
  2. Une seule police, dans deux graisses

    Ce qu'on voit
    Tout le site est écrit dans la même famille, un caractère fin aux airs d'Art déco, élégant sans être décoratif. Une graisse pour le contenu, une pour les éléments d'action, et c'est tout. La hiérarchie se fait par la taille et par l'espace, jamais par le gras.
    Pourquoi ça lui va
    Neuf polices ont été essayées en maquette sur la page d'accueil avant de retenir celle-là, parce que son dessin prolonge l'univers de l'artiste sans imiter sa peinture. Deux polices auraient créé un dialogue typographique, or le seul dialogue qui doit exister sur cette page est entre la toile et le visiteur.
    • Tenor Sans

      toute la page, en deux graisses seulement

      The Awakening

    Spécimen composé dans la police du site, réglages compris. Selon ta machine, le navigateur peut lui substituer la police de repli prévue.
  3. Le mur de galerie : pas de coins ronds, pas d'ombres, beaucoup de vide

    Ce qu'on voit
    Aucun conteneur n'a de coin arrondi, aucun élément d'interface n'a d'ombre portée, et les marges sont larges. Les titres et les micro-libellés en capitales ont un interlettrage volontairement ouvert.
    Pourquoi ça lui va
    Les coins ronds et les ombres douces sont le vocabulaire des applications, et ils transforment une toile en vignette de produit. On voulait l'inverse : un accrochage. C'est aussi ce qui fait que la texture visible sur les toiles reste la seule matière de la page.
  4. Le cadre épouse la toile, jamais le contraire

    Ce qu'on voit
    Chaque image est affichée dans les proportions réelles du tableau, calculées à partir de ses dimensions en centimètres. Une toile carrée s'affiche carrée, une toile haute s'affiche haute, et rien n'est recadré, y compris dans le zoom plein écran.
    Pourquoi ça lui va
    Une galerie qui force toutes les œuvres dans des vignettes de même format ment sur le corpus, et coupe systématiquement les bords des formats les plus intéressants. Le format d'une toile est une décision du peintre, et le site n'a pas à la corriger.
    unfocus.art/fr/works
    La page des œuvres d'unfocus.art sur fond noir : chaque cadre prend la proportion de sa toile, une panoramique en trois panneaux occupe une cellule large là où les portraits en occupent une étroite, et sous chaque œuvre figurent ses dimensions en centimètres et son année.
    Ouvrir unfocus.art/fr/works
  5. Le pied de page se révèle sous la page, comme un rideau

    Ce qu'on voit
    Le contenu principal est une surface opaque posée au-dessus, et le pied de page apparaît en dessous quand on arrive en fin de parcours, avec la seule ombre autorisée du site, presque imperceptible.
    Pourquoi ça lui va
    C'est le petit geste qui rappelle qu'on est dans un lieu et pas dans un document, sans ajouter une seule animation de contenu. Le reste du site ne bouge pas : ce qui bouge, c'est le regard.
    unfocus.art/fr/works
    Le bas de la page des œuvres d'unfocus.art : la grille des toiles s'arrête net, et le pied de page apparaît en dessous, séparé du contenu par une lueur à peine visible. On y lit le nom Unfocus Art, la navigation et les contacts.
    Ouvrir unfocus.art/fr/works

Pourquoi ce projet existe

Un peintre qui vend par une place de marché ou une galerie en ligne cède une part de chaque vente, à vie, sur des pièces qui se comptent parfois en centaines d'euros. Et il n'a pas la main sur la façon dont son travail est montré. Il voulait son propre lieu, ses prix, son encaissement, et la possibilité de marquer une toile vendue sans avoir à demander à personne.

  • Une même œuvre apparaît dans la galerie, dans la boutique, sur la page de l'exposition où elle était accrochée, dans le balisage lu par les moteurs de recherche et dans le plan du site. Décrite à cinq endroits, elle finit fausse à quatre.
  • Les visiteurs d'exposition scannent un code affiché en salle et laissent un avis depuis leur téléphone, sur l'exposition ou sur une œuvre précise. L'artiste relit avant publication : c'est sa maison, il garde la main sur ce qui s'y affiche.
  • Il fallait vendre sans monter une machine logistique : un original par toile, des reproductions illimitées, et un artiste qui emballe et expédie lui-même.
  • Le catalogue bouge à chaque exposition. Ajouter une œuvre devait rester une opération d'atelier, pas un ticket à envoyer à un prestataire.

Les détails qui font la différence

Voici les 12 touches qu'un modèle de site acheté sur étagère n'aurait jamais produites pour Unfocus Art, parce qu'elles ne se déduisent pas d'un secteur d'activité : elles se déduisent d'une conversation avec quelqu'un qui connaît son métier.

  • La légende est un cartel de musée, dans les cinq langues

    Sous chaque œuvre, la légende énonce le titre, la technique, les dimensions, le nom de l'artiste et de sa marque, l'année et la série. Elle est composée langue par langue avec les conventions typographiques locales : les guillemets français en chevrons, ceux du russe, le mot collection écrit correctement en espagnol et en portugais. Ce n'est pas une chaîne de caractères traduite à la va-vite, c'est un cartel réécrit dans chaque langue.

    Français

    Acrylique et pastels sur toile, 25 × 25 cm (3 panneaux), MORIS · Unfocus Art, 2025, collection En lumière

    English

    Acrylique et pastels sur toile, 25 × 25 cm (3 panels), by MORIS · Unfocus Art, 2025, En lumière collection

    Español

    Acrylique et pastels sur toile, 25 × 25 cm (3 paneles), por MORIS · Unfocus Art, 2025, colección En lumière

    Português

    Acrylique et pastels sur toile, 25 × 25 cm (3 painéis), por MORIS · Unfocus Art, 2025, coleção En lumière

    Русский

    Acrylique et pastels sur toile, 25 × 25 cm (3 панели), MORIS · Unfocus Art, 2025, коллекция «En lumière»

  • La signature de l'artiste voyage à l'intérieur des fichiers d'image

    Chaque image du site porte, écrites dans le fichier lui-même, la mention d'auteur, le titre, la description et les droits, au format des métadonnées photo professionnelles. Quand quelqu'un enregistre l'image depuis son navigateur et la republie ailleurs, le nom du peintre part avec elle. C'est le genre de précaution qu'aucune plateforme ne prend pour un artiste, parce que ce n'est pas son intérêt.

  • Le texte alternatif est écrit pour les gens, pas pour les moteurs

    La description lue par un lecteur d'écran est plafonnée en longueur et coupée sur un mot entier, avec une garantie : même dans sa version la plus courte, le nom de l'artiste et celui de sa marque ne disparaissent jamais. Un visiteur non voyant apprend donc toujours qui a peint ce qu'il écoute.

  • Une toile vendue affiche le mot vendu, pas un prix barré

    Sur la vignette, le prix est remplacé par la mention en capitales, dans un gris discret. Pas de prix rayé, pas de bandeau rouge, pas de mention « épuisé ». Une œuvre vendue reste une œuvre à regarder, et l'annonce de sa vente ne doit pas ressembler à une fin de série en magasin.

  • Le triptyque est traité comme un triptyque

    Une des œuvres du catalogue est en trois panneaux. Le site le sait : elle s'affiche en trois volets côte à côte, séparés d'un interstice fin, chacun avec sa propre description qui précise de quel panneau il s'agit, et chacun zoomable indépendamment. La page de reproduction reprend ce découpage. Aucune boutique en ligne générique ne sait faire ça, parce que pour elle une œuvre est un produit avec une image.

    1. Panneau gauche

      Son propre fichier, sa propre description, son propre zoom plein écran.

    2. Panneau central

      Le volet du milieu, séparé des deux autres par un interstice fin.

    3. Panneau droit

      Chaque volet peut aussi se commander seul en reproduction.

  • Le zoom floute le site autour de l'œuvre

    Le plein écran s'ouvre dans une fenêtre native du navigateur, l'arrière-plan se floute, le défilement de la page se verrouille, et l'image n'est jamais recadrée. On sort du site pour entrer dans la toile, puis on y revient d'un clic, d'une croix ou de la touche d'échappement.

  • On ne perd jamais sa place dans la galerie

    Les œuvres se filtrent par disponibilité, par série et même par forme, carrée ou rectangulaire, ce qui est une façon très concrète de chercher un tableau quand on a un mur précis en tête. Quand on ouvre une œuvre puis qu'on revient en arrière, les filtres sont exactement comme on les avait laissés.

  • Les séries se déclarent en peignant, pas en configurant

    La liste des séries proposées dans les filtres n'est écrite nulle part : elle est déduite des œuvres réellement publiées. L'artiste nomme la série d'une nouvelle toile, et la série apparaît dans la navigation. Le jour où il n'en reste plus une seule visible, elle disparaît d'elle-même.

  • L'original et la reproduction ne suivent pas le même chemin

    Deux boutons distincts, deux parcours. L'original se paie dans une fenêtre qui s'ouvre par-dessus la page de l'œuvre, sans jamais quitter la toile des yeux. La reproduction mène à une page dédiée où l'on choisit sa taille. Et une toile vendue continue de proposer ses reproductions, parce que la disponibilité de l'original ne dit rien de celle des tirages.

  • Un client qui a payé voit sa commande confirmée, quoi qu'il arrive

    La confirmation d'une commande peut arriver par deux chemins, et les deux aboutissent au même endroit, qui ne peut s'exécuter qu'une seule fois. Autrement dit : personne ne reçoit deux courriels, personne ne vend deux fois la même toile, et un acheteur dont la notification bancaire s'est perdue en route obtient quand même sa confirmation. Sur des pièces uniques à plusieurs centaines d'euros, c'est ce détail invisible qui évite un appel gênant.

  • Les anciennes adresses de pages continuent de fonctionner

    Les liens partagés avant la refonte de la structure du site redirigent vers leurs nouvelles adresses. Un message envoyé il y a un an dans une conversation, ou un lien collé sous une publication, ouvre toujours la bonne page.

  • Les mentions légales sont écrites pour un artiste

    Elles rappellent que les œuvres présentées sont protégées et que leur reproduction ou leur usage commercial est interdit sans l'accord de l'artiste, et elles le disent dans les cinq langues du site. Ce n'est pas un modèle recopié : c'est le seul paragraphe juridique qui compte vraiment quand on met des toiles en ligne.

Ce qu'on a adoré sur ce projet

Ce qu'on retient de ce chantier, à froid.

  • Avoir le droit de tout enlever

    Un client qui accepte le noir et crème, une seule police et beaucoup de vide, ça n'arrive pas si souvent. C'est de loin la contrainte la plus stimulante qu'on ait eue : chaque élément ajouté devait justifier qu'il ne volait pas l'attention aux toiles.

  • Chercher longtemps la bonne police

    Neuf familles essayées sur la même page d'accueil, comparées côte à côte, jusqu'à en garder une. C'est un travail lent, presque invisible dans le résultat, et c'est pourtant ce qui fait que le site a un âge et un caractère plutôt qu'un air de gabarit.

  • Écrire la paternité dans les fichiers

    Passer un après-midi sur les métadonnées d'images pour que le nom du peintre reste attaché à ses œuvres même hors de son site, ça ne se voit sur aucune capture d'écran. C'est exactement le genre de soin qu'on aime rendre à quelqu'un qui vit de ce qu'il fabrique.

  • Explorer cinq directions avant de trancher

    Le projet a démarré par cinq maquettes de sites radicalement différents, dont un musée en trois dimensions dans lequel on se déplaçait vraiment. Les cinq ont été construites assez loin pour être jugées sur pièces plutôt que sur un joli dessin. Une seule est allée en production, et les quatre autres ont servi à comprendre pourquoi.

Ce qu'on n'a pas fait, et pourquoi

Un site se juge autant à ce qu'il refuse qu'à ce qu'il contient. Chaque fonctionnalité en plus est une chose de plus à comprendre pour le visiteur, et une promesse de plus à tenir pour Unfocus Art. Voici ce qu'on a écarté, et ce qui nous ferait changer d'avis.

  • Pas de place de marché ni de galerie en ligne tierce.

    L'artiste encaisse sur son propre compte, avec ses prix. Une plateforme apporte de la visibilité et prend sa part sur chaque vente, à vie. Sur des pièces uniques, cette part se compte en centaines d'euros par toile, et elle ne cesse jamais.

  • Pas de musée virtuel en trois dimensions.

    C'était l'une des cinq pistes maquettées au démarrage, et elle est restée une maquette. Elle demande de télécharger un moteur 3D et d'apprendre une façon de se déplacer que personne ne connaît, pour un besoin qui reste de regarder une toile en grand. Les visiteurs venaient voir de la peinture, et une bonne partie d'entre eux arrive sur un téléphone, en salle d'exposition.

  • Pas de traduction automatique des titres et des textes.

    Un titre d'œuvre ou un texte de série passé à la machine se repère immédiatement, et il abîme exactement ce qu'on est venu montrer. Les cinq langues passent donc par des textes écrits, où la devise de l'artiste est retraduite en sens plutôt que mot à mot.

  • Pas de gestion de stock ni d'expédition automatisée.

    Un original par toile, des reproductions illimitées : il n'y a rien à décompter. Le site encaisse et prévient l'artiste, qui emballe et poste lui-même. Monter une machine logistique pour dix-sept œuvres aurait coûté plus cher que les toiles.

  • Pas de script de mesure d'audience extérieur.

    Les visites sont comptées dans la base du site. Personne d'autre n'a besoin de savoir qui regarde quelle toile, et surtout pas une régie publicitaire.