Les travaux préparatoires en 5 étapes pour concevoir un site internet

Tutoriel : Les travaux préparatoires avant de concevoir le webdesign d’un site internet

ajouter article wordpressLa complexité principale pour concevoir un site web vient du fait qu’il faut accorder son aspect graphique (design) avec les contraintes techniques du web, le CMS utilisé (WordPress), le référencement SEO… La qualité d’un site va en grande partie dépendre de la réflexion en amont autour de ces thématiques.

Le tutoriel suivant synthétise les éléments importants à préparer avant de la réalisation du webdesign d’un projet de site internet.

NOTE : Ce tutoriel a été mis à jour le 20 octobre 2021


É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, …).
  • 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 – 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
  • 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 prestataire s’occupera de cette phase.

Exemple mock-up zoning

NOTE : 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.

ÉTAPE 4 – Regarder chez les voisins pour mieux connaitre vos envies et vos besoins

  • Lister des sites internets qui répondent plus ou moins à vos besoins pour mieux connaitre les fonctionnalités dont votre projet aura besoin et si possible commencez à lister ces fonctionnalités (Formulaire, Newsletter, carte interactive, paiement en ligne, réservation…)
  • Lister des exemples de sites web dont l’esthétique, le concept, l’ambiance retiennent votre attention.

É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édaction, référencement, graphistes…

  1. Réalisation des maquettes graphiques
  2. Codage et développement du site internet
  3. Travail sur les textes avant intégration pour un contenu performant
  4. Intégration des contenus texte et médias validés par le client sur le site Internet
  5. Mise en ligne public du site sur le nom de domaine final
  6. 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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *