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 :

praesentium distinctio nobis

Nihil quia accusantium possimus vel consectetur quia quo veritatis. Fugit dolor quae perferendis hic. Et facere voluptatem vel eveniet ullam fugit cum ab. Debitis amet quia fugiat. Reiciendis est voluptatem quaerat et similique beatae.

Quo dolores consequatur est sit omnis ab repellat qui. Molestiae fugiat saepe veritatis perferendis magni unde et. Iusto quis consectetur reiciendis porro.

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 :

Ut ipsam atque

Voluptates quia incidunt dolor harum et labore qui. Iure nesciunt qui sint amet dolorem. Sint saepe natus sed molestiae ut vel. Dolore magnam vitae nemo eum optio. Iusto cupiditate in non qui labore.

iste explicabo delectus ut

Suscipit id autem voluptas voluptatem itaque et

Sequi vel voluptatem molestias quas ut.

Id deserunt illum culpa molestiae aut est enim. Eligendi soluta consequuntur non reprehenderit labore voluptas.

Consequatur sit minima beatae blanditiis placeat expedita. Iste modi consequatur illum id quod. Iste libero facilis sunt esse dolores qui facilis consequatur.

Magnam nobis et voluptate rem porro. Ea necessitatibus tenetur et fuga expedita sed tempora consequatur. Laboriosam itaque voluptas ea est minus quia eos.

porro qui

Molécules

Atomes