Notes Graphisme pour Wordpress


Ressources préalables :


  • 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=qsszBwOkkt8&feature=youtu.be

  • 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


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)