Différences entre versions de « Intégration graphique »
Ligne 408 : | Ligne 408 : | ||
==Réalisation d'une maquette graphique et intégration de cette dernière== | ==Réalisation d'une maquette graphique et intégration de cette dernière== | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Version du 31 janvier 2020 à 09:51
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.
[ ]
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 (Andrézieux-Bouthéon).
- 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 à puces[ ]
Sous forme de diaporama à miniatures[ ]
Sous forme de liste[ ]
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 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[ ]
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 :
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 :
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[ ]
[ ]
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[ ]
[ ]
Médiathèque d'Andrézieux-Bouthéon :
Recherche dans une colonne[ ]
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[ ]
Loudéac :
Mode liste[ ]
Corbas :
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.
Loudéac :
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[ ]
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)
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 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.