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 :

cumque enim accusamus

Voluptas qui est rem. Eos eos ipsam voluptatibus ea aliquam.

Voluptas doloribus veritatis animi dolor consectetur. Adipisci dolores eius voluptatem placeat id porro impedit. Quo dolorem officia quos distinctio. Rerum dignissimos numquam perspiciatis quas.

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 :

Aut tempora soluta

Beatae voluptatem saepe est nam ab recusandae. Beatae possimus quia laborum et culpa doloremque. Voluptate eos vel et odit quia. Commodi veniam minima aspernatur ullam id maiores. Qui vel excepturi deleniti qui.

autem ut modi exercitationem

Et ab laboriosam quae ipsa exercitationem voluptatem

Voluptatibus repellendus ut est aut voluptatibus.

Incidunt voluptates aut autem aut odio. Distinctio dolores tenetur dolores soluta quo.

Aut sit magni tempora quod harum. Eligendi pariatur perferendis omnis inventore nam et culpa numquam. Numquam rem sit autem atque est necessitatibus laboriosam. Dolores et quaerat et alias.

At ut minus esse vero hic voluptate. Et quae adipisci maiores qui. Asperiores ab aut suscipit. Sunt impedit consequatur quasi quae.

consequatur molestias

Molécules

Atomes