Ceci est une version archivée de GraphismeWordpress à 2023-11-09 16:28:30
Module 5 - Comment organiser son projet de site Wordpress : les étapes indispensables
Durée du cours : 2HFaire moins mais mieux. Notre ennemi, l'infobésité -> chercher la sobriété.
Un beau site est un site bien pensé.
L'organisation des menus et des pages reflète la clareté du projet.
Un beau site est un site bien pensé.
L'organisation des menus et des pages reflète la clareté du projet.
Navigation / fil de fer
Travailler sur l'ergonomie en partant de l'arborescence
Travail sur les menus et contenus
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 !
- https://www.youtube.com/watch?v=--DPZxdd6MY
- Difference entre one page et template classique, quand choisir un site one page ?
- 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
Approches différentes :
- Plutôt agence de comm
- Plutôt épuré, de type "informaticien"
- Difference entre one page et thème classique
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
- 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/
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)
Trouver des ressources
https://source.animacoop.net/?Module8TrouverMediasLibresModifier des images
Dans l'ideal utiliser Gimp... mais cela est réservé aux utilisateurs avertis.Aussi d'autres possibilités plus simples existent :
Organiser ses ressources
Notes Graphisme pour Wordpress
Calibrer correctement son écran :
- 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.
- https://www.guide-gestion-des-couleurs.com/comment-calibrer-ecran-sans-sonde-sous-windows.html
- https://undraw.co/illustrations : illustrations
- https://www.flickr.com/creativecommons
- - https://tablericons.com/
- - https://www.vecteezy.com/