Conception graphique

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 :

1. un fil d'Ariane permettant de situer la page par rapport à l'architecture plus globale du site ;
2. une bannière avec le titre de la page et une courte description ;
3. 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

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 :

distinctio sed fuga

Minus mollitia eaque ullam qui enim. Laborum dignissimos officia aut sed ipsa nihil neque. Eum autem et sit ea dicta ut.

Officiis soluta commodi est odio unde quod recusandae. Recusandae ut culpa sunt accusamus perferendis. Architecto quaerat asperiores enim error nihil aut.

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 :

Distinctio est earum

Ipsam ducimus quis exercitationem praesentium. Quae tenetur maiores quaerat nihil. Distinctio blanditiis ut natus deleniti sunt nisi. Incidunt sunt tempore quisquam dolorem voluptate qui. Perspiciatis molestiae sed maiores et facere.

quis aut debitis voluptatem

Et officia ducimus magni dolor et incidunt

Animi similique quae exercitationem reiciendis fugit blanditiis.

Quos consequatur delectus autem. Velit exercitationem et quia nobis consequatur atque distinctio.

Quia delectus doloribus in. Fugit ullam fugit et voluptatibus iusto. Labore voluptas blanditiis facere blanditiis quae voluptatibus sit ut. Veniam similique voluptas sint fugiat est. Soluta voluptatem voluptatem consequatur consequatur sit quia consequuntur.

Inventore minima at quia. Aliquid quis unde est in cupiditate. Vero animi facilis harum aliquam quia sunt. Sapiente dolorem pariatur quam odit consequatur.

quis nihil

Molécules

Atomes