Quand on vend un cours d’éclairs, le meilleur argument, ce sont les éclairs eux-mêmes. À travers l’école en ligne de la cheffe pâtissière Maria Tulchevska, je vous montre comment j’ai réalisé un site en anglais : un accueil avec les cours et leur autrice, une page de vente du cours avec vidéo et programme par modules, et la version mobile.
La cliente et sa demande
Maria Tulchevska est cheffe pâtissière et fondatrice d’Art Dessert LLC. Son entreprise californienne réalise des desserts et des pâtisseries européens, travaille avec des coffee shops locaux et donne des cours de pâtisserie professionnels, en ligne et en présentiel, dans tous les États-Unis. Maria a formé personnellement plus de deux cents élèves.
L’école en ligne ART DESSERT by Maria Tulchevska avait besoin d’un site en anglais pour vendre ses cours – éclairs et gâteau. Le principal, « Contemporary Éclairs », promet d’apprendre à réaliser des éclairs de niveau professionnel, même sans aucune expérience en pâtisserie. Ma mission : réaliser un site qui rende cette promesse crédible au premier coup d’œil – intégrer l’accueil et la page du cours, développer les blocs interactifs et la version mobile.
L’allure du site : desserts, graphite et or
Les éclairs de Maria ressemblent à des bijoux : glaçage miroir, feuille d’or, petits fruits. Le site ne leur fait donc pas concurrence par le décor – ce sont les photos qui tiennent le premier rôle :
- des desserts sur fond blanc pur – en grand, avec des coupes montrant la garniture et des reflets ;
- trois couleurs, graphite, or sable et blanc – comme la vitrine d’une pâtisserie haut de gamme ;
- une police de titres fine et contrastée, en capitales, et de l’italique pour les mentions comme « online course » ;
- des boutons « pilules » en dégradé du noir à l’or – un même signe d’action sur toutes les pages ;
- de fins contours d’hexagones comme motif récurrent – des blocs de la page du cours jusqu’au logo du pied de page.
La plupart des pages sont construites en damier : une photo, et à côté un texte sur un aplat sombre ou doré. Ce rythme se lit facilement, et la grille se prolonge sans peine avec de nouvelles rubriques – par exemple la page du cours de gâteau.
Accueil : l’autrice et les cours dès le premier écran
Le menu de l’en-tête est partagé en deux par le monogramme du logo : à gauche « Éclairs », « Cake » et « Your instructor », à droite « Events », « Professional blog » et Instagram. Le premier écran montre Maria en veste de pâtissière, le nom de l’école, une courte promesse – apprendre à faire des éclairs de niveau professionnel sans expérience en pâtisserie – et deux boutons, « éclairs » et « cake ». Le visiteur choisit son cours avant même d’avoir fait défiler la page.
Plus bas, les cours sont présentés en blocs alternés : photos de desserts et aplat sombre avec la mention « online course », le titre, une description et le bouton « more about course ».
Faire connaissance avec l’autrice
Dans la formation en ligne, on n’achète pas seulement un programme, on choisit aussi un enseignant. Le bloc « Meet Your Instructor » s’ouvre sur une grande citation de Maria sur le temps et l’énergie qu’il lui a fallu pour maîtriser son métier. À côté de son portrait, un aplat doré réunit trois faits : l’entreprise Art Dessert LLC, la collaboration avec des coffee shops californiens qui vendent des pâtisseries selon ses recettes, et plus de deux cents élèves.
Viennent ensuite un bandeau pleine largeur d’éclairs coupés avec leur reflet, puis le bloc de la mission : Maria, un éclair à la main, et une citation sur le plaisir qu’elle a à partager son savoir et à rendre les techniques de pâtisserie modernes accessibles à tous. Le bouton « more about Maria Tulchevska » mène à une présentation détaillée de l’autrice, et le pied de page sombre réunit le menu, le logo et les contacts.
La page du cours : des inscriptions ouvertes à la vidéo
La page « Contemporary Éclairs » est construite comme un récit de vente. Premier écran : le nom du cours, la mention « Enrollment is now open », la promesse de résultat et le bouton « get started », à côté d’une grande photo d’éclair coupé, garni de framboises.
Suit un bloc sombre « About » : une invitation à rejoindre ART DESSERT et l’explication que le cours a été créé par une cheffe pâtissière professionnelle pour tous les niveaux. À côté, une photo d’éclairs avec un bouton rond « play » pour la vidéo de présentation : elle montre le travail mieux que n’importe quel texte.
Quatre atouts répondent chacun à un doute de l’acheteur :
- « Video tutorials » – Maria guide pas à pas, avec des mots simples, tout au long du processus ;
- « For people of all skill levels » – des débutants aux pâtissiers confirmés ;
- « Solid information foundation » – le rôle de chaque ingrédient expliqué ;
- « Support via chat » – l’enseignante répond sur le chat si quelque chose ne fonctionne pas.
Ce que reçoit l’élève : résultats, chiffres, programme
Le bloc « What You Get » aligne sept points numérotés en chiffres dorés, séparés par de fins traits : les secrets de la décoration et des glaçages miroir, la pâte à choux et des éclairs réguliers sans fissures, des desserts modernes fondés sur les techniques françaises, la conservation des éclairs jusqu’à deux semaines, 7 garnitures et 3 glaçages, la théorie derrière chaque recette et la façon dont les ingrédients interagissent.
Vient ensuite un bandeau doré avec les trois chiffres du cours :
- 6/9 mois – accès au cours 24/7, selon la formule choisie ;
- plus de 50 pages à imprimer – recettes, techniques, astuces et notes de pâtissière ;
- 36 leçons en haute qualité, avec des instructions détaillées.
Après un grand gros plan d’éclair arrive le « Course Syllabus » – le programme par modules sur fond sombre : leçon d’introduction, théorie derrière les recettes, puis la pratique – pâte à choux, garnitures, glaçages et préparation des décors. Les modules s’ouvrent d’un clic sur le « plus » : le programme se voit en entier sans allonger la page.
Version mobile
Sur téléphone, l’en-tête se réduit au burger, au monogramme et au lien « get started » : le bouton d’inscription se trouve directement dans l’en-tête. Le premier écran de la page du cours passe en colonne : le nom, la photo de l’éclair, le bouton et seulement ensuite le texte. Les blocs en damier s’empilent en conservant l’alternance sombre-clair, et le bouton « play » se pose sur la photo, à la jonction des sections.
Ce qui fait un bon site d’école en ligne
Un cours en ligne ne se goûte pas avant l’achat. On décide sur la foi du site : peut-on faire confiance à l’auteur, vais-je y arriver, le cours vaut-il son prix ? C’est pourquoi, quand je réalise des sites pour des écoles en ligne, je m’appuie sur quelques règles :
- le visage de l’auteur sur l’accueil : dans une formation de niche, on achète le savoir-faire d’une personne bien précise ;
- le résultat se montre par les photos et la vidéo, pas par des adjectifs ;
- la page du cours répond aux questions dans l’ordre : pour qui, quel contenu, combien de leçons et quelle durée d’accès ;
- le programme est visible en entier sans lasser – les modules sont repliés en accordéon ;
- un seul bouton d’inscription bien visible et un style unique pour tous les appels à l’action ;
- une version mobile où les photos de desserts sont aussi appétissantes que sur grand écran ;
- des images légères : une page riche en grandes photos doit s’ouvrir vite, même en données mobiles.
Si vous lancez des cours ou une école en ligne et avez besoin d’un site qui vend vos formations, je le réalise clés en main : de la structure des pages à l’intégration, aux blocs interactifs et à la version mobile.
Détails du projet
Type de projetnouveau site
CatégorieSite d’entreprise
TechnologiesHTML5, CSS3, JavaScript, intégration responsive
Rôledéveloppement du site : intégration de l’accueil et de la page du cours, version mobile, bloc vidéo et programme en accordéon
ClientArt Dessert (Maria Tulchevska)
PaysÉtats-Unis
Travaux réalisés
- Page d’accueil : premier écran avec l’autrice et le choix du cours, blocs de cours en damier
- Blocs sur l’instructrice : citation, faits sur l’entreprise et les élèves, mission
- Page du cours « Contemporary Éclairs » avec premier écran « Enrollment is now open » et bouton « get started »
- Bloc de présentation du cours avec vidéo et quatre atouts
- Bloc « What You Get » – sept points à numérotation dorée
- Chiffres du cours : accès 6/9 mois, plus de 50 pages à imprimer, 36 leçons
- Programme par modules en accordéon
- Version mobile : menu burger, « get started » dans l’en-tête, blocs sur une colonne
Résultat
- Un site d’école en ligne en anglais : accueil et page du cours d’éclairs
- Une page de cours qui répond dans l’ordre aux questions de l’acheteur
- Un style graphite et or homogène sur toutes les pages
- Une version mobile où les photos de desserts et le bouton d’inscription restent bien en vue