Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
page 1
CAHIER DES CHARGESModula Formation
Page 2
SOMMAIRE
1. PRÉSENTATION ............................................................................................ 3 1.1. Les coordonnées 1.2. Description de l’établissement 1.3. Contexte 2. PRÉSENTATION GÉNÉRALE DU PROJET .............................................................. 4 2.1. Objectifs du site 2.2. Public visé 2.3. Date et budget prévus
3. DESCRIPTION DES SOLUTIONS SOUHAITÉES ....................................................... 5 3.1. Graphismes et aspect visuel 3.2. Contenu du site 3.3. Arborescence du site - Charte graphique 3.4. Fonctionnalités attendues 3.4.1. Contenu, gestion du site, administration 3.4.2. Formulaires et questionnaires 3.4.3. Animation et interactivité 3.4.4. Site marchand 3.4.5. Fonctionnalités particulières 3.5. Hébergement et nom de domaine 3.6. Référencement 3.7. Plateformes de partage et réseaux sociaux 3.8. Services complémentaires
4. ANNEXES ................................................................................................... 9 4.1. Exemples de sites. 4.2. Le parcours de l’Utilisateur 4.3. UI Design 4.4. Référencemen - Législation 4.5. Documents joints
page 3
PRESENTATION
Modula Formation
381, boulevard du Président Wilson
33200 Bordeaux
05 56 44 58 68
Description de l’établissement :
Modula Formation est un centre de formation professionnelle
continue situé à Bordeaux. Il propose des formations courtes
(bureautique, CAO-PAO, Web, Communication, Management,
Commercial, Langues, Comptabilité, RH Droit, Sécurité) ainsi que
deux titres professionnels (Designer Web et Développeur Web).
Contexte :
Le projet consiste en la refonte du site internet existant :
www.modula-formation.com
Page 4
PRESENTATION GÉNÉRALE DU PROJET
Objectifs du site :
Le site doit permettre, à travers un bon référencement et un Design UX efficace,
d’améliorer la notoriété du Centre avec pour dessein final d’augmenter son activité.
Public visé :
Le site vise tous les internautes susceptibles d’être concernés par une formation
professionnelle. Demandeurs d’emploi ou salariés intéressés par l’acquisition de
nouvelles compétences ou le perfectionnement de connaissances, ainsi que les
entreprises et collectivités et les acteurs du marché de l’emploi.
Usage des internautes :
L’analyse de Google Analytics sur l’année passée révèle que 85% des visiteurs utilisent
leur ordinateurs pour se connecter sur le site contre 12% qui le font avec leur mobile
(+5% de progression en un an toutefois). L’usage des tablettes restent anecdotique
(<3%). Les heures de connection vérifient ce fait : principalement la journée, pendant les
heures de bureau.
Date et Budget :
Deux mois de développement prévu.
page 5
DESCRIPTIONS DES SOLUTIONS SOUHAITÉES
Graphisme et aspect visuel :
(voir Charte Graphique)
- Le menu doit être fixe avec le logo en entier en haut à gauche. Dès que l’on scrolle, le
logo devient minimaliste et la couleur du menu change.
- Prévoir des animations sur les « hover » d’images ou de CTA.
- Le site doit être responsive design.
Contenu du site :
Récupération des contenus du site en place (photos, pdf notamment), après étude des
textes par rapport au référencement.
Arborescence du site :
Templates à créer :
La page d’Accueil La page Contact
La page Témoignages La page Modula Formation
La page Financement La page Formations Courtes
La page Section-Formation La page Titres Professionnels
La page Formation: détails La page Articles
Au total, il y aura 127 pages (voir arborescence ci-contre).
Page 6
- Arborescence du Site -
Formations courtes
Titres Pro
Modula Formation Contact
Accueil
...
RH - Droit
Sécurité
Bureautique
PAO CAO Mul-timedia
Word Init
Photoshop
...
...
Windows
Autocad
...
L’actu
Articles
...
FinancementsTémoignages
Règlement Intérieur
Mentions Légales
Footer
Evaluations
Google Forms
Test de pré-admission
Documentation
Programme détaillé
Dossier de candidature
Test de pré-admission
Documentation
Programme détaillé
Dossier de candidature
Programme
Inscription
Programme
Inscription
Programme
Inscription
Programme
Inscription
Designer Web
Développeur Web
SST
SST MAC
Sage Paie
Gestion Paie
page 7
FONCTIONNALITÉS ATTENDUES
3.4.1 Contenu, gestion du site, administration
Présentation du Centre de Formation, ce qui fait sa spécificité.
Présentation des différentes formations et des titres professionnels.
Une triangulation entre réseaux sociaux, site et blog (mise à jour 2 fois/semaine)
est prévu afin d’augmenter les backlinks.
Le contenu évoluant sans cesse, le client a besoin de pouvoir intégrer du contenu
en interne (modifier les pages et ajouter des articles) et donc d’avoir accès à un
back-office.
Wordpress est donc choisi comme CMS.
3.4.2 Formulaires et questionnaires
Installer un formulaire de contact (ContactForm7 avec le texte légal à côté et un
Captcha) sur la page contact ainsi que sur toutes les pages de section-formation.
Garder le formulaire actuel avec la GoogleMaps sur la page Contact.
D’autres questionnaires sont en place dans le site (questionnaire d’évaluation et
de satisfaction) créés avec TypeForm.
Extension SlickPopUpLite qui permet d’afficher un questionnaire en pop-up, sous
forme d’un bouton vertical fixé sur le côté droit de chaque page.
Prévoir une Newsletter.
3.4.3 Animation et interactivité : Intégration du CSS animate.css pour animer les
textes et les CTA ainsi que le script Wow.js pour activer une animation au scrolling.
Ajout également de CSS supplémentaires pour animer les hover de façon originale
(page d’accueil et page de présentation des formations courtes).
Page 8
Des formulaires de contact sont intégrés au footer ainsi que des tests d’évalutation
pour permettre à l’internaute d’interagir avec le site.
3.4.4 Site marchand : pour l’instant non, mais il y a la possibilité d’installer un
WooCommerce plus tard.
3.4.4 Fonctionnalités particulières :
Le thème UDesign de Wordpress a été choisi, notamment pour ses fonctionnalités
et ses shortcodes. Mais parce que je voulais personnaliser davantage le site, j’ai
créé un thème enfant (copie et modification du functions.php, création d’une feuille
de style css, d’un screenshot.jpg, d’un dossier js pour le javascript (wow.js) et d’un
dossier css pour l’anime.css).
3-5 Hébergement et nom de domaine
Choisir un nouvel hébergeur ou rester chez OVH.
page 9
3-6 Référencement
Balisage Meta, H1, H2…, phrasing, recherche de mots-clefs => Utilisation de
l’extension Yoast SEO pour optimiser le référencement.
Inscription Annuaire Google
Arborescence du site (robots.txt, sitemap.xml, index.html, htaccess.)
3-7 Plateformes de partage et réseaux sociaux
Liens avec Facebook, LinkedIn, twitter, YouTube
Prévoir lien de partage sur les réseaux sociaux dans les pages de formations
pour augmenter la notoriété par viralité et acquérir du trafic de niveau 2.
ANNEXES
4-1 Exemple de sites concurrents :
La Piscine : https://www.lapiscine.pro
Le wagon : https://www.lewagon.com/fr
Philomatique : http://www.philomathiquebordeaux.com/
4-2 Documents joints :
- Charte Graphique
- Wireframing XD
Page 10
- Charte Graphique -
Couleurs
Reprise des couleurs principales de l’ancien site (ligne 1) plus ajout de couleurs secon-daires (ligne 2)
# 96D1DA #3CA6A6 #878787 #72829A #E0B61E
RVB 150-209-218 RVB 60-166-166 RVB 135-135-135 RVB 0-108-109 RVB 224-182-30
#183E81 # E1600F #E20E32 #8C0C58 #72829A
RVB 24-62-129 RVB 225-95-15 RVB 226-14-50 RVB 140-12-88 114-130-154
page 11
Polices
On garde le style SerifSans de l’ancien site :
OpenSans pour le texte et Palanquin Dark pour les titres
H1 - PalankinDark 48 px
abcdefghijklmnopqrs-tuvwxyzABCDEFGHI-J K M N O P Q R S T U -
VWXYZ12346789H2 - PalankinDark 34 px
abdefghijklmnopqrstuvwxy-zABCDEFGHIJKLMNOPQRSTU-
VWX12346789H3 -OpenSans Bold 24px
abcdefghi jklmnopqrstuvwxyzABC-DEFGHIJKLMNOPQRSTUVWXYZ12345679
Paragraphe - OpenSans 13px
Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et sta-tionibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat exti-mas partes.
Page 12
LE PARCOURS DE L’UTILISATEUR
L’internaute (salarié, demandeur d’emploi ou étudiant, voire DRH), à la recherche
d’une formation, se retrouve sur la page d’accueil de Modula Formation.
Grâce à la barre de recherche située en haut
à gauche, il accède directement à la formation
recherchée.
La page décrit la formation en détails, les compétences qu’elle permettra d’acquérir,
puis les dates et le tarif, les pré-requis, le niveau de sortie, ainsi que les débouchés.
Cette formation l’intéresse et grâce au CTA « testez-vous », il vérifie s’il a les aptitudes
requises pour y assister.
Il cherche ensuite des renseignements sur le centre de formation, sur son sérieux.
Il raura pris connaissance sur la page d’accueil des taux de réussite des certifications
et le pourcentage de retour à l’emploi, va sur le blog pour voir les dernières actualités
(ça renseigne sur le rythme des mises à jour, l’activité et le dynamisme du Centre),
jette un œil aux témoignages. Puis il va sur le net à la recherche d’informations plus
objectives (les avis sur Google MyBusiness, le site Facebook, les vidéos YouTube qui
lui donnent une idée des locaux, du matériel mis à disposition… => penser à insérer les
vidéos directement dans le site).
En fonction de son statut (page d’accueil : salarié, demandeur d’emploi ou étudiant),
il a accès aux informations concernant les possibilités de financement.
Une fois qu’il est rassuré sur le sérieux du Centre, il se renseigne sur les types de
formations délivrées (diplômantes, qualifiantes, PCIE, est-ce qu’elles sont reconnues
par l’Etat ?).
Lorsque sa décision est prise, il clique pour prendre renseignements et/ou rendez-
vous sur le CTA « contactez-nous » qui se trouve dans le footer, ou grâce au formulaire
page 13
de la page contact ou à ceux qui sont disponibles dans toutes les pages section-
formation.
Sur le côté droit, un bouton «contact» fixe est également disponible à chaque instant
de la navigation sur toutes les pages quel que soit le media utilisé.
Les blocs de lecture sont placés à gauche (zones froides) tandis que tout ce qui
requiert une interaction avec l’internaute (les CTA, le menu accordéon des formations,
les formulaires) sont placés à droite (zones chaudes).
Le site est responsive, dans l’optique d’une utlisation grandissante de l’usage du
mobile.
L’UI DESIGNL’objectif principal du site est de gagner en notoriété et d’obtenir un bon taux de
conversion, c’est-à-dire d’accrôitre ses contacts au moyen des formulaires (direct) ou d’appels téléphoniques (indirect).
Clarté et concision => Page d’accueil :
1 - Hero Section (plutôt qu’un slider afin d’optimiser le temps d’’affichage de la page) avec un léger mouvement zoom in. Des accroches efficaces : 2 questions, 1 réponse. Deux CTA clairement identifiés qui amènent vers les deux types de formations proposées.
2 - Qu’est-ce que fait la spécificité du centre ? Quatre visuels avec des animations.
3 -Les partenaires.
4 - Les différents statuts avec animations et des dessins personnalisés.
5 - Lien vers le blog.
Efficacité :
La navigation, grâce à la barre de recherche en page d’accueil, permet à l’internaute d’obtenir une réponse immédiate à sa question. Pour celui qui veut explorer le site, l’information finale (la formation) se trouve à moins de trois clics.
Toutes les formations ont été hiérarchisées afin de faciliter la navigation.
Page 14
LE RÉFÉRENCEMENT
Une attention particulière a été portée aux principes de référencement.
STRUCTURE INTERNE :
Balisage pour chaque page (balises meta-title, meta-description, balise H1, H2..)
Bien définir les mots-clés et expression-clés pour chaque formation. Le contenu du texte doit être en adéquation avec le titre (Google Analytics - Search Console). Il doit intéresser l’internaute pour qu’il reste plus longtemps sur la page et s’élever dans le PageRank
Maillage interne : liens sur les mots-clés, liens sur les pages
Optimisation des images : poids, nom de l’image, alt, title, description
Meta names (title, description, robots - viewport) et Meta-properties (og:title, og:description, og:image)
METTRE DES BOUTONS DE PARTAGE DE RÉSEAUX SOCIAUX SUR LES DIFFÉ-RENTES FORMATIONS POUR ACQUÉRIR UN TRAFIC SUR UN NIVEAU 2 ET AUGMEN-TER LA NOTORIÉTÉ DU CENTRE
STRUCTURE EXTERNE :
Référencement triangulé : Site, Blog et Réseaux Sociaux. Augmenter les backlinks.
REFERENCEMENT PAYANT (SEM) : Prévoir une campagne AdWords ponctuelle.
page 15
LA LÉGISLATION
1 - Mettre son site en conformité par rapport aux cookies :
Rappel des obligations légales (CNIL) :
Avant de déposer ou lire un cookie, les éditeurs de sites ou d’applications doivent :
- informer les internautes de la finalité des cookies
- obtenir leur consentement
- fournir aux internautes un moyen de les refuser.
La durée de validité de ce consentement est de 13 mois maximum.
Nécessité d’installer une extension pour afficher le bandeau d’information préalable
2 - Collecte des données formulaires (Mentions CNIL) :
Les « mentions CNIL » correspondent aux informations qui doivent être communiquées aux consommateurs au moment de la collecte de leurs données personnelles.
La loi Informatique et libertés (loi de 1978 modifiée en 2004) impose de regrouper les éléments suivants dans vos mentions CNIL :
- l’identité du responsable d u traitement (votre marque)
- la finalité de l’utilisation des données (en quoi ces données vous seront utiles)
- les destinataires des données (votre service marketing par exemple)
- les droits conférés par la loi aux consommateurs (à savoir le droit d’accès, de rectification, et d’opposition), ainsi que la manière de vous contacter.
https://www.cnil.fr/fr/modele/mention/formulaire-de-collecte-de-donnees-personnelles
La réglementation RGPD rentrera en vigueur le 28 mai 2018 avec de nouvelles règles de protection.
3 - Dans le footer, mettre les mentions légales et le réglement intérieur.
4 - Toutes les photos sont fournies par le centre de formation ou sont libres de droit.
Page 16
LOREM IPSUM NOVI RAD
LOREM IPSUM NOVI RAD
Pourquoi nous choisir ?
Nos partenaires
Les financements
L’ACTU
LOREM IPSUM NOVI RAD
MORE... MORE...
Rechercher
Accueil FORMATION TITRES PROFESSIONNELS MODULA FORMATION L’ACTU CONTACT
Modula Formationncidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpalla facilisi.Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod
Témoignages
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam era»
Lorem ipsum dolor sit amet, cons
More... ->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
Premier Article Deuxième Article
Modula Formation
Formation Professionnelle Continue
381. Boulevard du Président Wilson
33200 Bordeaux
2018 Modula Formation Bordeaux
Règlement intérieur de l’organisme de formation
Mentions Légales
Contactez-nous
Fin de Formation
Donnez-nous voter avis
«
PAGE D’ACCUEILConstruction de la page d’accueil.
Ajout de Css supplémentaire pour un effet original sur le survol des rubriques
« Pourquoi nous choisir» et «Financements»
MAQUETTAGE + IMPRESSION D’ECRAN
page 17
PAGE MODULES DE FORMATION
Pop-Up latéral qui permet d’accéder à un formulaire de contact à n’importe quel instant de la navigation du site
(extensions SlickPopUp + ContactForm7)
Intégration de CSS Supplémentaire pour un effet original sur le survol des différentes ru-briques de formation
Le thème ne gérant le responsive qu’avec un maximum de 4 colonnes, nécessité d’intégrer les dix modules grâce à des media queries
Page 18
Rechercher
Accueil FORMATION TITRES PROFESSIONNELS MODULA FORMATION L’ACTU CONTACT
Modula Formation
Formation Professionnelle Continue
381. Boulevard du Président Wilson
33200 Bordeaux
2018 Modula Formation Bordeaux
Règlement intérieur de l’organisme de formation
Mentions Légales
Contactez-nous
Fil d’Ariane
Contact
Testez-vous !
Témoignages
Formation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
Word Initiation
10 domaines de formation {
Slider Témoignagneshortcodes Blockquotes
Slider Témoignagneshortcodes Blockquotes
PAGES DE PRÉSENTATION DES FORMATIONS PAR MODULE
MAQUETTAGE
page 19
FORMATION
Télécharger Programme
Formation PCIE
PROGRAMME DETAILLE
Inscription
Rechercher
Accueil FORMATION TITRES PROFESSIONNELS MODULA FORMATION L’ACTU CONTACT
Programme> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nisl auctor, eleifend nibh eget,
> DNam mattis eros eget ligula commodo, ut rutrum purus semper.
> Vivamus sit amet nisl auctor, eleifend nibh eget,
> nisl auctor, eleifend nibh eget,
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nisl auctor, eleifend nibh eget,
> DNam mattis eros eget ligula commodo, ut rutrum purus semper.
1er CHAPITRE
Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.
2ème CHAPITRE
Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.
3ème CHAPITRE
Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.
4ème CHAPITRE
Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.Maecenas neque felis, iaculis porttitor dolor ac, aliquet pharetra lorem. Quisque sed mi commodo ex pharetra pretium.
Type de Validation
Formation Certifiante
Eligible CPF n°0000=> Lien vers d’autres formatioins liées <#>=> Parcours PCIE et liens vers différentes formations correspondantes <#>
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nisl auctor, eleifend nibh eget,
> DNam mattis eros eget ligula commodo, ut rutrum purus semper.
> Vivamus sit amet nisl auctor, eleifend nibh eget,
> nisl auctor, eleifend nibh eget,
> consectetur adipiscing elit. Vivamus
0 jours - 00 heures
Première FonctionMauris nec lectus semper, porttitor felis vitae, facilisis ligula. Maecenas tempus porta augue et aliquam. In sed enim mauris. Sed id iaculis urnaMauris nec lectus semper, porttitor felis vitae, facilisis ligula. Maecenas tempus porta augue et aliquam. In sed enim mauris. Sed id iaculis urnaMauris nec lectus semper, porttitor felis vitae, facilisis ligula. Maecenas tempus porta augue et aliquam. In sed enim mauris. Sed id iaculis urna
Modula Formation
Formation Professionnelle Continue
381. Boulevard du Président Wilson
33200 Bordeaux
2018 Modula Formation Bordeaux
Règlement intérieur de l’organisme de formation
Mentions Légales
Contactez-nous
Fil d’Ariane
Contact
programme complet <#>
Date de Formation et Tarifs
Pré-requis
Participants
Moyens Pédagogiques
Niveau de sortie
_
+
+
+
+
PAGE DE FORMATIONMAQUETTAGE
Beaucoup d’informations qu’il faut synthétiser (notamment grâce à un menu-accordéon.)
Page 20