Aller au contenu
vortexsites

Exemples

Des sites qui s'ouvrent vraiment.

Chacun de ces sites est complet et se visite en entier, sur ordinateur comme sur téléphone. Ils sont sortis de la même chaîne que celui qu'on vous livrerait.

Les commerces présentés sont inventés.

Aucun n'est le site d'un client. Les sites, eux, sont réels : construits par notre chaîne, avec les mêmes contrôles d'accessibilité et de performance. Le jour où un client acceptera d'être montré ici, son nom et l'adresse de son site seront écrits en toutes lettres.

Pourquoi des démonstrations et pas des clients ?

Parce que nous démarrons, et qu'un portfolio garni de faux clients est le premier mensonge d'une agence. Nous préférons celui-ci : des sites réels, sur des commerces inventés, dits comme tels.

Un site de démonstration n'est pas une maquette : c'est un site complet, construit avec la même chaîne, les mêmes contraintes d'accessibilité et les mêmes vérifications automatiques que celui que nous vous livrerions. Vous pouvez l'ouvrir, le parcourir, le regarder sur votre téléphone.

Une chose diffère, et il faut la dire : les coordonnées de ces commerces sont inventées, puisque les commerces le sont. Les numéros de téléphone appartiennent aux plages que l'Arcep réserve aux œuvres de fiction (ils ne sonnent chez personne), et les adresses e-mail utilisent le domaine example.com, réservé au même usage. Sur le site d'un vrai client, une donnée manquante n'est jamais inventée : elle reste marquée « à confirmer » jusqu'à ce qu'il nous la donne.

Secteurs : restauration, artisanat, commerce et réparation. D'autres métiers arrivent, avec la même étiquette.

Les sites

  • Démonstration Chez Marcelle sur un écran d'ordinateur : une photographie de salle de bistrot aux tons vin à gauche, et à droite le grand titre « Chez Marcelle, bistrot de quartier », son texte d'introduction et deux boutons.
    Démonstration Restauration

    Chez Marcelle

    Bistrot de quartier, cuisine de marché (commerce inventé)

    Un bistrot dont la carte change toutes les semaines. Ce que les clients cherchent avant de venir : lire le menu du moment et pouvoir réserver sans créer de compte.

    • Le menu de la semaine se lit dans la page, pas dans un PDF à télécharger.
    • Le bouton de réservation compose le numéro : aucun formulaire, aucun compte.
    • Deux photos libres de droits, retravaillées dans la palette du site. Aucune photo de plat : on ne montre pas une assiette qu'on ne sert pas.
    Ouvrir le site de Chez Marcelle, dans un nouvel onglet 3 pages, ouvertes dans un nouvel onglet
    Comment ce site a été décidé

    La direction

    Chaleureuse et généreuse, du côté du bistrot de quartier plutôt que de la table gastronomique. Titres en Fraunces, une serif qui a du gras et de la personnalité ; textes en Inter Tight, qui reste lisible en petit.

    • Vin
    • Cuivre
    • Encre
    • Crème

    Le geste propre à ce site

    Un liseré festonné de store banne, dessiné en SVG couleur vin, souligne le bas du hero et sépare chaque section : c'est l'auvent du bistrot, transposé en bordure de page.

    Trois décisions

    Le menu se lit dans la page
    La carte de la semaine est du texte HTML, pas un PDF à télécharger. Elle s'ouvre en un instant sur un téléphone, et Google la lit.
    Des photos, mais pas de plats
    Le commerce n'avait pas de photos : celles de la page sont libres de droits, tirées dans le vin et le crème du site pour qu'elles n'aient pas l'air empruntées. Une salle et du bois, jamais une assiette dressée : montrer un plat qu'on ne sert pas est le mensonge le plus courant du secteur.
    Réserver par téléphone
    La réservation passe par un appel, comme au comptoir. Le bouton compose le numéro, sans compte à créer ni formulaire à remplir.

    Ce qu'on a écarté

    • La palette noir et or des steakhouses premium : ce n'est pas ce bistrot.
    • La photo de plat en plein écran derrière le titre.
    • Le menu proposé en PDF à télécharger.
    • Toute musique ou vidéo qui démarre seule.
  • Démonstration Atelier Bernard sur un écran d'ordinateur : le nom de l'atelier en haut à gauche, quatre liens de menu, un bouton « Nous contacter », puis un grand titre en serif « Atelier Bernard, menuisier depuis 1997 », une phrase de présentation et deux boutons, sur un fond crème très clair.
    Démonstration Artisanat

    Atelier Bernard

    Menuiserie sur mesure, escaliers et agencements (commerce inventé)

    Un atelier de menuiserie qui travaille sur mesure, du dessin à la pose. Ses clients veulent savoir ce qu'il sait faire, depuis quand, et jusqu'où il se déplace.

    • Trois savoir-faire présentés séparément, plutôt qu'un texte unique où tout se mélange.
    • Des repères chiffrés vérifiables : l'année de fondation, la distance des scieries.
    • L'atelier n'avait pas de photos : celles de la page sont des photos libres de droits, retravaillées dans la palette du site pour qu'elles n'aient pas l'air empruntées.
    Ouvrir le site de Atelier Bernard, dans un nouvel onglet 3 pages, ouvertes dans un nouvel onglet
    Comment ce site a été décidé

    La direction

    Sobre et posée, du côté de l'artisan précis plutôt que du décorateur. Titres en serif, texte en sans-serif étroite. Un brun de bois pour les actions, un bleu ardoise en contrepoint, le tout sur un fond papier qui ne fatigue pas à la lecture.

    • Bois
    • Ardoise
    • Encre
    • Papier

    Le geste propre à ce site

    Un motif de chevrons très pâle en fond du hero : le parquet à bâtons rompus, réduit à sa trame, si discret qu'on le prend pour une texture de papier.

    Trois décisions

    Le métier avant l'atelier
    La page ouvre sur ce qu'il fabrique, pas sur son histoire. L'histoire vient après, une fois que le visiteur sait s'il est au bon endroit.
    Des chiffres qu'on peut vérifier
    L'année de fondation et la distance des scieries remplacent les adjectifs. « Depuis 1997 » se vérifie ; « artisan passionné » ne veut rien dire.
    Des photos qui ne sonnent pas faux
    Faute de photos de l'atelier, la page en emprunte trois à une banque libre de droits, puis les repasse dans la palette du site : même dominante chaude, même contraste. Une photo de banque brute se voit tout de suite, une photo accordée se regarde.

    Ce qu'on a écarté

    • Le diaporama de réalisations en plein écran, qui cache l'information.
    • Le vocabulaire de catalogue : « solutions d'aménagement », « univers du bois ».
    • Un formulaire de contact long, là où un appel suffit.
  • Démonstration Pignon sur Rue sur un écran d'ordinateur : le nom de l'atelier en haut à gauche, quatre liens de menu et un bouton « Appeler l'atelier », puis une photographie de deux vélos anciens appuyés contre un mur de rue pavée à gauche, et à droite le grand titre « Réparation et vélos d'occasion à Nantes, sans jargon ni mauvaise surprise », son texte d'introduction et deux boutons.
    Démonstration Commerce et réparation

    Pignon sur Rue

    Atelier de réparation de vélos et boutique d'occasion reconditionnée (commerce inventé)

    Un atelier de quartier qui répare toutes les marques et revend des vélos reconditionnés. Ses clients se demandent surtout deux choses : est-ce qu'on va me prendre de haut, et combien ça va coûter.

    • La page répond à la peur avant de vendre le service : « diagnostic clair, prix annoncé avant toute intervention ».
    • Trois chiffres tiennent lieu d'arguments : douze ans de métier, six mois de garantie, dix minutes pour un devis.
    • Six photographies portent la page, dont une en ouverture : c'est un commerce qu'on regarde avant de le croire.
    Ouvrir le site de Pignon sur Rue, dans un nouvel onglet 3 pages, ouvertes dans un nouvel onglet
    Comment ce site a été décidé

    La direction

    Chaleureuse et concrète, du côté de l'atelier de quartier plutôt que du magasin de sport. Titres en Zilla Slab, une slab serif qui a le trait épais des enseignes peintes ; textes en Figtree, qui reste lisible en petit. Un vert bouteille sourd pour les actions, un cuivre rosé en contrepoint.

    • Vert bouteille
    • Cuivre rosé
    • Encre
    • Papier

    Le geste propre à ce site

    Une trame de hachures très pâle, empruntée au tracé d'un rayon de roue, posée en fond des sections claires. On ne la voit pas, on la sent : elle empêche le blanc de devenir vide.

    Trois décisions

    La peur d'abord, le service ensuite
    Le titre dit « sans jargon ni mauvaise surprise » avant de dire ce qu'on répare. Un cycliste qui n'ose pas pousser la porte d'un atelier n'a pas un problème de vélo, il a peur de passer pour un idiot et de recevoir une facture qu'il n'a pas vue venir.
    Trois chiffres plutôt que trois adjectifs
    Douze ans, six mois, dix minutes. Chacun se vérifie et engage. « Atelier passionné » n'engage rien et ne se vérifie pas.
    Six photos, dont une en ouverture
    Un commerce de réparation se juge à l'œil : l'état de la devanture, la propreté de l'établi, la tête des outils. La page ouvre donc sur une photographie pleine hauteur, et la galerie montre la mécanique de près plutôt qu'un vélo de catalogue.

    Ce qu'on a écarté

    • Le catalogue de pièces, qui transforme un atelier en pièce détachée.
    • Le formulaire de prise de rendez-vous : pour un dépôt de vélo, un numéro qui sonne va plus vite.
    • Les photos de vélos neufs sur fond blanc, qui racontent un magasin que ce commerce n'est pas.

Et le vôtre ?

Le questionnaire prend quelques minutes et ne vous engage à rien. Il n'y a ni paiement, ni contrat à ce stade : on prépare votre maquette et votre devis, et vous décidez ensuite.

Démarrer Comprendre l'offre et les tarifs