icone stratégie éditoriale

La conception des gabarits éditoriaux relève des techniques de stratégie éditoriale.
Découvrez des exemples illustrés et des ressources pour concevoir un gabarit éditorial dédié aux contenus.
Des modèles, formats, templates de contenus ainsi qu'une formation en ligne sont disponibles en accès payant.

Conception des gabarits éditoriaux

Révisé en Septembre 2019

Enjeux de la conception éditoriale

conception des gabarits éditoriaux

Comment concevoir les gabarits éditoriaux de votre dispositif digital ? Combien de format d'écran type faut-il concevoir pour dynamiser les contenus de votre site ? Comment dimensionner les modèles de page destinés à emmagasiner les contenus ?
Nous allons voir les méthodes et les techniques de conception pour étalonner un gabarit éditorial. Il s'agit d'un travail qui relève principalement de l'architecture de l'information et du design de l'information.

La conception des gabarits éditoriaux engage 3 entités dynamiques : le conteneur (le modèle de page), le contenu (issu de la base de donnée ou de la rédaction en dur) et les constituants rattachés aux contenus (composant d'interface, fonctionnalité, module). Le design fonctionnel du gabarit fait en sorte que le contenu source épouse l'interface utilisateur de façon élégante, en figurant les constituants et les composants de sorte à dynamiser le contenu.

Concevoir des gabarits éditoriaux s'inscrit dans la phase de conception du cycle projet et fait la jonction entre le design fonctionnel et la conception éditoriale. Il s'agit d'établir des calibres d'écrans suffisamment flexibles pour accueillir les différentes typologies de contenu de votre site. En matière de vocabulaire et de définition, on parle aussi de template éditorial ou encore de gabarit de contenu.

Les gabarits éditoriaux sont des modèles et ils doivent être souples et modulaires pour s'adapter à la diversité des contenus sources. Un travail d'analyse des contenus doit permettre d'identifier les différents registres éditoriaux en amont de la conception des conteneurs. Il faut détecter les attributs, les variables, et les spécificités propre à chaque classe de contenu source.
Ces travaux menés en amont pour optimiser la chaine éditoriale (inventaire des contenus, segmentation éditoriale, optimisation sémantique, organisation arborescente) se concrétisent en aval par la transposition et la ventilation des contenus à l'écran sous forme d’interface

Concevoir les conteneurs et les gabarits éditoriaux revient à valoriser les informations et les contenus dans une logique dynamique. Vous pouvez concevoir un gabarit éditorial ou modéliser plusieurs gabarits éditoriaux. Tout dépend de votre projet. Quel que soit la typologie de votre dispositif digital, la création des modèles éditoriaux doit concourir à la qualité du contenu final.

Flexibilité du gabarit éditorial

En règle générale, un gabarit éditorial est suffisamment flexible pour accueillir différents formats de contenu... Pour les projets éditoriaux plus importants, on peut toutefois comptabiliser plus d'une dizaine de conteneur différents : chaque gabarit de contenu a alors une fonction différente et assure un formatage efficace des contenus. Par exemple : un gabarit de contenu pour visualiser des photos, un gabarit éditorial pour figurer les news, un gabarit de contenu pour mettre en scène un dossier complet avec une grande richesse de médias...

La conception de conteneur éditorial consiste donc à modéliser et formater les données entrantes, en travaillant sur la valorisation du fond, dans une grille typée et normée afin d’assurer la qualité de la mise en forme en sortie. Il s’agit d’un travail assez ordinaire de design d'information et d'architecture de l'information visant à optimiser au mieux les gabarits éditoriaux en adaptant la forme au fond tout en tenant compte des caractéristiques variables des données à formater.

Sur le plan fonctionnel, au moment de la conception d'interface, le concepteur cherche à rationaliser le fonctionnement du support numérique. D'une part, pour optimiser les coûts de production. D'autre part, pour que l'expérience d'utilisation soit uniforme et homogène.
Le designer de l'information détermine les composantes fonctionnelles et éditoriales des principaux gabarits. Ici, on considère les gabarits destinés à diffuser les contenus (article, reportage, dossier...).

L'agencement des contenus et la présentation des fonctions à l'écran considèrent des variables dynamiques. Ainsi, l'intégralité des modules de contenus et autres fonctionnalités ne seront pas forcément chargées dans tous les cas de figure. Ce sont les spécifications éditoriales et fonctionnelles qui clarifient ces règles d'affichage.
Le concepteur créé donc un canevas dynamique et modulaire, le plus modulable qui soit, afin que les rédacteurs et les personnes en charge de la publication bénéficient d'un large choix au moment de publier des articles. Lorsque les contenus sont suffisamment originaux pour prétendre à une mise en forme spécifique, et que les typologies d'informations à afficher relèvent de registres trop singuliers pour être dénaturés, le designer de l'information créé un autre gabarit éditorial.

Le choix de créer un nouveau gabarit éditorial se fait en fonction du dimensionnement du projet, des coûts, de l'amplitude éditoriale mais aussi, bien sûr, de l'expérience d'utilisation...

Expérience utilisateur et conteneurs éditoriaux

La conception des gabarits éditoriaux doit se traduire en expérience positive pour les utilisateurs finaux. Une brève de 300 mots est différente d'un article de fond de 6000 mots. Si vous utilisez le même gabarit éditorial pour dynamiser ces 2 types de contenus, c'est qu'il y a un problème de conception...

En effet, sur le plan de l'utilisation, les articles riches suggèrent des modalités de navigation intégrées à la page : sommaire interne, balisage d'intertitres, chapitrage des contenus... De même, un article supposé présenter des illustrations et des photographies suppose une mise en forme spécifique.
Ces éléments de mise en page ont un rôle clé pour faciliter la scannabilité de l'écran côté récepteur. Or, la lecture d'une news n'implique absolument pas les mêmes efforts de classification qu'un article profond pour le lecteur.

Le designer de l'information gagne donc à considérer les cas d'utilisation au moment de concevoir les gabarits éditoriaux. Les temps de chargements des pages, le contexte d'utilisation, le terminal de consultation sont autant de caractéristiques à prendre en compte au moment de la conception des gabarits éditoriaux.

Modèles pour la conception éditoriale

Si vous avez besoin d'aide dans la conception éditorial de votre projet, vous pouvez vous appuyer sur les modèles de conteneurs éditoriaux à télécharger disponibles au sein de notre shop
Nous proposons également un tutoriel balayant les problématiques de conception fonctionnelle et éditoriale pour vous aider à modéliser le fonctionnement de vos modèles de pages types.

Objectifs de la conception de gabarits éditoriaux

Valoriser les contenus

La conception éditoriale des gabarits types dédiés au contenu ne poursuit qu'un seul et unique objectif : concevoir une structure de page efficace pour valoriser LE CONTENU.

Plus l'envergure des typologies de contenu est vaste, plus le concepteur devra envisager la multiplication de conteneurs éditoriaux.

Lorsque vous êtes amenés à modéliser et à concevoir une structure type de gabarit éditorial, votre objectif central est de faire en sorte que le gabarit soit flexible et adaptable aux différents formats de contenus. S'il y a beaucoup de format à agréger et que les contenus sont de nature diversifiée, vous devrez créer et concevoir plusieurs types de gabarits éditoriaux.

Dans tous les cas, au moment de concevoir un gabarit éditorial, veillez à :

  • Concevoir des conteneurs adaptés à chaque typologique de contenu.
  • Prévoir des moyens permettant de valoriser les informations prioritaires.
  • Intégrer la dimension visuelle dans la conception des conteneurs.
  • Faciliter la scannabilité des pages.
  • Prendre en compte la dimension dynamique et variable des contenus.
  • Anticiper les cas marginaux et les variables d’ajustements.
  • Proposer des solutions adaptables, modulaires et évolutives.
  • Détailler les modalités de fonctionnement et la gestion des cas marginaux.

Le travail de conception vise à valider le duo conteneur-contenu en créant pour chaque typologie de contenu, le conteneur le plus à même d’agréger efficacement toutes les informations.

Exemples de gabarits éditoriaux

icone telecharger des modeles pour analyse UX
TÉLÉCHARGER
150 livrables projets !
Kit de livrables projet : 2,60€ le modèle

conception de gabarit éditorial conception de gabarits éditoriaux
identifier les types de contenu
iafactory - Julien MUCKENSTURM
calibrer les familles éditoriales calibrer les familles éditoriales
ux Loréal développement durable
iafactory - Julien MUCKENSTURM
identification des typologies de contenu identification des typologies de contenu
ux Loréal développement durable
iafactory - Julien MUCKENSTURM
calibrage des fonctions calibrage des fonctions
ux Loréal développement durable
iafactory - Julien MUCKENSTURM
gabarit de contenu gabarit des contenus
ux Sécurité routière
iafactory - Julien MUCKENSTURM
conception de gabarit de contenu conception de gabarits de contenus
ux Lucien Barrière
iafactory - Julien MUCKENSTURM
conception des gabarits éditoriaux conception de gabarits éditoriaux
ux Natura
iafactory - Julien MUCKENSTURM
concevoir les gabarits éditoriaux conception de gabarit éditorial
ux Maire Claire maison
iafactory - Julien MUCKENSTURM
fiche produit voiture fiche produit voiture
référence ux Citroen DS
iafactory - Julien MUCKENSTURM
fiche produit professionnel fiche produit professionnel
référence ux Valrhona
iafactory - Julien MUCKENSTURM
fiche produit hôtel fiche produit hôtel
référence ux Ibis
iafactory - Julien MUCKENSTURM
conception d'article éditorial conception d'article éditorial
ux The arpenters
iafactory - Julien MUCKENSTURM
gabarit éditorial gabarit éditorial
ux Valeo
iafactory - Julien MUCKENSTURM

Méthode pour concevoir les gabarits éditoriaux

icone formation ux design en ligne
MAÎTRISER
les méthodes UX design
Formation UX en ligne : 18,00€ l'heure

Maquettage fonctionnel et éditorial

Concevoir les gabarits éditoriaux, c'est opérer un travail de maquettage fonctionnel. Il faut penser de façon dynamique : le gabarit éditorial doit pouvoir répondre à de nombreux cas dans lesquels le volume et la richesse des contenus peuvent différer. Et cela peut avoir un impact sur l'ergonomie (page avec 500 mots vs. page avec 10000 mots...). Vous devez maquetter de façon à ce que le gabarit de contenu soit puissant et flexible : les modules éditoriaux et fonctionnels doivent pouvoir être masqués en fonction de la densité du contenu source et de la spécificité de chaque article.
Regardez un peu plus haut, les exemples de gabarits éditoriaux et observez comme les modules de fiche produit et les modules de fiches éditoriales sont conçus de manière à pouvoir être repositionnés dans l'interface voire même supprimés.

La conception fonctionnelle et éditoriale prévoit en effet que les modules puissent être intergeangeables afin d'épouser les spécificités de chaque cas...

La création des conteneurs, réceptacles des contenus, est une étape postérieure à l’inventaire, l’identification et la classification des typologies de contenu : un travail d'analyse et d’approfondissement des types de contenus permet, en aval, d’élaborer sereinement les conteneurs les plus modulaires pour valoriser tous vos flux d’information. La création de conteneur s’applique aux supports papiers (plaquette, catalogue, modèle documentaire) comme aux supports interactifs (article, fiche produit…).

Ces tâches s’apparentent au maquettage fonctionnel et au wireframing. Leurs spécificités : elles portent exclusivement sur les aspects génériques des contenus à agréger (type, taille, volume, longueur, etc.).

Comme peuvent l'illustrer les exemples de gabarits éditoriaux, chaque conteneur est complété par des spécifications éditoriales, fonctionnelles et techniques : ce travail détaille toutes les particularités de fonctionnement ainsi que les cas spécifiques à prendre en compte. La précision des spécifications et la prise en compte des différents cas de figure garantissent la qualité de la mise en page et la valorisation des informations clés.

Les différents types de gabarit éditorial

Au moment de concevoir les modèles types de page éditoriale, le designer de l'information va considérer les patrons d'écrans types les plus fréquents. Cela concerne principalement les dispositifs digitaux à dominante éditoriale tels que les portails éditoriaux, les sites de presse en ligne, les supports de médias. En effet, pour des sites ecommerce ou transactionnels à forte dominante fonctionnelle, on se contente souvent de travailler 1 ou 2 gabarits de contenu...

Voici les différents types de gabarit éditorial que l'on peut rencontrer sur le plan de l'interface :

  • Brève, news, communiqué
    Pour une actualité. Contenu chaud.
    Structuré autour d'un titre, un chapeau, un corps de texte court, une photo d'illustration. Moins de 500 mots.
  • Article enrichi
    Pour un sujet détaillé.
    Ordonnancé autour d'un titre, une accroche, un chapeau, un corps de texte, des thèmes et des intertitres, de nombreuses illustrations. Entre 500 et 2000 mots. Possibilité de créer quelques modules fonctionnels et éditoriaux enrichis.
  • Article profond
    Pour un article complet. Analyse. Contenu froid (pérenne).
    Organisé autour d'un sommaire interne et d'une arborescence in-page. Chapitrage des contenus. Titre, accroche, chapeau, corps de texte, thèmes et intertitres, illustrations, citations. Modules fonctionnels et éditoriaux complémentaires.
  • Dossier
    Le dossier est un type de contenu éditorial donnant accès à d'autres articles, une sorte de sommaire. Utilisé comme hub agrégeant les articles éditoriaux d'un même sujet.
  • Reportage
    Article qui valorise le terrain et l'information recueillie dans un contexte et une situation donnée. Le reportage est riche sur le plan des illustrations et des médias. Il s'appuie également sur les témoignages et les cartographies.
  • Interview, témoignage
    Agencé autour du format de question-réponse. Les questions figurent en gras. Les réponses en maigre.
  • Point de vue, essai.
    Article d'analyse. Peu d'enrichissement sur le plan des médias. Très longue séquence texte balisée sur les éléments fondamentaux de l'écriture (titre, intertitre, texte). Séquence académique : introduction, développement, antithèse, synthèse.
  • Narration, storytelling.
    Typologie d'article éditorial orienté sur une trame narrative. Utilisation des codes de la narratologie (introduction, péripétie, problème, résolution du problème, ouverture)...
  • Fiche produit
    La fiche produit de site ecommerce est une combinaison de modules fonctionnels enrichis et de contenus dynamiques issus de la base de données. C'est le cas le plus composite sur le plan de la structure d'un gabarit éditorial.
  • Fiche recette
    La fiche recette est didactique : elle alterne des instructions et des visuels. Séquence courte.
  • Fiche de cours
    Repose sur un texte plus ou moins long, des médias, des exercices et des quizz (modules fonctionnels enrichis).
  • Diaporama
    Page dédiée à la visualisation de photos et autres illustrations. Indiquer le nombre de visuels. Légender chaque photo.
  • Vidéo
    Page éditoriale structurée autour d'une vidéo : l'article gagne à retranscrire un script de la vidéo (enjeux de référencement). Sur le plan éditorial, il faut aussi envisager le sous-titrage.
  • Infographie
    Article focalisé sur une infographie dans la tendance de la datavisualisation : l'article a vocation à expliquer l'infographie.

La liste n'est pas exhaustive. Ces typologies de conteneurs peuvent être plus ou moins évoluées. Un seul et même conteneur peut avoir la vocation de fusionner deux typologies d'articles. Comme vous le voyez, un conteneur de brève sera peu adapté pour mettre en scène un article profond ou un article enrichi...

Le choix des conteneurs et leur finesse va dépendre des objectifs établis dans la phase d'expression des besoins éventuellement complétée par le recueil des attentes côté usager. Chaque dispositif digital étant différent, ce sont les designers de l'information et les architectes de l'information qui réalisent les choix en matière de conteneur.
Une seule règle : que la forme soit adaptée au fond. Que le conteneur soit au service du contenu.

Mise en page et article éditorial

Voici les composantes éditoriales (constituants fondamentaux du contenu) qui balisent et structurent tout type de conteneur éditorial. La plupart sont des traceurs évidents et universels de l'écriture. Cela ne veut pas dire qu'il ne faut pas les citer, car ils composent tout ou partie du travail de design de l'information.

  • Titre de la page. A optimiser pour le référencement.
  • Accroche. A utiliser pour l'engagement.
  • Chapeau. Pour résumer le contenu de l'article.
  • Sommaire. Pour structurer l'article et naviguer dans la page.
  • Intertitre. Pour organiser les informations. Scanner la page.
  • Bloc de contenu. Pour agréger un ensemble d'idées. Regrouper les paragraphes.
  • Paragraphe. Pour développer une idée.
  • Phrases et mots. L'essence du couple signifiant-signifié.
  • Liste. Pour les énumérations.
  • Mise en relief. Pour appuyer une idée (mise en gras).
  • Citation et propos rapportés. Pour raccrocher un propos à une référence culturelle (mise en italique).
  • Source. Pour déterminer le corpus bibliographique, webographique.
  • Auteur. Pour identifier le rédacteur.
  • En option : tag ou catégorie pour qualifier le contenu et sa place dans le système d'architecture de l'information.

Voici les modules éditoriaux et fonctionnels enrichis qui s'ajoutent aux fondamentaux :

  • Liens hypertexte. A limiter (cf. problématique du jus de lien).
  • Fil d'Ariane. Repère de localisation.
  • Fonctionnalités de partage. Diffusion dans les réseaux sociaux.
  • Modules de commentaires et de réaction. Dimension participative.
  • Médias visuels. Fonction illustrative et démonstrative.
  • Diaporamas visuels. Série de photo ou d'exemples.
  • Média vidéo.
  • Média Sonore. Podcast.
  • Module de jeu.
  • Infographie. Interactive ou juste illustrative.
  • Fonctions transactionnelles. Calculateur, simulateur...
  • Fonctions ecommerce. Achat, taille, couleur...
  • Module éditorial dédié. Valorisation d'un service, d'un produit. Séquence texte image.
  • Call to action. Ergonomie incitative, bouton d'action.
  • Module éditorial séquencé. Foire aux questions in page.
  • Fonction de Tchat. Interaction in page. Rassurance.
  • Fonction de Rassurance. Données protégées. Paiement sécurisé...
  • Tableaux de données. Comparatif de produit ou de service.
  • Sticker et pictogramme. Attribut de produit ou de service.

Le choix d'un type de gabarit éditorial se fait d'abord sur la base des différentes typologies de conteneurs. Ensuite, on considère la combinaison des modules éditoriaux et des modules fonctionnels. Plus les combinaisons sont nombreuses, plus le gabarit éditorial sera sophistiqué : on parle de gabarits éditoriaux construits sur des tableaux.

Design éditorial séquencé par tableaux et scannabilité

Le tableau, pour un gabarit éditorial, s'apparente à la logique du niveau dans un jeu vidéo. La notion suggère un avancement dans la séquence à l'écran. Les pages longues exigent une structure formelle adaptée à la lecture à l'écran...

La construction d'un gabarit éditorial autour de tableaux est une bonne pratique de structuration de l'information. Les tableaux reposent sur des formats bien établis qui vont faciliter le travail de classification de l'utilisateur. Les usages démontrent que les pages font l'objet d'un scan visuel très rapide, par saccade. Plus les formats sont distinctifs et identifiables, plus les propriétés de scannabilité de la page augmentent.

Les formats et les contrastes sont la clé des tableaux : la structuration verticale de l'information gagne à s'agencer autour de modules distinctifs homogènes mais contrastés sur le plan du design. Pour un site ecommerce, la fiche produit pourra s'organiser autour d'une séquence par tableaux :

  • Tableau visuel du produit.
  • Tableau descriptif de l'article.
  • Tableau de spécifications (données tabulaires).
  • Tableau de comparaisons.
  • Tableau de produits complémentaires.
  • Tableau de contenus de support.
  • Tableau d'avis utilisateurs.

De même, la structure d'un article profond peut s'appuyer sur une logique de tableau :

  • Visuel d'illustration.
  • Résumé et chapeau.
  • Diaporama.
  • Développement d'une idée (thème, chapitre).
  • Accident éditorial visuel : vidéo, podcast, visuel ou diaporama.
  • Développement d'une idée (thème, chapitre).
  • Publicité.
  • Développement d'une idée (thème, chapitre).
  • Développement d'une idée (thème, chapitre).
  • Accident éditorial visuel : vidéo, podcast, visuel ou diaporama.
  • Commentaires.

Gabarit éditorial, ergonomie, lecture à l'écran

La construction d'un gabarit éditorial implique de fixer des règles sur le plan des modules : nombre de caractères pour le titre, le chapeau... Ces éléments sont précisés dans les commentaires des wireframes et seront détaillés dans les spécifications éditoriales qui ont une vocation à la fois technique et ergonomique.

Sur le plan de l'ergonomie, le gabarit éditorial doit respecter un certain nombre de conventions et de standards :

  • Localisation
    Faciliter la localisation dans l'arborescence du dispositif.
  • Guidage
    Balisage de l'article, scannabilité, contraste des appels à l'action. Design suggérant le défilement de l'écran.
  • Lisibilité
    Niveau de titre, lisibilité du texte. 2 à 3 typographies maximum utilisées. Fond blanc ou grisé et texte gris noir. Contrastes entre titre et texte.
  • Charge de travail
    Découpage de l'écran et structure autour de tableaux. Création de conteneurs éditoriaux spécifiques balisés pour les articles longs.
  • Adaptabilité de l'interface
    Capacité de l'interface à délivrer l'information de manière équivalente selon le contexte d'utilisation : responsive design, version spécifique.
  • Flexibilité de l'interface
    A considérer ici comme la capacité du gabarit à emmagasiner des contenus de nature différente.
  • Homogénéité et distinction des items
    Utilisation de formats pour distinguer les modules et les blocs d'informations.
  • Signification de l'iconographie
    Si le balisage de l'information s'appuie sur une iconographie, celle-ci doit être signifiante et explicite.

Responsive design et conteneurs éditoriaux

On ne peut pas évoquer la conception éditoriale sans dire quelques mots sur le design adaptatif. Le design de l'information doit proposer une séquence visuelle de lecture adaptée aux écrans des principaux terminaux de consultation (ordinateur desktop, ordinateur portable, tablette, smartphone).

Cela paraît simple et évident dans la théorie, mais l'est beaucoup moins sur le plan opérationnel dans la pratique. En effet, certains contenus sont particulièrement peu adaptés au redimensionnement : c'est le cas des tableaux, des infographies, des formulaires longs et enrichis... Le design de l'information du conteneur éditorial doit prendre en compte l'usage sur terminal mobile, dans le cadre de la conception adaptative.

Dans la construction du gabarit éditorial sur la base de tableaux, le concepteur veillera à spécifier les modules lourds sur le plan du poids pouvant faire l'objet d'une suppression. La construction modulaire d'un article éditorial s'appuie également sur la technologie des chargements de contenus en fonction de la typologie du terminal. L'expérience doit être homogène et équivalente, mais les problématiques de poids peuvent imposer un découpage de l'information encore plus précis sur support mobile : par exemple, pour les articles très longs supérieurs à 10 000 mots, un site comme Wikipedia va factoriser la version mobile de la page autour des intertitres que l'utilisateur devra déployer à la volée pour visualiser le détail des contenus, là où la version bureau déploie tous les contenus in-page sans système d'ouverture fermeture...

Conception macro (zoning) et conception détaillée (wireframing)

Le maquettage des écrans dédiés à ventilés des contenus s'établit en deux temps : conception macro puis conception micro.

La conception macro consiste à affecter des zones fonctionnelles et éditoriales à l'écran : zoning de l'interface. Le zoning de l'interface est tout à fait pertinent pour déterminer l'encombrement de l'interface dans le cadre des réajustements du design de l'information en environnement responsive. De même, un zoning fonctionnel et éditorial macro est utile pour déterminer les tableaux du gabarit éditorial.

Une fois que les tableaux ont été positionnés de façon macro sous forme de boîte générique, on procèdera au détail et à l'affinage de chaque élément fonctionnel et éditorial.
C'est la conception fonctionnelle détaillée - wireframing. Le fonctionnement et la nature de chaque module sont précisés. C'est comme augmenter la résolution d'une photo. L'utilisation de contenu fictif est à proscrire. Mieux vaut scénariser les wireframes du gabarit éditorial sur la base d'un cas d'utilisation réel. L'usage du latin est à éviter : dans le monde francophone, bien que nous soyons tous des latins, la langue d'usage est le français :). Les encombrements et les dynamiques des mots sont différents. Les maquettes latines ne sont pas recommandées. Il faut concevoir au plus proche de la réalité, y compris pour le design éditorial.

Conception des gabarits éditoriaux et SEO

La conception de tableaux éditoriaux et fonctionnels va de pair avec la mise en place d'un balisage dans les règles des pratiques d'optimisation SEO - search engine optimization. Il s'agira de créer des modules permettant de figurer les expressions-clés en haut de la page et envisager des moyens pour scénariser l'expression-clé à travers les différents modules (répétition de l'expression-clé dans chaque tableau).

En effet, la maquette fonctionnelle gagne à établir la structure de l'écran autour des principaux éléments de structuration SEO de la page : titre H1, répétition de la description dans le chapeau, balisage par niveau de titre (H2, H3, H4, H5, H6), mise en relief (strong, em), illustration (alt et légende des images), méta datas pour les contenus très spécifiques (actualités, vidéos).
Note : en conception, il est conseillé de prévoir des champs complémentaires dans les zones de commentaires au sein des wireframes notamment pour le SEO (balise Title, balisedescription, URL de la page). En effet, les wireframes peuvent être utilisés, dans certains cas, pour l'écriture et la production éditoriale.

Pour la dimension éditoriale, la sémantisation est un autre enjeu de la conception. La diversification du champ sémantique et du champ lexical de la page est un attribut important sur le plan SEO. Bien que cette pratique s'appuie principalement sur l'écriture, elle peut être anticipée dans la maquette fonctionnelle en établissant des zones et des modules où il s'agira d'appuyer sur les expressions clés et leur diversification.

Le design de l'information et l'architecture de l'information gagnent à considérer les enjeux SEO au moment de la conception fonctionnelle et éditoriale. Cela passe par une construction de la séquence à l'écran sur la base des principales balises, en veillant à respecter les fondamentaux du référencement : éviter de diluer le jus de lien dans le maillage interne prévu par la maquette fonctionnelle, insérer des accès aux autres niveaux de l'arborescence (remonter d'un niveau, descendre d'un niveau, naviguer latéralement).

Blogging, gabarit éditorial de blog

Nous concluons ces considérations autour de la conception fonctionnelle et éditoriale des gabarits de contenus en évoquant la problématique des billets de blog. C'est la plateforme Wordpress qui a remporté le plus large succès sur la publication typée Blog. Il n'est pas ici question de parler des problèmes d'architecture de l'information que posent la structure arborescente anté-chronologique, ce classement de l'information propre aux blogs tels que Wordpress (un problème d'architecture de l'information disons macro).

Or, sur le plan de la structure éditoriale, de la typologie des informations, de la construction tabulaire, voire des enjeux SEO, les modèles de page de Wordpress sont limités. Ce constat vaut également pour l'utilisation de thèmes. Les modalités d'enrichissement du texte sont restreintes, et les limites de mise en page sont énormes pour les billets de blog. Ces plateformes s'appuient certes sur les mêmes fondamentaux de structure HTML & CSS que les conceptions personnalisées et sur-mesure, néanmoins, la séquence éditoriale des billets de blog est très loin des standards sur les plans de l'ergonomie, de l'architecture de l'information, de la lisibilité, du design de l'interaction...

Si vous utilisez un thème Wordpress, vous n'avez probablement pas beaucoup de choix pour diversifier les conteneurs éditoriaux. Cela n'est pas forcément un problème critique sur le plan de la publication. Mais le nivellement de l'information sur la base de standard basique ne contribue pas améliorer notablement l'expérience de lecture et de consultation...
Avis certes discutable.

Démarche pour concevoir un gabarit de contenu

Récapitulatif de la démarche de conception de gabarits éditoriaux :

  • Etude préalable si besoin : inventaire, segmentation, flux d'informations, sources de contenus.
  • Clarification des registres et des typologies de contenus.
  • Affinage des informations sur la publication : taille des articles, diversité, fréquence de publication.
  • Définition des conteneurs à concevoir.
  • Inventaire fonctionnel et périmètre des fonctions éditoriales.
  • Zoning macro de l'interface. Définition des zones.
  • Projection responsive. Design adaptatif.
  • Conception fonctionnelle détaillée : wireframing.
  • Test et ajustements de chaque conteneur en condition normale et marginale (volume…) : test de charge informationnelle, simulation de deux contenus types...
  • Spécifications éditoriales et fonctionnelles.

Travaux complémentaires à la conception des gabarits de contenus

Ces travaux qui permettent de modéliser les conteneurs en fonction des contenus vont de pair avec le calibrage des contenus à la source : on calibre les contenus, et ensuite on conçoit les gabarits éditoriaux qui vont accueillir ces contenus...

On parle bien de conception et cette scénarisation éditoriale relève du wireframing ux design.
Une fois les gabarits conçus, on s'appuiera sur les spécifications générales pour décrire le comportement dynamique des écrans :

Par extension, le travail de design éditorial et fonctionnel peut déboucher sur la rédaction d'une charte éditoriale fixant les règles en matière d'écriture des contenus pour le web.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressource pour concevoir un gabarit éditorial

APPROFONDIR
les gabarits

Livre : Mise en page(s), manuel
Mise en page(s), manuel

Aller plus loin pour concevoir les gabarits éditoriaux

Formation vidéo à visionner :

Livrables à télécharger :

Wireframes à télécharger :

Etudes de cas à lire :

Travaux à visualiser :

Supports de cours (débutant) à étudier :

Compétences métier pour la conception des gabarits éditoriaux :

Fiche métier :

Livres à bouquiner :

Autres ressources sur le web :

  • Signalez nous des ressources sympa autour de la conception des gabarits éditoriaux en utilisant les commentaires !

newsletter iafactory

saisissez votre email pour continuer
à progresser en conception et stratégie

Plus de techniques éditoriales
CONCEPTION D'INTERFACE
Clarification de la structure du site, des modèles de gabarits et des fonctions attribuées aux zones.
zoning
CONCEPTION D'INTERFACE
Esquisse d'interface utilisateur, projection des contenus et fonctionnalités à l'écran.
wireframing
OPTIMISATION DU CONTENU
Analyse des sources de contenus et calibrage des formats en vue de la conception de gabarit editorial.
calibrage des contenus