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.
Il vous faudra deux fichiers InDesign différents :
Choisissez le mode le plus adapté pour votre cible.
Créez le fichier pour votre publication. La taille de la page doit être de 1024x1450px en 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
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”.
Créez le fichier pour votre publication. Nous recommandons une taille de document de 2048x1450px au format 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
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
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.
Déclinaison digitale
Moins de texte, images plus grandes. Le mode double page pour mobile est respecté.
Ici, nous avons déporté une partie du texte dans des popups (second niveau de lecture).
Document print
Densité forte de texte.
Déclinaison digitale
Moins de texte, images plus grandes. Le mode double page pour mobile est respecté.
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.
Optimiser les images avant insertion dans votre document : Utiliser au maximum des images de 2048 px de largeur ou de 2048 px de hauteur.
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.
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.
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.
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 :
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.
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.
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.
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.
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.