Difference between revisions of "Intégration graphique"

Revision as of 09:15, 20 March 2017

Penser son portail documentaire (Ateliers UX)

Définir l'architecture du site

Le plus simple est de dessiner (à main levée ou grâce à des outils dédiés) :

• la page d'accueil du site,
• les pages "déterminantes" (ayant une architecture différente de la page d'accueil),
• la page de résultat de recherche,
• la page d'une notice.

Une fois ces pages définies, il restera à les lier entre elles afin de définir le plan du site (organigramme).

Tous les menus (horizontaux ou verticaux) doivent également être définis : entrées principales, sous menus (avec leur destination).

IMPORTANT : dans tous les exemples qui suivent, les copies d'écran émanent de sites dont le graphisme a été personnalisé. La méthodologie pour la mise en place de l'architecture est commune à tous les Bokeh, cependant, le rendu graphique sera différent dans le cas d'un portail non personnalisé.

Page d'accueil

La page d’accueil est l'élément déterminant de l'ergonomie et de l'environnement graphique du site. Toutes les pages de contenu sont généralement calquées sur cette page d'accueil. Il reste cependant possible d'imaginer des types de présentation différentes (surtout d'un point de vue ergonomique).

Nombre de divisions (colonnes)

La notion de division correspond à la définition du nombre de colonnes constituant chaque page. Le portail peut supporter jusqu'à 3 divisions soit 3 colonnes. Entre la page d'accueil et les autres pages de contenu, le nombre où le format des divisions peut être variable.

• Exemples de page d'accueil sur une colonne unique : Herbignac, 1 000 pixels ; Haut-Chablais et Andrézieux-Bouthéon, 1 200 pixels.
• Exemples de page d'accueil sur deux colonnes : Réseau de Saint-Dizier et Wassy, 1 100 pixels dont 300 à gauche, réseau de Loire et Sillon, 1 600 pixels dont 24% à gauche.
• Exemples de page d'accueil sur trois colonnes : Astrolabe de Melun, 1 000 pixels, Réseau Valence/Romans, 1 200 pixels.

Menus et navigation

La navigation dans le site se fait généralement par un menu principal. Ce dernier peut être présenté soit de manière horizontale, soit de manière verticale dans la partie gauche (ou droite) du site.

Le menu ne peut contenir que 2 niveaux : une entrée de menu et un sous-menu.

Exemple de menu horizontal : à Clichy-sous-Bois, dans le Haut-Chablais, à Andrézieux-Bouthéon.

• le menu peut être "caché" et ne se développer en totalité que suite à un clic : sur le site du Val d'Hyères Val de Seine, il faut cliquer sur le bouton "Menu" afin d'accéder à son contenu.
• le sous-menu du menu horizontal peut s'afficher au survol de la souris comme sur le réseau de Chinon Vienne et Loire.
• le menu horizontal peut être placé sous la bannière (Sequedin) ou collé en haut du navigateur (Corbas).

Exemple de menu vertical : dans le réseau du Carembault, à Montauban.

• le menu vertical fermé par défaut ou systématiquement déplié.

Fil d'Ariane

Une fonction fil d'Ariane est livrée avec le site. Il s'affiche entre l'entête de site et le contenu. Il est construit selon la forme suivante : Accueil > Nom du profil > Nom de la page.

Exemple dans le Haut-Chablais :

Module articles

La boîte article permet d'afficher tous les contenus rédigés issus du CMS (gestionnaire d'articles) : aussi bien les informations froides (contenu fixe, par exemple, les infos pratiques) et les informations chaudes (contenu qui se renouvelle en permanence grâce au système de publication automatique, par exemple, les actualités). C'est pour cette raison que cette boîte article peut s'afficher de façons multiples dans une seule et même boîte (module) :

Article seul

Médiathèque de Pont Saint-Martin :

On peut noter, sur cette page, l'utilisation de deux boîtes articles :

• la première, dans la colonne de gauche : boîte "Horaires",
• la seconde, dans la colonne de droite : article "Club de lecture Samedi de lire".

Multi-articles

Important : ce mode d'affichage a un rendu satisfaisant avec, comme pré-requis, une bonne maîtrise des outils de traitement de l'image par les personnes en charge de la publication.

Sous forme de diaporama avec flèches de navigation

Réseau du Haut-Chablais :

Sous forme de diaporama à puces

Clichy-sous-Bois :

Sous forme de diaporama à miniatures

Médiathèque de Loudéac :

Sous forme de liste

Espace culturel d'Herbignac :

Module critiques

Les bibliothécaires et les lecteurs ont la possibilité de mettre des avis sur les différents documents de la base de données. Une boîte critique existe afin de les mettre en valeur sur le site.

Médiathèque et ludothèque de Revel :

Réseau de Chinon Vienne et Loire :

Module domaines

Cette boîte permet de mettre en avant des sélections du catalogue par nouveautés, genres, centres d'intérêt, auteurs, types de document, sections...

Médiathèque de Corbas :

Médiathèque de Loudéac :

Médiathèque de Moulins - Portail jeunesse :

Module kiosque de notices

Les kiosques permettent de mettre en avant une sélection de documents.

Barre d'images horizontale (animée ou non)

Bibliothèque de Clichy-sous-Bois :

Cover flow

Cube

Barre horizontale pleine largeur

Centre Culturel d'Herbignac :

Barre verticale

Liste avec vignettes

Mur

Frise chronologique

Module calendrier

La boîte calendrier est un élément important pour afficher très simplement les prochains événements organisés par les médiathèques. Ce module peut prendre différentes formes.

Forme classique

Réseau des médiathèques de Hénin-Carvin :

Réseau du Carembault :

Calendrier en mode mur

Médiathèques de la Métropole Européenne de Lille :

Module sitothèque

Ce module permet de mettre en valeur des listes de sites internet.

Bibliothèque départementale de la Meuse :

Réseau des Colporteurs en Ubaye :

Module RSS

Ce module remonte les dernières informations publiées sur un site via un fil RSS.

Module bibliothèque

Ce module permet d'afficher des informations spécifiques à chaque structure : coordonnées, heures d'ouverture, services, localisation sur une carte...

Réseau des médiathèques de la métropole Lilloise :

Pays Voironnais :

Réseau Estuaire et Sillon :

Haut-Chablais :

Module boîte deux colonnes

Ce module permet de diviser une colonne en deux et d'y installer deux boîtes (de type différent ou non).

Loudéac : à gauche et à droite, deux modules "critique" :

Médiathèques de Valence Romans Agglo : à gauche et à droite, deux modules "article" :

Haut-Chablais : à gauche, une boîte "article" et à droite une boîte "critique" :

Module boîte de connexion

La boîte de connexion au compte lecteur peut être positionnée dans la bannière ou dans le corps de la page d'accueil. Il faut veiller à ce qu'elle soit toujours accessible, quelle que soit la page sur laquelle on se trouve.

Connexion dans la bannière

Bibliothèque de la Nièvre :

Connexion dans le menu

Haut-Chablais :

Connexion dans une colonne

Revel :

Connexion masquée

Réseau du Pays Voironnais : il faut cliquer sur "Se connecter" pour faire apparaître la boîte de connexion :

Module boîte de recherche

La boîte de recherche peut être positionnée dans la bannière ou dans le corps de la page d'accueil. Il faut veiller à ce qu'elle soit toujours accessible, quelle que soit la page sur laquelle on se trouve. La boîte de recherche simple permet d'afficher un lien vers la recherche avancée.

Recherche dans la bannière

Réseau de Hénin-Carvin :

Recherche dans le menu

Médiathèque d'Andrézieux-Bouthéon :

Recherche dans une colonne

Réseau du Carembault :

Résultat de recherche

Lorsque l'on lance une recherche sur Bokeh, deux formats d'affichage sont disponibles (paramétrables par les bibliothécaires) : le mode "Mur" ou le mode "Liste". Il est également possible de paramétrer :

• les informations détaillant chaque document (titre, auteur, éditeur, résumé...),
• l'affichage des facettes (afin d'affiner la recherche),
• les suggestions (afin de préciser la recherche),
• des favoris utilisateurs (un domaine de prédilection),
• un nuage de tags (pour élargir la recherche).

Mode mur

Clichy-sous-Bois :

Loudéac :

Mode liste

Corbas :

Bibliothèque de la Nièvre :

Notice

Une notice bibliographique affiche différentes informations, celles provenant du SIGB et d'autres issues de réservoirs d'enrichissement (lastfm, wikipedia, première, INA...). Ces informations sont stockées dans différents blocs. L’ordre d'affichage de ces derniers est paramétrable par les bibliothécaires. Les informations sont ventilées entre des blocs dépliables matérialisés par des + et des – et d'un système d'onglet afin que le défilement de la page ne soit pas trop long. L'affichage est paramétrable par type de document.

Réseau du Pays Voironnais :

Loudéac :

Réseau du Carembault :

Médiathèque de Hénin-Carvin :

Clichy-sous-Bois :

Intégrer la charte graphique à partir des éléments fournis par la collectivité

Pré-requis à l'intégration graphique

• avoir mis en oeuvre l'architecture dans Bokeh : profil(s), pages, menu(s), modules,
• avoir paramétré l'affichage de la page de résultat de recherche et les notices (par type de document),
• avoir défini les domaines, fils RSS, sitothèque,
• avoir renseigné les lieux et bibliothèques en administration,
• avoir rédigé les contenus (textes, photos).

A noter :

• l'habillage du site n'implique pas le développement de nouvelles fonctions ou modules.
• il peut être livré avec la charte graphique jusqu'à 6 styles de boîte. Plus de styles serait soumis à validation et pourrait faire l'objet de devis complémentaires.

Etapes du projet

• envoi de tous les éléments listés dans le paragraphe ci-dessous « Eléments à fournir »,
• validation de la conformité des éléments par le chef de projet,
• intégration graphique (1ère itération),
• validation client et envoi des demandes de correction,
• intégration graphique (2nde itération),
• validation client.

A noter :

• tout élément non fourni ou non défini laissera place à l’élément livré, par défaut, dans Bokeh.
• l'intégration graphique du responsive sera traitée après validation complète des étapes précédentes.

Eléments à fournir

Maquettes grises

Exemple de maquette - Page d'accueil

Il s'agit des schémas des pages ci-dessous matérialisant les modules, leur place et leur proportion :

• page d’accueil (exemple ci-contre)
• page de résultat de recherche
• page d'une notice
• pages supplémentaires (sur devis) : page par bibliothèque, page agenda, page jeunesse...

Tout élément supplémentaire permettant de préciser l'aspect graphique est le bienvenu :

• maquettes au format PDF (voir ci-dessous)
• URL de pages prises en exemple (avec la description précise de ce qu'il faudra appliquer)

Maquette fournie par le service communication de la mairie de Revel

Dimensions

Largeur (en pixels) du site, des colonnes ou de tout autre élément déterminant.

• Exemples de page d'accueil sur une colonne unique : Herbignac, 1 000 pixels ; Haut-Chablais et Andrézieux-Bouthéon, 1 200 pixels.
• Exemples de page d'accueil sur deux colonnes : Réseau de Saint-Dizier et Wassy, 1 100 pixels dont 300 à gauche, réseau de Loire et Sillon, 1 600 pixels dont 24% à gauche.

Polices

Fournir les fichiers aux formats .eot, .svg, .ttf, .woof. Le site Fontsquirrel permet de générer ces fichiers. Attention cependant à toujours respecter les règles de licence propres à chaque police.

Si plusieurs polices sont utilisées dans le site, il sera indispensable de spécifier les endroits où elles doivent être appliquées.

Codes couleur,

Au format #ABCDEF : le site Codes Couleur HTML peut vous y aider.

• Le contraste entre la couleur du texte et la couleur de son arrière-plan doit-être suffisamment élevé.
• L'utilitaire Colour Contrast Analyser disponible en libre téléchargement permet de tester rapidement la conformité AA ou AAA du référentiel général d'accessibilité pour les administrations (RGAA).
• Le site Contrast-Finder permet de trouver les bons contrastes de couleur en fonction de la couleur du texte ou de la couleur du fond.
• Il est important de spécifier très précisément les endroits où chaque couleur devra être appliquée.

Styles

Pour chaque style, spécifier les police, taille, couleur, l'espacement entre les lettres, l'espace laissé au dessus ou en dessous :

• Titre de niveau 1
• Titre de niveau 2
• Texte simple

Image pour la bannière (bandeau supérieur)

Cette image n'est sont pas figée et il est possible de la modifier (en administration) à tout moment.

• Format : tous les formats images standards (jpg, png, gif...).
• Poids : pour un meilleur confort de navigation, le poids maximal accepté est de 250ko.
• Dimensions : les dimensions sont dépendantes de la résolution du site choisie. La largeur peut être généralement de 1 000 à 1 200 pixels. La hauteur peut être variable, mais il est conseillé qu'elle n'excède pas 250 pixels afin de ne pas trop empiéter sur la partie contenu.

Important : l'image ne doit pas contenir les éléments interactifs (logos cliquables, champs de recherche ou d'identification...). Ces derniers viendront s'intégrer en sur-couche.

Exemple : sur le site des Bibliothèques du Haut-Chablais, l'image de bannière est celle-ci.

Logos

Il est possible d'intégrer, par dessus la bannière, 2 logos (maximum) qui pourront renvoyer vers d'autres sites (portail de la ville, blogs...). Si ces images sont des liens, fournir les URL correspondantes.

Exemple : sur le site de Gières, le logo mène sur le site de la ville de Gières.

Image de fond

• Format : tous les formats images standards (jpg, png, gif...).
• Poids : pour un meilleur confort de navigation, le poids maximal accepté est de 250ko.
• Dimensions : les dimensions sont dépendantes de la résolution du site choisie. La largeur peut être généralement de 1 000 à 1 200 pixels.

Exemple : à Revel, l'image de fond est celle-ci.

Exemple : à Andrézieux-Bouthéon, l'image de fond est celle-ci.

Toutes images déterminantes

• cartes : dans le Haut-Chablais, la carte est non interactive.
• cartes interactives : dans le réseau de la CAVY, la carte est interactive. Le fond de carte doit être fourni avec les noms de communes (voir image ci-contre).
• personnalisation des boîtes : à Sequedin, l'image de titre des boîtes "Venir en médiathèque" et "Agenda" est :
• domaines (genres par exemple) : les images symbolisant les axes de recherche dans le catalogue (domaines) peuvent se présenter de plusieurs manières : à Corbas, il s'agit de couvertures, dans le Haut-Chablais, de pictogrammes, à Andrézieux-Bouthéon, d' images. Attention, dans le cas des domaines, il est vivement conseillé d'utiliser des images de même taille.

Icônes (pictogrammes)

• Format : tous les formats images standards (jpg, png, gif...).
• Dimensions : dépend de la destination du pictogramme.
  • types de document : à Loudéac, les types de document (supports) sont représentés par ces images :
  • réserver : à Corbas, la réservation d'un document se fait en cliquant sur la flèche :
  • panier : dans le catalogue de Clichy-sous-Bois, le panier est matérialisé par :
  • puces (diaporama) : dans le réseau des Terroirs d'Angillon, les puces, permettant la navigation sous le carrousel d'actualité sont ces 2 images :
  • étoiles (système de notation des critiques) : dans le réseau du Carembault, la note laissée à chaque critique de document peut aller de 1 ( ) à 5 ()
  • domaines (genres par exemple) : les images symbolisant les axes de recherche dans le catalogue (domaines) peuvent se présenter de plusieurs manières : à Corbas, il s'agit de couvertures, dans le Haut-Chablais, de pictogrammes, à Andrézieux-Bouthéon, d' images. Attention, dans le cas des domaines, il est vivement conseillé d'utiliser des images de même taille.
  • entrées de menu : à Clichy-sous-Bois, chaque bouton du menu est composé de 2 images : une stable et une autre pour le survol de la souris.
  • liens sociaux (Facebook, Twitter) : sur le réseau des bibliothèques de la métropole de Lille :
  • newsletter : sur la Communauté d'Agglomération Val d'Yerres - Val de Seine, la newsletter est matérialisée par une enveloppe :

Pied de page

• hauteur (en pixel)
• image de fond si nécessaire : en Pays Voironnais, seule la couleur a été définie (#97a719), dans le Chablais, il s'agit d'une image unique et à Corbas, d'une image qui se répête .
• textes si nécessaire
• images, logos et URL des liens : à Revel, les deux images du pied de page (Suivez-nous et Ville de Revel) sont des liens.

Réalisation d'une maquette graphique et intégration de cette dernière

Passage en responsive d'un Bokeh standard

(En cours de rédaction FC)

Passage en responsive =

• page d'accueil :
  • bannière,
  • boîte de connexion,
  • boîte de recherche,
  • menu horizontal,
  • boîtes de la colonne gauche,
  • boîtes de la colonne principale.

Etant entendu que l'affichage de ces éléments, en responsive, se fera dans cet ordre.

• page de résultat de recherche,
• page d'une notice.

Passage en responsive d'un Bokeh charté