Votre graphiste à Nantes en Infographie • PAO • WebDesign…

Nathalie Léonoff, artiste lyrique

Le site existait depuis plusieurs années avec un CMS différent. L'idée était de moderniser la structure du site et l'image générale. Paris tenu avec cette nouvelle version en lecture centrée, optimisée pour les smartphones et les tablettes. C'est aussi l'occasion de revoir la charte graphique avec des couleurs bleu foncé et jaune pour cibler une clientèle sobre et élégante ré-haussé par les touches de jaune foncé.

Comment se passe la refonte d'un site comme celui-ci ? La première étape est la création d’une maquette de la page d’accueil (statique) que le client modifie. Une fois validée, on passe à la conception du site avec la création de la page principale du site (fond du site en Joomla 3.9), mode responsive (s’adapte aux écrans). Il y a la partie haute du site avec son menu déroulant et la partie basse avec le contact, les mentions légales (crédits photos, loi informatique, hébergeur...) ; puis la création des pages personnalisées (modifiables à distance) :

• Page d’accueil
    - Présentation rapide de Nathalie Leonoff
    - Les 5 couvertures de disque
    - Intro des prestations proposées (cours de chant, auteur…)
    - Dernières actualités (affiche 2 ou 3 informations récentes)

• Pages de présentation de « Nathalie Léonoff » (biographie)

• Extraits musicaux (2 sous menus)
    - Auteur-compositeur (3 extraits)
    - Classique (3 extraits)

• Page « Cours de chant » avec son image de fond en parallaxe

• Page « Discographie» qui permet d'écouter des morceaux musicaux en mp3
    - 5 articles avec chacun : Une photo et un texte (idem)

• Page « Actualités » sur les actualités passées et à venir, classées par date
    - Les 3 premières actualités sont affichées également en page d’accueil
    - Chaque article comprend une photo miniature de résumé.
    - On clique sur cette photo pour accéder au reste de l’article sur une page entière avec d’autres photos.
    - Les articles peuvent être triés par thème (prestations, star, …)
    - Les articles passés sont archivés dans une sous rubrique «archives» pour rester accessibles

• Page « Contact » (formulaire à remplir par le visiteur avec retour sur boite de messagerie), informations de contact (e-mail, adresse postal, tél…)

Plusieurs options vont dynamiser ce site web :
    • un Slider (diaporama de 3-4 images en boucle) dans la partie haute du site
    • Outil d’affichage «K2» des médias dans les articles : permet d’afficher un diaporama, de la video dans les articles d’actualité.
    • Boutons de partage via Facebook, Tweeter, Google ; envoyer par e-mail, imprimer… pour que l’information circule sur le web.
    • Google Analytique : permet d’analyser le trafic de chaque page (ajout d’un code et création d’un compte)
    • Google Captcha pour éviter les spams lors des enregistrements et formulaires
    • RGPD : affichage d’une fenêtre qui propose aux visiteurs d’accepter les «cookies» + texte pour les formulaires de contact pour être en accord avec la loi du 25 mai 2018.
    • Newsletter : ajout d’un bouton pour que les visiteurs s’inscrivent à la newsletter et installation d’un module d’envois de newsletter
    • Traduction : ajout d’un bouton/drapeau pour basculer le site dans une autre langue (anglais/français). Duplication des pages et remplacement par les textes anglais fournis.
    
3e étape: le référencement
    - Optimisation du site avec des mots clefs pour les meta-tags, tags par articles, SEO
    - Referencement naturel axé sur le spectacle, la musique lyrique…    
    - SEO (les noms des pages sont renommées pour être indexées par Google et mieux trouvées sur le web
    - un sitemap est construit et un compte Google est créé pour analyser les pages du site et les corriger si besoin

La 4e étape est de former le client qui se trouve sur Paris. La formation se fait donc par téléphone avec l'aide d'un support papier. 1 à 2 heures de conseils et de formation pour écrire des articles des actualités, les modifier, programmer leur édition,
les archiver, ajouter une image, ajouter des tags, créer des hyperliens, charger un pdf…  

 Site web : www.nathalieleonoff.com