SlideShare une entreprise Scribd logo
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 »
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
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
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.
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
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…)
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
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!
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.
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é
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)
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

Contenu connexe

Tendances

Veille documentaire, flux rss, agrégateurs de flux et social bookmarking
Veille documentaire, flux rss, agrégateurs de flux et social bookmarkingVeille documentaire, flux rss, agrégateurs de flux et social bookmarking
Veille documentaire, flux rss, agrégateurs de flux et social bookmarking
Claire Chignard
 
Reseaux sociaux professionnels- Curation de contenu - Scoop.it, Storify, Pape...
Reseaux sociaux professionnels- Curation de contenu - Scoop.it, Storify, Pape...Reseaux sociaux professionnels- Curation de contenu - Scoop.it, Storify, Pape...
Reseaux sociaux professionnels- Curation de contenu - Scoop.it, Storify, Pape...
Alban Jarry
 
Presentation & Tour d'horizon scoop.it
Presentation & Tour d'horizon scoop.itPresentation & Tour d'horizon scoop.it
Presentation & Tour d'horizon scoop.it
scoopit_fr
 
Notre catalogue 2014
Notre catalogue   2014Notre catalogue   2014
Notre catalogue 2014
Julien Voyez
 
Luxe, User Experience & Medias Sociaux
Luxe, User Experience & Medias SociauxLuxe, User Experience & Medias Sociaux
Luxe, User Experience & Medias SociauxHelene Zuili
 
Tutoriel Pearltrees
Tutoriel PearltreesTutoriel Pearltrees
Tutoriel Pearltrees
Claire Chignard
 
La diffusion multi-canal, formation ADBS
La diffusion multi-canal, formation ADBSLa diffusion multi-canal, formation ADBS
La diffusion multi-canal, formation ADBSJean-Baptiste Soufron
 
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistesPearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Claire Chignard
 
Travail collaboratif à distance
Travail collaboratif à distanceTravail collaboratif à distance
Travail collaboratif à distance
Isabelle Gonon
 
Comparatif de 12 solutions de curation
Comparatif de 12 solutions de curationComparatif de 12 solutions de curation
Comparatif de 12 solutions de curationChristophe Deschamps
 
Curation edp2500
Curation edp2500Curation edp2500
Curation edp2500
Patrice Leroux
 
L'identité professionnelle d'un GIDO : Les débouchés possibles et les outils ...
L'identité professionnelle d'un GIDO : Les débouchés possibles et les outils ...L'identité professionnelle d'un GIDO : Les débouchés possibles et les outils ...
L'identité professionnelle d'un GIDO : Les débouchés possibles et les outils ...ORoselys
 
Rechercher des ressources sur Internet
Rechercher des ressources sur InternetRechercher des ressources sur Internet
Rechercher des ressources sur Internet
Redaction SKODEN
 
De la veille au partage
De la veille au partageDe la veille au partage
De la veille au partage
Terheck
 
Community manager Facebook en BU
Community manager Facebook en BUCommunity manager Facebook en BU
Community manager Facebook en BU
Magalie Le Gall
 
Stage Construire un projet collaboratif : démarche et outils - 2016-05-31
Stage Construire un projet collaboratif : démarche et outils - 2016-05-31Stage Construire un projet collaboratif : démarche et outils - 2016-05-31
Stage Construire un projet collaboratif : démarche et outils - 2016-05-31
URFIST de Rennes
 
Outils de recherche et de veille sur l'actualité
Outils de recherche et de veille sur l'actualité Outils de recherche et de veille sur l'actualité
Outils de recherche et de veille sur l'actualité
URFIST de Rennes
 
Usage des blogs dans les bibliothèques
Usage des blogs dans les bibliothèquesUsage des blogs dans les bibliothèques
Usage des blogs dans les bibliothèquesAref Jdey
 

Tendances (20)

Veille documentaire, flux rss, agrégateurs de flux et social bookmarking
Veille documentaire, flux rss, agrégateurs de flux et social bookmarkingVeille documentaire, flux rss, agrégateurs de flux et social bookmarking
Veille documentaire, flux rss, agrégateurs de flux et social bookmarking
 
Reseaux sociaux professionnels- Curation de contenu - Scoop.it, Storify, Pape...
Reseaux sociaux professionnels- Curation de contenu - Scoop.it, Storify, Pape...Reseaux sociaux professionnels- Curation de contenu - Scoop.it, Storify, Pape...
Reseaux sociaux professionnels- Curation de contenu - Scoop.it, Storify, Pape...
 
Presentation & Tour d'horizon scoop.it
Presentation & Tour d'horizon scoop.itPresentation & Tour d'horizon scoop.it
Presentation & Tour d'horizon scoop.it
 
Notre catalogue 2014
Notre catalogue   2014Notre catalogue   2014
Notre catalogue 2014
 
Luxe, User Experience & Medias Sociaux
Luxe, User Experience & Medias SociauxLuxe, User Experience & Medias Sociaux
Luxe, User Experience & Medias Sociaux
 
Tutoriel Pearltrees
Tutoriel PearltreesTutoriel Pearltrees
Tutoriel Pearltrees
 
La diffusion multi-canal, formation ADBS
La diffusion multi-canal, formation ADBSLa diffusion multi-canal, formation ADBS
La diffusion multi-canal, formation ADBS
 
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistesPearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
 
Travail collaboratif à distance
Travail collaboratif à distanceTravail collaboratif à distance
Travail collaboratif à distance
 
Comparatif de 12 solutions de curation
Comparatif de 12 solutions de curationComparatif de 12 solutions de curation
Comparatif de 12 solutions de curation
 
Curation edp2500
Curation edp2500Curation edp2500
Curation edp2500
 
L'identité professionnelle d'un GIDO : Les débouchés possibles et les outils ...
L'identité professionnelle d'un GIDO : Les débouchés possibles et les outils ...L'identité professionnelle d'un GIDO : Les débouchés possibles et les outils ...
L'identité professionnelle d'un GIDO : Les débouchés possibles et les outils ...
 
Le web 2.0
Le web 2.0Le web 2.0
Le web 2.0
 
Rechercher des ressources sur Internet
Rechercher des ressources sur InternetRechercher des ressources sur Internet
Rechercher des ressources sur Internet
 
De la veille au partage
De la veille au partageDe la veille au partage
De la veille au partage
 
Community manager Facebook en BU
Community manager Facebook en BUCommunity manager Facebook en BU
Community manager Facebook en BU
 
Stage Construire un projet collaboratif : démarche et outils - 2016-05-31
Stage Construire un projet collaboratif : démarche et outils - 2016-05-31Stage Construire un projet collaboratif : démarche et outils - 2016-05-31
Stage Construire un projet collaboratif : démarche et outils - 2016-05-31
 
Outils de recherche et de veille sur l'actualité
Outils de recherche et de veille sur l'actualité Outils de recherche et de veille sur l'actualité
Outils de recherche et de veille sur l'actualité
 
Web 2 0 Main Features
Web 2 0 Main FeaturesWeb 2 0 Main Features
Web 2 0 Main Features
 
Usage des blogs dans les bibliothèques
Usage des blogs dans les bibliothèquesUsage des blogs dans les bibliothèques
Usage des blogs dans les bibliothèques
 

Similaire à Cours projet web collaboratif - partie 2 : Stratégie éditoriale, version 2019

Notre catalogue 2012-2013
Notre catalogue   2012-2013Notre catalogue   2012-2013
Notre catalogue 2012-2013
Julien Voyez
 
Animer un portail documentaire - E-sidoc
Animer un portail documentaire - E-sidocAnimer un portail documentaire - E-sidoc
Animer un portail documentaire - E-sidoc
Claire Chignard
 
Et si Internet vous aidait à trouver un emploi ?
Et si Internet vous aidait à trouver un emploi ?Et si Internet vous aidait à trouver un emploi ?
Et si Internet vous aidait à trouver un emploi ?
Éric Delcroix
 
Et si Internet vous
Et si Internet vousEt si Internet vous
Et si Internet vous aidez à trouver un emploi ?
Et si Internet vous aidez à trouver un emploi ?Et si Internet vous aidez à trouver un emploi ?
Et si Internet vous aidez à trouver un emploi ?
Marlene Page
 
Créer un site Internet de qualité (2010)
Créer un site Internet de qualité (2010)Créer un site Internet de qualité (2010)
Créer un site Internet de qualité (2010)
Ardesi Midi-Pyrénées
 
Animer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidocAnimer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidoc
Claire Chignard
 
Réseaux sociaux professionnels et veille sur internet
Réseaux sociaux professionnels et veille sur internetRéseaux sociaux professionnels et veille sur internet
Réseaux sociaux professionnels et veille sur internet
PoleNumeriqueNormand
 
Veille et curation
Veille et curationVeille et curation
Veille et curation
Claire Chignard
 
WIS-FB-J1
WIS-FB-J1WIS-FB-J1
WIS-FB-J1
Alexandre Bone
 
Projet de médiation numérique de la médiathèque George Sand de Moirans
Projet de médiation numérique de la médiathèque George Sand de MoiransProjet de médiation numérique de la médiathèque George Sand de Moirans
Projet de médiation numérique de la médiathèque George Sand de Moirans
Thomas Gomez de Mercado
 
J'écris pour le web à l'ère du Social Media
J'écris pour le web à l'ère du Social MediaJ'écris pour le web à l'ère du Social Media
J'écris pour le web à l'ère du Social Media
Nadya Benyounes
 
B5 gerer-sa-e-reputation-instants t2014-rhonetourisme
B5 gerer-sa-e-reputation-instants t2014-rhonetourismeB5 gerer-sa-e-reputation-instants t2014-rhonetourisme
B5 gerer-sa-e-reputation-instants t2014-rhonetourisme
InstantsT_RhoneTourisme
 
Comment apprendre tout au long de la vie
Comment apprendre tout au long de la vieComment apprendre tout au long de la vie
Comment apprendre tout au long de la vie
Zevillage
 
CMS et Wordpress
CMS et WordpressCMS et Wordpress
CMS et Wordpress
Clément Dussarps
 
Animer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidocAnimer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidoc
Claire Chignard
 
Animer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidocAnimer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidoc
Claire Chignard
 

Similaire à Cours projet web collaboratif - partie 2 : Stratégie éditoriale, version 2019 (20)

Notre catalogue 2012-2013
Notre catalogue   2012-2013Notre catalogue   2012-2013
Notre catalogue 2012-2013
 
Xd 2013 form_offre_com
Xd 2013 form_offre_comXd 2013 form_offre_com
Xd 2013 form_offre_com
 
Animer un portail documentaire - E-sidoc
Animer un portail documentaire - E-sidocAnimer un portail documentaire - E-sidoc
Animer un portail documentaire - E-sidoc
 
Atelier11 rezotour
Atelier11 rezotourAtelier11 rezotour
Atelier11 rezotour
 
Les réseaux sociaux
Les réseaux sociauxLes réseaux sociaux
Les réseaux sociaux
 
Et si Internet vous aidait à trouver un emploi ?
Et si Internet vous aidait à trouver un emploi ?Et si Internet vous aidait à trouver un emploi ?
Et si Internet vous aidait à trouver un emploi ?
 
Et si Internet vous
Et si Internet vousEt si Internet vous
Et si Internet vous
 
Et si Internet vous aidez à trouver un emploi ?
Et si Internet vous aidez à trouver un emploi ?Et si Internet vous aidez à trouver un emploi ?
Et si Internet vous aidez à trouver un emploi ?
 
Créer un site Internet de qualité (2010)
Créer un site Internet de qualité (2010)Créer un site Internet de qualité (2010)
Créer un site Internet de qualité (2010)
 
Animer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidocAnimer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidoc
 
Réseaux sociaux professionnels et veille sur internet
Réseaux sociaux professionnels et veille sur internetRéseaux sociaux professionnels et veille sur internet
Réseaux sociaux professionnels et veille sur internet
 
Veille et curation
Veille et curationVeille et curation
Veille et curation
 
WIS-FB-J1
WIS-FB-J1WIS-FB-J1
WIS-FB-J1
 
Projet de médiation numérique de la médiathèque George Sand de Moirans
Projet de médiation numérique de la médiathèque George Sand de MoiransProjet de médiation numérique de la médiathèque George Sand de Moirans
Projet de médiation numérique de la médiathèque George Sand de Moirans
 
J'écris pour le web à l'ère du Social Media
J'écris pour le web à l'ère du Social MediaJ'écris pour le web à l'ère du Social Media
J'écris pour le web à l'ère du Social Media
 
B5 gerer-sa-e-reputation-instants t2014-rhonetourisme
B5 gerer-sa-e-reputation-instants t2014-rhonetourismeB5 gerer-sa-e-reputation-instants t2014-rhonetourisme
B5 gerer-sa-e-reputation-instants t2014-rhonetourisme
 
Comment apprendre tout au long de la vie
Comment apprendre tout au long de la vieComment apprendre tout au long de la vie
Comment apprendre tout au long de la vie
 
CMS et Wordpress
CMS et WordpressCMS et Wordpress
CMS et Wordpress
 
Animer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidocAnimer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidoc
 
Animer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidocAnimer un portail documentaire : E-sidoc
Animer un portail documentaire : E-sidoc
 

Plus de Eric Giraudin

seminaire portfolio 1 en TC.pptx
seminaire portfolio 1 en TC.pptxseminaire portfolio 1 en TC.pptx
seminaire portfolio 1 en TC.pptx
Eric Giraudin
 
Pedagon'num Montpellier 2022 / E-portfolio et Approche par compétences : Ka...
Pedagon'num Montpellier 2022 / E-portfolio et Approche par compétences  :  Ka...Pedagon'num Montpellier 2022 / E-portfolio et Approche par compétences  :  Ka...
Pedagon'num Montpellier 2022 / E-portfolio et Approche par compétences : Ka...
Eric Giraudin
 
Support de séminaire portfolio et traces (APC) en BUT GEA IUT Annecy USMB
Support de séminaire portfolio et traces (APC) en BUT GEA IUT Annecy USMBSupport de séminaire portfolio et traces (APC) en BUT GEA IUT Annecy USMB
Support de séminaire portfolio et traces (APC) en BUT GEA IUT Annecy USMB
Eric Giraudin
 
Centrale pédagogique : les saé dans la démarche portfolio et leur évaluation ...
Centrale pédagogique : les saé dans la démarche portfolio et leur évaluation ...Centrale pédagogique : les saé dans la démarche portfolio et leur évaluation ...
Centrale pédagogique : les saé dans la démarche portfolio et leur évaluation ...
Eric Giraudin
 
Conception du modèle eportfolio établissement ESR KAPC+
Conception du modèle eportfolio établissement ESR KAPC+Conception du modèle eportfolio établissement ESR KAPC+
Conception du modèle eportfolio établissement ESR KAPC+
Eric Giraudin
 
Reunion nationale karuta nov 2020
Reunion nationale karuta nov 2020Reunion nationale karuta nov 2020
Reunion nationale karuta nov 2020
Eric Giraudin
 
Présentation lyon octobre 2018 karuta eportfolio
Présentation lyon octobre 2018 karuta eportfolioPrésentation lyon octobre 2018 karuta eportfolio
Présentation lyon octobre 2018 karuta eportfolio
Eric Giraudin
 
KARUTA FRANCE PORTFOLIO ESUP DAYS PARIS 24
KARUTA FRANCE PORTFOLIO ESUP DAYS PARIS 24KARUTA FRANCE PORTFOLIO ESUP DAYS PARIS 24
KARUTA FRANCE PORTFOLIO ESUP DAYS PARIS 24
Eric Giraudin
 
Les IUT de France, un modèle conçu avec et pour les entreprises
Les IUT de France, un modèle conçu avec et pour les entreprisesLes IUT de France, un modèle conçu avec et pour les entreprises
Les IUT de France, un modèle conçu avec et pour les entreprises
Eric Giraudin
 
Support d'un atelier pour sensibiliser les enseignants à adapteur leur enseig...
Support d'un atelier pour sensibiliser les enseignants à adapteur leur enseig...Support d'un atelier pour sensibiliser les enseignants à adapteur leur enseig...
Support d'un atelier pour sensibiliser les enseignants à adapteur leur enseig...
Eric Giraudin
 
Des axes clés pour bâtir un ePortfolio - IDEX
Des axes clés pour bâtir un ePortfolio - IDEXDes axes clés pour bâtir un ePortfolio - IDEX
Des axes clés pour bâtir un ePortfolio - IDEX
Eric Giraudin
 
Template demi Pecha Kucha
Template demi Pecha KuchaTemplate demi Pecha Kucha
Template demi Pecha Kucha
Eric Giraudin
 
Présentation KARUTA Interface 2.0 et cas d'usage portfolio à la conférence su...
Présentation KARUTA Interface 2.0 et cas d'usage portfolio à la conférence su...Présentation KARUTA Interface 2.0 et cas d'usage portfolio à la conférence su...
Présentation KARUTA Interface 2.0 et cas d'usage portfolio à la conférence su...
Eric Giraudin
 
Communication Colloque scientifique PGV : Prendre le virage compétences... Ba...
Communication Colloque scientifique PGV : Prendre le virage compétences... Ba...Communication Colloque scientifique PGV : Prendre le virage compétences... Ba...
Communication Colloque scientifique PGV : Prendre le virage compétences... Ba...
Eric Giraudin
 
Support de cours d'introduction au logo IUT2 Grenoble (GEA)
Support de cours d'introduction au logo IUT2 Grenoble (GEA)Support de cours d'introduction au logo IUT2 Grenoble (GEA)
Support de cours d'introduction au logo IUT2 Grenoble (GEA)
Eric Giraudin
 

Plus de Eric Giraudin (15)

seminaire portfolio 1 en TC.pptx
seminaire portfolio 1 en TC.pptxseminaire portfolio 1 en TC.pptx
seminaire portfolio 1 en TC.pptx
 
Pedagon'num Montpellier 2022 / E-portfolio et Approche par compétences : Ka...
Pedagon'num Montpellier 2022 / E-portfolio et Approche par compétences  :  Ka...Pedagon'num Montpellier 2022 / E-portfolio et Approche par compétences  :  Ka...
Pedagon'num Montpellier 2022 / E-portfolio et Approche par compétences : Ka...
 
Support de séminaire portfolio et traces (APC) en BUT GEA IUT Annecy USMB
Support de séminaire portfolio et traces (APC) en BUT GEA IUT Annecy USMBSupport de séminaire portfolio et traces (APC) en BUT GEA IUT Annecy USMB
Support de séminaire portfolio et traces (APC) en BUT GEA IUT Annecy USMB
 
Centrale pédagogique : les saé dans la démarche portfolio et leur évaluation ...
Centrale pédagogique : les saé dans la démarche portfolio et leur évaluation ...Centrale pédagogique : les saé dans la démarche portfolio et leur évaluation ...
Centrale pédagogique : les saé dans la démarche portfolio et leur évaluation ...
 
Conception du modèle eportfolio établissement ESR KAPC+
Conception du modèle eportfolio établissement ESR KAPC+Conception du modèle eportfolio établissement ESR KAPC+
Conception du modèle eportfolio établissement ESR KAPC+
 
Reunion nationale karuta nov 2020
Reunion nationale karuta nov 2020Reunion nationale karuta nov 2020
Reunion nationale karuta nov 2020
 
Présentation lyon octobre 2018 karuta eportfolio
Présentation lyon octobre 2018 karuta eportfolioPrésentation lyon octobre 2018 karuta eportfolio
Présentation lyon octobre 2018 karuta eportfolio
 
KARUTA FRANCE PORTFOLIO ESUP DAYS PARIS 24
KARUTA FRANCE PORTFOLIO ESUP DAYS PARIS 24KARUTA FRANCE PORTFOLIO ESUP DAYS PARIS 24
KARUTA FRANCE PORTFOLIO ESUP DAYS PARIS 24
 
Les IUT de France, un modèle conçu avec et pour les entreprises
Les IUT de France, un modèle conçu avec et pour les entreprisesLes IUT de France, un modèle conçu avec et pour les entreprises
Les IUT de France, un modèle conçu avec et pour les entreprises
 
Support d'un atelier pour sensibiliser les enseignants à adapteur leur enseig...
Support d'un atelier pour sensibiliser les enseignants à adapteur leur enseig...Support d'un atelier pour sensibiliser les enseignants à adapteur leur enseig...
Support d'un atelier pour sensibiliser les enseignants à adapteur leur enseig...
 
Des axes clés pour bâtir un ePortfolio - IDEX
Des axes clés pour bâtir un ePortfolio - IDEXDes axes clés pour bâtir un ePortfolio - IDEX
Des axes clés pour bâtir un ePortfolio - IDEX
 
Template demi Pecha Kucha
Template demi Pecha KuchaTemplate demi Pecha Kucha
Template demi Pecha Kucha
 
Présentation KARUTA Interface 2.0 et cas d'usage portfolio à la conférence su...
Présentation KARUTA Interface 2.0 et cas d'usage portfolio à la conférence su...Présentation KARUTA Interface 2.0 et cas d'usage portfolio à la conférence su...
Présentation KARUTA Interface 2.0 et cas d'usage portfolio à la conférence su...
 
Communication Colloque scientifique PGV : Prendre le virage compétences... Ba...
Communication Colloque scientifique PGV : Prendre le virage compétences... Ba...Communication Colloque scientifique PGV : Prendre le virage compétences... Ba...
Communication Colloque scientifique PGV : Prendre le virage compétences... Ba...
 
Support de cours d'introduction au logo IUT2 Grenoble (GEA)
Support de cours d'introduction au logo IUT2 Grenoble (GEA)Support de cours d'introduction au logo IUT2 Grenoble (GEA)
Support de cours d'introduction au logo IUT2 Grenoble (GEA)
 

Dernier

Presentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechniquePresentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechnique
mohammadaminejouini
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union
 
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptxcours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
AbdessamadAmimi1
 
Textes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdfTextes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdf
Michel Bruley
 
Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
Morzadec Cécile
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
Txaruka
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
frizzole
 

Dernier (7)

Presentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechniquePresentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechnique
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
 
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptxcours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
cours-LasergrammetrieLe « LiDAR», de l’anglais « Light.pptx
 
Textes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdfTextes de famille concernant les guerres V2.pdf
Textes de famille concernant les guerres V2.pdf
 
Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
 

Cours projet web collaboratif - partie 2 : Stratégie éditoriale, version 2019

  • 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