Aujourd’hui, nous entrons dans une nouvelle étape importante dans la construction de la plateforme Créa-code : la conception de la maquette de l’espace personnel de l’utilisateur connecté, autrement dit, la conception du template du Dashboard.
Ce tableau de bord n’est pas seulement une interface graphique, c’est le cœur de l’expérience utilisateur une fois qu’il est inscrit et prêt à progresser.
Dans les chapitres précédents, nous avons préparé tout ce qui était nécessaire pour poser les fondations techniques du projet : l’architecture MVC, le système de routage, d’inscription, le header et le footer, la sécurité et les bases de l’interface publique. Mais aujourd’hui, nous revenons du côté de l’expérience utilisateur, avec une interface pensée pour accompagner l’apprenant au quotidien.
Le Dashboard a pour mission de centraliser tout ce qui est essentiel pour apprendre efficacement : progression, objectifs, récompenses, accès rapide aux modules, challenges, statistiques et plus encore. C’est un espace qui doit à la fois informer, motiver et guider l’utilisateur dans son parcours de formation, jour après jour. Il doit être intuitif, compréhensible et attractif.
- Un espace de pilotage motivant
- Une interface claire et bien organisée
- L’objectif du jour : coder un peu chaque jour
- Un suivi précis des actions passées
- Un outil pensé pour progresser et rester motivé
- Une interface pensée pour accompagner l’apprentissage
- Préparer la phase de développement HTML/CSS
- Ce que nous allons coder
- Structure simplifiée du Dashboard (maquette textuelle)
- À quoi ça sert cette version ?
Un espace de pilotage motivant
Voici le template :
Dès l’ouverture du Dashboard, l’utilisateur est accueilli de manière personnalisée, par exemple :
"Bonjour Alban, prêt à coder aujourd’hui ?"Cette simple phrase crée une atmosphère conviviale. Elle établit une relation directe et rassurante, essentielle pour entretenir la motivation d’un utilisateur, surtout lorsqu’il apprend seul chez lui.
Juste en dessous, immédiatement, on retrouve une jauge de progression liée au système de niveaux. Dans la maquette présentée, l’utilisateur est au niveau 3, avec 36 points d’XP sur 50. Une barre bleue claire indique visuellement son avancement, et un lien permet de reprendre directement le module en cours, ici le module HTML de base, à l’étape 3 sur 5.
Dans l’angle supérieur droit de ce bloc, un petit label affiche le grade actuel de l’utilisateur : “🎖 Jeune apprenti”. Ce grade évoluera avec la progression, et permet de donner une reconnaissance supplémentaire à l’utilisateur, au-delà des chiffres. Il renforce l’idée qu’on franchit des étapes importantes dans son apprentissage.
Une interface claire et bien organisée
Le cœur du Dashboard repose ensuite sur une grille composée de six blocs colorés, chacun représenté par une icône simple et reconnaissable. Ces blocs agissent comme des raccourcis vers les sections clés de l’espace personnel.
Le bouton “Mon parcours” permet d’accéder aux différents modules proposés pour un apprentissage guidé, avec la possibilité de reprendre ou d’explorer d’autres thématiques.
“Mes challenges” donne accès à des défis pratiques, souvent plus libres et créatifs que les simples exercices mais aussi quelque peu plus long et compliqué à résoudre.
Le bloc “Mon classement” offre un aperçu de la position de l’utilisateur dans le classement général, renforçant l’aspect communautaire et stimulant.
Le bouton “Mes récompenses” présente tous les badges et titres obtenus.
“Mon compte” permet de gérer ses informations personnelles, comme le pseudo, le mot de passe ou l’avatar par exemple.
Enfin, le bloc “Mes statistiques” rassemble toutes les données liées à la progression : temps passé, XP gagnée, rythme de travail…
Chacun de ces boutons est prévu pour rediriger l’utilisateur vers une page dédiée. Visuellement, l’ensemble est équilibré, lisible et donne envie de cliquer pour explorer.
L’objectif du jour : coder un peu chaque jour
Un peu plus bas, une section appelée “Aujourd’hui” rassemble les éléments essentiels à faire dans la journée. Ce bloc joue un rôle clé dans le maintien de la motivation. Il affiche, par exemple, une série en cours : ici, l’utilisateur code depuis cinq jours d’affilée. Ce simple indicateur valorise la régularité, ce qui est essentiel dans un apprentissage progressif.
On trouve aussi un objectif clair : “1 exercice, 1 quizz ou 1 challenge”. Il n’est pas nécessaire d’en faire trop, mais chaque petite action quotidienne contribue à la progression globale.
Enfin, la lecture du jour propose un contenu complémentaire. Dans notre exemple, il s’agit d’un article sur la sémantique en HTML. Cela permet d’équilibrer la pratique du code avec un apport théorique, ou une ouverture vers des notions plus profondes.
Un suivi précis des actions passées
En dessous, le Dashboard propose un historique d’activité. Ce petit journal reprend dans l’ordre chronologique les actions récentes de l’utilisateur. Il indique par exemple la réussite d’un exercice, l’obtention d’un badge ou encore la dernière connexion. Ce fil d’activité est à la fois pratique et rassurant : il permet à chacun de garder une trace de son avancement, de visualiser ce qui a été accompli, et d’évaluer ce qu’il reste à faire.
Dans de futures évolutions, cet historique pourra devenir interactif, permettant de revenir sur un exercice ou un quizz passé, ou même d’en recommencer certains pour s’améliorer. De nombreuses améliorations seront ajoutées au fil du temps et des retours utilisateurs.
Un outil pensé pour progresser et rester motivé
Ce Dashboard a été conçu dans une logique d’accompagnement quotidien. Il ne se contente pas d’informer, il guide, valorise et encourage. L’utilisateur sait où il en est, ce qu’il a à faire, et peut accéder facilement à tout ce qui lui est utile. L’ajout des niveaux, des objectifs du jour, des grades et des statistiques donne du sens à la progression. On n’avance pas dans le flou : on avance avec des repères, visibles et motivants.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Pourquoi cette maquette ? Comprendre son rôle
La maquette que nous venons d’analyser est bien plus qu’un joli dessin. Elle est le résultat d’une réflexion pédagogique, fonctionnelle et technique. Dans tout projet web bien structuré, une maquette n’est jamais une simple étape esthétique : c’est une traduction visuelle des besoins de l’utilisateur et des objectifs du produit.
Dans le cas de Créa-code, nous avons une mission claire : permettre à des débutants en développement web de progresser de manière autonome, motivante et structurée.
Une interface pensée pour accompagner l’apprentissage
Tout le design du Dashboard repose sur un principe simple : l’apprentissage est plus efficace lorsqu’il est régulier, valorisé et visible.
C’est pour cela que nous avons intégré une barre de progression, des grades évolutifs, un système de séries journalières, et des objectifs clairs chaque jour. Nous voulons que chaque utilisateur, même débutant, se sente capable d’avancer à son rythme, mais avec des repères concrets. On apprend mieux quand on a un objectif atteignable et des encouragements visibles.
La maquette joue donc un double rôle : organiser l’information et stimuler l’engagement. Chaque élément (boutons, jauges, icônes, historique, lecture du jour) a été pensé pour répondre à ces deux besoins.
Préparer la phase de développement HTML/CSS
Dans les prochains jours, nous allons transformer cette maquette en un template HTML/CSS fonctionnel. Cette étape est cruciale, car elle nous permettra d’intégrer cette vue au sein de notre architecture MVC, que nous avons déjà mise en place dans les chapitres précédents.
Mais avant de passer au code, prenons un moment pour observer quelques points clés que nous devrons respecter :
La structure visuelle en sections
Nous allons devoir découper la page en blocs sémantiques HTML clairs :
- Un bloc d’accueil avec le nom de l’utilisateur, son niveau, son grade, sa jauge d’XP et le bouton “Reprendre”.
- Un bloc de navigation composé de six cartes (parcours, challenges, classement, etc.), que nous organiserons en grille.
- Une section “Aujourd’hui” avec des icônes et du texte enrichi (flammes, cibles, liens).
- Un bloc pour l’historique avec des listes d’activités.
Nous n’aurons pas besoin de coder à nouveau le header et le footer, car ils ont été réalisés dans les jours précédents et seront simplement inclus via le fichier layout.php.
Un design responsive et épuré
La maquette a été pensée pour être responsive. Cela veut dire que nous devrons prévoir une mise en page fluide qui s’adapte à toutes les tailles d’écran : ordinateurs portables, tablettes, smartphones. Nous pourrons utiliser Flexbox ou CSS Grid pour structurer les blocs de manière efficace.
Le design est volontairement sobre : couleurs pastel, icônes simples, typographie lisible, beaucoup d’espace blanc. Cela facilite la lecture et met en valeur les éléments importants. Nous devrons donc porter une attention particulière aux marges, à la taille des textes, et à la hiérarchie visuelle.
Des composants réutilisables
Dans une logique de développement maintenable, plusieurs éléments pourront être transformés en composants HTML/CSS que nous réutiliserons dans d’autres pages :
- La carte de progression utilisateur (XP + grade)
- Les “cartes” de navigation (parcours, classement, etc.)
- Les notifications quotidiennes
- Les éléments d’historique
Cela nous permettra ensuite d’implémenter plus facilement des animations ou des interactions JavaScript, si on le souhaite (animations au survol, chargement dynamique, etc.).
Ce que nous allons coder
Dans le Jour 24 de #100JoursPourCoder, nous allons reproduire fidèlement cette maquette avec du HTML sémantique et du CSS moderne, sans framework.
L’objectif sera de poser une base propre, claire et accessible que nous pourrons ensuite intégrer côté serveur (PHP), enrichir avec du JavaScript (statistiques, interactions), puis connecter à la base de données (pour afficher les vrais niveaux, noms, progressions, etc.).
Nous commencerons par coder le squelette HTML de la page (les sections, titres, paragraphes, boutons…), puis nous travaillerons le style CSS, en suivant les codes couleur, la disposition en grille et les espacements visibles sur la maquette.
L’accent sera mis sur :
- la lisibilité du code (indentation, nommage clair des classes),
- la modularité (possibilité de réutiliser des classes ailleurs),
- et la compatibilité mobile dès le départ (responsive design).
Structure simplifiée du Dashboard (maquette textuelle)
╔══════════════════════════════════════════════════════════════╗
║ 👋 Bonjour Alban, Prêt à coder aujourd’hui ? ║
║ 🟦 Niveau 3 ▓▓▓▓▓▓▓▓▓▓░░░░░░ 36/50 XP ║
║ Parcours en cours : Module HTML de base (3/5) ║
║ [ Reprendre ] ║
║ 🎖 Grade : Jeune apprenti ║
╚══════════════════════════════════════════════════════════════╝
╔══════════════════════════════════════════════════════════════╗
║ 🧭 Navigation rapide (6 blocs carrés en grille 2x3) ║
║ ┌────────────┬────────────┬────────────┐ ║
║ │ 📘 Mon parcours │ 🧪 Mes challenges │ 🌟 Mon classement │ ║
║ ├────────────┼────────────┼────────────┤ ║
║ │ 🏅 Récompenses │ 💼 Mon compte │ 📊 Statistiques │ ║
║ └────────────┴────────────┴────────────┘ ║
╚══════════════════════════════════════════════════════════════╝
╔══════════════════════════════════════════════════════════════╗
║ 📆 Aujourd’hui ║
║ 🔥 Série en cours : 5 jours d’affilée ! ║
║ 🎯 Objectif du jour : 1 exercice, 1 quizz ou 1 challenge ║
║ 📖 Lecture du jour : La sémantique en HTML (lien) ║
╚══════════════════════════════════════════════════════════════╝
╔══════════════════════════════════════════════════════════════╗
║ 🕰️ Historique ║
║ - Exercice 3 réussi (08/07/25 à 12:25) ║
║ - Exercice 2 réussi (05/07/25 à 14:32) ║
║ - Connexion (04/07/25 à 09:43) ║
║ - Exercice 1 réussi (03/07/25 à 19:15) ║
║ - Grade “Jeune apprenti” débloqué (03/07/25 à 18:57). ║
║ - Quizz d’intro réussi (02/07/25 à 10:25) ║
╚══════════════════════════════════════════════════════════════╝
╔══════════════════════════════════════════════════════════════╗
║ 📬 Newsletter (optionnelle) ║
║ S’abonner pour recevoir des astuces web et nouveaux cours ║
║ [ Champ email ] [ S’abonner ] ║
╚══════════════════════════════════════════════════════════════╝
À quoi ça sert cette version ?
- C’est une base de travail rapide pour coder la structure HTML sans se perdre dans les détails.
- On peut l’utiliser pour créer des
section,div,h2,ul/liouarticleHTML clairs et bien structurés. - Elle permet d’ajouter des classes CSS comme
.dashboard-section,.carte-navigation,.objectif-jour, etc…
Cette journée marque une vraie transition dans le projet Créa-code. Jusqu’ici, nous avons construit l’arrière-plan technique de notre plateforme. Aujourd’hui, avec cette maquette du Dashboard, nous entrons dans une dimension visuelle et interactive qui donne vie à l’application.
Le Dashboard n’est pas juste un “plus” esthétique : c’est un outil pédagogique puissant, un véritable moteur de progression pour les apprenants. Il synthétise tous les efforts fournis depuis l’inscription jusqu’aux premiers exercices réussis. Il reflète l’ADN de Créa-code : apprendre sérieusement, dans une ambiance motivante, accessible et ludique.
À demain pour commencer ensemble le codage HTML/CSS du template du Dashboard !
Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi