Qui savait qu'Adobe CC pouvait filaire ?

Le wireframing est une étape majeure dans la conception de toute interface utilisateur, qu'il s'agisse d'un site Web, d'une application ou d'un produit logiciel. Sans distraction sous forme de visuels, de couleurs, de typographie, de styles et d'effets, vous pouvez vous concentrer davantage sur la définition de la hiérarchie du contenu et de l'expérience utilisateur.

Faire des wireframes et des prototypes basse fidélité vous aidera à tester et à itérer plus tôt et plus souvent dans le processus. Les wireframes basse fidélité permettent aux concepteurs de travailler plus rapidement et de développer des produits que les utilisateurs vont adorer.

Il existe de nombreux outils de wireframing différents parmi lesquels choisir dans la nature. Celui que vous choisirez dépendra de vos préférences personnelles et de votre style de flux de travail.

Comme beaucoup de designers qui sont passés au design numérique depuis le monde de l'impression, je suis un expert des applications Adobe telles qu'Illustrator, InDesign et Photoshop. Je peux les utiliser efficacement et intuitivement de n'importe où et à tout moment (même si quelqu'un me réveille au milieu de la nuit et refuse de me donner une tasse de café).

Sans surprise, ces applications polyvalentes sont également devenues les outils que j'utilise pour faire de la conception visuelle de sites Web et d'applications. Donc, pour que mon flux de travail soit le plus efficace, je les utilise également pour le wireframing.

À chaque projet, je commence généralement à concevoir en faisant des croquis très approximatifs sur papier, ou sur l'écran de mon iPad ou de mon smartphone si je ne suis pas près de mon bureau. Ces croquis sont là pour orienter ma réflexion sur le concept choisi ; le client n'en verra probablement jamais aucun. Quand je suis convaincu que mon idée fonctionne, je passe au wireframing. J'utilise généralement Adobe Illustrator et InDesign combinés : Illustrator pour créer la plupart des éléments du kit d'interface utilisateur et InDesign pour le wireframing lui-même.

J'expliquerai un processus étape par étape sur la façon d'intégrer également ces outils dans votre flux de travail de wireframing plus tard dans l'article, mais avant d'entrer dans les détails, laissez-moi vous montrer les forces et les faiblesses de l'utilisation d'InDesign en tant qu'outil de wireframing principal. .

Les avantages et les inconvénients de l'utilisation d'Adobe InDesign comme outil filaire et de prototypage

Depuis un certain temps déjà, Adobe InDesign est non seulement une application de publication assistée par ordinateur, mais également largement utilisée pour la publication numérique et la création EPUB. Il existe également plusieurs raisons pour lesquelles il s'agit également d'un outil approprié pour le wireframing :

• Pages maîtres – Vous pouvez appliquer rapidement et de manière cohérente des éléments de conception globaux tels que la navigation, les en-têtes, les pieds de page, etc. à l'aide de pages maîtres. Vous pouvez créer autant de pages maîtres que vous le souhaitez, et en plus, un maître peut être basé sur un autre.
• Prise en charge de la grille solide - Vous permet de créer et d'appliquer facilement différents types de grilles, en complétant les colonnes, les guides horizontaux et verticaux pour créer des modules et des sous-grilles pour une complexité et une précision accrues.
• Dispositions alternatives - Active les wireframes pour plusieurs appareils et orientations dans le même fichier.
• Bibliothèques CC - Génère une bibliothèque de différents actifs réutilisables tels que des objets, des couleurs, des caractères et des styles de paragraphe couramment utilisés. Créez des ressources dans InDesign, Illustrator ou Photoshop, ou avec l'application mobile Adobe Capture, selon votre préférence.
• Calques – Offre la possibilité d'organiser, de grouper, d'afficher/masquer et de verrouiller/déverrouiller des objets et du contenu de manière sélective dans le fil de fer. Chaque page d'un document InDesign de plusieurs pages a le même nombre et le même ordre de calques. Toutes les modifications que vous apportez aux calques sont répercutées sur toutes les pages, comme la visibilité, l'ordre d'empilement ou la suppression.
• Styles et tableaux - Donne un contrôle total sur l'apparence de votre texte, des objets et des tableaux grâce à l'utilisation des styles InDesign. Les styles peuvent hériter les uns des autres, ce qui permet de répartir facilement la mise en forme souhaitée dans tout le document. La création et la mise en forme de tableaux à utiliser comme éléments de contenu filaires ou même comme aides à des fins de mise en page sont très simples.
• Intégration de Typekit – Dans les maquettes haute fidélité, vous pouvez utiliser n'importe laquelle des polices Typekit qui se synchronisent avec le bureau.
• Interactivité et animations - Vous pouvez utiliser les fonctionnalités d'interactivité et d'animation intégrées d'Adobe InDesign pour créer différents états d'éléments de conception Web ou d'application pour le prototypage d'interaction. La plupart des gens utilisent ces fonctionnalités lors de la création de magazines pour les solutions d'édition numérique et l'exportation EPUB à mise en page fixe, mais elles conviennent également au prototypage.
• Options d'exportation - InDesign peut exporter les wireframes et les prototypes que vous créez dans une variété de formats. Les PDF interactifs seront probablement votre format de choix dans la majorité des cas, mais vous pouvez également utiliser la fonction Publier en ligne pour convertir votre document en HTML interactif, qui peut être visualisé dans les navigateurs de bureau et mobiles modernes. Malheureusement, vous n'avez pas beaucoup de contrôle sur l'exportation à l'aide de Publish Online et les fichiers exportés sont hébergés sur des serveurs Adobe. Vous pouvez partager l'URL prototype avec votre client ou l'intégrer à votre site. Pour plus de contrôle et une exportation directe vers HTML5, vous pouvez utiliser l'extension in5 d'Ajar Productions.

Adobe InDesign a de nombreux avantages à être utilisé comme outil de wireframe et de prototypage, mais il a aussi quelques inconvénients :

• Absence de modèles et d'éléments filaires prédéfinis - Étant donné qu'InDesign n'est pas censé être un outil de filaire, vous devez créer et préparer vous-même des modèles et des éléments d'objet. (Je vous montrerai comment gérer cette étape plus tard dans l'article.) La bonne nouvelle est que la plupart de ce travail ne sera effectué qu'une seule fois, et après quelques heures de travail, vous serez prêt à démarrer votre Filaire InDesign. De plus, il existe de nombreux actifs et kits filaires que vous pouvez télécharger sur Internet, il n'est donc pas nécessaire de tout dessiner vous-même.
• Les fonctionnalités d'interactivité et d'animation sont limitées - Bien que vous puissiez facilement connecter des pages et ajouter de l'interactivité et des animations, le processus peut parfois prendre beaucoup de temps. Certains des outils d'interaction simples ne sont pas très intuitifs. Si vous n'avez pas utilisé les fonctionnalités d'interactivité d'InDesign, vous devrez surmonter une légère courbe d'apprentissage avant de pouvoir les appliquer efficacement.
• Les documents InDesign ne peuvent pas être exportés directement sous forme de fichiers PSD en couches - Si vous réalisez votre conception visuelle dans Adobe Photoshop et que vous souhaitez disposer d'éléments filaires séparés pour créer votre conception, vous devrez d'abord exporter vos images filaires au format PDF. Ensuite, vous devrez ouvrir le PDF dans Illustrator et l'exporter à nouveau en tant que PSD en couches. Les personnes travaillant sur Mac peuvent également utiliser un script gratuit écrit par Rob Day pour enregistrer des fichiers InDesign en tant que PSD en couches.

Une bonne préparation du wireframe représente la moitié du travail

Commencez par affiner votre environnement de travail. Si vous ne disposez pas déjà d'un espace de travail enregistré dans Illustrator et InDesign pour ce type de travail, créez-en un. Dans Illustrator, commencez par l'espace de travail Web prédéfini et adaptez-le à votre guise : fermez les panneaux que vous n'utilisez pas souvent, assurez-vous d'ouvrir ceux que vous utiliserez, puis organisez-les en fonction de votre style de travail.

Une fois terminé, enregistrez l'espace de travail en choisissant Fenêtre > Espace de travail > Nouvel espace de travail… Faites la même chose dans InDesign en utilisant l'espace de travail Digital Publishing comme entrée.

Assemblage de kits filaires/maquettes/prototypes

Un flux de travail de wireframing efficace utilisant Illustrator et InDesign nécessite que vous investissiez d'abord du temps dans la création de votre kit de ressources d'interface utilisateur. Depuis l'introduction d'Adobe Creative Cloud, les bibliothèques CC sont le meilleur moyen de stocker tous les composants de votre kit d'interface utilisateur.

Vous pouvez créer une ou plusieurs bibliothèques à des fins de wireframing et de prototypage. Par exemple, vous pouvez créer une bibliothèque pour le wireframing de sites Web, une autre pour les applications iOS, une troisième pour les applications Android, etc.

Pour créer une bibliothèque Adobe CC, ouvrez le panneau Bibliothèques et choisissez Créer une nouvelle bibliothèque dans le menu hamburger du panneau. Les actifs que vous placez dans les bibliothèques peuvent être créés et utilisés dans différentes applications de bureau ou mobiles Adobe sur tous les appareils auxquels vous vous connectez avec votre Adobe ID. Cela signifie que vous pouvez commencer le projet sur votre iPad ou iPhone, continuer sur votre ordinateur de bureau au bureau et apporter des modifications de dernière minute sur votre ordinateur portable à la maison avec les mêmes actifs disponibles sur tous les appareils.

Si vous travaillez au sein d'une équipe plus importante, les actifs de la bibliothèque peuvent être partagés entre les membres de l'équipe. Les bibliothèques peuvent contenir des couleurs, des graphiques, des styles de calque (Photoshop uniquement) et des styles de paragraphe et de caractère. Vous ajoutez des actifs dans les bibliothèques en cliquant sur le bouton correspondant en bas du panneau Bibliothèque CC avec l'élément respectif sélectionné. Vous pouvez également ajouter des éléments graphiques en les faisant glisser directement de votre plan de travail vers le panneau Bibliothèques.

Les actifs des bibliothèques sont organisés par catégories. Respectez les bonnes pratiques et renommez chaque ressource avec un nom significatif. Les bibliothèques sont consultables, et trouver un actif en tapant le début de son nom vous fera gagner beaucoup de temps plus tard, surtout lorsque vous avez de nombreux éléments différents dans vos bibliothèques. Pour modifier le nom d'un élément, double-cliquez dessus et saisissez-en un nouveau.

Création de composants de kit filaire

Bien qu'Adobe InDesign dispose d'outils de dessin de base assez similaires à ceux d'Illustrator, Illustrator est un bien meilleur choix pour dessiner divers éléments dans votre filaire. En règle générale, créez tous les éléments du kit qui nécessitent un dessin plus complexe que les formes géométriques de base dans Illustrator. Créez des éléments plus simples contenant du texte que vous devrez modifier dans la mise en page, tels que des boutons simples, dans InDesign.

Pour commencer, faites une liste de tous les éléments dont vous aurez besoin dans le wireframe, tels que les éléments de navigation, les éléments de page, y compris les images, les cadres vidéo et les zones de texte, les icônes, les avatars, les éléments de formulaire et tous les autres éléments d'interface. Une fois votre liste terminée, vous pouvez vous diriger vers Illustrator et InDesign pour créer ces éléments.

Commencez par créer un nouveau document pour les composants filaires ou de kit de maquette. Vérifiez que vous avez choisi soit Profil Web/Périphériques dans Illustrator, soit Intention de publication Web/numérique dans la boîte de dialogue Nouveau document. Cela garantit que les pixels sont utilisés comme unités et que le mode couleur est défini sur RVB.

Rendez les ressources du kit filaire aussi simples que possible, car elles doivent donner des repères visuels rapides pour ce qu'elles représentent sans être trop détaillées. Vous devez utiliser des palettes de couleurs très limitées, de préférence quelques nuances de gris. Accentuez visuellement les éléments les plus importants en les colorant avec des nuances plus foncées ou en leur donnant un contraste plus élevé.

Pour des maquettes ou des prototypes plus fidèles, créez des kits d'interface utilisateur avec des éléments plus détaillés qui utilisent la palette de couleurs respective de chaque projet. Pour un accès facile aux palettes de couleurs, ajoutez-les aux bibliothèques CC.

Actifs Adobe Illustrator dans les bibliothèques CC

Les ressources que vous ajoutez aux bibliothèques à partir d'Illustrator sont liées par défaut (depuis Adobe CC 2015). Cela signifie que lorsque vous modifiez une ressource de bibliothèque dans Illustrator, les modifications sont répercutées dans toutes les instances utilisées. Si vous souhaitez ajouter un élément non lié au document, appuyez sur la touche option/alt tout en le faisant glisser depuis le panneau.

Lorsque vous utilisez des ressources Illustrator liées dans InDesign, elles auront une petite icône de nuage dans le coin supérieur gauche lorsque le document est affiché en mode Normal. Ils sont tous également répertoriés dans le panneau Liens. Si vous modifiez une ressource de bibliothèque dans Illustrator, les modifications apportées au document InDesign ne seront pas effectuées automatiquement. L'icône de nuage sera remplacée par une icône de point d'exclamation de lien modifié, et vous devrez mettre à jour ces liens.

Les ressources InDesign que vous placez dans un document InDesign ne sont pas liées. Cela signifie que vous pouvez modifier des instances indépendamment de l'original, et lorsque l'actif d'origine est modifié, ces modifications ne sont pas répercutées sur les actifs qui ont déjà été placés dans la mise en page.

Tenez compte de ces propriétés lors de la création de structures filaires : ajoutez des éléments à la bibliothèque à partir d'Illustrator lorsque vous supposez qu'ils devront être modifiés et mis à jour globalement, ou ajoutez-les à partir d'InDesign lorsque vous savez que vous souhaitez les modifier individuellement. Notez que vous pouvez également créer des graphiques dans Illustrator, les copier/coller dans InDesign, puis les modifier si nécessaire avant de les ajouter à la bibliothèque en tant qu'élément InDesign.

Si vous oubliez quel élément graphique est créé par quelle application, regardez le côté droit de chaque élément dans le panneau Bibliothèque tout en utilisant Afficher les éléments sous forme de liste.

Flexibilité d'Adobe InDesign avec le contenu et la copie

Pour vous assurer que vous pouvez facilement modifier la copie et la typographie dans vos wireframes, créez des conteneurs de texte dans InDesign. InDesign a une fonctionnalité intéressante pour remplir les zones de texte avec du texte d'espace réservé. Lorsque vous dessinez une zone de texte, cliquez dessus avec le bouton droit de la souris et choisissez Remplir avec un texte d'espace réservé .

Ajoutez des zones de texte à la bibliothèque Adobe comme n'importe quel autre élément graphique en les faisant glisser. Lorsque vous utilisez ultérieurement ces éléments de texte dans le cadre de la mise en page de vos structures filaires, vous pouvez modifier la zone de texte ainsi que son contenu dans votre structure filaire.

Pensez également à créer des éléments d'interface utilisateur de bouton dans InDesign. Pour créer un bouton, créez un cadre de texte, saisissez le texte, puis utilisez Objet > Options de cadre de texte pour définir l'espacement de l'encart. Ajustez la justification verticale du texte à l'intérieur d'une zone en choisissant l'option souhaitée dans le menu déroulant Aligner.

Passez à l'onglet Taille automatique et choisissez le dimensionnement automatique approprié (qui serait probablement Largeur uniquement) et un point de référence pratique. Si vous ne souhaitez pas laisser InDesign diviser votre texte en plusieurs lignes, cochez l'option Aucun saut de ligne.

Utiliser les ressources existantes

Il existe de nombreux kits d'interface utilisateur filaires et de prototypage Adobe Illustrator disponibles sur Internet que vous pouvez acheter ou même télécharger gratuitement si vous souhaitez une solution prête à l'emploi. Peut-être avez-vous déjà des éléments que vous pouvez déterrer de vos projets terminés. Ouvrez ces documents, modifiez les éléments précédemment créés si nécessaire et placez-les dans leurs bibliothèques respectives.

Si vous concevez pour une plate-forme particulière, par exemple, une application iOS ou Android, assurez-vous de lire attentivement leurs directives d'interface humaine et d'utiliser les ressources appropriées. Il peut être pratique d'avoir des éléments d'interface utilisateur spécifiques à diverses plates-formes dans votre kit.

Ne vous concentrez pas trop sur la prise en compte de chaque actif ou état futur de vos bibliothèques avant de commencer le processus de wireframing proprement dit. Vous pouvez ajouter des ressources à vos bibliothèques ultérieurement et les développer au fur et à mesure.

Création de modèles filaires InDesign

Il reste une étape de préparation importante : créez des modèles InDesign que vous utiliserez pour créer des structures filaires. Commencez par créer un nouveau document avec une intention de publication Web ou numérique et définissez les tailles de page appropriées pour les écrans pour lesquels vous concevez.

Puisqu'il est recommandé d'utiliser une sorte de grille pour disposer vos éléments filaires, configurez les marges et créez une grille de colonnes en définissant le nombre de colonnes souhaité et l'espace de gouttière. Vous pouvez modifier ces paramètres ultérieurement à partir de Disposition> Marges et colonnes avec sa ou ses pages maîtres respectives sélectionnées dans le panneau Pages.

Si vous avez besoin de guides horizontaux et de guides verticaux complémentaires, créez-les manuellement ou créez une grille supplémentaire en utilisant Mise en page > Créer des guides. Lors de la création d'une grille, il est utile d'utiliser l'un des outils de calcul de grille en ligne comme le Gridulator.

Vous pouvez également créer des modèles supplémentaires à des fins de présentation avec des maquettes d'appareils comme cadre pour vos wireframes. Puisqu'un document InDesign peut être lié à un autre, vous pouvez créer des wireframes dans un document InDesign, puis le placer dans un autre pour les présentations.

Bien que cela puisse sembler compliqué au début, il s'agit en fait d'un flux de travail très simple et efficace. Le fait de conserver les structures filaires réelles dans un document séparé facilite la poursuite de la construction à partir de structures filaires approuvées vers une conception visuelle raffinée.

Il est également simple de créer des modèles prêts pour la présentation dans lesquels placer des wireframes, ajouter des étiquettes et des commentaires, et être en mesure de montrer votre meilleure solution au client. Lorsque vous apportez des modifications sur un fichier filaire, il suffit de le mettre à jour comme n'importe quel autre lien dans un document de présentation et ta-daaa ! Tous les changements sont également dans votre présentation.

Dans le panneau Calques, vous pouvez préparer des calques distincts pour différents types de contenu : éléments d'interface utilisateur, fonctionnalités interactives, gestes, étiquettes et notes. Si vous avez besoin de plus de calques pour un projet spécifique, vous pourrez facilement les ajouter à tout moment pendant le processus de wireframing.

Lorsque vous avez terminé la création, enregistrez vos modèles en tant que fichiers de modèle InDesign.indt. Une fois que tous les modèles dont vous avez besoin sont enregistrés, vous êtes enfin prêt à commencer efficacement le wireframing.

Construire des structures filaires

Tout d'abord, commencez par la page maître. Faites glisser tous les éléments globaux qui seront identiques sur tous les écrans de votre projet depuis la bibliothèque. Si vous concevez un site Web, il s'agit généralement d'en-têtes avec un logo, une navigation et un pied de page. Étant donné que vous pouvez créer plusieurs pages maîtres et qu'elles peuvent hériter les unes des autres, vous pouvez tirer parti de l'imbrication des pages maîtres.

Par exemple, selon le projet, vous pouvez créer une page maître pour un élément d'interface utilisateur, comme une fenêtre contextuelle modale ou de dialogue, puis créer de nouveaux maîtres basés sur le premier maître, en modifiant uniquement les éléments qui doivent être différents.

Vous ne pouvez pas sélectionner, modifier ou supprimer des éléments maîtres sur des pages de document normales à moins que vous ne cliquiez dessus tout en maintenant Commande/Contrôle + Maj pour remplacer le maître. Une fois votre élément remplacé, vous pouvez modifier n'importe lequel de ses paramètres ou le supprimer complètement de la mise en page.

Gardez à l'esprit que même lorsque vous remplacez l'élément, les paramètres que vous n'avez pas modifiés seront toujours hérités du maître. Par exemple, si vous remplacez un élément en changeant sa couleur, sa taille ne changera pas car il est toujours connecté au maître. De plus, si vous le modifiez sur la page maître, il sera également modifié sur l'élément que vous avez précédemment remplacé.

Lorsque vous insérez des pages supplémentaires dans votre document filaire, n'oubliez pas de les baser sur leur maître respectif. Si vous devez modifier le masque pour les pages déjà présentes dans la mise en page, sélectionnez-les dans le panneau Pages, cliquez avec le bouton droit de la souris et choisissez Appliquer le masque aux pages. Utilisez les ressources de la bibliothèque et organisez-les à l'aide des options Smart Guides et Align pour créer les dispositions filaires finales de l'interface utilisateur.

Si vous créez des conceptions pour plusieurs tailles d'écran, créez des mises en page alternatives à partir de Mises en page > Créer une mise en page alternative ou du panneau Pages. Vous pouvez utiliser des règles de mise en page liquides lors de la création de mises en page alternatives pour adopter automatiquement des éléments de page d'une taille et d'une orientation à une autre, ou vous pouvez les contrôler manuellement. Pour appliquer et tester les règles de mise en page liquide, utilisez l'outil Page ou ouvrez le panneau Fenêtre > Interactif > Mise en page liquide.

Ajouter de l'interactivité

Adobe InDesign dispose de nombreuses fonctionnalités d'interactivité dont vous pouvez tirer parti lors de la création de wireframes ou de prototypes. Les fonctionnalités que vous inclurez dépendront du format final dont vous aurez besoin pour vos wireframes, prototypes ou présentations.

Si vous exportez au format PDF, l'interactivité sera limitée, mais vous pouvez au moins faire fonctionner les liens entre les écrans en utilisant le panneau des hyperliens pour les créer. Sélectionnez l'élément que vous souhaitez utiliser comme lien et cliquez sur l'icône Nouvel hyperlien. Dans le menu déroulant Lier à, choisissez Page et entrez le numéro de page souhaité. Répétez cette action sur tous les éléments que vous souhaitez voir se comporter comme des liens entre les écrans.

Vous pouvez également ajouter des hyperliens vers des objets résidant sur les pages maîtres, ce qui peut être un véritable gain de temps. Créez des liens sur la page maître une fois et ils fonctionneront sur tous les écrans de votre document.

Vous pouvez créer des boutons à partir de n'importe quel graphique, texte, image ou groupe d'éléments. Pour créer un bouton à partir d'un objet sélectionné, utilisez le panneau Fenêtre > Interactif > Boutons et formulaires et cliquez sur l'icône Convertir en bouton.

Les boutons peuvent avoir différents états créés pour les apparences normales, de survol et de clic. Pour ajouter des états de survol ou de clic aux boutons, cliquez dessus dans le panneau Boutons et modifiez l'apparence du bouton pour chaque état. Pour ajouter une action à un bouton, cliquez sur un signe plus et choisissez-le dans la liste. Tenez compte du fait que les actions sous SWF/EPUB ne fonctionneront pas dans les PDF interactifs.

Pour créer des éléments contextuels, choisissez Afficher/Masquer les boutons et les formulaires. Pour masquer les boutons jusqu'au déclenchement, cochez l'option Masqué jusqu'au déclenchement. Vous pouvez inclure des objets multi-états dans un PDF interactif, mais uniquement si vous les exportez d'abord au format SWF, puis les replacez dans la mise en page InDesign pour l'exportation au format PDF. Ce flux de travail est fastidieux et les PDF ne peuvent pas être vus correctement dans tous les lecteurs PDF, alors essayez d'éviter de le faire à moins que cela ne soit vraiment nécessaire.

Si vous souhaitez convertir votre document en prototype HTML à l'aide de la fonctionnalité de publication en ligne d'InDesign CC 2015, vous pouvez utiliser de nombreuses autres options interactives telles que des animations, des objets à états multiples et plusieurs actions de bouton, y compris toutes celles destinées à l'exportation SWF/EPUB.

Vous pouvez ajouter des animations simples à l'aide du panneau Animation et choisir l'un des préréglages intégrés dans le menu déroulant et définir ses propriétés. Un objet ne peut avoir qu'une seule animation appliquée, mais si vous devez en ajouter plusieurs, regroupez votre objet avec une boîte vide et utilisez la nouvelle animation sur cet objet nouvellement créé.

Pour les éléments d'interface utilisateur qui nécessitent d'afficher différents états, créez un objet à états multiples. Créez un objet distinct pour chaque état. Les objets peuvent être un élément unique (image, zone de texte, graphique) ou un groupe d'éléments différents. Ouvrez le panneau Fenêtre > Interactif > États d'objet, sélectionnez tous les objets que vous avez créés pour l'objet à états multiples, puis cliquez sur le bouton Nouveau en bas du panneau.

Une fois votre objet multi-état créé, vous devrez créer des boutons pour passer d'un état d'objet à un autre. Les actions Aller à l'état suivant ou Aller à l'état précédent révèlent l'état spécifique de l'objet avec l'action Aller à l'état.

Si vous souhaitez avoir un cadre défilant dans votre filaire/prototype, le moyen le plus simple d'en créer un est d'utiliser l'extension Universal Scrolling Frames d'Ajar Productions. Après avoir téléchargé et installé l'extension, vous pouvez l'utiliser comme panneau InDesign. Pour un cadre déroulant, vous devrez créer du contenu ainsi qu'un cadre pour un conteneur.

Le contenu déroulant peut être un bloc de texte, une image ou plusieurs éléments regroupés. Lorsque vous avez terminé de créer le contenu et la boîte de conteneur, sélectionnez le contenu et Édition > Couper. Sélectionnez ensuite le conteneur et collez le contenu à l'intérieur en utilisant Edition> Coller dans. Sélectionnez le conteneur et à l'aide des cadres de défilement universels, ajustez la direction de défilement souhaitée.

En combinant des boutons, des objets multi-états, des animations et des cadres défilants, vous pouvez obtenir une expérience interactive riche. Pour tester l'interactivité dans InDesign, utilisez le panneau Aperçu de l'interactivité EPUB. Vous pouvez prévisualiser une seule page ou l'ensemble du document. Agrandissez le panneau d'aperçu selon vos besoins.

Si vous n'avez pas utilisé les fonctionnalités interactives d'Adobe InDesign, préparez-vous car, au début, il y a un peu de courbe d'apprentissage. Mais avec un peu de pratique et quelques essais et erreurs, vous les maîtriserez rapidement.

Exportation de documents finis

Lorsque vous avez terminé de créer les wireframes et les fichiers de présentation, il ne reste plus qu'à montrer vos grandes idées au client de la meilleure façon possible. Pour cela, vous devrez exporter vos wireframes dans un format que votre client peut prévisualiser. Bien que les fichiers InDesign puissent être exportés dans une variété de formats, vous allez probablement utiliser le PDF interactif ou la fonction Publier en ligne si vous testez des prototypes fonctionnels basse ou haute fidélité. Pour enregistrer au format PDF interactif, choisissez Adobe PDF (interactif) dans le menu déroulant Format de la boîte de dialogue Exporter et ajustez les propriétés selon vos besoins. N'oubliez pas de cocher Formulaires et médias s'il y a des éléments interactifs que vous souhaitez inclure. Les clients peuvent visualiser les wireframes PDF dans Adobe Reader gratuit et écrire tous leurs commentaires dans ce même fichier.

Vous pouvez également utiliser un document PDF exporté depuis InDesign pour créer un prototype InVision (ou tout autre outil prenant en charge les PDF). Si votre outil de prototypage standard, peut-être Marvel, ne peut pas importer un PDF, exportez vos pages filaires InDesign sous forme d'images JPEG ou PNG.

Pour exporter de manière interactive un prototype HTML visible dans les navigateurs modernes sur différents appareils, accédez à Fichier > Publier en ligne ou cliquez sur le bouton Publier en ligne dans la barre d'application. Une fois le document préparé pour publication en ligne et téléchargé, vous pouvez copier une URL de document à partager avec les parties prenantes et démarrer le processus de révision. Vous pouvez également intégrer le prototype publié sur votre site.

Un inconvénient de la fonction Publier en ligne est qu'elle n'a aucun contrôle supplémentaire sur l'exportation et que les fichiers sont toujours stockés sur les serveurs d'Adobe. De plus, il s'agit toujours d'une fonctionnalité de prévisualisation et vous ne pouvez pas savoir dans quelle direction Adobe va la développer, ni même si elle sera interrompue.

Une fois votre wireframe/prototype exporté, il est temps de commencer le processus de test, de révision et d'itération.