Votre Publication interactive en 6 étapes !

Retrouvez sur cette page notre Tutoriel détaillé qui vous expliquera en 5 minutes comment réaliser votre publication digitale interactive.

Ce document est adressé à tous ceux qui souhaitent créer une brochure digitale, un dossier de presse interactif, un mini-site, etc. Suivez bien ces 6 étapes pour réussir votre publication interactive à coup sûr.

Étape 1 : créez vos fichiers InDesign.

Il vous faudra deux fichiers InDesign différents :

  • un fichier pour votre publication,
  • un autre pour regrouper toutes vos popups.

Étape 2 : définissez le mode de votre publication.

Choisissez le mode le plus adapté pour votre cible.

Plugin - Configuration du projet
Plugin - Configuration du projet

A - Mode double page ( capture d’écran du plugin - A )

Créez le fichier pour votre publication au format A5 et sélectionnez le mode double page. Sur ordinateur, les doubles pages s’afficheront côte à côte en mode paysage. Sur mobile et tablette, les pages défileront l’une après l’autre en mode portrait.
Ce mode est à privilégier pour les publications « mobile friendly ».
NB : toutes les pages doivent être au format A5.
Exemple : magazine Anpère

Ordinateur
Ordinateur
Tablette
Tablette
Mobile
Mobile
Pour le mode “Double page”, vous avez maintenant la possibilité de choisir une Couverture de simple page, Couverture de double page ou de Réorganiser les pages manuellement.

Avec cette nouvelle option vous allez pouvoir créer des publications responsives plus impactantes.

Vous pouvez alternez les planches en “Doubles pages” avec des planches en “Simple page”.

B - Mode simple page (capture d’écran du plugin - B )

Créez le fichier pour votre publication au format A4 paysage. Sur ordinateur, tablette et mobile, les pages s’afficheront une à une en plein écran.
L’expérience mobile est meilleure en mode paysage.
NB : toutes les pages doivent être au format A4.
Exemple  : dossier de presse Renault

Ordinateur
Ordinateur
Tablette
Tablette
Mobile
Mobile

C - Mode navigation croisée ( capture d’écran du plugin - C )

Créez votre document en définissant une largeur commune à toutes vos pages comme le feriez pour un site (nous vous conseillons 1366 px pour la largeur). Définissez ensuite la hauteur de chaque page (chaque page peut avoir sa propre hauteur).
Ce mode est idéal pour reproduire l’ergonomie d’un “mini-site”.
Exemple : mini-site WP

Ordinateur
Ordinateur
Tablette
Tablette
Mobile
Mobile

Étape 3 : optimisez la lisibilité de votre publication.

1 - Densité du texte et de l’information

Que vous partiez d’un document existant ou que vous décidiez de créer votre publication “from scratch”, évitez de mettre trop de contenu sur le premier niveau de lecture.
Quand il y a trop d’informations sur une page, pensez à déporter une partie de votre contenu dans une popup pour optimiser l’experience de lecture.

Voici deux exemples vous montrer comment dédensifier le premier niveau de lecture.

Ici, nous avons ajouté des pages.

Document print

Densité forte de texte.

Page A4
Une page au format A4

Déclinaison digitale

Moins de texte, images plus grandes. Le mode double page pour mobile est respecté.

Pages A5
Deux pages au format A5

Ici, nous avons déporté une partie du texte dans des popups (second niveau de lecture).

Document print

Densité forte de texte.

Page A4
Une page au format A4

Déclinaison digitale

Moins de texte, images plus grandes. Le mode double page pour mobile est respecté.

Pages A5

2 - Typographie

Vous pouvez conserver vos typographies. Vous n’êtes plus limité aux typographies web.
Vérifiez toujours si votre texte est lisible sur les devices que vous ciblez. Pour tester votre publication sur ordinateur, cliquez sur « Aperçu » depuis notre plugin.
Utilisez la fonction “Partager” pour la tester sur mobile et tablette. NB : la règle la plus simple est de multiplier par deux toutes les tailles de vos polices.
Exemple : si la taille de votre police est de 9 sur votre version print, elle sera de 18 sur sa déclinaison digitale.

Les textes doivent être regroupés sur un même calque, celui-ci placé en haut de la pile.

3 - Optimisation des images

Optimiser les images avant insertion dans votre document : Utiliser au maximum des images de 2048 px de largeur ou de 2048 px de hauteur.


Étape 4 : enrichissez votre publication.

Vous pouvez maintenant commencer à enrichir le premier niveau de lecture de votre publication !

Premièrement sélectionnez un bouton (réalisé avec le panneau “Boutons et formulaires” d’InDesign) ou créez un bloc rectangulaire pour créer les enrichissements A à E ci-dessous.

Enrichissements
Plugin - Enrichissements

A - Animations (capture d’écran du plugin - A)

  • Ressources pré-animées.
    Vous touverez des boutons et des graphiques animés, des diaporamas ainsi que des animations de titres à télécharger sur Webpublication academie. Un simple copier-coller de la ressource dans InDesign et quelques modifications (couleur, texte) suffiront pour adapter l’animation à votre publication.
  • Animations InDesign.
    Utilisez les palettes d’InDesign (Fenêtre>Espace de travail>Publication numérique) pour réaliser simplement vos propres animations.
  • Animations Animate ou HTML.
    Compressez vos animations Animate ou HTML au format .zip avant de les importer. Créez ensuite un bloc rectangulaire sélectionnez « Enrichissement >Animation » à l’aide du plugin puis uploadez votre animation.

B - Vidéo (capture d’écran du plugin - B)

Pour insérer une vidéo dans votre document, créez un bloc rectangulaire dans lequel votre vidéo sera chargée. Cliquez maintenant sur « vidéo » et uploadez-la. Notre solution convertira votre vidéo automatiquement au format Mp4. Vous pouvez également choisir d’insérer un lien Youtube.

C - Aller à la page (capture d’écran du plugin - C)

Pour créer un lien direct vers une page de la publication, cliquez sur “Aller à la page” et entrez le numéro de la page où vous souhaitez rediriger votre lecteur.

D - Panneau (capture d’écran du plugin - D)

Sélectionnez un bouton (réalisé avec le panneau « Boutons et formes » d’InDesign) ou créez un bloc rectangulaire pour lui appliquer une des actions suivantes :

  • partage : ouvre le panneau de partage : mail, réseaux sociaux etc.
  • Vignette : affiche les vignettes de la publication.
  • Favoris : affiche la page Favoris.
  • Recherche : ouvre la page de recherche de la publication.
  • Sommaire : ouvre le sommaire de votre publication.

E - Fond d’écran (capture d’écran du plugin - E)

Définissez la couleur de fond pour la page active de votre publication.

Vous pouvez aussi enrichir vos popups avec du contenu Rich media !
Vos popups peuvent contenir des animations InDesign, des vidéos, des images, des pdf, ainsi que des liens vers des pages de votre publication ou des sites externes.

Si vous insérez une images derrière un masque plus grand que cette dernière, l’export génèrera une image PNG très lourde. En effet la zone vide sera exportée comme de la transparence.


Étape 5 : ajoutez vos popups.

Créez un nouveau fichier InDesign qui va regrouper toutes vos popups. Vos popups doivent avoir la même largeur (nous vous conseillons 1366 px de largeur pour une publication compatible ordinateurs et tablettes, et 600 px de largeur pour une compatibilité ordinateurs, tablettes et mobiles) mais leurs hauteurs peuvent varier. Exemple : mespopups.indd.

Plugin - Configuration du projet

Dans notre plugin, allez dans l’onglet “Projet”, et appliquez le mode “Popup” (Capture d’écan plugin - A). Votre fichier InDesign popup est maintenant créé.
Enregistrez chaque page active à l’aide du plugin, cette action créera une popup par page active sur notre solution.
La gestion des popups se fait à partir d’un fichier InDesign unique pour des raisons pratiques.

Plugin - Enrichissements
Plugin - Configuration du projet

Pour que le lien entre votre publication et votre popup fonctionne, créez un bouton ou un “Bloc rectangulaire” dans le fichier de votre Publication. Maintenez-le sélectionné et cliquez sur “Ouvrir une popup” (Capture d’écran du plugin - B).

Votre popup peut contenir des animations InDesign, des vidéos, des images, des pdf ainsi que des liens vers des pages de votre publication ou des sites externes.


Étape 6 : personnalisez l’interface et mettez en ligne votre publication.

Vous avez presque terminé, il ne vous reste plus qu’à finaliser !
Dans le plugin, cliquez sur la rubrique « Finalisation du projet > Gérer les paramètres » pour finaliser votre publication.
Vous êtes redirigé dans notre solution. Si vous n’étiez pas déjà connecté, composez votre indentifiant et saisissez le mot de passe de votre compte (les mêmes que pour le plugin).

Finalisez maintenant votre publication :

A - Paramètres (capture d’écran de la solution - A) : définissez les paramètres que vous souhaitez activer. Dates de diffusion, code Google analytics, langue de l’interface etc.

B - Design (capture d’écran de la solution - B) : personnalisez l’interface avec votre logo, choisissez les icônes, définissez la couleur de barre, du fond etc.

C - Intégration (capture d’écran de la solution - C) : récupérez l’ url du projet, ou téléchargez votre master.

D - Publier (capture d’écran de la solution - D) : mettez en ligne votre publication avec une url définitive et accessible (payant, 50 crédits).

NB : la fonction “Partager” (capture d’écran de la solution - E) vous permet de montrer vos projets gratuitement à vos clients ou à vos collaborateurs pour les faire valider.

Rentrons en contact

+33 1 84 17 85 99