Exemples de sites internet : Des sites fictifs, des choix expliqués.
Je suis Baptiste Bourut, développeur web freelance à Bayonne. Voici cinq exemples de sites internet fictifs, imaginés pour des métiers du Pays basque : une école de surf, un restaurant, un menuisier, un paysagiste et une céramiste. Ce sont des démonstrations, pas des références clients : chacun se visite en direct, et j'explique son objectif, ce qu'il montre et mes choix.
Mis à jour le
Horizon, École de surf fictive : Donner envie de réserver un premier cours.
Une école de surf se choisit souvent sur un téléphone, parfois la veille pour le lendemain. Le site doit donner l'ambiance en une photo, aider à choisir le bon cours et mener à la réservation sans détour.
Voir la démo en direct (Horizon)
Ce que montre le site (Horizon)
Un accueil, une page de stage et une réservation. L'accueil s'ouvre sur la plage au soleil couchant, avec les conditions du jour en carte (elles changent avec le mois). Juste dessous, trois questions (avez-vous déjà surfé, nagez-vous à l'aise, seul ou en famille) proposent le bon cours et son prix, puis les trois prochains jours montrent leurs créneaux, les places qui restent et le prix ; un clic ouvre la réservation déjà remplie. La page du stage d'été est une landing page : une offre, ses dates et le programme jour par jour.
Mes choix (Horizon)
La lumière du soir sur l'océan : un sable clair pour le fond, l'encre de l'océan pour le texte et un seul accent, l'orange du soleil, réservé à l'action « Réserver ». Une grotesque expressive et serrée pour les titres (Bricolage Grotesque), une linéale ronde pour le texte (Manrope). La photo du premier écran respire lentement, comme une houle longue.
- Sable clair
- Encre océan
- Soleil
Le parcours (Horizon)
« Réserver » reste dans le menu, et le premier écran ouvre deux portes : réserver tout de suite, ou « Quel cours pour moi ? » pour qui hésite. Le choix du cours, puis le créneau, puis la place : les trois questions qu'on posait au téléphone ont leur réponse sur la page, prix compris. La page du stage n'a qu'une action, « Réserver le stage », reprise en bas de l'écran sur téléphone : rien ne fait quitter la page avant l'inscription.
Cet exemple illustre
Table concept, Restaurant fictif : Donner faim, puis faire réserver.
Avant de réserver, on veut voir l'assiette et la salle. Le site d'un restaurant montre donc la cuisine d'abord, et garde la réservation à portée de main.
Voir la démo en direct (Table concept)
Ce que montre le site (Table concept)
Un accueil, la carte et la réservation. L'accueil s'ouvre sur une assiette dans la pénombre, puis vient la carte du jour : la section se fige et, à chaque cran de défilement, l'assiette suivante tombe sur la pile comme une page de menu qu'on rabat, son nom et son producteur à côté. Suivent les producteurs, la salle, le chef et les horaires, puis les créneaux du soir sur une frise : un créneau libre ouvre la réservation, jour et heure déjà choisis. Chaque avis de client est posé à côté de ce dont il parle : le comptoir près du chef, le soir même près des créneaux, le menu confiance près des formules. La carte de la semaine se lit rubrique par rubrique, prix compris, comme une ardoise.
Mes choix (Table concept)
La salle le soir : un fond presque noir et chaud, un papier crème pour ce qu'on lit, et un seul accent, l'ambre d'une flamme de bougie, réservé à « Réserver une table » et aux mots en italique qui comptent. Une serif fine pour les titres, souvent en italique (Instrument Serif), et sa linéale sœur pour le texte (Instrument Sans).
- Nuit
- Crème
- Ambre
Le parcours (Table concept)
« Réserver une table » est dans le menu dès l'arrivée, une pastille dit si le restaurant est ouvert, et « Appeler » et l'itinéraire sont sous le premier écran. Le second bouton mène à la carte, pour qui veut choisir avant de réserver. La réservation tient en trois gestes, le jour, l'heure et le nombre de couverts, puis un nom. Les créneaux du soir sont affichés, libres ou complets : la question « il vous reste de la place ce soir ? » ne fait plus sonner le téléphone en plein service.
Cet exemple illustre
Atelier concept, Menuisier fictif : Montrer le travail, recevoir des demandes précises.
Un menuisier seul à l'atelier passe ses journées à fabriquer, pas à répondre au téléphone. Son site doit montrer des pièces finies, donner confiance et faire arriver des demandes déjà bien décrites.
Voir la démo en direct (Atelier concept)
Accueil 
Réalisations 
Devis
Ce que montre le site (Atelier concept)
Un accueil, les réalisations et une demande de devis. L'accueil pose une cuisine en noyer, cotée comme sur un plan, puis quatre familles de travaux et les pièces qui glissent de côté au défilement. Un plan de la côte place chaque chantier dans sa commune, avec l'avis du client. En bas, deux questions (quoi, où) ouvrent la demande de devis déjà commencée. La page des réalisations se filtre par type, puis raconte un chantier, de la demande du client à son avis.
Mes choix (Atelier concept)
La planche de dessin de l'artisan : un papier gris clair quadrillé comme un plan, une encre graphite et un seul accent, le jaune du crayon de menuisier, réservé au devis. Une serif ronde et franche pour les titres (Young Serif), une linéale nette pour le texte (Hanken Grotesk) et une chasse fixe pour les cotes et les essences (IBM Plex Mono). Le menuisier parle au « je » : on sait qu'on s'adresse à lui.
- Papier
- Graphite
- Jaune crayon
Le parcours (Atelier concept)
« Appeler » et « Demander un devis » sont dans l'en-tête de chaque page, et restent en bas de l'écran sur téléphone. Le formulaire classe la demande (cuisine, rangement, escalier, meuble), demande l'ampleur et l'essence, et la récapitule à mesure : elle arrive déjà triée. Elle peut commencer dès l'accueil, en deux questions (quoi, où) : le menuisier sait, avant de rappeler, ce qu'on lui demande et où.
Cet exemple illustre
Jardin concept, Paysagiste fictif : D'un site daté à une vitrine claire.
Un site vieilli met tout au même niveau, et rien n'en ressort. Cet exemple montre le même paysagiste avant et après une refonte.
Voir la démo en direct (Jardin concept)
Ce que montre le site (Jardin concept)
Avant : un site resté dans son époque, menu sur le côté, long paragraphe en petits caractères, tableau de services et compteur de visites. Après : une grande photo de massif au soir, un titre court, et tout de suite la question qui trie les visiteurs, créer un jardin ou le faire entretenir. Côté création, le plan de plantation d'un jardin : on choisit un mois, les massifs en fleur prennent leur couleur. Côté entretien, des onglets de saison qui changent la teinte de la page et un exemple de prix à l'année. Les deux finissent sur « Venez-vous jusque chez moi ? », qui répond pour la commune tapée. Sur la page de l'assistant IA, le même site refait accueille une fenêtre de discussion.
Mes choix (Jardin concept)
Une serif douce pour les titres (Fraunces) et une linéale simple pour le texte (Figtree), au lieu des polices système d'avant. Un papier crème, un vert mousse pour la seule action, « Demander une visite », et le rouge framboise de la sauge du plan de plantation pour les mots en italique. Les photos passent au premier plan : pour un paysagiste, ce sont elles qui convainquent.
- Papier
- Mousse
- Sauge
Le parcours (Jardin concept)
Avant, il fallait lire pour savoir quoi faire. Après, le visiteur choisit son cas dès le premier écran, et chaque chemin finit sur la demande de visite, déjà remplie avec son projet et sa commune. Le paysagiste reçoit une demande triée, et la question « venez-vous jusque chez moi ? » ne passe plus par le téléphone.
Cet exemple illustre
Terre concept, Céramiste fictive : Vendre des pièces artisanales, simplement.
Une céramiste vend des objets qu'on a envie de toucher. En ligne, c'est la photo qui fait ce travail : la boutique met les pièces en valeur, puis rend l'achat aussi simple que possible.
Voir la démo en direct (Terre concept)
Ce que montre le site (Terre concept)
Une boutique complète : l'accueil et la dernière fournée, la boutique filtrable par catégorie (bols, tasses, assiettes, vases) et triable, une fiche par pièce avec plusieurs vues, dont un détail, puis le panier en deux étapes. Ajoutée au panier, la vignette de la pièce s'envole jusqu'à son icône. Chaque pièce porte son prix, fictif comme le reste ; la fiche prend une teinte de la terre de sa pièce. Sur téléphone, le panier : deux pièces, leurs prix et leurs quantités, la livraison et le total.
Mes choix (Terre concept)
Un papier chaud, des teintes d'argile, une encre brune et un seul accent, la rouille des oxydes de fer de l'émail. Une serif éditoriale pour les titres (Cormorant Garamond), une linéale douce pour le texte (DM Sans). L'accueil cadre sa pièce phare dans une arche, et chaque pièce dit si elle est unique, en stock ou dans le prochain four.
- Papier chaud
- Rouille
- Encre brune
Le parcours (Terre concept)
D'une catégorie à une pièce, puis au panier, sans quitter la boutique des yeux : la pastille du panier saute à chaque ajout. Le panier additionne, dit combien il manque pour la livraison offerte et refait le total si l'on choisit le retrait à l'atelier ; une pièce unique ne s'y ajoute qu'une fois. La question « combien ça coûte, livré ? » trouve sa réponse avant le paiement, pas après.
Cet exemple illustre
Et l'automatisation ?
Elle ne se montre pas en site : sa démonstration suit une demande de client, de l'email reçu jusqu'à la relance préparée pour votre validation.
Vos questions, mes réponses.
Ces sites d'exemple sont-ils ceux de vrais clients ?
Non. Ce sont des sites d'exemple fictifs, que j'ai réalisés pour montrer ma façon de travailler : ces entreprises n'existent pas, et aucun de ces sites n'est une référence client.
Mon site ressemblera-t-il à l'un de ces exemples ?
Il sera le vôtre : je le conçois sur mesure, à partir de votre activité, de vos clients et de ce qu'il doit obtenir, pas d'un modèle. Si l'un de ces exemples vous plaît, dites-le dans votre demande : on en parle.
Quel contenu dois-je préparer pour mon site ?
Vos textes et vos photos, ou ce que vous en avez déjà : de quoi présenter votre activité, vos prestations et vos réalisations. Rien n'a besoin d'être prêt pour demander un devis : vous y indiquez simplement où en est votre contenu (prêt, disponible en partie ou à créer). Si tout est à créer, on part de zéro et je vous guide sur ce qu'il faut écrire et photographier.
Sites d'exemple réalisés par Baptiste Bourut, développeur web freelance à Bayonne (Studio Baoul). Les photos viennent d'Unsplash.
Votre site, pensé pour votre métier.
Chaque site part de votre activité et de vos clients, pas d'un modèle. Décrivez votre projet en quelques questions : premier retour sous 24 h ouvrées, avec les questions qui me manquent.