Ceci est le second d’une série de trois articles à travers lesquels j’explore les principales particularités de Drupal auxquelles doit faire face un designer graphique. Ceci s’adresse non seulement aux designers, mais également aux intégrateurs et programmeurs qui souhaiteraient communiquer quelques trucs à leurs équipes afin de créer des concepts graphiques bien adaptés à la plate- forme et, en même temps, réalisés plus rapidement. Ces articles seront particulièrement utiles aux designers ayant peu ou pas d’expérience avec des systèmes de gestion de contenus. Toutefois, j’ose croire que tout le monde pourra y trouver son compte, ne serait-ce que pour formaliser quelques idées. Un seul pré-requis : Avoir déjà conçu ou intégré un design Web.

Dans l’article précédent, nous avons vu qu’une page Drupal se découpait en régions. Les régions sont des contenants aptes à accueillir différents éléments d’information. Ces derniers sont fort variés et doivent être considérés lors de l’élaboration d’une charte graphique. Je vais tenter d’en faire l’énumération :

Éléments de contenu :

• Noeuds : Ces éléments sont typiquement créés et modifiés par des utilisateurs du site. Différents types de noeuds sont possibles, par exemple : articles, nouvelles, billets, évènements, fiche de membre, notice bibliographique, etc. Chaque type de noeud comporte ses propres champs, par exemple : titre, corps, auteur, date de création, date d’évènement, adresse, code ISBN, etc. L’éventail de types de noeuds de même que le détail des champs est hautement personnalisable; chaque projet définira ceux qui sont requis. Sur le plan du design, il sera nécessaire d’établir comment seront présentés chacun des éléments d’information. Le noeud est la principale unité de contenu sous Drupal et l’essence d’un site basé sur Drupal tourne autour de la manipulation des noeuds. Le coeur de la plupart des pages est constitué soit d’un noeud, soit d’une liste de noeuds (ou vue). Une vue présente des champs de noeuds choisis selon certains critères (par exemple : une en ordre chronologique montrant le titre et l’auteur de tous les noeuds classés dans une catégorie « design »). Lorsqu’une page contenant une vue est demandée par un visiteur, le système recueille et présente dynamiquement tous les noeuds correspondant aux critères associés à cette vue. Encore une fois, le designer a donc affaire à du contenu dynamique.
• Blocs : Les blocs sont des éléments d’information qui, généralement, servent à offrir l’accès à différentes fonctionnalités du site ou à offrir un complément d’information relatif au noeud (ou à la vue) présenté dans la page. Les blocs sont créés par des utilisateurs, contiennent une vue sur plusieurs noeuds, ou sont générés par différents modules du système. Comme les noeuds, les blocs sont hautement dynamiques et contextuels. Les blocs sont positionnés dans des régions par les administrateur du site et certains blocs n’apparaissent que dans certaines pages ou à certains utilisateurs. Par exemple, le bloc de connexion montre un formulaire où entrer un identifiant et mot de passe, mais disparaît une fois la connexion établie. Sur drupal.org, la table des matières d’une page de documentation n’apparaît que lorsque l’une des pages du manuel est visitée.

Éléments de navigation :

• Menus : Les menus sont généralement le principal outil de navigation du site. Ceux-ci sont également dynamiques, puisque leur contenu exact peut varier selon le contexte et les droits d’accès de l’utilisateur. Les menus sont positionnés dans des régions et peuvent prendre différentes formes selon le contexte et le design souhaité : listes de liens, listes déroulantes, onglets.
• Fil d’Ariane : Un outil d’aide à la navigation fréquemment offert, le fil d’Ariane est généré automatiquement par Drupal afin de présenter une piste du chemin parcouru par le visiteur pour atteindre la page courante.
• Pagination : La pagination permet de naviguer dans des listes d’éléments (noeuds ou autres) réparties sur plusieurs pages. Quelques exemples d’éléments communément utilisés dans la pagination : liens vers la première et la dernière page, liens vers la page précédente et la suivante, indication de la page courante, nombre total d’éléments, etc.
• Informations de publication : Un noeud est souvent accompagné de certaines métadonnées, telles que son auteur et sa date de publication. Ceci est tout à fait analogue à un champ, mais la présentation en est souvent distincte. En outre, il peut s’agir d’un élément de navigation, puisque le nom de l’auteur est couramment offert comme un hyperlien vers un profil de membre.
• Liens contextuels : Un noeud est fréquemment accompagné de liens contextuels, par exemple : lien donnant accès au texte intégral, lien vers un fichier joint, lien pour ajouter un commentaire.
• Catégories : Beaucoup de sites présentent des listes de catégories associées à chaque noeud en guise d’outil de navigation supplémentaire, une fonction offerte par Drupal à la base.

Éléments d’interface :

• Messages : Les messages sont produits par le système pour fournir des informations utiles au visiteur. Deux types de messages sont produits : messages d’information et messages d’erreur. Plusieurs messages peuvent être présentés simultanément, auquel cas une liste HTML est utilisée comme contenant.
• Formulaires : Pratiquement tous les sites comportent des formulaires permettant aux utilisateurs de saisir des informations, par exemple : formulaire de connexion, formulaire de contact, formulaire de commentaire, demande d’adhésion au site. Une variété d’éléments graphiques sont à prévoir dans un formulaire : Champ (texte, liste, liste déroulante, bouton radio ou case à cocher), titre de champ, description de champ, bouton, indicateur de champ obligatoire. À noter qu’un message est généré lorsqu’une erreur de saisie est faite dans un formulaire, tandis que les champs erronés sont soulignés de manière plus visible.

Voici un aperçu de quelques-uns des éléments mentionnés ci-dessus :

Légende :

Et voici un exemple de formulaire accompagné d’un message d’erreur :

Bien entendu, la plupart des sites quelque peu avancés comporteront des éléments supplémentaires; un calendrier ou un système d’évaluation (vote) des contenus sont des cas fréquents. J’ai tenté ici d’énumérer les éléments communs à presque tous les sites Drupal. Ces éléments devraient toujours faire l’objet d’une réflexion de design — et bien sûr, on peut par cette réflexion décider d’en omettre quelques uns ou d’altérer grandement leur apparence de base!

Drupal offre une pleine latitude sur la forme de ces éléments. Une critique souvent entendue est que beaucoup de sites Drupal se ressemblent, une situation que je dois admettre comme plutôt vraie. Cependant, ceci s’explique de deux ou trois façons, soit un faible investissement en conceptualisation graphique ou, tout simplement, l’omission par le designer prendre tous les éléments en considération. En outre, il arrive que l’intégrateur graphique ou le programmeur ne sache pousser la machine à fond, faute de connaître suffisamment la plate-forme (Drupal est encore nouveau pour un grand nombre de professionnels). Au final, les éléments graphiques qui ont été omis lors du design ou de l’intégration héritent tout simplement de la forme par défaut proposée par Drupal.

Nous avons maintenant les outils nécessaires pour développer la charte graphique, sujet de l’article suivant.

Tous les articles de la série :

• 1/ La structure d’une page.
• 2/ Les éléments d’une page.
• 3/ La charte graphique.