À propos

Principes généraux

Pour concevoir l'architecture graphique de ce site, je me suis inspiré des principes de l'Atomic Design développé par Brad Frost. Cette méthode propose de distinguer cinq niveaux d'organisation graphique :

Page: Le plus « haut » niveau d'organisation graphique est celui de la « page », qui correspond à la composition de tous les autres éléments d'organisation afin de former une unité complète sur laquelle l'expérience d'usage peut être mesurée.
Exemple : Dans le cas de ce site, une « page » correspond à un document HTML associé à une route particulière.

Note :

À un niveau d'organisation « supérieur » à celui de « page », on pourait par exemple, considérer le niveau d'organisation du « site » lui-même. De la même manière, on pourrait concevoir l'organisation des pages à l'intérieur d'un livre. Cependant, je considère que ces niveaux d'organisation « supérieurs » au concept de « page » ne relèvent plus d'un cadre « graphique », mais mobilisent d'autres cadres analytiques.
Patron: Le « patron » (template) prescrit la manière de composer les différents éléments au sein des différentes pages.
Exemple : Dans le cas présent, il s'agit de définir des principes comme la présence du menu de navigation fixe en haut de la zone d'affichage sur toutes les pages, la présence des liens dans le pied-de-page, etc. Techniquement, le concept de blocs dans le langage Twig me permet de construire ces « patrons » grâce à l'instruction {extends}
Organisme: Un « organisme » correspond à une unité graphique de l'interface d'utilisation, qui articule plusieurs éléments fonctionnels dans un ensemble cohérent.
Exemple : le menu de navigation en haut de la page, le menu de pied-de-page, ou les « cartes ».
Molécule: Une « molécule » correspond à une unité fonctionnelle de l'interface graphique, qui répond à un cas d'utilisation particulier.
Exemple : une ligne d'un formulaire, un bouton, etc.
Atome: Enfin, les « atomes » correspondent à des unités élémentaires du langage (ie. constitués d'un élément HTML sans enfant, ou ne contenant que des nœuds de texte), qui peuvent être articulés ensemble pour former les « molécules »
Exemple : un champ de formulaire <input>, qui forme une molécule lorsqu'il est combiné avec son étiquette <label>.

Patrons

Tous les différents patrons des pages de ce site se composent de 4 parties principales :

Navigation générale

La barre de navigation principale est fixée en haut de la zone d'affichage, de manière à être toujours accessible (excepté pour les clients comme les imprimantes, qui ne nécessitent pas de navigation).

En-tête

Le haut de la page comprend trois organismes graphiques :

un fil d'Ariane permettant de situer la page par rapport à l'architecture plus globale du site ;
une bannière avec le titre de la page et une courte description ;
un sommaire qui résume le contenu de la page, avec des liens pour accéder aux différentes sections principales.

Contenu principal

Le corps de la page se compose d'un ou plusieurs éléments <article>, lesquels doivent être identifiés par un élément <h2>-<h6>, ou bien d'éléments <section>. Le patron de chaque page adapte le contenu et la forme de ces éléments en fonction des besoins.

Pied de page

Le pied de page contient différents liens utiles et informations légales obligatoires.

Ces différents éléments forment une base, à partir de laquelle les patrons des différentes pages peuvent être construits, en ajustant la composition de la banière et le contenu du corps de la page. Les titres de chaque article qui composent la page sont automatiquement ajoutés au sommaire via JavaScript.

Organismes

Navigation générale

Le menu de navigation principal se divise en deux sous-parties principales :

Marque: Le logo du site avec un lien vers la page d'accueil
Menu: Le menu à proprement parler, qui contient la liste des liens principaux, mais aussi des menus d'actions pour accéder aux différentes traductions du contenu.

Le menu de navigation exhibe deux comportements différents en fonction de la taille de la zone d'affichage :

Sur petits écrans, le contenu du menu est caché, et ne s'affiche qu'en appuyant sur un bouton dédié. Le menu occupe alors l'ensemble de l'espace de l'écran, avec le menu d'actions en bas.
Sur les écrans plus larges, le contenu du menu s'affiche en ligne, avec des menus déroulables qui s'étendent en dessous, et le menu d'action aligné à droite.

Exemple :

Bannière

Une bannière permet d'afficher une image en arrière-plan d'un contenu, avec un fond qui permet d'assurer un contraste suffisant pour garantir la lisibilité du contenu.

Exemple :

Sommaire

Le sommaire regroupe automatiquement des liens vers les différentes sections principales de la page (c'est-à-dire les différents éléments <article> qui contiennent un titre de niveau <h2>).

Exemple :

Cartes

Une carte est un élément qui comporte une en-tête, un contenu principal, et éventuellement une section dédiée à une liste d'actions, et qui prennent la forme de petites cartes qui peuvent être placées les unes à côté des autres.

Exemple :

Et reiciendis minus iure. Dolor deserunt eos reiciendis ea amet aspernatur aut. Placeat necessitatibus ullam officia nihil omnis modi. Dolor sit itaque ducimus voluptatem. Enim dolore consequatur alias ratione odio error.

recusandae consectetur eos maiores

Eos debitis excepturi vero enim iste accusantium

Ea vero rem ut velit odio tempore vero.

Error voluptas consequatur veniam. Dolorum qui voluptatem modi vel odio.

Aut ipsum sequi ratione. Enim rerum architecto sunt qui.

mollitia reprehenderit

Ligne de temps

Affichage d'une séquence de sections organisées selon une ligne temporelle.

Exemple :

2026—2027

Voluptas molestiae dolores

Et consequatur

Velit dolores sit et in. Sit aspernatur est error provident. Adipisci ut veritatis dolor quam porro voluptas. Natus doloribus aut quasi ea a.

Quia corrupti amet fugit in laudantium quas adipisci. Eligendi et voluptatibus dolor eveniet sit harum perferendis excepturi. Nisi dignissimos impedit sequi sit non id sed cum. Consequatur veritatis et alias maiores repellat eum quasi.

Perferendis dolorum pariatur eos et. Quo et et sit sit. Dolores ad recusandae porro laboriosam enim.

Sed sit sed rerum vel. Dolor facilis veniam iusto ea incidunt. Et consequatur ut quas consectetur. Enim ut ratione in repellendus.

2025—2026

enim necessitatibus voluptatibus

Debitis consequatur repellendus recusandae nihil ut

Dolore adipisci autem voluptatem officiis. Et nemo architecto impedit atque quia. Et molestiae consequatur suscipit ad animi. Voluptatibus neque qui omnis ea recusandae et unde.

Eos labore sed iste quia id labore eos voluptas. Dolor et atque autem praesentium. Sed eum nihil et adipisci doloremque nesciunt.

Voluptas tempora sint natus non et ut molestias suscipit. Ad consequatur asperiores omnis. Quisquam eos officia aut sit sed enim.

Occaecati suscipit fuga odio quis et vel id assumenda. Dicta recusandae cupiditate vel porro non. Beatae quas rem veniam eos optio.

2024—2025

Non consequuntur nam ut porro doloremque blanditiis. In voluptatum ex nihil dicta.

Quis et non hic nisi rerum. Eius et pariatur qui. Quia et necessitatibus est vero tenetur ut voluptatibus.

Vel veritatis officia repudiandae tempora minus fugit quod. Amet ut rem id illum ipsam totam soluta est. Odio ut voluptas possimus deleniti iusto repellat.

Possimus laborum quia quia totam et suscipit et. Optio veniam perferendis commodi a. Excepturi qui molestiae quia et veniam quaerat veritatis. Doloremque impedit ut tempora odit dignissimos.

Voluptatibus quod qui quibusdam enim. Mollitia sunt aut eos amet quis. Qui hic sint sed.

Molécules

Formulaires

.form-row: Une ligne de formulaire, qui comprend à la fois le champ du formulaire ainsi que les éléments d'aide (<label> etc.), et qui occupe toute la largeur du conteneur.

Exemple :
<label> voluptatibus qui iure <label> dolore rem ratione <label> doloremque facere ea <label> id voluptas sed <label> autem sunt odio
.btn: Un élément qui prend la forme d'un bouton (qu'il s'agisse d'un objet de type <button> ou d'un lien <a>, tant qu'il s'agit d'un élément interactif).

Exemple :
sed et excepturi omnis
.btn.form-row: Exemple :
sit dolore distinctio esse

Conception graphique

Principes généraux

Patrons