Cristill Rock

À propos de ce concept

Il s’agit d’un concept de design réalisé de notre propre initiative. Nova l’a conçu de façon indépendante pour explorer la manière dont une entreprise d’eau et de café établie depuis trente ans pourrait se présenter en ligne — il n’a pas été commandé, et il n’est ni affilié à l’entreprise qu’il réinvente ni approuvé par celle-ci. Les textes de produits, les prix et le catalogue sont tirés du site web public de l’entreprise; les trois vidéos sont les siennes, intégrées à partir de sa chaîne YouTube. Les photographies d’ambiance sont des images provisoires générées par IA qui tiennent lieu d’une véritable séance photo. Le concept est servi avec la directive noindex afin qu’il ne puisse jamais être confondu avec le site réel ni le devancer dans les résultats de recherche.

Le problème des sites web consacrés à l’eau

Tous les sites d’eau embouteillée recourent aux deux mêmes accessoires : un séparateur en forme de vague entre chaque section et trois cartes de produit identiques. L’original avait les deux. Reproduire cela en plus haute résolution aurait donné une version plus soignée de la même page; la première décision a donc été d’éliminer complètement les séparateurs en vague et de trouver l’histoire qui se cachait dessous.

La thèse : une mesure, pas une ambiance

Ce que cette entreprise vend réellement, c’est un chiffre. Elle distille son eau phare à Cornwall jusqu’à moins de 2 ppm de matières dissoutes totales — un chiffre qu’elle publie, et que presque personne d’autre dans la catégorie ne peut revendiquer. Le site est donc construit comme une descente dans une colonne d’eau : un seul dégradé lié au défilement qui s’assombrit avec la profondeur, perce la surface pour passer aux tons chauds de la torréfaction, du côté café de l’entreprise, puis refait surface pour la section de contact. La profondeur traduit la pureté, et l’échappée vers le café est honnête plutôt que décorative — le café est réellement l’autre moitié de l’entreprise, et non une sous-catégorie de l’eau.

La signature : des matières dissoutes qui s’évacuent

Plutôt que de composer le chiffre en gros caractères avec une petite étiquette — le traitement par défaut de toute statistique — la page affiche un récipient de matières dissoutes en suspension qui s’évacuent à mesure que vous faites défiler la page, jusqu’à ce qu’il ne reste exactement que deux particules. Le chiffre est volontairement subordonné à l’objet. C’est le chiffre publié par l’entreprise elle-même, rendu tangible.

Une hiérarchie portée par la mise en page

Ses trois eaux ne sont pas trois cartes égales. L’une est distillée sur place; les deux autres proviennent de fournisseurs. L’eau distillée a droit à un grand panneau vedette, tandis que les deux eaux provenant de fournisseurs partagent une colonne empilée plus étroite, si bien que la mise en page énonce la hiérarchie avant le texte. Ailleurs, la retenue passe par la couleur : le vert tiré de son logo apparaît dans une seule et unique section — l’histoire de la bouteille consignée — de sorte que la couleur porte elle-même le sens. Une police à empattements apparaît une seule et unique fois, sur l’histoire familiale de 1994, ce qui la fait paraître délibérée plutôt que décorative.

Ses propres images vidéo, sans le surcoût

L’entreprise avait tourné une courte vidéo pour chaque façon d’acheter — passer en magasin, remplir ses propres contenants, se faire livrer — ce qui correspond point par point aux trois options; ces cartes sont donc centrées sur la vidéo. Trois intégrations YouTube actives auraient chargé environ 1,5 Mo de JavaScript du lecteur et déposé des témoins tiers avant même qu’un visiteur demande à regarder quoi que ce soit; chacune est donc une façade à chargement au clic posée sur une image fixe auto-hébergée. Rien n’est demandé à YouTube tant que le bouton de lecture n’est pas enfoncé, et l’intégration passe alors par le domaine sans témoins. Les vignettes publiées comportent toutes des sous-titres incrustés; chaque image d’aperçu est donc recadrée au-delà de la bande de sous-titres, puis recomposée.

Une boutique en ligne bâtie sur le vrai catalogue

Le concept comprend une boutique complète bâtie sur le catalogue actif de l’entreprise — 466 produits répartis dans huit catégories, extraits de l’API JSON qui alimente son catalogue pour invités, avec 416 images de produits auto-hébergées plutôt qu’affichées par lien direct vers son serveur. Elle offre la recherche par nom, code et description, le filtrage par catégorie, un aperçu rapide reprenant les descriptions de produits de l’entreprise, ainsi qu’un panier qui persiste d’une visite à l’autre et qui passe le relais à son véritable système de commande plutôt que de faire semblant d’accepter un paiement.

Deux éléments du flux ont été volontairement laissés de côté. Soixante-dix-neuf produits portent une bannière promotionnelle dont la période était déjà terminée; les afficher aurait présenté des offres expirées comme étant en vigueur. Et les niveaux de stock sont des données d’inventaire internes qui seraient périmées dès leur publication. La boutique affiche les prix courants et aucun stock, et les deux articles sans prix portent la mention « appelez pour connaître le prix » plutôt que 0,00 $.

Pourquoi la boutique est claire

La boutique en ligne quitte la colonne d’eau sombre pour une surface de vente claire. Ce n’était pas un choix de style : chaque photo de produit du catalogue est une prise de vue du produit seul sur fond blanc, et une grille sombre aurait entouré chacune d’une boîte grise. Ce sont les images elles-mêmes qui ont choisi la palette.

Mesuré, pas évalué à l’œil

Le contraste a été mesuré plutôt qu’estimé au jugé. Le bleu de la marque donne 4,17:1 sur du blanc — juste sous le seuil AA — ce qui plaçait chaque prix et chaque libellé de bouton de la boutique sous la barre; le système s’est donc enrichi d’un jeton complémentaire plus foncé, à 5,33:1, pour les petits textes sur surfaces claires, tandis que le bleu d’origine est conservé pour les titres et la décoration. Le dégradé d’eau a été assombri pour la même raison, après que le texte courant eut été mesuré à 4,07:1 là où la page refait surface.

Fonctionnalités clés

• Un seul dégradé continu lié au défilement, qui remplace les séparateurs en vague empilés de l’original

• Récipient de pureté piloté par le défilement, dont les matières dissoutes s’évacuent jusqu’au chiffre publié

• Hiérarchie de produits asymétrique qui distingue ce qui est fabriqué sur place de ce qui provient de fournisseurs

• Boutique en ligne complète de 466 produits bâtie sur le catalogue actif, avec recherche, filtrage, aperçu rapide et panier persistant

• Façades vidéo à chargement au clic — aucun JavaScript ni témoin tiers tant que le visiteur n’appuie pas sur lecture

• Images de produits et images d’aperçu vidéo auto-hébergées, plutôt que de s’appuyer sur la bande passante du client

• Polices variables auto-hébergées servies par l’application, seules les graisses utilisées au-dessus de la ligne de flottaison étant préchargées

• Apparitions pilotées par IntersectionObserver, avec un mécanisme de sécurité indépendant du ticker, de sorte qu’aucun élément ne peut rester coincé à l’état invisible

• Préférence de réduction des animations respectée partout, focus clavier visible, aucun débordement horizontal à partir de 320 px

• Chaque mesure, chaque prix et chaque heure d’ouverture composés dans une police à chasse fixe, pour que les chiffres se lisent comme des données sur les deux pages