Vous avez structuré votre yeswiki, les premières fonctionnalités sont là mais il manque encore un petit quelque chose ? Naturellement on a envie que le yeswiki soit joli et fonctionnel. L'objectif de ce module est de vous donner quelques clés pour faire en sorte que votre collectif reconnaisse l'identité du groupe et trouve ses marques rapidement. Il s'agit d'imaginer les utilisateurs qui visitent notre site et de leur porter une attention particulière.
Retenons trois composantes:
- L’attirance émotionnelle qui pose un décor le plus proche possible des valeurs et des besoins du collectif; les couleurs, les images mais aussi choisir des mots qui seront familiers aux utilisateurs
- La facilité de navigation : trouver la bonne information en 3 clics, en plus du menu on peut avoir des boutons, des images cliquables, des liens qui permettent d'avoir un parcours fluide et personnalisé;
- La simplicité : éviter les informations inutiles, ne surchargez pas les pages.
Attirance émotionnelle ou Comment adopter le bon look ?
Personnaliser les couleurs
Pour vous permettre de poser un décor, YesWiki vous permet de personnaliser les couleurs : menus, titres, liens, boutons peuvent adopter la couleur de votre choix.
Avec un wiki récent (en version Doryphore et avec le thème Margot) , vous pouvez accéder aux options de couleurs via l'onglet Look de la page "Gestion du site", puis bouton "Personnaliser le thème de ce wiki" - voir l'animation ci-contre.
Si vous n'avez pas de charte graphique, je vous conseille de définir avec votre groupe si un élément visuel peut vous caractériser (une plaquette, une photo, un objet totem, ...). Il existe des outils pour extraire une couleur d'une image, cela peut être un bon point de départ. Si ce n'est pas le cas, cherchez une palette de couleur tendance - ne choisissez pas 3 couleurs au hasard !
En créant "une nouvelle configuration graphique", vous avez la possibilité de définir :
une couleur primaire : c'est votre couleur dominante, elle sera utilisée par défaut pour la barre de menu ainsi que pour les titres et les liens. N'utilisez la couleur dominante de votre palette que sur les éléments essentiel de votre site ( appel à l'action, bouton, liens ...)
2 couleurs secondaires peu visibles par defaut mais vous pourrez facilement les utiliser dans vos éléments de mise en forme. La couleur secondaire 2 est utilisée pour l'encadré "texte mis en valeur".
la couleur de votre texte et celle du fond - si vous les modifiez, veillez à bien respecter le contraste pour assurer la lisibilité des contenus.
Astuce
Il arrive parfois d'avoir envie de différencier 2 parties du site, par exemple si une partie est publique et l'autre partie est privée (en mode intranet). Il est possible de définir 2 jeux de couleurs (2 configurations graphiques) et de les appliquer à chaque page : lorsque vous éditez une page de votre wiki, vous trouverez un bouton "theme" en bas de page qui vous permettra d'appliquer spécifiquement à cette page le jeu de couleur souhaité.
Une police donne du caractère à votre contenu - il fait partie des éléments de style. La police des titres devra accrocher l'oeil (par sa taille, sa couleur, et par la forme des lettres), la police du corps de texte doit avant tout permettre de faciliter la lecture. Google font propose 900 polices libres, rangées par Google selon les plus utilisées. Vous pouvez les utiliser gratuitement. L'avantage est qu'elles sont optimisées pour tous les navigateurs.
Recommandations
polices manuscrite (handwriting) : coté humain et artisanal, mais à garder pour quelques phrases à mettre en valeur ou des titres, difficulté de lisibilité
polices à empattement (avec serif) : effet imprimerie, crédibilité à utiliser plutot pour les supports papiers
polices sans empattement (sans serif) : plus épurées, elles offrent un meilleur confort de lecture à l'écran
Parmi les web font les plus populaires : Arial, Montserrat, Lato, Roboto.
Exemples de combinaison de police
Utilisation de la police Montserrat
Titre en lettres capitales pour plus d'impact
Police des titres : Raleway
Police du texte : Roboto
A l'heure actuelle,sauvegarder la configuration et l'appliquer à vos pages ne suffit pas et une intervention supplémentaire de votre part sera nécessaire pour pouvoir réellement utiliser les polices choisies.
elles permettent de structurer le texte - un bloc de texte en pleine largeur sera fatiguant pour l'oeil et aura moins de chance d'être lu. Une image d'illustration permet de réduire la largeur de la colonne;
elles viennent capter l'attention - l'image illustre le paragraphe, elle attire l'oeil pour que l'utilisateur porte son attention au texte
elles représentent l'élément principal du style qui se dégage de votre site - et par extension l'image de marque de votre structure.
Photo by Tim Mossholder on UnsplashL'ajout d'une image dans Yeswiki permet de choisir l'alignement (gauche, droite, centre) ainsi que la dimension de l'image, le texte de remplacement (utile notamment pour les malvoyants : pour indiquer le contenu des images, l'attribut Alt leur est lu, au même titre que le reste de votre texte.).
Dans un 2eme temps vous pouvez modifier le composant "attach" et bénéficier de nouvelles options : essayez notamment les effets izmir dans les paramètres avancés, il permet d'afficher le texte "Description" sur la totalité de la hauteur de l'image lorsque l'utilisateur survole l'image...
Important
Pensez à redimensionner vos images avant de les intégrer pour ne pas alourdir inutilement la page et ralentir le site. En effet, il n'est pas rare d'avoir des photos de 5000px de large alors qu'en pleine largeur 1920px seront suffisant et sur une colonne avec un texte à coté prévoir 600px de large. (Dans l'explorateur de fichiers, la dimension est affichée lorsqu'on survole le nom d'un fichier image)
Quelques ressources libres pour trouvez des illustrations :
la bibliothèque FontAwesome est intégrée à Yeswiki - vous pouvez ajouter les icones dans vos textes ou vos titres en copiant le code html
nounproject beaucoup d'icones disponibles avec la possibilité de choisir la couleur, et la couleur de fond. Téléchargez l'icone en format png et insérez dans le wiki comme une image - L'utilisation de ce site nécessite de créer un compte;
undraw : des illustrations entièrement libres de droit avec la possibilité de les décliner selon votre couleur principale
Freepik grosse banque d'images avec des images gratuites (mais nécessite de citer la source) et des images payantes. Freepik permet de trouver aussi bien des photos que des illustrations type dessin ou aquarelle qui peuvent être intéressantes pour apporter douceur et convivialité à votre site.
Unsplash - superbes photos gratuites (nécessite de citer la source). Les mots clés dans la barre de recherche doivent être de préférence en anglais pour de meilleurs résultats. Essayez par exemple de faire une recherche par couleur avec le mot clé "Abstract".
