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.
Si vous n’avez pas encore téléchargé la nouvelle version du plugin, suivez les étapes ici
Il vous faudra deux fichiers InDesign différents :
Choisissez le mode le plus adapté pour votre cible.
Créez le fichier pour votre publication. Nous recommandons une taille de document de 2048x1450 pixels en format paysage. Sur ordinateur, tablette et mobile, les pages seront affichées une par une en plein écran. L'expérience mobile est meilleure en mode paysage. NB : toutes les pages doivent être dans le même format.
Exemple: Renault Press Kit
Créez le fichier pour votre publication. La taille de la page doit être de 1024x1450 pixels en mode double page. Sur un ordinateur, les pages doubles seront affichées côte à côte en mode paysage. Sur les appareils mobiles et tablettes en mode portrait, les pages seront affichées l'une après l'autre. Ce mode est préféré pour les publications adaptées aux mobiles. NB : toutes les pages doivent être dans le même format.
Exemple: magazine Anpère
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”.
Choisissez cette option si vous souhaitez naviguer vers la page suivante/précédente en faisant glisser vers la gauche/droite ou en cliquant sur les flèches de navigation situées à droite/gauche de la page. Sur les appareils mobiles, ce mode de navigation passe automatiquement en mode vertical.
Choisissez cette option si vous souhaitez naviguer vers la page suivante/précédente en faisant glisser vers le haut/bas ou en cliquant sur les flèches de navigation situées en bas de la page.
Dans les modes de navigation horizontale et verticale, les pages se transitionnent dans leur ensemble et il n'est pas possible de faire défiler entre les pages.
Avec ce mode, toutes les pages de la publication sont empilées de manière transparente dans une seule colonne de contenu défilable. En d'autres termes, les pages deviennent des sections d'une seule page, semblable à un site web. Lorsque le mode "Double page" est sélectionné, les deux pages en vis-à-vis de la double page seront affichées sur les écrans larges, tandis qu'une seule page sera affichée sur les appareils mobiles. Dans ce cas, nous recommandons que la taille de chaque page soit de 1024x1152 pixels. Ainsi, lorsque les pages sont affichées en double page, le rapport d'aspect sera de 16:9 et correspondra exactement à la taille de l'écran des moniteurs Full HD standard en mode plein écran. Vous pouvez voir cela illustré dans les figures ci-dessous :
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 à G 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 :
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.
Lorsque le contenu est trop volumineux pour tenir dans le cadre, une solution possible consiste à créer une zone déroulante pour celui-ci. Consultez notre tutoriel pour créer des zones déroulantes et des boutons dans les zones déroulantes.
Les Sliders sont un excellent moyen d'afficher plusieurs images et vidéos dans le même cadre. Consultez notre tutoriel pour plus d'informations.
Avec notre solution, vous pouvez activer l’option wishlist ou configurateur. Cette fonctionnalité vous permet, comme une fiche détaillée sur un site web, de déporter les données techniques ou les informations produit dans cette fiche. Vous pourrez ainsi ajouter des produits à votre liste de souhaits et la partager.
Vous trouverez ici les paramètres qui s'appliquent à l'ensemble de la page. Vous pouvez définir un arrière-plan pour la page, qui peut être une image, une vidéo, voire un curseur. Vous pouvez également rendre la page transparente, ce qui, combiné à un arrière-plan fascinant, peut rendre votre page encore plus impactante. Vous pouvez également rendre la page modifiable, ce qui vous permet de la modifier depuis notre zone d'administration ou depuis l'application Uprez.
Vous pouvez également enrichir vos popups avec du contenu multimédia !
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 vers des sites externes.
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 : définissez les paramètres que vous souhaitez activer. Dates de diffusion, code Google analytics, langue de l’interface etc.
B - Design : personnalisez l’interface avec votre logo, choisissez les icônes, définissez la couleur de barre, du fond etc.
C - Enrichissement : cet onglet ouvre la publication dans l'éditeur Uprez. Vous pouvez y ajouter, supprimer et réorganiser les pages. Si vous avez activé la case à cocher "Modifiable" pour certaines pages dans le Plugin (Enrichissements > Page), vous pourrez modifier ces pages dans l'éditeur - changer leur arrière-plan, modifier les textes, images, vidéos, curseurs, thèmes de couleurs, etc.
D - Intégration : récupérez l’ url du projet, ou téléchargez votre master.
E - Publier : mettez en ligne votre publication avec une url définitive et accessible (payant, 50 crédits).
NB : la fonction “Partager” (F) vous permet de montrer vos projets gratuitement à vos clients ou à vos collaborateurs pour les faire valider.