Le site de l'atelier, validé par un chat : alysis.cat

Le site que tu lis en ce moment. Le client est Aribo, le chat de l'atelier, inspecteur des travaux finis. Voici l'univers qu'on s'est donné, les partis pris de style qu'on s'impose à nous-mêmes, et les détails qu'aucun modèle ne nous aurait fournis. Voir alysis.cat

Parler de ton projet
alysis.cat
Page d'accueil du site alysis : fond crème texturé, grand titre en serif italique, accents terre cuite et pictogrammes en pixel art.
alysis, atelier web, deux artisans et un chat. Capture du site en ligne. alysis.cat

Le client : Aribo

Aribo est le troisième membre de l'atelier. Sa fiche de poste dit inspecteur des travaux finis, et elle est exacte. Il ne code pas, il ne rédige pas, il ne répond pas aux courriels : il juge. Sur les cinq compétences que nous lui reconnaissons, quatre sont au maximum, dont l'orgueil et la sieste. L'empathie est à un. C'est le client le plus exigeant que nous ayons eu, et le seul qui ne paie pas.

  • Il valide en s'asseyant sur le clavier. Un site qui survit à un chat de quatre kilos posé sur la barre d'espace pendant une démonstration est un site raisonnablement robuste.
  • Son tampon d'approbation existe vraiment et il est dans le site, sur une page cachée qu'il faut trouver. Il dit « approuvé par Aribo, qualité atelier alysis ». Nous ne l'apposons pas à la légère.
  • Il est aussi le visage de nos pages d'échec. La page introuvable s'ouvre sur « Aribo a encore fait des siennes », et la page de désinscription le montre en train de tamponner une enveloppe. Quand quelque chose se passe mal sur ce site, quelqu'un en porte la responsabilité, et ce n'est jamais le visiteur.
  • Plus sérieusement, se prendre soi-même comme client est le seul projet où l'on ne peut pas se cacher derrière un brief. Il n'y a personne pour arbitrer nos désaccords de goût, et personne pour nous empêcher de tout refaire. Il fallait un client. Il dormait sur le canapé.

À la croisée entre atelier de menuisier et jeu vidéo de 1995

On répare des sites d'artisans, on fabrique à la main, et on assume de venir du numérique. La direction artistique tient dans cette rencontre : un papier crème qui a l'air d'avoir traîné sur un plan de travail, une serif un peu grasse et volontiers italique, et des pictogrammes en pixels comme sur un écran d'il y a trente ans.

  1. Un fond de papier, jamais un fond blanc

    Ce qu'on voit
    La page est crème, avec une seconde nuance de crème plus claire pour les sections en relief, un grain horizontal presque invisible et un halo chaud dans un angle. L'encre est un brun très sombre, pas un noir.
    Pourquoi ça lui va
    Un blanc pur avec du texte noir, c'est un écran. Un crème avec de l'encre brune, c'est une page. Comme on parle à des gens qui travaillent la matière, il fallait que le site ait lui aussi une matière, sans pour autant coller une texture de fausse feuille froissée par-dessus.

  2. Une palette sobre mais reconnaissable

    Ce qu'on voit
    Deux accents seulement : une terre cuite pour l'action et le trait, un vert de forêt pour les fonds sombres et les respirations. Aucune autre couleur n'a le droit d'entrer, y compris dans les nouvelles pages.
    Pourquoi ça lui va
    Une palette courte oblige à réfléchir à chaque bouton plutôt qu'à piocher dans un nuancier. Et elle finit par appartenir à la marque : une capture d'écran de notre site se reconnaît au premier coup d'oeil, même floutée.
    • #ebe3d2 Crème le fond de page, notre papier
    • #f3ecdd Crème clair les sections en relief posées dessus
    • #2b2217 Encre brune le texte, jamais un noir pur
    • #a14a28 Terre cuite l'accent d'action, les traits et les ombres dures
    • #3d5a3d Vert forêt les fonds sombres, les accents et les respirations
    La palette du site, relevée sur les pages en ligne.

  3. Une serif variable, réglée au-delà de la graisse

    Ce qu'on voit
    Les titres sont dans une serif variable dont on ne pilote pas seulement l'épaisseur : on ouvre son axe d'adoucissement pour arrondir les terminaisons, et on la règle sur sa taille optique d'affichage. Les emphases dans les titres passent en italique. Le texte courant est dans une sans serif neutre, et les détails techniques dans une police à espacement fixe.
    Pourquoi ça lui va
    À grande taille, cette serif referme ses contrepoinçons et les lettres se bouchent. En ouvrant cet axe, un « e » reste un « e » sur un titre de cent pixels. C'est le genre de réglage que personne ne remarque, et qui fait toute la différence entre un titre qui respire et un titre qui bave.

    • Fraunces, axe SOFT ouvert à 50

      les titres, réglés sur la taille optique d'affichage

      Le geste, pas le gabarit

    • Inter

      le texte courant

      On fabrique des sites sur-mesures pour des indépendants et artisans.

    • DM Mono

      les détails techniques

      jeudi 9h30 · grille 24 × 24 px

    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.

  4. Zéro coin arrondi, dans tout le site

    Ce qu'on voit
    Aucun angle n'est adouci, ni sur les cartes, ni sur les boutons, ni sur les images. Y compris dans le module de réservation de rendez-vous, qu'on a reconfiguré pour qu'il perde ses coins ronds et adopte nos couleurs.
    Pourquoi ça lui va
    Les coins ronds sont le tic d'époque des applications. Un angle net, c'est une planche sciée droit. Et laisser un outil tiers imposer son arrondi au milieu d'une page nette, c'est exactement le genre de détail qui trahit un site assemblé plutôt que dessiné.
    Ce qu'on regarde
    Rayon appliqué
    Cartes et encadrés
    0
    Boutons
    0
    Images et captures
    0
    Champs de formulaire
    0
    Module de rendez-vous
    0
    Ce tableau est bâti comme celui de l'accueil, et ses quatre coins sont des pixels posés un par un : regarde-les venir se placer.

  5. Des ombres dures, décalées, en terre cuite

    Ce qu'on voit
    Les éléments en relief ne portent pas une ombre floue grise mais un bloc de couleur franc, décalé de quelques pixels vers le bas et la droite, sans aucun dégradé.
    Pourquoi ça lui va
    C'est le relief des sérigraphies et des vieilles interfaces, et il fonctionne à toutes les tailles d'écran sans jamais se salir. Une ombre floue simule une lumière qui n'existe pas. Celle-là ne prétend rien : elle décale, c'est tout.

    • Ce qu'on pose

      un bloc de terre cuite décalé de 6 px, franc à toutes les tailles

    • Ce qu'on écarte

      un gris diffus, qui simule une lumière inexistante

    L'ombre du site, à sa couleur et à son décalage réels. Survole l'échantillon de gauche.

  6. Des pictogrammes en pixels, affichés en pixels

    Ce qu'on voit
    Toutes les icônes du site viennent de pixelarticons, un jeu de pictogrammes en pixel art sous licence MIT, dessinés dans une grille de vingt-quatre par vingt-quatre. On les héberge dans le projet plutôt que de les charger depuis un service, et on les affiche sans lissage pour que les pixels restent carrés.
    Pourquoi ça lui va
    Ces icônes disent d'où on vient sans avoir à l'écrire. Elles amènent aussi une forme de modestie utile : à côté d'un pictogramme de jeu vidéo, une page ne peut pas se prendre trop au sérieux, et c'est le ton qu'on cherche.
    alysis.cat
    Accueil d'alysis : fond crème texturé, grand titre en serif italique, accents terre cuite, et des pictogrammes en pixel art affichés sans lissage, pixels bien carrés.
    Ouvrir alysis.cat

Pourquoi ce projet existe

Un atelier qui vend des sites faits main n'a pas le droit d'avoir un site acheté sur étagère. C'est la seule raison qui compte, et elle suffit. La difficulté est ailleurs : notre offre est inhabituelle, et une offre inhabituelle ne rentre pas dans un gabarit d'agence.

  • On laisse le client fixer le prix de son site, avec des repères. Aucun modèle de site d'agence ne prévoit ça : les grilles de tarifs livrées avec les gabarits supposent toutes trois formules à colonnes et un bouton d'achat.
  • On ne prend que trois projets à la fois, et on le dit. Il fallait donc une façon de montrer honnêtement que l'atelier est plein, ou qu'une place est libre, plutôt qu'un formulaire toujours ouvert.
  • On travaille en public. Le site devait pouvoir montrer le chantier en cours, pas seulement les projets terminés et repassés au fer.
  • Et il fallait un endroit pour tenir notre propre doctrine : ce qu'on refuse de faire, pourquoi le code appartient au client, pourquoi l'hébergement est un choix et pas une laisse.

Les détails qui font la différence

Voici les 8 touches qu'un modèle de site acheté sur étagère n'aurait jamais produites pour alysis, 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 page secrète, et son compteur tenu à la main

    Il y a une page cachée dans ce site. Elle porte le tampon d'Aribo, elle donne un code de réduction, et elle annonce combien de personnes l'ont trouvée avant toi. Ce compteur n'est pas automatique : on l'incrémente nous-mêmes quand quelqu'un nous écrit. Le jour où les places sont parties, la page le dit et n'offre plus rien. Un compteur qui se met à jour tout seul serait plus propre, et beaucoup moins amusant à tenir.

  • Le chantier en cours, en direct depuis nos dépôts

    La page atelier affiche les vrais derniers travaux poussés sur les projets en cours, jour par jour. Ce ne sont pas des captures d'écran mises à jour à la main tous les six mois : c'est le journal réel du travail. Et si les projets en cours sont au nombre de deux, la troisième fenêtre affiche « ton projet ? », parce qu'une place libre est une information plus utile qu'un logo de plus.

  • La validation du site, comme une réception de chantier

    En fin de chantier, chaque client reçoit une page qui n'appartient qu'à lui, où il valide son site étape par étape et laisse un mot, écrit ou enregistré à la voix. C'est le procès-verbal de réception, transposé au web. Il n'y a pas de bouton « le projet est terminé » du côté de l'atelier : c'est le client qui coche.

  • Une fiche de personnage par artisan, statistiques comprises

    L'équipe n'est pas présentée en photos de profil sur fond gris avec un intitulé de poste. Chaque membre a une fiche façon jeu de rôle, avec sa classe, sa biographie et ses compétences notées. Aribo y figure au même titre que les humains, et ses notes sont sévères pour les humains autant que pour lui.

  • Les polices sont chez nous, et chargées avant le premier regard

    Aucune police n'est appelée chez un tiers : elles sont dans le projet, et les trois fichiers nécessaires au premier écran sont réclamés en priorité par le navigateur, l'italique compris parce que le grand titre en contient. Résultat, le texte n'apparaît pas deux fois de suite dans deux dessins différents. Un artisan dont le site clignote à l'ouverture perd la moitié du bénéfice de son beau titre.

  • Le prix se lit avant le formulaire

    Il n'y a pas de « demandez un devis » à la place des prix. Les repères sont écrits, le principe du prix libre est expliqué, et les compléments ont des tarifs fixes annoncés d'avance. On peut donc décider si l'atelier est pour soi sans jamais nous parler. C'est l'exact inverse d'un tunnel de vente, et c'est volontaire.

    Avant

    Ailleurs : demandez un devis

    Un formulaire à remplir avant de savoir si c'est dans tes moyens. Tu laisses ton nom, ton numéro, ton projet, et tu attends un chiffre qu'on ajustera à ta tête.

    Après

    Ici : le prix est écrit

    Le repère du milieu est 512 € HT, avec 256 et 1024 de part et d'autre, pour le même site jusqu'à sept pages. Tu choisis le repère qui te va. Les compléments ont chacun leur tarif fixe, annoncé sur la page.

  • Les outils gratuits, pensés autant pour l'usage que pour le calcul

    Les quatre outils du site ne demandent ni adresse, ni courriel, ni compte : tu ouvres, tu calcules, tu repars. Ils posent leurs questions une par une, et une question déjà répondue reste ouverte, donc tu peux revenir dessus sans repartir de zéro. Les graphiques donnent leur valeur au survol, leurs axes portent leur unité, ils s'utilisent au clavier, et si le JavaScript ne se charge pas, le tableau des mêmes chiffres est déjà là. Un modèle acheté sur étagère livre un formulaire et un résultat. Le temps qu'on passe ici, on le passe sur tout ce qui se produit entre les deux.

  • Même les pages d'échec ont été dessinées

    La page introuvable et la page de désinscription ont chacune leur illustration et leur texte propre. Se désinscrire de nos messages, c'est deux clics, sans culpabilisation et sans questionnaire de sortie. Une page dont on espère qu'elle sera peu visitée mérite quand même d'être bien faite : c'est souvent la seule qu'on retient.

Ce qu'on a adoré sur ce projet

Ce projet est le seul où le client est à la maison.

  • N'avoir personne à convaincre

    Pas de comité, pas de charte imposée, pas de « on peut mettre le logo plus gros ». Juste deux artisans qui se mettent d'accord sur un crème et une terre cuite, et un chat qui tranche en s'asseyant dessus. C'est reposant, et beaucoup plus difficile qu'il n'y paraît.

  • Tenir la blague au sérieux

    Aribo est une vraie plaisanterie, et il est traité avec le même soin que le reste : une illustration à lui, un tampon, une fiche de personnage, une place dans la page d'erreur. Une blague tenue jusqu'au bout n'est plus une blague, c'est une marque.

  • S'imposer nos propres règles

    Zéro coin arrondi, deux accents, aucun bleu, aucune police chez un tiers. Chaque fois qu'on ajoute une page à ce site, on se cogne à nos propres contraintes, et on trouve mieux que ce qu'on aurait fait sans elles. C'est exactement ce qu'on vend aux clients : une contrainte assumée vaut mieux qu'un catalogue d'options.

  • Cacher une page et attendre

    Il y a quelque chose de très satisfaisant à laisser une porte dérobée dans son propre site, puis à recevoir un message de quelqu'un qui l'a poussée. C'est la preuve que le site a été exploré et pas seulement consulté.

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 alysis. Voici ce qu'on a écarté, et ce qui nous ferait changer d'avis.

  • Pas de témoignage, pas de logo de client, pas de note sur cinq étoiles.

    L'atelier est jeune. Fabriquer de la preuve sociale avant d'en avoir est le raccourci le plus tentant du métier, et le plus destructeur : un visiteur qui reconnaît un faux avis ne croira plus rien du reste de la page. On préfère montrer le travail et laisser le lecteur juger.

  • Pas de bandeau de consentement aux cookies.

    Il n'y a rien à faire accepter, parce qu'on ne dépose pas de cookie publicitaire et qu'on ne revend rien. Un bandeau est un péage à l'entrée d'une page : on ne l'installe que quand la loi l'exige vraiment, et ici elle ne l'exige pas.

  • Pas de chat automatique en bas à droite.

    Nous sommes deux. Une bulle qui s'ouvre en promettant une réponse immédiate promet quelque chose qu'on ne peut pas tenir un jour de chantier. Un numéro, un formulaire et un lien de rendez-vous suffisent, et ils disent la vérité sur nos délais.

  • Pas d'animation d'entrée sur chaque section.

    Les blocs qui montent et s'estompent au défilement sont devenus le papier peint du web. Ils retardent la lecture d'une demi-seconde à chaque écran, et cette demi-seconde, sur un site de dix pages, finit par se sentir. Le mouvement est réservé aux endroits où il raconte quelque chose.

Le site est en ligne

Le meilleur moyen de juger ce travail est de l'ouvrir sur ton téléphone.

alysis.cat
Les repères de prix et ce qu’ils couvrent L'étude de cas HolyL'étude de cas Unfocus Art Toutes les réalisations
Réserver 30 min ou écrire à l'atelier