Design et pédagogie du site BIA
Ce site de préparation au Brevet d'Initiation Aéronautique a été conçu avec une attention particulière portée à la lisibilité, à la cohérence visuelle et à l'efficacité pédagogique. Cette page détaille les choix de design qui structurent l'expérience d'apprentissage.
1. Philosophie générale
Le design du site repose sur trois principes fondateurs :
- Rationalité géométrique — inspirée du Bauhaus et de l'esthétique aéronautique (instruments de bord, cadrans, lettrage technique). Pas de décorations superflues : chaque élément visuel a une fonction.
- Progression pédagogique visible — l'organisation en modules, niveaux et barres KPI permet à l'élève de situer sa progression à tout moment.
- Lisibilité sur tout écran — du smartphone au tableau interactif de la salle de classe, le contenu reste lisible et structuré grâce à une échelle typographique responsive.
2. Polices de caractères
Choix des familles
Deux polices Google Fonts ont été sélectionnées pour leur complémentarité :
abcdefghijklmnopqrstuvwxyz 0123456789
Outfit est une police géométrique variable conçue par Rodrigo Fuenzalida. Ses formes rondes et rationnelles s'inscrivent dans la tradition du Bauhaus tout en offrant des terminaisons douces qui la rendent chaleureuse aux petites tailles. Elle est utilisée pour tous les titres, la navigation, les badges et les barres KPI.
abcdefghijklmnopqrstuvwxyz 0123456789
Lexend a été conçue par Bonnie Shaver-Troup, chercheuse en éducation, avec un objectif précis : améliorer la vitesse et la compréhension de lecture. Ses caractéristiques — espacement optimisé, formes ouvertes, bonne discrimination I/l/1 et O/0 — en font un choix idéal pour un contenu pédagogique lu sur écran.
Échelle typographique
Les tailles de police sont définies comme variables CSS avec une cascade responsive sur 4 points de rupture. Ce système garantit la cohérence visuelle et permet une seule source de vérité pour toute la typographie du site.
| Variable | Desktop | Tablette | Mobile | Usage |
|---|---|---|---|---|
--fs-hero |
clamp(2–3.5rem) | 2rem | 1.65rem | Titre hero principal |
--fs-h1 |
2rem | 1.5rem | 1.35rem | Titre de page / module |
--fs-h2 |
1.8rem | 1.3rem | 1.15rem | Titres de sections |
--fs-h3 |
1.4rem | 1.15rem | 1.05rem | Sous-sections |
--fs-section-title |
1.3rem | 1.1rem | 1.05rem | Titres learning-level |
--fs-lead |
1.25rem | 1.1rem | 1rem | Accroches, titres cartes |
--fs-body |
1rem | 0.95rem | 0.9rem | Corps de texte |
--fs-body-sm |
0.9rem | 0.85rem | 0.8rem | Sidebar, code, légendes |
--fs-small |
0.82rem | 0.78rem | 0.75rem | Labels, descriptions |
--fs-xs |
0.75rem | — | 0.68rem | Micro-texte navigation |
--fs-micro |
0.68rem | — | 0.62rem | Étiquettes minuscules |
3. Palette de couleurs
Couleurs institutionnelles
La palette s'ancre dans l'identité du LFIP (Lycée Français International de Pékin) et dans les codes visuels de l'aéronautique — bleu marine (ciel nocturne, instruments), blanc (fuselage), accents vifs (signalétique).
Bleu marine
Couleur primaire — titres, bordures, navigation
Bleu clair
Primaire clair — liens, états hover
Turquoise
Accent — barres décoratives, boutons secondaires
Rouge signal
Accent fort — CTA, épreuve obligatoire, alertes
Or / jaune
Hero background, épreuve facultative, highlights
Noir profond
Texte principal, contraste maximum
Couleurs des niveaux d'apprentissage
Chaque cours est structuré en trois niveaux de difficulté, chacun associé à une couleur sémantique constante sur tout le site :
Ce code couleur est repris dans les titres de section, les cartes de compétences sur les pages d'index de module, et les quiz associés. L'élève apprend rapidement à reconnaître visuellement le niveau de difficulté d'un contenu.
Thème de code — Dracula
Les blocs de code utilisent une variante du thème Dracula, optimisé pour la lisibilité technique :
Fond de code
Contraste avec le fond clair de page
Rose — mots-clés
Keywords, opérateurs, sélecteurs CSS
Vert — chaînes
Strings, attributs HTML
Cyan — fonctions
Noms de fonctions, sélecteurs
4. Architecture pédagogique
Découpage en modules
Le site suit fidèlement les cinq modules du programme officiel du BIA (arrêté du 19 février 2015), auxquels s'ajoutent les modules d'annales et de vocabulaire anglais aéronautique :
Structure de chaque module
Chaque module suit un schéma pédagogique identique pour créer des repères stables chez l'élève :
- Page d'index — vue d'ensemble avec barre KPI (nombre de cours, QCU, durée, points), description, prérequis, source officielle, et grille de cartes vers les sous-pages.
- Cours — contenu structuré en 3 niveaux (fondamental, approfondi, expert) avec navigation ancré via la barre « Programme et plan du cours ».
- Quiz fondamental & approfondi — QCU interactifs avec correction immédiate et renvoi vers les sections de cours correspondantes.
- Travaux dirigés — exercices pratiques complémentaires.
- Bibliographie — ressources, vidéos et liens utiles.
Barres KPI
Chaque page d'index de module affiche une barre KPI normalisée avec 6 indicateurs (Cours, TD, Parties, QCU, Durée, Points). Sur les pages de cours, une barre de navigation à 4 items permet d'accéder directement aux différentes parties du cours. Ce système offre une vue synthétique avant d'entrer dans le contenu détaillé.
5. Choix techniques
Astro — générateur de site statique
Le site est construit avec Astro (v5), un générateur de sites statiques qui produit du HTML pur sans framework JavaScript côté client. Avantages :
- Performance — pages pré-rendues, chargement quasi instantané.
- Accessibilité — HTML sémantique natif, utilisable sans JS.
- Hébergement simple — GitHub Pages, gratuit et fiable.
Responsive design
Le site utilise 4 points de rupture (breakpoints) pour s'adapter à tous les écrans :
| Breakpoint | Cible | Adaptations clés |
|---|---|---|
| > 1024px | Desktop / TBI | Grilles multi-colonnes, sidebar visible |
| ≤ 1024px | Tablette paysage | Réduction marges, tailles typographiques -10% |
| ≤ 768px | Tablette portrait | Grille 1 colonne, sidebar repliée, KPI wrappés |
| ≤ 480px | Smartphone | Typographie compacte, espacement minimal |
Accessibilité
- Contrastes couleur conformes WCAG AA sur tous les textes.
- Focus visible sur tous les éléments interactifs (outline 3px).
- Navigation au clavier complète.
- Police Lexend — conçue pour réduire le stress visuel en lecture.
- Texte justifié avec
text-wrap: prettyethyphens: autopour une lecture confortable.
6. Mode sombre
Le site propose un mode sombre activable via le bouton
/
de la barre de navigation. Le symbole du soleil
(géométrique) apparaît en mode clair, et le croissant de lune en mode sombre.
Le thème est persisté dans localStorage
et respecte la préférence système (prefers-color-scheme) au premier
chargement.
Palette sombre
Fond principal
--dm-bg — arrière-plan de page
Surface
--dm-surface — cartes, encadrés, tableaux
Surface haute
--dm-surface-hi — en-têtes de tableaux, éléments surélevés
Bordures
--dm-border — séparations, contours
Texte principal
--dm-text — corps de texte, listes
Liens
--dm-link — liens, titres secondaires
Principes d'adaptation
- Surfaces étagées — trois niveaux de gris-bleu (
--dm-bg,--dm-surface,--dm-surface-hi) créent la profondeur sans ombres agressives. - Texte à contraste calibré — le texte principal (
#e2e8f0) atteint un ratio WCAG AA de 11:1 sur le fond sombre. Le texte secondaire (#94a3b8) reste à 5,5:1. - Accents préservés — les couleurs de niveau (bleu, turquoise, corail)
sont conservées en mode sombre avec une légère désaturation via
opacitypour éviter l'éblouissement. - Hover vert émeraude — les effets de survol rouges du mode clair
sont remplacés par un halo vert émeraude (
#10b981) en mode sombre, plus reposant pour les yeux et cohérent avec la palette nocturne.
Symboles de contrôle — esthétique Bauhaus
Le bouton de bascule clair/sombre dans la barre de navigation utilise deux icônes SVG purement géométriques, dessinées dans l'esprit Bauhaus :
Soleil : cercle plein + huit barres rectangulaires (quatre cardinales + quatre diagonales). Lune : un cercle plein découpé par un second cercle en masque SVG — la technique géométrique pure de « cercle moins cercle » crée le croissant. Pas de courbes de Bézier, pas d'emoji : uniquement des primitives géométriques.
#F01828) est trop agressif sur fond sombre. Le vert émeraude
offre un contraste suffisant (4,6:1) tout en évoquant la signalétique « OK »
des instruments de vol — un clin d'œil naturel au thème aéronautique du site.
7. Conventions visuelles
Un ensemble de conventions graphiques récurrentes crée des repères visuels stables :
- Bordure gauche bleue sur les titres h2 → hiérarchie principale.
- Bordure gauche turquoise sur les boîtes concept → contenu à retenir.
- Fond jaune/or → hero, mise en avant, épreuve facultative.
- Rouge signal → action requise, épreuve obligatoire, alertes.
- Pas de border-radius (0 partout) → esthétique Bauhaus stricte, angles droits.
- Ombres minimales → profondeur subtile sans distraction.
- Carrousel horizontal sur la page d'accueil → parcours visuel des modules, auto-scroll au survol.