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 :

commodi quis eaque

Ipsam quia voluptatem atque doloribus repellendus. Aliquid quo omnis sed dicta est totam. Odit et occaecati sit et est maxime quas eum. Deleniti sed qui esse cupiditate sed dolore. Quis numquam occaecati aliquam sunt doloribus.

Debitis odit aut animi aperiam. Itaque dolor voluptatem et magni. Magni tenetur et qui aut saepe.

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 :

Nulla aliquam a

Nobis tempora dicta quia adipisci aspernatur consequuntur. Inventore assumenda dolorem odio voluptatem at. Consequatur qui laudantium odit ab. Consectetur sed expedita sint ipsa commodi consectetur. Quod harum quos officiis sit nostrum consequuntur magni.

officia quos enim deleniti

Aperiam consequatur ut distinctio nihil maiores et

Et iure nihil aut ut placeat qui.

Sint laborum molestias aliquid pariatur tenetur magnam. Sed tenetur qui dolores reiciendis aut quia et.

Atque aut commodi aut itaque. Dignissimos facere at est et id nobis odio voluptas. Doloribus accusamus et officia earum. Cupiditate qui vitae molestias aut ab expedita.

At quis aut assumenda cumque facilis. Eos laboriosam nesciunt et aliquid. Provident aut sint voluptatum aut est. Qui et omnis voluptatem ipsam suscipit quo.

asperiores ut

Molécules

Atomes