Vidéo de support du cours "projet web collaboratif" dispensé en S3 au département Information-Communication de l'IUT2 de l'Université Grenoble Alpes

1. Projet Web Collaboratif
Partie 2 – La stratégie éditoriale
Eric GIRAUDIN, responsable innovation pédagogique IUT2 Univ. Grenoble Alpes,
coordinateur Karuta France Portfolio,
Chargé d’enseignement au département Information-Communication,
« Information Numérique dans les Organisations »

2. Plan du cours
1. Démarrer
2. L’image de de la marque : ligne
éditoriale et identité visuelle
3. Organiser l’éditorial
4. Architecture de l’information

3. Démarrer : camper sa stratégie
• A quelle(s) problématique(s) globale(s) mon
projet doit répondre, raison(s) d’être ?
• Quels enjeux pour l’organisation
commanditaire ?
• Analyser l’existant, ne pas réinventer la roue !
• Se différencier de la concurrence

4. Démarrer avec les personas
Créer ses personnages
imaginaires représentants
un segment de vos cibles
pour construire vos
contenus, parcours
utilisateurs et
fonctionnalités
Voir : Les personas – un outil
pour mieux comprendre les
utilisateurs,
sur le site « les cahiers de
l’innovation »
Elodie DUPIANTAU
32 ans, CSP+, célibataire sans enfants,
Grenoble, France
« Je suis une femme moderne
passionnée de voyage en recherche
d’expériences authentiques »
Connaissances web
Élevées
Habitudes & hobbies
Emails, Instagram,
Pinterest, Facebook,
logiciels PAO et montage
vidéo, ebooks, NetFlix,
Cinéma, décoration,
photos, voyages &
découverte culturelle,
hummanitaire
Matériel
Ordinateur, ipad, iphone
Sites de prédilections
Yahoo.fr,
showroomprive.com
Son contexte
Très connectée, passionnée par la photo et le
cinéma elle adore préparer ses voyages en
ligne, cherche à sortir des sentiers battus
touristiques habituels et aller réellement à la
rencontre de nouvelles cultures
Sa relation avec votre marque
Elle vient de découvrir votre marque par un
story partagée par ses amis sur Instagram et
elle s’est abonnée à vous (Insta et newsletter)
Pourquoi utilise t’elle votre site web ?
Pour découvrir des destinations de voyage sur
le site web VoyagerAutrement
Comment ?
S’inspirer des expériences des internautes
croisées avec les dossiers thématiques des
experts du site
Comportement
Déteste la publicité, aime l’authentique, les
visuels de qualité et inspirant, les sites aérés,
impatiente elle aime trouver rapidement
l’information qu’elle cherche, et a besoin d’être
mise en confiance.

5. L’image de l’organisation :
la ligne éditoriale
Définir les périmètres du territoire éditorial
(publics, langues, contributeurs, thématique, tonalité…)
Définir les objectifs éditoriaux à atteindre
en fonction des objectifs de communication
Définir les formats éditoriaux
(blogs, articles, pages, catalogues, newsletter…)
>> Rédiger une charte éditoriale

6. L’image de l’organisation :
L’identité visuelle
• L’identité visuelle :
– Ensemble des éléments visuels qui permettent la reconnaissance d’une organisation
• La charte graphique
– Document qui formalise les éléments de l’identité visuelle
• Le Wireframing
– Travail sur les gabarits de page (maquette non réaliste)
• Prototype d’expérience utilisateur
– Travail plus réaliste que le Wireframing pour construire des prototypes
d’expérience utilisateur
• La maquette visuelle réaliste
– Epreuves graphiques donnant un aperçu très réaliste de la future apparence du site
• Le thème graphique
– Découpage de la maquette visuelle du design, selon les prototypes d’expérience
utilisateur, en fichiers (XHTML, CSS…) permettant son intégration de manière cohérente
dans votre site web (et également sur vos réseaux sociaux, applications…)

7. Organiser l’éditorial
« La bible du projet éditorial qui précise la stratégie
éditoriale, le design, le concept, la stratégie de
référencement, la planification des étapes, les
fonctionnalités attendues, les attentes techniques,
etc. », mais qui laisse suffisamment de souplesse pour
une gestion de projet Agile
Modèle sur le site IMPALAWEBSTUDIO
Exemple réel : refonte site Pays de Falaise
LE CAHIER DES CHARGES

8. Organiser l’éditorial… au quotidien
• Créer les contenus : rédacteurs web
• Editer des contenus : éditeurs web
• Enrichir les contenus : graphistes,
photographes, illustrateurs, communicants,
vidéastes, iconographes…
• Publier et rendre trouvable ses contenus :
documentalistes, spécialistes de
l’information numériques…
>> Et surtout, mettre en place un Workflow!
• Créer les contenus : rédacteurs web
• Editer des contenus : éditeurs web
• Enrichir les contenus : graphistes, photographes,
illustrateurs, communicants, vidéastes,
iconographes…
• Publier, rendre conformes et accessibles ses
contenus : documentalistes, spécialistes de
l’information numériques…
• Animer autour des contenus : community
manager
>> Et surtout, mettre en place un Workflow!

9. Pensez à l’accessibilité web
• Créer les contenus : rédacteurs web
• Editer des contenus : éditeurs web
• Enrichir les contenus : graphistes,
photographes, illustrateurs, communicants,
vidéastes, iconographes…
• Publier et rendre trouvable ses contenus :
documentalistes, spécialistes de
l’information numériques…
>> Et surtout, mettre en place un Workflow!
Extrait du site w3qc.org
« L’accessibilité web signifie que les personnes handicapées peuvent
utiliser le web »
• Ce n’est pas à la personne handicapée de s’adapter à votre site
mais à vous de le rendre accessible.
• Il faut l’intégrer dans vos pratiques de rédaction web ou dans votre
cahier des charges
Exemples de bonnes pratiques :
• Chaque image intégrée dans vos contenues, utile à la
compréhension de vos informations, doit être renseignée en
version alternative textuelle;
• Les liens hypertextes doivent être sémantiques. « Cliquer ici » ne
permet pas à un aveugle de savoir ce qu’il va trouver en cliquant
sur ce lien. Par contre « Afficher la suite de l’article Partir en
vacances » sera beaucoup plus explicite.

10. Pensez à la RGPD
• Créer les contenus : rédacteurs web
• Editer des contenus : éditeurs web
• Enrichir les contenus : graphistes,
photographes, illustrateurs, communicants,
vidéastes, iconographes…
• Publier et rendre trouvable ses contenus :
documentalistes, spécialistes de
l’information numériques…
>> Et surtout, mettre en place un Workflow!
• Le Règlement Général de Protection des Données est un texte réglementaire européen
en application depuis le 25/05/2018 pour encadrer le traitement des données
personnelles de manière égalitaire en Europe
• 3 objectifs :
– renforcer les droits des personnes ;
– responsabiliser les acteurs traitant des données ;
– crédibiliser la régulation grâce à une coopération renforcée entre les autorités de
protection des données.
• 2 types d’identification : directe (nom, prénom etc.) et indirecte (identifiant, numéro etc.).
• 6 conseils de la CNIL :
– collectez que les données vraiment nécessaires ;
– soyez transparent ;
– respectez le droit des personnes en matière de consultation, de rectification ou
de suppression des données ;
– gardez la maîtrise des informations que vous collectez ;
– identifiez les risques liées à votre traitement de données ;
– déployez des dispositifs de sécurisation des données collectées (physiques et
numérique).
• Les CMS tels que WordPress proposent des fonctionnalités utiles au RGPD mais il faudra
ajouter et configurer d’autres extensions pour se mettre en conformité

11. Architecture de l’information
« Chaque chose doit être à la bonne place! »
• Travailler avec en co-design avec des usagers finaux,
se mettre à la place des visiteurs, collaborer avec
des ergonomes;
• Définir :
– L’architecture des contenus : plus utile à votre équipe de
contributeurs
– L’architecture fonctionnelle : plus utile à vos visiteurs
(plan du site)
– La (les) navigation(s)

12. RessourcesWireframing
app.mockflow.com
Exemple charte
graphique web
Trouver sa
typo
Dafont.org
Icônes gratuits
Flaticon
Maquettes d’expériences
utilisateur Adobe XD
Banque d’images gratuites
pixabay.com/fr/
Mindmap (architecture du
site…) framindmap