Projet Web CollaboratifPartie 2 – La stratégie éditoriale

Eric GIRAUDINDépartement Information-Communication,

option Information Numérique dans les Organisations - IUT2 Grenoble

Plan du cours

1. Démarrer2. L’image de de la marque : ligne

éditoriale et identité visuelle3. Organiser l’éditorial4. Architecture de l’information

Démarrer

• Quelle thématique?• A quelle problématique globale mon projet

doit répondre?• Situation dans la stratégie de l’organisation?• Analyser l’existant!• Se différencier de la concurrence!

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 à atteindreen fonction des objectifs de communication

Définir les formats éditoriaux(blogs, articles, pages, catalogues, newsletter…)

>> Rédiger une charte éditoriale

Exemple de

stratégie de

présenceen ligne

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).

• La maquette visuelle réaliste– Epreuves graphiques donnant un aperçu réaliste de la future apparence du site

• Le thème graphique– Découpage de la maquette visuelle du design du portail en fichiers (XHTML, CSS…)

permettant son intégration de manière cohérente.

Ressources et exemples

app.mockflow.comWireframing

dafont.orgExemple

charte graphique

Flaticon

Trouver sa typo

Icônes gratuits

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. ».Exemple sur le site IMPALAWEBSTUDIO

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 et rendre accessibles ses contenus : documentalistes, spécialistes de l’information numériques…

>> 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 chargesExemples de bonnes pratiques : • Chaque image intégrée dans vos contenus, 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.

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)

Ressources

Pour mettre en place une architecture ne pas hésiter à utiliser des outils de mindmapping (ex : framindmap)