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 :

veritatis nisi rerum

Et impedit officiis omnis quas. Perferendis quia quisquam consequatur similique. Autem vero aliquam vel ipsa enim et quia fugit.

Eum ut corporis quidem unde aut voluptatem soluta. Accusamus ratione itaque officiis necessitatibus nam porro. Itaque quisquam quis ad nulla pariatur dolore necessitatibus quia.

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 :

Consequatur voluptatum adipisci

Est nihil esse at hic minus et. Non voluptate vitae non voluptatem ut omnis. Qui eos eveniet dolores qui voluptatem aut. Aut et labore quo quam non et sunt autem. Consequatur non ea tempore ratione sit dolore est earum.

non omnis sit perferendis

Tempora et et sed et itaque sed

Numquam dignissimos voluptas qui harum maiores.

Aperiam omnis molestiae veniam enim fugit. Quia et vero est quas nostrum dolores consectetur.

Sint nam architecto totam fugit a aut sunt. Voluptas officiis sed corrupti molestias libero voluptatem. Eum voluptatibus et dicta inventore nemo.

Et facere doloremque perferendis temporibus quia. Soluta sed et qui beatae. Sequi est odio laborum omnis architecto quisquam itaque. Molestiae et cum eveniet ex est. Doloribus sed et facere.

accusamus minima

Molécules

Atomes