Philosophie et principes de conception du site¶
Nous avons souhaité concevoir un site à la fois moderne, joyeux, accessible et facile à utiliser, en cohérence avec l'identité de notre tradition. Nous sommes une tradition de bouddhisme moderne et notre voie est une voie joyeuse. Le design du site doit donc transmettre cette identité dès le premier regard : il ne s'agit pas simplement de présenter des informations, mais de faire ressentir l'atmosphère de nos centres et de donner envie de les découvrir.
Le site a également été pensé pour répondre efficacement aux besoins de deux types de visiteurs : les personnes qui découvrent le centre pour la première fois et celles qui le fréquentent déjà régulièrement. Pour un nouveau visiteur, le site doit permettre de comprendre rapidement qui nous sommes, ce que nous proposons, à qui s'adressent nos activités et quelle atmosphère il peut trouver dans le centre. Pour une personne habituée, qui connaît déjà le centre et vient rechercher une information précise, il doit au contraire permettre d'accéder rapidement et simplement à ce dont elle a besoin : un horaire, un événement, un cours, le planning, les informations pratiques, etc.
Toute la conception du site repose donc sur cet équilibre : faire découvrir et donner envie aux nouveaux visiteurs, tout en permettant aux visiteurs réguliers de trouver rapidement l'information qu'ils recherchent.
Pour voir d'un coup comment la page d'accueil est construite, voici un exemple de page entière sur la base du centre de Brighton. Chaque section est détaillée plus bas.
Voir toute la page d'accueil d'un coup
Une identité visuelle moderne et joyeuse¶
L'orange a été choisi comme couleur principale du site. C'est une couleur associée à la sagesse et à notre tradition, mais elle permet également de créer une identité visuelle chaleureuse et dynamique.
La nuance retenue est suffisamment profonde pour garantir un bon contraste avec le blanc, ce qui contribue à une bonne lisibilité et au mieux au respect des principes d'accessibilité du Web. C'est une négociation entre accessibilité et esthétique.
Autour de cette couleur principale, nous avons défini une palette composée également de bleus, de violets et de verts.
Cette palette constitue un cadre commun tout en laissant une certaine liberté aux centres. Un centre comme Brighton a, par exemple, choisi le bleu comme couleur principale afin de se différencier d'un autre centre utilisant déjà l'orange. L'essentiel est de rester dans la palette définie, afin de conserver une cohérence visuelle avec l'ensemble des sites qui utilisent ce système.
Où agir
Les couleurs du site explique le principe de la palette ; l'écran Couleurs et la tâche Changer les couleurs du site montrent comment la régler.
Une interface simple et immédiatement identifiable¶
L'en-tête du site a volontairement été conçu de manière très sobre. Le logo du centre apparaît en haut à gauche, en blanc sur fond orange. En haut à droite, le bouton du menu reste toujours au même emplacement.
Nous avons choisi d'accompagner le traditionnel pictogramme « hamburger » du mot « Menu ». Ce choix renforce la compréhension de la fonction du bouton et contribue à rendre la navigation plus accessible à tous les publics.
Le menu conserve le même principe et le même emplacement, aussi bien sur ordinateur que sur mobile. Le visiteur retrouve donc toujours les mêmes repères, quel que soit l'appareil utilisé. Cette continuité rend l'utilisation du site plus homogène, simple et intuitive.
Où agir
Le menu du site explique comment le menu est construit ; l'écran Menu du site et la tâche Modifier le menu montrent comment le modifier.
Des images pensées pour fonctionner partout¶
Pour faciliter la mise en page et garantir une présentation homogène sur l'ensemble du site, nous avons également choisi d'uniformiser le format des images principales.
Le format des images : 1050 × 400 pixels
Les images utilisées en haut de la page d'accueil, des pages de contenu, des pages d'événements et dans différents espaces du site sont préparées au format 1050 × 400 pixels.
Ce format panoramique permet de mettre suffisamment l'image en valeur tout en laissant apparaître rapidement les premières informations situées en dessous.
Ce choix est particulièrement intéressant sur mobile comme sur ordinateur : l'image reste visible et attractive sans occuper tout l'écran, ce qui permet au visiteur d'accéder rapidement au contenu.
L'utilisation d'un format fixe simplifie également considérablement la création graphique. Plutôt que de devoir gérer des images affichées en pleine largeur ou en plein écran, avec des contraintes de cadrage différentes selon les appareils, il suffit de préparer correctement l'image une seule fois.
Une fois son cadrage réalisé, elle peut être utilisée de manière fiable dans les différents emplacements du site : images principales, événements à venir, vignettes et articles du blog. Cela permet d'obtenir une présentation cohérente tout en rendant la gestion quotidienne du site beaucoup plus simple, sans nécessiter de compétences avancées en graphisme.
L'image d'accueil : créer une première impression positive¶
L'image située tout en haut de la page d'accueil joue un rôle particulier. Elle s'adresse avant tout aux personnes qui découvrent le site pour la première fois.
Son objectif n'est donc pas simplement d'illustrer le centre. Elle doit provoquer une première impression positive et immédiate :
« Ah, ça a l'air sympa ici ! »
Cette impression doit être créée à la fois par le design et par le message transmis par l'image. Le choix du visuel, du texte et de la composition doit donner une idée de l'atmosphère du centre avant même que le visiteur ait commencé à consulter les différentes activités proposées.
Cette première accroche est également l'occasion de montrer ce qui caractérise notre approche. Nous sommes une tradition de bouddhisme moderne et joyeuse, et nos centres peuvent transmettre cette dimension dès le premier regard. L'humour, la légèreté et des messages vivants peuvent donc avoir toute leur place dans ces visuels.
L'objectif est de montrer une réalité que les visiteurs peuvent retrouver dans nos centres : des lieux accueillants, vivants, chaleureux et accessibles. Une personne qui ne connaît pas encore notre tradition doit pouvoir se dire immédiatement :
« C'est peut-être un endroit pour moi. »
Pour faciliter la création de ces visuels, un module spécifique a été développé afin de permettre de composer très simplement une image d'accueil avec une image, un texte et une ou plusieurs icônes. Le module permet également d'ajuster la présentation et de visualiser directement le résultat sur mobile.
Il est possible de créer plusieurs images d'accueil, qui pourront ensuite être affichées de manière aléatoire. Une personne qui revient sur le site peut ainsi découvrir une accroche différente, ce qui donne une impression de nouveauté et permet de faire vivre la page d'accueil.
Il peut par exemple être intéressant de créer une dizaine d'images au cours de quelques mois ou d'une année, selon le temps que le centre souhaite consacrer à cette animation. Ce travail n'est donc pas simplement décoratif : cette première accroche constitue l'une des premières occasions de créer un lien avec une personne qui découvre le centre.
Voir une image avant de la publier
Le site tire au hasard parmi les images d'accueil publiées ; une image en brouillon n'est jamais montrée aux visiteurs. Pour juger une nouvelle image en conditions réelles avant de la publier, utilisez le bouton Voir sur la page d'accueil de l'écran de modification : vous seul voyez alors la page d'accueil avec cette image.
Où agir
L'écran Image d'accueil montre comment composer une image.
Une page d'accueil qui oriente naturellement les visiteurs¶
Après cette première accroche, un titre présente de manière très simple les activités proposées par le centre et rappelle qu'elles sont ouvertes à tous.
Juste en dessous, une zone de tri permet au visiteur de s'orienter rapidement vers les principaux contenus de la page d'accueil. Elle peut notamment proposer des entrées vers les cours de méditation, les événements du week-end, les formules d'abonnement et, en quatrième position, l'accès à l'agenda du centre.
Cette dernière entrée est particulièrement importante, car le calendrier fait souvent partie des informations recherchées en priorité par les personnes qui connaissent déjà le centre ou souhaitent simplement savoir ce qui s'y passe.
Lorsque le visiteur sélectionne l'un de ces éléments, il est directement dirigé vers la partie correspondante de la page d'accueil. Il découvre alors une présentation courte de l'activité, puis peut accéder à la page qui lui est consacrée pour obtenir davantage d'informations.
Cette organisation permet donc de découvrir les activités du centre sans devoir systématiquement passer par un menu. La page d'accueil devient un véritable parcours de découverte : chacun peut soit aller directement vers ce qui l'intéresse, soit simplement faire défiler la page et découvrir progressivement l'ensemble des propositions.
Une page d'accueil également pensée pour le référencement¶
Cette organisation présente également un intérêt important pour le référencement naturel.
La page d'accueil contient des contenus consacrés aux différentes activités du centre, avec les termes et expressions correspondant aux recherches que peuvent effectuer les internautes. Chaque présentation peut ensuite renvoyer vers une page plus complète consacrée à l'activité concernée.
La page d'accueil devient ainsi un point de départ vers les autres contenus du site et crée un maillage interne cohérent.
La même structure répond donc à plusieurs objectifs : elle rend la navigation plus intuitive pour les visiteurs, enrichit la page d'accueil avec des contenus utiles et facilite la découverte des autres pages du site par les moteurs de recherche.
Montrer immédiatement la vie du centre¶
Juste après la zone de tri, une section présente les événements prévus dans les prochains jours. Le visiteur peut ainsi savoir immédiatement ce qui se passe aujourd'hui et dans les jours qui suivent, sans avoir besoin d'ouvrir l'agenda.
La suite de la page permet ensuite de découvrir naturellement d'autres informations sur le centre en faisant simplement défiler l'écran (les formules d'abonnement mensuel, par exemple).
Où agir
Cette section est un bloc « À venir » : voir l'écran Blocs « À venir » et la tâche Afficher les événements à venir sur une page.
Mettre les enseignants au premier plan¶
Un carrousel permet également de présenter les enseignants et de montrer immédiatement les visages des personnes qui transmettent les enseignements.
Sur la page d'accueil, l'ordre de présentation est volontairement aléatoire. À chaque visite, les enseignants peuvent ainsi apparaître dans un ordre différent, ce qui rend la présentation plus dynamique et permet de mettre régulièrement en avant différents enseignants.
La page dédiée aux enseignants adopte une organisation différente. L'enseignant résident y est présenté en premier et avec une photo plus grande. Les autres enseignants sont ensuite présentés dans l'ordre choisi par le CPS.
Où agir
Sur la page des enseignants, l'ordre est celui de la liste des enseignants dans l'administration : voir l'écran Enseignants.
Donner une vision immédiate du planning¶
Plus bas dans la page d'accueil, le planning hebdomadaire des cours de méditation permet de visualiser en un coup d'œil l'organisation des cours sur la semaine.
Il permet de distinguer les différents moments de la journée, notamment les cours du matin, du midi et du soir. Le visiteur peut ainsi comprendre très rapidement quand ont lieu les différentes séances.
Au besoin, un second calendrier permet également de présenter les cours organisés dans les annexes.
Cette présentation donne une vision très concrète de la vie du centre et permet de trouver rapidement un créneau correspondant à ses disponibilités.
Où agir
L'écran Planning hebdomadaire et la tâche Mettre à jour le planning hebdomadaire.
Le pied de page : informer et relier les sites¶
Le pied de page, présent sur l'ensemble des pages du site, ne constitue pas simplement une zone technique. Il peut également servir d'espace d'information, de fidélisation et de mise en réseau.
Les avis Google y sont intégrés afin de présenter une sélection de commentaires réellement laissés par les visiteurs. Cette présence apporte une dimension humaine au site et permet de montrer directement les expériences partagées par les personnes qui fréquentent le centre.
Cette zone propose également un bouton permettant aux visiteurs de laisser eux-mêmes un avis.
Le pied de page peut par ailleurs donner accès à l'inscription à la newsletter et proposer des ressources complémentaires, comme des e-books gratuits ou des podcasts.
Enfin, cet espace constitue un emplacement particulièrement intéressant pour créer des liens vers les autres centres Kadampa du pays. L'idéal serait que les différents sites adoptent la même logique et se renvoient mutuellement vers les autres centres.
Cela créerait un véritable maillage entre les sites, utile à la fois pour les visiteurs qui souhaitent découvrir un autre centre et pour la structure globale du réseau. Un lien vers le centre national peut également être intégré dans cette logique.
Où agir
Le pied de page est un modèle de mise en page : voir l'écran Mise en page. Pour masquer ou mettre en avant un avis Google : voir l'écran Avis Google.
Une conception qui réunit esthétique, simplicité et efficacité¶
L'ensemble de ces choix répond finalement à une même logique : créer un site qui soit agréable à regarder, simple à utiliser et représentatif de l'identité des centres, tout en étant facile à faire évoluer et à administrer.
Le visiteur doit pouvoir comprendre immédiatement où il se trouve, ce qui est proposé, quand ont lieu les activités et comment aller plus loin. Il peut choisir de consulter directement une information précise ou simplement se laisser guider en faisant défiler la page.
En parallèle, la structure du site permet de développer un contenu riche, de créer des liens cohérents entre les différentes pages et entre les différents sites, et de renforcer progressivement le référencement naturel.
Le design n'est donc pas dissocié de l'ergonomie, du contenu ou du référencement : tous ces éléments ont été pensés ensemble pour créer l'expérience d'un site à la fois moderne, joyeux, accessible, fluide et efficace.