Modifier le code couleur du wiki

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 se sente bien dans le wiki. Il s'agit d'imaginer les utilisateurs qui visitent notre site et de leur porter une attention particulière.
Culture générale
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.

Animation du collectif

Ergonomie oui mais pour qui ?

Il ne s'agit pas seulement d'être joli et bien assorti, l'enjeu est de guider des utilisateurs au sein de votre projet.
A quels besoins répond le site ?
Besoin d'appartenance à un groupe
Besoin d'infos pointues
Plaisir de la découverte
Faire ensemble

Prenez le temps de dresser le portrait de vos utilisateurs
A quelle situation est confronté l'utilisateur ? De quoi a t il besoin pour avancer ?
Notez pour chacun ce qui peut le rassurer, le motiver mais aussi ce qui peut le perturber, le rebuter...



Upload file visiteur.png

Nouvel arrivant

> cherche à mieux connaitre le projet et la communauté
> cherche des infos utiles pour lui / sur sa problématique du moment
> souhaite savoir comment participer éventuellement - conditions d'utilisation du site
Upload file team.png

Observateur inactif

> recoit les infos
> observe les contributions des autres
> fait le pont avec d'autres projets dans lesquels il est plus actif
> repère les tâches ou les étapes dans lesquelles s'impliquer plus tard


Upload file selecting_team.png

Les réactifs

> connait bien le projet global
> répond aux invitations des proactifs
> en recherche d'informations précises (fonction gare centrale)
> contribue quand on le lui rappelle, sur les sujets qui le touchent directement



Upload file pro-actif.png

Les proactifs

> met en place les outils et pense les interactions entre membres
> contribue régulièrement
> anime la communauté, rythme le projet
> veille sur les usages des membres et fait évoluer les outils

Technique

Personnaliser les couleurs

Avez vous déjà une palette de couleurs ?
Si ce n'est pas encore le cas, voici un outil en ligne pour vous permettre de trouver facilement des couleurs assorties : https://coolors.co/palettes
Plusieurs manières de générer une palette :
  • explorer les couleurs à la mode avec l'option "Explore"
  • générer votre palette au hasard en appuyant sur la barre d'espace jusqu'à tomber sur une couleur qui vous parle, vous pourrez alors la bloquer grace au cadenas puis continuer à explorer
  • générer la palette à partir d'une image (votre logo ou une photo dont les tons vous plaisent) Upload file coolors.png
  • générer la palette à partir de votre couleur principale (pour indiquer votre couleur, il faut cliquer sur le code hexa cela vous permet de passer en édition et coller votre code couleur)

N'utilisez la couleur dominante de votre palette que sur les éléments essentiel de votre site ( appel à l'action, bouton, liens ...) Cette couleur dominante peut-être la même que celle de votre logo.

Pour en savoir plus sur la signification des couleurs : lecture complémentaire sur les codes couleurs La couleur prune choisie par Louise est "classique, invitant à l’harmonie, au calme, sans être morose".


Intégrez ces couleurs dans votre wiki
Le jeu de couleurs peut être personnalisé en copiant quelques lignes de codes.
Créez une page intitulée : PageCss Voici les lignes de codes qui vous permettront de définir vos couleurs principales :
:root {
   --primary-color: #71334f;     /* **couleur de la barre de menu, des titres et des liens** */
   --secondary-color-1: #a0294d; /* **couleur utilisée pour les cadres des facettes** */
   --secondary-color-2:#cf4a67;  /* **couleur utilisée pour l'encadre du texte mis en valeur** */
   --neutral-color:#a499ab;      /* **couleur des textes** */
   --neutral-soft-color:#a499ab; /* **couleur du menu de la barre d'edition** */
   --neutral-light-color:#fff;   /* **couleur de fond de votre wiki** */

   --success-color: #f8e156;     /* ** couleur utilisée pour les messages positifs par defaut vert ** */
   --danger-color: #e46d36;      /* ** couleur utilisée pour les messages d'erreur par defaut rouge ** */
   --warning-color: #f8e156;     /* ** couleur utilisée pour les messages d'alerte par defaut orange ** */

  --main-text-color:#2b3441;                              /* **couleur des textes** */
  --main-text-fontsize: 17px;                             /* **taille du texte** */
  --main-text-fontfamily:'Noto Sans Regular', sans-serif; /* **police** */
  --main-bg-color:var(--neutral-light-color);             /* **couleur de fond de votre wiki** */
  --main-container-bg-color:var(--neutral-light-color);   /* **couleur de fond de la partie centrale votre wiki** */
  
  --link-color: var(--primary-color); /* ** couleur des liens** */
--link-hover-color: var(--primary-color); /* ** couleur des liens au survol ** */
--navbar-bg-color: var(--primary-color); /* ** couleur de la barre de menu ** */
--navbar-text-color: var(--neutral-light-color);
--navbar-link-color: var(--neutral-light-color);
--navbar-link-bg-color: transparent;
--navbar-link-hover-color: rgba(255,255,255,0.85);
--navbar-link-bg-hover-color: transparent;
--navbar-border: none;
--navbar-border-radius: 0;
--navbar-shadow: none;
--header-bg-color: var(--neutral-light-color);
--header-text-color: var(--neutral-color);
--header-title-color: var(--primary-color);
--footer-bg-color: transparent;      /* **couleur de fond du pied de page ** */
--footer-text-color: var(--main-text-color);
--footer-title-color: var(--main-text-color);
--footer-border-top: 3px solid var(--neutral-soft-color);
--btn-border: none;
--btn-border-radius: .5em;
--checkbox-color: var(--primary-color);
}

Vous pourrez alors jouer facilement en choississant dans vos composants (sections, boutons, encadrés) des couleurs issues de votre palette (primary, secondary-color-1, secondary-color-2).

Personnaliser la police

Le choix d'une police différente demande un peu plus de technique.

Google font propose 900 polices libres : vous pouvez les utiliser gratuitement. L'avantage est qu'elles sont optimisées pour tous les navigateurs.
Tuto ajouter une police dans la PageCss de mon yeswiki grâce au code fourni par google fonts.
Si vous ne souhaitez pas utiliser le service de Google, vous pouvez également héberger vous-même les polices
Sur https://google-webfonts-helper.herokuapp.com/fonts vous disposez d’un service qui vous permet de choisir les polices que vous souhaitez utiliser, puis il fournit les fichiers et CSS nécessaires pour le faire.

Documentation Yeswiki : https://yeswiki.net/?ChangerPolices


Hiérarchisation
Pour une meilleure lisibilité de votre site, n'utilisez qu'une ou deux typographies maximum.
Lors du choix de votre typographie, vérifiez que celle-ci a différentes graisses (light, meduim, bold,...) et quelle est utilisable en glyphes (accents, ponctuations).
Pour bien hiérarchiser l'information et ne pas perdre vos utilisateurs, utilisez toujours la même typo pour les titres, sous-titres et textes. Définissez des styles et tenez-vous en sur tout votre site.



Ressources

Illustrez vos pages

Upload file artist.png Quelques ressources pour trouvez des illustrations :
  • Font Awesome est une bibliothèque d'icone intégrée à la version Doryphore, on les retrouve dans les boutons mais on peut aussi les utiliser dans le texte en copiant le code HTML
  • undraw : des illustrations entièrement libres de droit avec la possibilité de les décliner selon votre couleur principale
  • nounproject beaucoup d'icones disponibles avec la possibilité de choisir la couleur, et la couleur de fond. (nécessite de créer un compte)
  • Freepik grosse banque d'images avec des images gratuites (mais nécessite une attibution) et des images payantes
  • Creative commons search

  • Unspalsh Banque d'image entièrement gratuite avec attribution
Photos de haute qualité, vous devrez les optimiser pour les intégrer à votre site.


la communauté Yeswiki

La petite histoire du thème graphique Margot

  • un thème co-construit pendant un sprint
  • Margot Hincker est une graphiste qui a été invitée au sprint de Vedène en 2019. Les utilisateurs lui ont présenté les usages principaux puis avec son oeil extérieur elle a proposé des maquettes pour un "wiki de base", c'est à dire un wiki vide tel qu'il est lors d'une intallation neuve, puis pour les principaux templates bazar : agenda, accordeon, et les présentations de facettes.
  • Son intervention a été co-financée par la communauté Yeswiki d'un commun accord. C'était juste avant la création de l'association Yeswiki.
  • l'intégration du thème a été entamée pendant le sprint puis approfondie par Sebastian Castro (contributeur de la communauté découvrez son portrait en vidéo) au fur et à mesure des développement Doryphore pendant l'année 2020.

Gatien Bataille Mélanie Michel