La création d'une marque personnalisée pour votre établissement est le meilleur moyen de populariser votre logo, vos couleurs et les informations importantes vous concernant auprès de vos utilisateurs. Une marque personnalisée véhicule la personnalité, les opinions, les promesses et les services de votre établissement. Vous pouvez personnaliser votre marque de bien des manières différentes, allant de la plus facile à la plus complexe.

Avant de commencer à personnaliser votre marque, identifiez les objectifs de cette personnalisation et concevez votre approche.

  • Identifiez la portée de la personnalisation et optez pour la méthode la plus appropriée et la plus simple pour y parvenir. Par exemple, il n'est pas nécessaire de créer un thème système personnalisé pour ajouter les couleurs de l'établissement et un logo. Essayez plutôt de modifier les couleurs et d'ajouter un logo en personnalisant votre marque par défaut.
  • Renseignez-vous sur l'identité de votre établissement afin de vous conformer aux recommandations établies en matière de création de marque et de style.
  • Créez des maquettes lors de la conception d'une page de connexion, d'une page Passerelle et d'un thème de système personnalisés.
  • Planifiez des délais de développement suffisants pour concevoir et tester les thèmes et les palettes personnalisés.
  • Créez un plan pour l'analyse qualité et la maintenance des thèmes système personnalisés.

Page de connexion et page Passerelle personnalisées

Page de connexion personnalisée. La meilleure manière de commencer à personnaliser votre marque est de personnaliser votre page de connexion. La page de connexion constitue un fichier unique contenant sa propre feuille CSS et la majeure partie du balisage modifiable. Le fait de repenser la page de connexion n'affecte en rien le reste de l'application et la portée de la modification est donc réduite. La création d'une page de connexion personnalisée ne nécessite aucune expérience en HTML et CSS. Il vous faut également déterminer l'emplacement où stocker les images associées. Pour en savoir plus, reportez-vous à Personnalisation de la page de connexion.

Page Passerelle : la page Passerelle est la toute première page Web que les utilisateurs voient lorsqu'ils accèdent à Blackboard (sauf si ce paramètre a été ignoré). Vous pouvez ajouter une image ou un message de bienvenue personnalisés ainsi que des modules contenant des informations pertinentes et importantes. La création de modules personnalisés nécessite une certaine expérience en HTML et CSS. Pour en savoir plus, reportez-vous à Modules et Personnalisation de la page Passerelle.

Bonnes pratiques pour la conception d'une page de portail

Une page de portail, telle que la page Mon établissement, est souvent la première page que voit un utilisateur lorsqu'il accède à Blackboard Learn. Le fait de concevoir et d'agencer soigneusement le contenu du module sur cette page permet à la fois de mettre votre marque en valeur et d'améliorer l'expérience utilisateur. Suivez les deux étapes générales suivantes pour y parvenir :

  1. Passez en revue l'intégralité du contenu du module afin de vous assurer qu'il ne détonne pas avec la marque nouvellement appliquée. Lors de la conception du contenu du module, essayez de respecter les conventions établies par votre thème et votre palette. Essayez de coder le module en HTML, afin que le texte du module puisse s'accorder avec la couleur et les styles de police définis par votre thème et votre palette. Les modules utilisent parfois une grande image unique (similaire à une publicité d'en-tête sur un site Web) pour véhiculer un message. Les images sont nécessaires à l'animation de la page, mais l'apparence d'une publicité d'en tête (comprenant le texte d'en-tête, le texte de paragraphe et des images) risque parfois de détonner avec le thème et la palette utilisés par votre marque. L'utilisation du format HTML assurera la flexibilité de votre module : lorsque vous redimensionnerez la fenêtre du navigateur, le contenu du module le sera également.
  2. Essayez de définir une hiérarchie visuelle, de sorte que l'utilisateur puisse facilement analyser la page et y trouver du contenu concret. Cela est souvent plus facile à dire qu'à faire. Étant donné qu'un portail contient un grand nombre de modules avec des contenus divers, il doit souvent répondre aux besoins de nombreux intervenants internes. Chacun d'eux souhaite parfois mettre l'accent sur ses propres documents. En règle générale, si la même importance est donnée à tous les modules, aucun d'entre eux ne sort du lot, ce qui peut engendrer une certaine confusion chez les utilisateurs. Essayez de considérer la page de manière globale et d'agencer les modules de sorte que les utilisateurs puissent trouver facilement le contenu principal.

Les autres bonnes pratiques s'appliquant à la conception d'une page de portail ne sont pas spécifiques à ce type de page, mais incluent celles que vous avez peut-être déjà prises en compte lorsque vous avez défini l'apparence de votre marque.

Accessibilité

  • Utilisez les rapports de contraste disponibles
  • Assurez la lisibilité du texte en sélectionnant des types de police, des tailles et des hauteurs de ligne appropriées.
  • Évitez l'utilisation d'images à la place du texte
  • Évitez les textures d'arrière-plan
  • Assurez-vous que les liens ont un nom explicite, et non simplement "cliquez ici"
  • Insérez des liens vers W3C et nos pages d'accessibilité

Esthétique

  • Utilisez des couleurs correspondant à votre marque et au thème
  • Types de polices lisibles
  • Utilisez des éléments graphiques de haute qualité
  • Disposez les modules afin qu'ils remplissent la page
  • Créez une hiérarchie visuelle pour faciliter la lecture du contenu
  • Évitez toute conception/mise en page surchargée
  • Actualisez régulièrement le contenu de la page
  • Si possible, appliquez des techniques de conception adaptatives afin que la taille de votre contenu s'adapte à différents affichages.

Si vous trouvez que vos possibilités sont limitées par la mise en page de module par défaut de Learn, envisagez de modifier la page de portail afin qu'elle n'utilise qu'une seule colonne remplie avec un seul module HTML. Vous pouvez modifier le code HTML personnalisé dans le module unique afin qu'il utilise la mise en page que vous souhaitez et reproduire les tendances dans d'autres pages d'index.

Commandes de l'interface utilisateur graphique (GUI)

Commandes de l'interface utilisateur graphique : vous pouvez facilement modifier l'apparence de votre marque en sélectionnant un ensemble d'options de couleurs et de mise en page pour votre installation Learn. Vous pouvez :

  • Modifier la couleur d'un ensemble limité d'éléments de l'interface utilisateur
  • Indiquer un logo et un lien vers une URL spécifique
  • Sélectionner les options de mise en page et les couleurs de l'onglet Système

Aucune connaissance en HTML ou CSS n'est requise pour effectuer ces modifications. Vous pouvez afficher vos sélections dans le volet d'aperçu avant d'appliquer les modifications à l'ensemble du système. Toutes vos sélections de couleurs peuvent être enregistrées sous la forme d'une palette de couleurs.

Palette de couleurs et thème système

Palette de couleurs : Blackboard Learn propose une douzaine de palettes de couleurs. Vous pouvez en sélectionner une pour votre marque par défaut. Vous pouvez modifier les couleurs d'une palette à l'aide de l'interface utilisateur ou télécharger la palette et la modifier à l'aide de l'outil d'édition de texte ou d'édition CSS.

Thème système : le thème système est la couche CSS qui définit l'apparence de votre établissement. Vous pouvez sélectionner un thème fourni par Blackboard Learn ou en concevoir un vous-même. La meilleure façon de créer votre propre thème est de télécharger un thème existant afin de l'utiliser comme modèle. Modifiez-le à l'aide de l'outil d'édition de texte ou d'édition CSS.

Palette de couleurs personnalisée

Palette de couleurs personnalisée. Étendez la personnalisation de votre interface utilisateur en créant votre propre palette de couleurs afin qu'elle corresponde à la création de marque, au logo et au modèle de couleurs de votre établissement scolaire. Blackboard Learn dispose de plusieurs palettes de couleurs qui appliquent différentes couleurs au système. Vous pouvez modifier une palette de couleurs existante afin de la faire correspondre à vos exigences spécifiques.

Bonnes pratiques pour la conception d'une palette de couleurs personnalisée

Lorsque vous sélectionnez des couleurs pour votre palette personnalisée, tenez compte des quelques recommandations suivantes.

  • Utilisez des couleurs correspondant à l'identité visuelle de votre établissement. Consultez le guide de style de votre établissement pour connaître les couleurs officielles. Assurez-vous que la combinaison de couleurs choisie se traduit en un modèle de couleurs approprié pour l'interface utilisateur.
  • Assurez-vous que vos sélections de couleurs fonctionnent bien ensemble, pour créer une expérience visuelle harmonieuse. Color Matters est un site Web utile si vous souhaitez en savoir plus sur les schémas de couleurs monochromatiques, analogues et complémentaires. Le fait de connaître la théorie des couleurs facilite le choix de couleurs adaptées à votre établissement.

Thème système personnalisé

Thème de système personnalisé. Vous pouvez transformer complètement l'interface utilisateur de l'installation Learn de votre établissement scolaire en créant un thème de système personnalisé. Cette méthode de personnalisation est la plus coûteuse et la plus complexe, nécessitant l'analyse et la modification de plus de 12 000 lignes de code. Elle constitue cependant la meilleure façon d'adapter l'interface utilisateur de Blackboard Learn à l'identité visuelle de votre établissement, mais elle nécessite que toutes les nouvelles versions de Learn soient testées.

Bonnes pratiques pour la conception d'un thème de système personnalisé

La conception d'un thème de système personnalisé constitue une tâche complexe et ne peut en aucun cas être considérée comme un projet secondaire. Une expérience significative en CSS et DOM est requise. En outre, vous aurez besoin d'un environnement de développement afin de développer, de tester et de gérer le thème.

  • Couleurs : recherchez l'identité visuelle de votre établissement. Votre établissement dispose certainement d'un guide de style incluant une section sur les couleurs de marque de l'établissement. Assurez-vous que la combinaison de couleurs choisie se traduit en un modèle de couleurs approprié pour l'interface utilisateur.
  • Harmonie des couleurs : une bonne compréhension des modèles de couleurs monochromes, complémentaires et analogues facilite le choix de couleurs harmonieuses qui correspondent à l'image de votre établissement.
  • Exigences en matière d'accessibilité : la connaissance de ces exigences est primordiale pour s'assurer que le contraste du thème de système obtenu est suffisant et que le thème est accessible.
  • Polices : vous pouvez indiquer différentes polices pour votre marque. Testez les polices afin de vous assurer qu'elles peuvent être affichées dans différents systèmes d'exploitation. Vous pouvez également introduire des polices personnalisées en les incluant avec votre thème et en y faisant référence à l'aide d'une règle @font-face. Assurez-vous que les polices personnalisées prennent en charge les langues dans lesquelles vous enseignez.
  • Icônes : vous pouvez repenser certaines icônes et les utiliser dans l'application sous forme d'images d'arrière-plan.

Thèmes système personnalisés et Building Blocks

Si vous avez un thème système personnalisé, vous voudrez peut-être l'étendre aux nouvelles pages incluses dans un Building Block. Les Building Blocks ne disposent pas tous d'une feuille de style spécifique à l'outil, mais certains en proposent.

Pour savoir si un Building Block contient des feuilles de style spécifiques à l'outil, rendez-vous dans le panneau de configuration de l'administrateur. Dans la section Intégrations, sélectionnez Building Blocks, puis Outils installés. Ouvrez le menu pour chaque Building Block et sélectionnez Afficher les composants. Si le Building Block contient des feuilles de style spécifiques à l'outil pour l'un des thèmes Learn par défaut, les spécificités du thème sont listées sur cette page.

Marques différentes pour une même installation Learn

Vous pouvez créer différentes marques pour différents groupes d'utilisateurs en fonction de leur rôle dans le système. Il convient de créer des noms d'hôte pour permettre l'utilisation de plusieurs marques dans une instance de Learn unique.