Geoproject
Wiki des utilisateurs

Comment configurer un Géoproject et un Géoformat ?

Votre première connexion à votre plateforme Géoproject vous donne accès à la console d’administration de WordPress. A ce stade, votre site peut être comparé à une maison vide à laquelle il s’agira d’apporter tous les éléments de décoration ainsi que son mobilier. Le thème Géoproject vous permet de personnaliser votre site à l’image de votre projet. Ces aspects sont documentés via l’onglet « Réglages GP / FAQ – aide » du menu latéral, et ils peuvent être paramétrés en cliquant sur « Réglages GP / Paramètres du thème ». Le processus de publication y est également détaillé.

Plusieurs types de configuration vous seront alors proposés : récit et cartes, design, réseaux sociaux et Géoformat.  L’apparence de votre thème peut également être affinée via l’onglet « Apparence », par le biais duquel vous accédez à la configuration des menus et des widgets (des modules complémentaires qui vont s’afficher dans certaines pages de votre site). Vous pouvez également décider d’ajouter une image de fond à votre thème via « Apparence / Image de fond ».

Comment choisir les éléments du design ?

Les éléments graphiques, tels que la typographie et les couleurs choisies, vont participer à l’identité de votre site. Ceux-ci sont à paramétrer via l’onglet “Design” des paramètres du thème.

Typographies

Parmi les typographies disponibles, cohabitent des polices de caractères “sans sérif” (sans empattement) et des polices “sérif” (avec empattement). Vous pouvez décider d’utiliser la même typographie pour les titres et les textes, ou de sélectionner une typographie différente pour ces éléments. Les typographies proposées ont été choisies en raison de leur lisibilité sur différents types d’écrans, dès lors qu’un site web peut être consulté depuis un ordinateur de bureau, une tablette ou un téléphone mobile. Vous pouvez prévisualiser ces différentes polices de caractères, ainsi que leurs combinaisons, via le site Google Fonts. Les choix typographiques ne sont pas anodins, dès lors qu’ils participent à donner du sens à l’interface.

Couleurs

Une page web a pour objectif de se connecter à l’utilisateur. Dans cette relation, la couleur occupe une place importante : elle va contribuer à l’ambiance générale de l’interface, elle va désigner les éléments interactifs appelant à une action de l’utilisateur (“call to action”), elle va mettre en exergue certains éléments… Les hauts niveaux de contraste entre les couleurs permettent d’améliorer la lisibilité, et créent des centres d’attraction visuels. Une couleur monochrome vive associée à une police de caractères “forte” est une autre manière de créer un centre d’attraction sur une page web. Les couleurs aident à distinguer les différents types de contenus : il s’agit donc d’outils de convivialité. Plus de 16 millions de couleurs sont théoriquement représentables sur le web, mais il est admis que l’œil humain est capable d’en distinguer environ 2 millions.

Les règles d’association des couleurs se fondent sur un cercle chromatique composé des couleurs primaires (jaune, magenta, cyan ou rouge, vert, bleu = couleurs ne pouvant pas être reproduites par un mélange de couleurs), des couleurs secondaires (obtenues par le mélange de couleurs primaires), et des couleurs tertiaires (obtenues par le mélange d’une couleur primaire avec une couleur secondaire). La roue chromatique permet de déterminer les couleurs complémentaires (couleurs dont le mélange produit une couleur située sur l’échelle noir et blanc). Définir une palette de couleurs harmonieuse n’est pas une chose aisée : dans les écoles d’art, des cours entiers y sont dédiés. Toutefois, il existe des outils pour vous d’aider à effectuer ces choix, tout en respectant les règles d’association des couleurs.

De nombreuses études cognitives ont mis en avant l’impact des couleurs sur un utilisateur :

  • Rose : romance, jeunesse, confiance, sensibilité
  • Rouge : amour, passion, danger, urgence
  • Jaune : fun, optimisme, bonheur, prudence
  • Orange : chaleur, ambition, enthousiasme, créativité
  • Vert : nature, chance, croissance, sécurité
  • Bleu : harmonie, communication, tranquillité, confiance, honneur
  • Violet : richesse, pouvoir, spiritualité, calme

Les couleurs sont porteuses de sens mais aussi de codes culturels (par exemple, la couleur associée à un parti politique ou celle associée à un événement) qui peuvent différer d’un pays à l’autre : aux Etats-Unis, on admet que le ketchup soit bleu. On parle également de couleurs chaudes et froides, les premières tirant vers le bleu et les secondes, vers le rouge.

De toutes les couleurs, le bleu remporte les meilleures réactions auprès des utilisateurs : c’est pourquoi de nombreux sites populaires ont adopté cette couleur.

Par ailleurs, en termes d’accessibilité, nous ne sommes pas tous visuellement égaux devant un écran. Le daltonisme est un handicap visuel assez répandu, en tenir compte permet d’améliorer l’accessibilité de son interface. Color Oracle est un simulateur permettant de se rendre compte de la manière dont voient les personnes atteintes de ce handicap (il s’agit d’un logiciel gratuit, à installer sur son ordinateur).

Comme dans n’importe quelle autre branche du design, les couleurs participent également aux effets de mode. Pantone désigne chaque année une couleur “tendance” et sa palette assortie. Il s’agissait du violet en 2018, le corail lui a succédé en 2019.

Favicon

La favicon participe à l’identité graphique d’une application. Elle s’affiche en tête de page (écran d’ordinateur de bureau) mais sert aussi comme raccourci à la navigation. Pour générer une favicon personnalisée, il faut d’abord choisir une image puis la travailler avec un éditeur d’images (comme Gimp, par exemple, qui est gratuit ; ou Photoshop, un produit-phare d’Adobe mais qui est payant). L’image de base pour une favicon doit être au format carré, avec ou sans fond transparent (format png dans le premier cas, jpg dans le second cas), de minimum 460 pixels X 460 pixels. Réduire votre image à 24 pixels de largeur permet de se rendre compte de son niveau de lisibilité.

Le convertisseur en ligne Real Favicon Generator permet de générer la favicon de votre site. Celle-ci peut être ajoutée à votre site via l’onglet “Design” des paramètres du thème. Il existe également d’autres convertisseurs en ligne, accessibles facilement via une recherche comportant les mots-clés “favicon generator”.