TUTORIEL : Comment préparer la refonte ou la création de son site internet
Vous avez un projet de refonte ou de création d’un site internet ; comment s’organiser afin de préparer les différentes phases de conception de votre projet ?
Ce tutoriel vous propose une méthode pour commencer à imaginer votre charte graphique, anticiper votre référencement SEO, rassembler vos contenus… La qualité d’un site va en grande partie dépendre de la réflexion en amont autour de ces thématiques, prenez le temps d’y réfléchir !
NOTE : Ce tutoriel a été mis à jour le 3 mars 2024
ÉTAPE 1 – Concevoir et regrouper les contenus graphiques
- Regrouper les éléments de votre charte graphique (logo, polices d’écriture, affiches, plaquette, brochures, flyers, cartes de visite, …) et tentez de repérer ce que vous souhaitez garder et ce qui va évoluer
- Trier vos photos qui vont jouer un rôle primordial dans le rendu final de votre projet. Il est important de les fournir de la meilleure qualité possible. Les photos les plus valorisantes sont celles prises en situation ; des images personnelles. Si c’est possible, évitez les photos des banques d’images.
ÉTAPE 2 – Préparer les contenus textes
- Lister les objectifs de votre projet : au-delà des informations primaires nécessaires pour donner un sens au site Internet (coordonnées, avantages, certifications, partenaires…), il est important de réfléchir sur l’objectif de votre futur site internet (Pour qui ? Pourquoi ?…). Cette étape vous aidera à rédiger vos arguments commerciaux sur les forces de votre projet, ses spécificités…
- Rédiger une première version des textes que vous désirer intégrer sur votre site.
- Lister l’arborescence de votre projet en donnant un titre à chacune de vos pages et sa place en tant que page parent ou enfant (page ou sous-page). Cette arborescence va être le reflet de votre menu principal.
ÉTAPE 3 – Regarder chez les voisins pour mieux connaitre vos envies et vos besoins
- Lister des sites internets (concurrents et de domaines diverses) qui répondent plus ou moins à vos besoins pour mieux connaitre les fonctionnalités dont votre projet aura besoin. Si possible commencez à lister les fonctionnalités « spéciales » de votre projet (formulaire, newsletter, carte interactive, paiement en ligne, réservation, calendrier…)
- Lister des exemples de sites web dont l’esthétique, le concept, l’ambiance retiennent votre attention.
ÉTAPE 4 – Imaginer l’ergonomie des pages principales en dessinant de manière sommaire l’organisation des informations et des images(Mock-up)
- En fonction de vos contenus vous pouvez imaginer le positionnement (zonage) de votre information page par page – plus d’infos pour savoir comment créer un mock-up.
CONSEIL : Au plus votre mock-up sera précis au plus vous réduirez le temps d’intervention de votre prestataire web et donc votre budget, sauf bien entendu si vos propositions demandent de nombreuses adaptations car pas suffisamment réalistes. Si vous débutez, tentez de rester simple et pensez à travailler en colonne afin de faciliter l’affichage sur mobile. - Si vous connaissez les contraintes du webdesign et que le « Responsive design » n’a pas de secret pour vous, vous pouvez vous lancer sur les mock-up des versions smartphone. Dans le cas contraire, votre développeur wordpress s’occupera de cette phase.
ÉTAPE 5 – Rédiger un cahier des charges
Si vous l’avez déjà réalisé, vous pouvez très certainement compléter votre cahier des charges avec les informations supplémentaires que les étapes précédentes ont dû vous apporter.
Comment rédiger un cahier des charges pour votre projet WEB ?
LES ÉTAPES SUIVANTES – avec vos prestataires web, rédacteur·rices, consultant·es SEO, graphistes…
- Réalisation des maquettes graphiques
- Codage et développement du site internet
- Travail sur les textes avant intégration pour un contenu performant
- Intégration des contenus texte et médias validés par le client
- Mise en ligne public du site sur le nom de domaine final
- Prestations complémentaires éventuelles par la suite (SEO, maintenance…)
Pour voir des exemples de blog wordpress rendez-vous sur la page des créations de la bécane WEB – voir des exemples