Notes Graphisme pour Wordpress

Ressources préalables :

• https://www.guide-gestion-des-couleurs.com/comment-calibrer-ecran-sans-sonde-sous-windows.html
• http://yannbaboo.free.fr/baboo/5/test%20ecran/calibration-ecran.htm#:~:text=Si%20le%20moniteur%20(%C3%A9cran)%20est,de%20votre%20%C3%A9cran%20sont%20exceptionnels.
  • Telecharger et installer gimp : https://www.gimp.org/downloads/
  • Configurer le theme de Gimp : https://www.youtube.com/watch?v=5K2xAsnvU4c

• Trouver des photos : libres de droits ou payantes, trouver des vectoriels
• https://undraw.co/illustrations : illustrations
• https://www.flickr.com/creativecommons
• - https://tablericons.com/
• - https://www.vecteezy.com/

• Gimp : retoucher légerement un photo pour l'adapter au format de son site wordpress

Travailler sur l'ergonomie en partant de l'arborescence
Travail sur les menus et contenus

Le site animacoop : pour qui ? (coté utilisateur), pour quoi (coté entreprise)
Definition du cadre general et des objectifs du site

• pour repondre à ces objectifs de quoi a t on besoin de fournir comme information
• en fonction du type d'information : plusieurs choix
• contact > pas besoin d'un menu, emplacements à respecter liés à des usages sociaux culturels
  • information importante ? cadre, page d'accueil
  • information à developper : page ?
• Regle d'OR : simplifier !

Une fois l'arborescence trouvée, on cherche un template qui reponde à nos enjeux et objectifs

Où trouver des templates et comment les choisir

• https://www.youtube.com/watch?v=--DPZxdd6MY
  • Difference entre one page et template classique, quand choisir un site one page ?

https://www.youtube.com/watch?v=qsszBwOkkt8&feature=youtu.be

• Comprendre la notion de style (style css etc) : https://www.youtube.com/watch?v=ZhsqhUxbr5s

• Zoom sur l'importance de l'ergonomie

• Chercher le thème le plus proche de son besoin

Aller repérer des sites qui nous plaise et regarder leur extension cf outils vu au modèle 1
Approches différentes :
- Plutôt agence de comm
- Plutôt épuré, de type "informaticien"

• Difference entre one page et thème classique

L'appellation de "site one page" désigne un site Internet dont tous les contenus sont rassemblés sur une page unique. Ces contenus sont alors accessibles en faisant défiler (scrolling) verticalement, ou plus rarement horizontalement, la page.

Où chercher des thèmes :
- https://themeforest.net/category/wordpress : permet de prévisualiser le résultat
- Sur la plateforme wordpress, dans le menu thème, accès aux bibliothèques de thèmes

• Chercher un site par catégorie

Important :
Critères de choix :
- Popularité du site-son nombre de téléchargement : car sera plus maintenu, moins de bug
- Les notes indiquées par wordpress
- Les mises à jour : régulières ou non?
- La compatibilité avec sa proptre version de WP
- Prix

• Que recouvrent les fonctionnalités des versions gratuites?
• Souvent la version de base va devenir payante au bout d'un moment
• Parfois plus intéressant d'acheter un thème : entre 40 et 150 €
• Vérifier que les mises à jour sont gratuites et non payantes

- Thème disponible en plusieurs langues
- Responsive
- Vérifier qu'il fonctionne seul (avec Gutemberg) ou avec des modèles de mises en page (Deevy ou elementor)
- Documentation complète
- Lire les retours utilisateurs

• Adapter le theme wordpress à sa charte graphique

• Connaitre et Installer https://www.colorzilla.com/

• Utiliser https://color.adobe.com/fr/create/color-wheel

La signification des couleurs :
- jaune : bonheur, lumière, gaieté, optimisme, créativité, soleil
- orange : énergie, confort, vitalité, fruit, dynamisme, feu
- rouge : passion, amour, sensualité, passion, danger, colère, sang, chaleur
- violet : créativité, spiritualité, imaginaire, délicatesse, modestie
- vert : calme, détente, nature, chance, espérance
- bleu : responsabilité, confiance, fraîcheur, ciel, calme, froid
- brun : calme, terroir, philosophie
- blanc : pureté, neige, fraîcheur, innocence
- gris : neutralité, respect
- noir : sobriété, mystère, élégance, luxe, tristesse
- marron : nature, fiabilité, nature
- crème : calme, élégance, pureté

Prenons un exemple avec une palette de 5 couleurs :
- couleur 1 : dominante, pour le gros titre
- couleur 2 : secondaire, pour le corps du texte
- couleur 3 : background (fond)
- couleurs 4 et 5 : accents ou détails graphiques (couleurs contrastées les plus visibles)

---