Refonte site web wordpress : les choses Ă  savoir pour bien se lancer

par | 28 Mar 2023 | Refonte de site | 0 commentaires

Faire une refonte de mon site web WordPress, pourquoi, quand, comment ?

« Il est temps de faire une refonte de mon site web WordPress ! » Si vous vous ĂȘtes dĂ©jĂ  dit ça, c’est que vous en avez dĂ©jĂ  conscience. Et c’est bien
 Un site internet Ă©volue, comme tout ĂȘtre humain, produit, envie… Parce que votre activitĂ© a changĂ©, ou vos besoins sont plus ciblĂ©s, car il n’est pas ergonomique et est illisible sur smartphone, parce que vous en avez assez de voir ces couleurs flashies et images dans tous les sens, etc


En d’autres termes, chacun a ses propres raisons. Et toutes sont valables. Voyons pourquoi.

Faire une refonte de mon site web WordPress

 

Etape 1 : « le cahier des charges refonte site web », telle est ma mission

Faire une refonte de son site wordpress ne s’improvise pas. Il faut, pour que la refonte soit efficace, établir un cahier des charges de son site qui permettra de lister les fonctionnalitĂ©s, les souhaits graphiques, les amĂ©liorations, la structure, les objectifs.

Posez-vous les bonnes questions, c’est-Ă -dire :

  • Pourquoi modifier le design de mon site internet ?
    Vers quoi aller ? Ai-je des rĂ©fĂ©rences de sites qui m’attirent visuellement ? Des couleurs sobres ou dĂ©gradĂ©s modernes ? Des typographies bĂąton ou Ă  empattement ?
  • De quelles fonctionnalitĂ©s vais-je avoir besoin ?
    Un module de newsletter ? L’ajout de boutons vers du contenu spĂ©cifique ? Mettre en avant mon numĂ©ro de tĂ©lĂ©phone ? Avoir un formulaire de contact plus complet pour Ă©tablir des devis ? Un agenda qui permettra d’annoncer mes Ă©vĂ©nements ? Un portfolio avec filtre pour prĂ©senter mes rĂ©alisations ? Une partie blog pour faire vivre mon site ? Un module de e-commerce pour prĂ©senter ma boutique en ligne et proposer des produits Ă  la vente ?
  • Quel est mon client type ?
    Homme ? Femme ? 18-30 ans / 30-45 ans / 45-60 ans ? Particuliers ? Entreprises ? Mon secteur géographique ?
  • Quel est mon objectif premier ?
    Etre bien positionné dans les moteurs de recherche ? Générer des demandes de contact via mon formulaire ? Présenter simplement et en toute transparence ma petite entreprise ou ma nouvelle activité ? Faire connaitre mon association et développer mon réseau de partenaire ?
  • Ai-je bien listĂ© mes diffĂ©rentes rubriques ?
    Mon contenu est-il organisĂ© ? Ai-je fais en sorte que l’utilisateur clique le moins de fois possible pour accĂ©der au contenu qu’il cherche ?

Pour rĂ©sumer, ne nĂ©gligez pas cette Ă©tape. Une fois rĂ©alisĂ©e, votre « cahier des charges refonte site web » sera bien complet et il vous sera beaucoup plus facile de rĂ©aliser dans les rĂšgles de l’art la refonte de votre site wordpress.

 

Etape 2 : « la refonte graphique de mon site wordpress », euh oui mais je ne sais pas dessiner


En fait, vous n’avez pas besoin de dessiner, sauf si vous souhaitez crĂ©er des pictogrammes sympas pour illustrer quelques rubriques de votre site web.

Ce qui est important est de définir les couleurs de votre site wordpress ainsi que les typographies.

Les couleurs

Si vous possédez déjà un logo, vous pouvez utiliser les couleurs de celui-ci (pas plus de 3 couleurs différentes) ou éventuellement ses couleurs complémentaires. Ou encore choisir la couleur principale de votre logo avec sa couleur complémentaire qui permettra la mise avant des éléments type boutons par exemple.

la refonte graphique de mon site internet

Cercle chromatique pour votre refonte de site

Saviez-vous que chaque couleur a sa propre signification ? En France (car la signification est différente entre les pays), voici quelques exemples :

 

Les couleurs fréquemment utilisées :

BLEU (en passant, c’est la couleur prĂ©fĂ©rĂ©e des Français ;)) :

  • le ciel, l’eau, la mer, l’espace, l’air et les voyages
  • la vĂ©ritĂ©, la confiance, la loyautĂ©, l’intelligence et la sĂ©curitĂ©
  • merveilleux, libertĂ©, rĂȘve, jeunesse, mais aussi mĂ©lancolie
  • domaines des technologies, informatique, aĂ©ronautique, domaine du voyage et de l’évasion, cĂŽtĂ© corporatif, produits congelĂ©s et rafraĂźchissants

ROUGE :

  • amour, chaleur, sensualitĂ© et passion
  • le danger, la rĂ©volte et le sang
  • produits destinĂ©s Ă  combattre le feu, produits Ă  connotation virile , produits de consommation achetĂ©s impulsivement, l’emballage alimentaire, avertissements et les interdictions, attirer l’attention sur un Ă©lĂ©ment prĂ©cis : rabais, promotion

JAUNE :

  • chaleur et lumiĂšre
  • bonne humeur et joie de vivre, logique, le pouvoir personnel et l’humour
  • la traĂźtrise, le mensonge, la tromperie
  • tourisme et des voyages dans des destinations soleil, agroalimentaire, assurances et du crĂ©dit, touche de gaietĂ© et d’humanisme

VERT :

  • espĂ©rance, chance, calme et repos
  • croissance, santĂ©, fraĂźcheur et nature, stabilitĂ© et Ă©quilibre
  • l’échec et l’infortune
  • domaines reliĂ©s Ă  la nature et au plein air, cĂŽtĂ© environnemental et Ă©cologique, produits de nettoyage, domaine des mĂ©decines alternatives

 

Les autres couleurs :

VIOLET :

  • dĂ©licatesse, douceur et rĂȘve
  • magie, fantastique, imaginaire, sĂ©rĂ©nitĂ© et spiritualitĂ©, prospĂ©ritĂ© et noblesse
  • mĂ©lancolie, solitude, tristesse et jalousie
  • spirituel et la croissance personnelle, aspect artistique (arts, culture et musique), imaginaire et fantastique, une sensation d’apaisement

ORANGE :

  • l’énergie, l’action, soleil, la chaleur, le feu, la lumiĂšre et l’automne
  • valeurs de communication et de crĂ©ativitĂ©, joie, du plaisir et de l’optimisme
  • vitalitĂ©, force et endurance
  • sport, de la mise en forme et du fitness, divertissement et des communications, vente et de la mobilitĂ©, dangers dans de nombreux domaines, crĂ©ativitĂ©

ROSE :

  • tendresse, douceur et bonheur
  • romantisme, fĂ©minitĂ© et compassion, l’enfance
  • confiseries et des pĂątisseries, domaine de l’enfance, loisirs crĂ©atifs, comme le dessin, la peinture, le tricot
, produits cosmĂ©tiques et de beautĂ© pour femmes

TURQUOISE :

  • puretĂ© et fluiditĂ©, cĂŽtĂ© rafraĂźchissant et thĂ©rapeutique
  • rĂ©gĂ©nĂ©rescence, les besoins d’évolution et de transformation
  • besoin de changement
  • le monde aquatique, domaine thĂ©rapeutique, produits hygiĂ©niques, suggĂ©rer la puretĂ©

BRUN :

  • terre, bois, chaleur et confort
  • douceur et rappelle l’aspect brut et le naturel
  • milieu culturel et de l’histoire, domaine culinaire (chocolat et cafĂ©), dĂ©veloppement durable et l’écologie, produits masculins, produits du terroir

 

Les compléments couleurs :

NOIR :

  • mystĂšre, simplicitĂ©, distinction, l’élĂ©gance, le raffinement et le luxe
  • mort, deuil et tristesse, l’obscuritĂ© et le nĂ©ant
  • domaine du cinĂ©ma, des arts et de la photographie, produits haut de gamme, utile pour provoquer des contrastes, il met en valeur les couleurs qui prennent place Ă  ses cĂŽtĂ©s

BLANC :

  • puretĂ©, propretĂ© et perfection, brillance et Ă©clat
  • innocence et virginitĂ©
  • domaine du mariage, la propretĂ©, la nettetĂ©, pour accompagner toutes les couleurs, il est un rĂ©hausseur de tons, pour apporter des zones de repos visuel

Voici quelques sites utiles pour vos choix de couleurs :

 

Les polices de caractĂšres

Pour le choix de la typographie, bien entendu, il faut choisir la police en fonction de la police choisie pour votre logo. Pas plus de 2 typographies différentes dans le site.

Par exemple, privilégiez une police plus grande et originale pour les titres et une police lisible en petit pour les textes (de préférence type bùton).

Quelques principes de base :

‱ Italique : Il est dĂ©conseillĂ© de mettre un texte continu en italique, car l’effet de mouvement qu’il gĂ©nĂšre rendra la lecture plus ardue en forçant l’oeil Ă  dĂ©filer plus vite sur le texte, ce qui crĂ©e un inconfort visuel qui ralentit la lecture.

‱ Capitales : Un texte en capitales subira le mĂȘme effet de ralentissement qu’un texte en italique. Mais, d’un autre cĂŽtĂ© l’utilisation combinĂ©e de capitales et de bas-de-casse facilite la lecture en apportant des points d’attention lorsqu’elle est bien contrĂŽlĂ©e.

‱ Interlignage : L’interlignage des titres et des textes doit ĂȘtre ni trop serrĂ©, ni trop espacĂ©.

‱ CaractĂšre : En gĂ©nĂ©ral, un logo, une publicitĂ© ou un document ne devrait pas comporter plus de deux styles de caractĂšre diffĂ©rents et certainement pas plus de trois. En conclusion, l’emploi de trop de caractĂšres diffĂ©rents oblige l’oeil Ă  de nombreux ajustements qui poussent Ă  abandonner la lecture.

Voici quelques sites utiles pour vos choix typographiques :

la refonte graphique de mon site web

 

Le choix du design global pour la refonte graphique du site internet

La refonte du design du site internet passe par quelques recherches sur le web. Regardez ce que font vos concurrents. Quelles couleurs et typographies utilisent-ils ? Quels sont les sites que vous aimez ? Pourquoi ?

Il faut penser à aérer le design, gardez toujours du blanc dans vos pages.

Structurez votre design Ă  l’aide de grille par exemple. Cela vous permettra d’avoir une mise en page propre et design. Faites attention Ă  ne pas faire trop de designs diffĂ©rents sur les pages sous peine de perdre les utilisateurs. Gardez la mĂȘme structure de base et faites des ajustements selon votre contenu.

Quelques sites utiles pour les grilles :

Petite info : les Ă©lĂ©ments importants doivent figurer selon un schĂ©ma prĂ©dĂ©fini sous forme de F (zone oĂč l’oeil est attirĂ© lorsque l’on parcourt une page web).

Refonte graphique site WordPress les zones chaudes

Les zones chaudes en forme de F

 

Etape 3 : « Mettre en place les fonctionnalités de mon site wordpress »

Cette Ă©tape est nĂ©cessaire si vous voulez avoir des fonctionnalitĂ©s particuliĂšres Ă  proposer sur votre site web. WordPress est un CMS qui fonctionne un peu comme un systĂšme d’exploitation (windows, mac, linux
) sur lequel on va venir installer des plugins (fonctionnalitĂ©s).

Vous pouvez faire une recherche directement dans WordPress pour trouver le plugin dont vous avez besoin. Attention tout de mĂȘme Ă  choisir un plugin qui soit rĂ©guliĂšrement mis Ă  jour par le dĂ©veloppeur et compatible avec votre version du WordPress.

Beaucoup de plugins sont gratuits, d’autres proposent des fonctionnalitĂ©s supplĂ©mentaires payantes. Tout dĂ©pend de votre besoin.

A savoir : plus vous mettrez de plugins sur votre site, plus il fera de requĂȘtes et donc plus il sera lent. A utiliser donc avec parcimonie. Surtout n’installez que le stricte nĂ©cessaire et testez les plugins pour ne garder que celui qui vous plait le plus.

Mettre en place les fonctionnalités de mon site wordpress

 

Quelques extensions utiles (Ă  mon sens) :

Formulaire de contact : pour vous contacter

Sécurité : pour protéger votre site

Optimisation : pour accélérer votre site

Partage / réseaux sociaux : pour partager le contenu de votre site

Newsletter : pour garder un lien avec vos lecteurs

Référencement : pour positionner votre site dans les moteurs de recherche

Ecommerce : pour vendre en ligne

 

Etape 4 : « Préparer ma structure, mes pages, mon contenu pour la refonte »

Cette partie est à mon avis la plus difficile ;( mais la plus importante. La refonte de votre site wordpress ne doit pas servir à rien. Le contenu est la priorité.

 

Le menu

PremiÚrement, définissez votre menu. Par exemple, je fais un site pour mon restaurant. Je pourrai avoir comme menu du site :

  • Accueil
  • A propos
  • La carte des menus
  • ActualitĂ©s
  • Contact

En bref, avoir 5 items dans le menu est bien. Surtout, ne mettez pas 10 items dans le menu !

DeuxiÚmement, si vous avez plus de contenu à proposer, pensez à faire des sous-menus. 

Par exemple :

  • La carte des menus (non cliquable)
    • Carte du moment
    • Menu de printemps
    • Nos plats d’Ă©tĂ©
    • Manger bio en automne 
    • Bien manger en hiver

Les liens vers les mentions lĂ©gales, CGV, politique de confidentialité  se trouveront dans le footer (bas du site internet qui se retrouve sur toutes les pages du site).

Vous pourrez également ajouter vos réseaux sociaux, inscription à la newsletter par exemple, dans le footer également.

 

La refonte de mes pages avec une structure cohérente SEO

En gĂ©nĂ©ral, une page devrait atteindre au minimum 350 mots. Les titres et sous-titres permettent de structurer votre contenu pour l’utilisateurs et les moteurs de recherche. Ils doivent servir de sommaire en quelque sorte. Si on ne lit que les titres et sous-titre, nous devons comprendre de quoi parle votre page.

  • titre 1 (h1) : information la plus importante (1 seul h1 par page, doit inclure le mot-clĂ© principal, ne pas excĂ©der 70 caractĂšres)
  • niveau de titre 2 (h2) : information moins importante que h1 mais plus importante que h3 
  • titre 3 (h3) : information moins importante que h2 

En bref, définissez un mot clé principal par page et quelques mots clés secondaires. Travaillez votre contenu en fonction de ces mots.

Meta description : Dans WordPress, avec l’extension Yoast SEO par exemple, vous pouvez dĂ©finir la meta description. UtilisĂ©e par les moteurs de recherche elle permet Ă  l’internaute d’en savoir un peu plus sur le contenu de votre page. La description doit inclure le mot-clĂ© principal et doit comporter environ 160 caractĂšres.

Images : Lorsque vous placez des images au sein de votre page, n’oubliez pas de renseigner les balises ALT et TITLE. Dans WordPress, lorsque vous uploadez une image, sur la colonne de droite, vous pouvez remplir ces champs disponibles. Ils permettent aux moteurs de recherches mais aussi aux non-voyants de comprendre vos images grñce à ces descriptifs. 

Liens entre vos pages : Les liens internes vers d’autres pages de votre site influencent sur la lecture de votre contenu. Placez donc au moins un lien vers une autre page de votre site sur chaque page.

Pour conclure, gardez en tĂȘte votre objectif principal. Si le but du site est de rĂ©colter des demandes de contact, placez aux endroits stratĂ©giques un bouton vers votre page contact. 

refonte de mes pages avec une structure cohérente SEO

 

Etape 5 : « accompagnement refonte site internet »

Travailler une refonte de site web WordPress demande du temps. Si vous préférez optimiser votre temps sur votre véritable savoir faire, vous pouvez bien sûr déléguer cette tùche.

Vous avez deux solutions.

La premiĂšre : faire appel Ă  une agence web pour la refonte de site internet. La deuxiĂšme : faire appel Ă  un webmaster freelance.

Sachez que les prix peuvent ĂȘtre trĂšs variables entre une agence et un freelance. Et parfois mĂȘme entre 2 agences ou 2 freelances. GĂ©nĂ©ralement, les freelances sont moins chers car ils travaillent seuls et ont moins de charges.

Renseignez-vous sur leurs prestations et les avis donnés par leurs clients. Demandez plusieurs devis pour comparer les offres et leurs contenus. 

  • La refonte du site sera t-elle optimisĂ©e en terme de poids, structure, versions responsives, sĂ©curitĂ©, etc ?
  • Serez-vous formĂ© Ă  la mise Ă  jour de votre site wordpress ?
  • Aurez-vous tous les codes d’accĂšs et un compte administrateur pour ĂȘtre 100% autonome ?

 

Quelques exemples de refonte de site web

Cas n°1 : Paris Parfums Lourdes

refonte-site-wordpress-paris-parfums-lourdesrefonte-site-wordpress-apres-refonte-paris-parfums-lourdes

Voir la refonte du site web sous WordPress

 

Exemple n°2 : Photovolt

refonte-site-web-photovolt-avantrefonte-site-web-wordpress-photovolt-apres

Voir la refonte du site internet Photovolt

 

Dernier exemple : Un temps pour l’accueillir

refonte-design-site-internet-avantaccompagnement-refonte-site-internet-apres

Voir la refonte wordpress du site web

 

Un projet ?
Rencontrons-nous facilement

Créons votre vague

J'utilise des cookies pour personnaliser le contenu, pour fournir des fonctionnalités de médias sociaux et pour analyser mon trafic. Je partage également des informations sur votre utilisation de mon site uniquement avec mes outils d'analyse. View more
Cookies settings
Accepter
Politique de confidentialité et de cookies
Privacy & Cookies policy
Cookie name Active

Qui suis-je ?

L’adresse de mon site est : https://www.showave.fr.  

Commentaires

Quand vous laissez un commentaire sur mon site, les donnĂ©es inscrites dans le formulaire de commentaire, mais aussi votre adresse IP et l’agent utilisateur de votre navigateur sont collectĂ©s pour m'aider Ă  la dĂ©tection des commentaires indĂ©sirables. Une chaĂźne anonymisĂ©e créée Ă  partir de votre adresse e-mail (Ă©galement appelĂ©e hash) peut ĂȘtre envoyĂ©e au service Gravatar pour vĂ©rifier si vous utilisez ce dernier. Les clauses de confidentialitĂ© du service Gravatar sont disponibles ici : https://automattic.com/privacy/. AprĂšs validation de votre commentaire, votre photo de profil sera visible publiquement Ă  cotĂ© de votre commentaire.  

Médias

Si vous tĂ©lĂ©versez des images sur le site, nous vous conseillons d’éviter de tĂ©lĂ©verser des images contenant des donnĂ©es EXIF de coordonnĂ©es GPS. Les personnes visitant votre site peuvent tĂ©lĂ©charger et extraire des donnĂ©es de localisation depuis ces images.  

Cookies

Si vous dĂ©posez un commentaire sur mon site, il vous sera proposĂ© d’enregistrer votre nom, adresse e-mail et site dans des cookies. C’est uniquement pour votre confort afin de ne pas avoir Ă  saisir ces informations si vous dĂ©posez un autre commentaire plus tard. Ces cookies expirent au bout d’un an. Si vous vous rendez sur la page de connexion, un cookie temporaire sera créé afin de dĂ©terminer si votre navigateur accepte les cookies. Il ne contient pas de donnĂ©es personnelles et sera supprimĂ© automatiquement Ă  la fermeture de votre navigateur. Lorsque vous vous connecterez, je mettrai en place un certain nombre de cookies pour enregistrer vos informations de connexion et vos prĂ©fĂ©rences d’écran. La durĂ©e de vie d’un cookie de connexion est de deux jours, celle d’un cookie d’option d’écran est d’un an. Si vous cochez « Se souvenir de moi », votre cookie de connexion sera conservĂ© pendant deux semaines. Si vous vous dĂ©connectez de votre compte, le cookie de connexion sera effacĂ©. En modifiant ou en publiant une publication, un cookie supplĂ©mentaire sera enregistrĂ© dans votre navigateur. Ce cookie ne comprend aucune donnĂ©e personnelle. Il indique simplement l’ID de la publication que vous venez de modifier. Il expire au bout d’un jour.  

Contenu embarquĂ© depuis d’autres sites

Les articles de ce site peuvent inclure des contenus intĂ©grĂ©s (par exemple des vidĂ©os, images, articles
). Le contenu intĂ©grĂ© depuis d’autres sites se comporte de la mĂȘme maniĂšre que si le visiteur se rendait sur cet autre site. Ces sites web pourraient collecter des donnĂ©es sur vous, utiliser des cookies, embarquer des outils de suivis tiers, suivre vos interactions avec ces contenus embarquĂ©s si vous disposez d’un compte connectĂ© sur leur site web.  

Utilisation et transmission de vos données personnelles

Si vous demandez une rĂ©initialisation de votre mot de passe, votre adresse IP sera incluse dans l’e-mail de rĂ©initialisation.  

Durées de stockage de vos données

Si vous laissez un commentaire, le commentaire et ses mĂ©tadonnĂ©es sont conservĂ©s indĂ©finiment. Cela permet de reconnaĂźtre et approuver automatiquement les commentaires suivants au lieu de les laisser dans la file de modĂ©ration. Pour les comptes qui s’inscrivent sur notre site (le cas Ă©chĂ©ant), nous stockons Ă©galement les donnĂ©es personnelles indiquĂ©es dans leur profil. Tous les comptes peuvent voir, modifier ou supprimer leurs informations personnelles Ă  tout moment (Ă  l’exception de leur identifiant). Les gestionnaires du site peuvent aussi voir et modifier ces informations.  

Les droits que vous avez sur vos données

Si vous avez un compte ou si vous avez laissĂ© des commentaires sur le site, vous pouvez demander Ă  recevoir un fichier contenant toutes les donnĂ©es personnelles que nous possĂ©dons Ă  votre sujet, incluant celles que vous nous avez fournies. Vous pouvez Ă©galement demander la suppression des donnĂ©es personnelles vous concernant. Cela ne prend pas en compte les donnĂ©es stockĂ©es Ă  des fins administratives, lĂ©gales ou pour des raisons de sĂ©curitĂ©.  

Transmission de vos données personnelles

Les commentaires des visiteurs peuvent ĂȘtre vĂ©rifiĂ©s Ă  l’aide d’un service automatisĂ© de dĂ©tection des commentaires indĂ©sirables.  
Save settings
Cookies settings
Accueil
eMail
Appeler