Wireframing est une étape importante dans la conception de toute interface utilisateur, que ce soit un site Web, une application ou un logiciel. Sans aucune distraction sous forme d'images, de couleurs, de typographie, de styles et d'effets, vous pouvez vous concentrer davantage sur la définition de votre hiérarchie de contenu et de votre expérience utilisateur.

La création de wireframes et de 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 différents outils de wireframing à choisir aujourd'hui. Celui que vous choisissez dépendra de vos préférences personnelles et de votre style de flux de travail.

Comme de nombreux designers qui ont déménagé conception numérique Issu du 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 Web et conception d'application visuelle . Donc, pour rendre mon flux de travail le plus efficace, je les utilise également pour le wireframing.

comment savoir si une entreprise est une s corp ou c corp

La suite d'applications de conception Adobe CC peut être utilisée pour créer efficacement des wireframes.

À 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 la table de mon bureau. Ces croquis sont là pour concentrer mes réflexions sur le concept choisi; le client ne les verra probablement jamais. Quand je suis sûr que mon idée fonctionne, je passe à ce qu'est le wireframing. J'utilise généralement Adobe Illustrator et InDesign en combinaison - Illustrator pour créer la plupart des éléments de l'interface utilisateur et du kit InDesign pour le wireframing lui-même.

Je vous expliquerai pas à pas comment incorporer 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 que outil principal de wireframing.

Avantages et inconvénients de l'utilisation d'Adobe InDesign comme outil de prototypage et de wireframe

Depuis quelque temps, Adobe InDesign n'est pas seulement une application de publication assistée par ordinateur, mais est également largement utilisé pour la publication numérique et la création EPUB. Il y a aussi plusieurs raisons pour lesquelles c'est également un outil approprié pour le wireframing:

• Pages maîtres: vous pouvez appliquer rapidement et de manière cohérente des éléments de conception globale, 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 outre, une page maître peut être basée sur une autre.
• Support de grille solide - Vous permet de créer et d'appliquer facilement différents types de grilles, de colonnes complémentaires, de guides horizontaux et verticaux pour créer des modules et des sous-grilles pour une plus grande complexité et précision.
• Dispositions alternatives: activez 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 couramment utilisés, des couleurs, des caractères et des styles de paragraphe. Créez des éléments dans InDesign, Illustrator ou Photoshop, ou avec l'application mobile Adobe Capture, selon votre préférence.
• Calques - Offre la possibilité d'organiser, de regrouper, d'afficher / masquer et de verrouiller / déverrouiller les objets et le contenu de manière sélective sur le wireframe. 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 reflétées sur toutes les pages, telles que la visibilité, l'ordre d'empilement ou la suppression.
• Styles et tableaux - Vous donne un contrôle total sur l'apparence de votre texte, objets et tableaux à l'aide des styles InDesign. Les styles peuvent être hérités les uns des autres et offrent la possibilité de mettre en cascade facilement le format souhaité 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 outils de mise en page sont très simples.
• Intégration de Typekit: dans les maquettes hi-fi, vous pouvez utiliser l'une des polices Typekit qui se synchronise avec le bureau.
• Interactivité et animations: vous pouvez utiliser les fonctionnalités d'animation et d'interactivité 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. Ces fonctionnalités sont utilisées par la plupart des gens lors de la création de magazines pour l'exportation EPUB à mise en page fixe et la solution de publication numérique, mais elles conviennent également au prototypage.
• Options d'exportation: InDesign peut exporter les structures filaires et les prototypes que vous créez dans divers formats. Les PDF interactifs seront probablement votre format de choix dans la plupart des cas, mais vous pouvez également utiliser la fonction Publier en ligne pour convertir votre document en HTML interactif, qui peut être consulté sur 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 le prototype d'URL avec votre client ou l'intégrer sur votre site. Pour plus de contrôle et d'export directement vers HTML5, vous pouvez utiliser l'extension in5 de Productions Ajar .

Adobe InDesign Il présente de nombreux avantages à être utilisé comme outil de prototypage et de wireframe, mais il présente également certains inconvénients:

• Manque de modèles et d'éléments filaires prédéfinis. Étant donné qu'InDesign n'est pas destiné à être un outil de wireframing, vous devez créer et préparer vous-même des modèles et des éléments d'objets. (Je vais vous montrer comment gérer cette étape plus loin 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 processus de wireframing InDesign. De plus, il existe de nombreuses ressources et kits filaires que vous pouvez télécharger sur Internet, vous n'avez donc pas besoin 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 des animations et de l'interactivité, 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 petite courbe d'apprentissage avant de pouvoir les appliquer efficacement.
• Les documents InDesign ne peuvent pas être directement exportés en tant que fichiers PSD en couches. Si vous faites votre conception visuelle dans Adobe Photoshop et que vous souhaitez avoir des éléments séparés pour créer votre conception, vous devrez d'abord exporter vos wireframes au format PDF. Vous devrez ensuite ouvrir le PDF dans Illustrator et l'exporter à nouveau en tant que PSD en couches. Les personnes qui travaillent sur Mac peuvent également utiliser un script gratuit écrit par Rob Day pour enregistrer les fichiers InDesign en tant que PSD en couches.

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

Commencez par ajuster votre environnement de travail. Si vous n'avez pas encore d'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 ajustez-les en fonction de votre style de travail.

Lorsque vous avez terminé, enregistrez l'espace de travail en sélectionnant Fenêtre> Espace de travail> Nouvel espace de travail. Faites de même dans InDesign en utilisant l'espace de travail Publication numérique comme lanceur.

Assemblage filaire / Maquettes / Kits prototypes

Un flux de travail de wireframing efficace utilisant Illustrator et InDesign vous oblige à passer du temps à créer votre kit de ressources d'interface utilisateur comme première tâche. 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 pour le wireframing et le 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 éléments 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 démarrer le projet sur votre iPad ou iPhone, continuer sur votre bureau au bureau et apporter des modifications de dernière minute sur votre ordinateur portable à la maison avec les mêmes ressources disponibles sur tous les appareils.

Utilisez les bibliothèques Adobe CC pour créer des kits filaires et des éléments communs de la maison.

Si vous travaillez au sein d'une équipe plus large, les ressources de la bibliothèque peuvent être partagées 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. Ajoutez des ressources aux bibliothèques en cliquant sur le bouton correspondant en bas du panneau Bibliothèque CC avec l'élément correspondant 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 élément avec un nom significatif. Les bibliothèques peuvent faire l'objet de recherches et trouver un élément en tapant le début de votre nom vous fera gagner beaucoup de temps plus tard, en particulier lorsque vous avez de nombreux éléments différents dans vos bibliothèques. Pour modifier le nom d'un actif, double-cliquez dessus et saisissez-en un nouveau.

Créer un kit de composants filaires

Bien qu'Adobe InDesign dispose d'outils de dessin de base assez similaires à Illustrator, Illustrator est une bien meilleure option pour dessiner divers éléments sur 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 de l'interface. Une fois que vous avez fait votre liste, 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 le kit de maquette. Vérifiez à nouveau que vous avez sélectionné Profil Web / périphérique dans Illustrator ou 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 éléments du kit filaire aussi simples que possible, car ils doivent donner des indices visuels rapides sur ce qu'ils représentent sans être trop détaillés. 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 plus grand contraste.

Pour maquettes ou 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 accéder facilement aux palettes de couleurs, ajoutez-les aux bibliothèques CC.

Créez un kit filaire Adobe.

Ressources Adobe Illustrator dans les bibliothèques CC

Les éléments que vous ajoutez aux bibliothèques à partir d'Illustrator sont liés par défaut (depuis Adobe CC 2015). Cela signifie que lorsque vous modifiez un élément dans la bibliothèque dans Illustrator, les modifications sont reflété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.

Bibliothèques de ressources Adobe CC Wireframe dans Adobe Illustrator

Lorsque vous utilisez des éléments Illustrator liés dans InDesign, ils auront une petite icône de nuage dans le coin supérieur gauche lorsque le document est affiché en mode 'Normal'. Tous sont également répertoriés dans le panneau 'Liens'. Si vous modifiez un élément 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 d'exclamation d'un lien modifié, et vous devrez mettre à jour ces liens.

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

Un guide de style et une bibliothèque de ressources dans Adobe InDesign

Gardez ces propriétés à l'esprit lors de la création de wireframes: ajoutez des éléments à la bibliothèque à partir d'Illustrator lorsque vous pensez 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éé avec 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».

Adobe InDesign: flexibilité avec contenu et copie

Pour vous assurer de pouvoir 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 le texte de test .

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

Pensez également à créer des boutons en tant qu'éléments de l'interface utilisateur dans InDesign. Pour créer un bouton, créez un cadre de texte, saisissez le texte, puis utilisez Objet> Options du cadre de texte pour définir l'espace d'entrelacement. Ajustez la justification verticale du texte dans une boîte en choisissant l'option souhaitée dans le menu déroulant 'Aligner'.

$erreur[] php

Passez à l'onglet 'Taille automatique' et choisissez la taille automatique appropriée (qui est probablement juste la largeur) et un point de référence pratique. Si vous ne souhaitez pas autoriser InDesign à fragmenter votre texte en plusieurs lignes, cochez l'option 'Aucun interligne'.

Utiliser les ressources existantes

Il existe de nombreux kits de prototypage et d'interface utilisateur Adobe Illustrator disponibles sur Internet que vous pouvez acheter ou même télécharger gratuitement si vous souhaitez une solution toute faite. Peut-être avez-vous déjà des éléments que vous pouvez extraire 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 ses directives d'interface 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 démarrer le processus de wireframing actuel. Vous pouvez ajouter des ressources à vos bibliothèques plus tard et en tirer parti au fur et à mesure.

Créer des modèles filaires InDesign

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

Modèle filaire InDesign

Comme il est recommandé d'utiliser un type de grille pour disposer vos éléments filaires, définissez les marges et créez une grille de colonnes en définissant le nombre de colonnes et l'espacement des gouttières souhaités. Vous pouvez modifier ces paramètres ultérieurement à partir de Mise en page> Marges et colonnes avec votre page maître (ou vos pages) respective sélectionnée dans le panneau Pages.

Si vous avez besoin de guides horizontaux et verticaux supplémentaires, créez-les manuellement ou créez une grille supplémentaire en utilisant Disposition> 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 Gridulateur .

conseils de réglage des performances des requêtes SQL

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 document pour les présentations.

Bien que cela puisse sembler compliqué au début, il s'agit d'un flux de travail très simple et efficace. En conservant les wireframes réels dans un document séparé, il est facile de continuer à construire des wireframes approuvés à une conception visuelle soignée.

Une autre chose simple est de créer des modèles prêts pour la présentation dans lesquels placer des wireframes, ajouter des balises et des commentaires, et être en mesure de montrer votre meilleure solution au client. Lorsque vous apportez des modifications à un fichier filaire, mettez-le simplement à 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 séparés pour différents types de contenu: éléments de l'interface utilisateur, fonctionnalités interactives, gestes, étiquettes et notes. Si vous avez besoin de plus de couches pour un projet spécifique, vous pouvez 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 prêt à démarrer efficacement le wireframing.

Création de wireframes

Tout d'abord, commencez par la page maître. Faites glisser tous les éléments globaux qui seront les mêmes sur tous les écrans de votre projet depuis la bibliothèque. Si vous concevez un site Web, ce sont généralement des 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 de l'interface utilisateur, comme une fenêtre contextuelle modale ou de dialogue, puis créer de nouveaux masques basés sur le premier maître, en modifiant uniquement les éléments qui doivent être différents.

Utilisation de modèles principaux dans Adobe InDesign

Vous ne pouvez pas sélectionner, modifier ou supprimer des éléments de gabarit sur des pages de document normales à moins que vous ne cliquiez dessus tout en maintenant les touches Commande / Contrôle + Maj enfoncées pour remplacer le gabarit. Une fois votre élément remplacé, vous pouvez modifier l'un de vos paramètres ou le supprimer entièrement 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 modifiant sa couleur, sa taille ne changera pas car il est toujours connecté au maître. En outre, si vous le modifiez sur la page maître, il sera également modifié sur l'élément que vous avez remplacé précédemment.

Lorsque vous insérez des pages supplémentaires dans votre document de wireframing, n'oubliez pas de les baser sur leurs masters respectifs. Si vous devez modifier le gabarit des 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 gabarit aux pages'. Utilisez les ressources de la bibliothèque et organisez-les à l'aide des guides intelligents et des options «Aligner» pour créer les conceptions d'interface utilisateur finales pour l'interface utilisateur.

Si vous créez des mises en page pour plusieurs tailles d'écran, créez d'autres mises en page à partir de Dispositions> Créer une autre mise en page ou du panneau «Pages». Vous pouvez utiliser règles de conception liquide lors de la création de mises en page alternatives pour adopter automatiquement les é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 conception liquide, utilisez l'outil «Page» ou ouvrez le panneau Fenêtre> Interactif> Conception liquide.

Dispositions liquides pour les wireframes Adobe

Ajouter de l'interactivité

Adobe InDesign possède plusieurs fonctionnalités d'interactivité dont vous pouvez tirer parti lors de la création de wireframes ou de prototypes. Les fonctionnalités que vous incluez 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 'Lien' vers, choisissez 'Page' et entrez le numéro de page souhaité. Répétez cette action sur tous les éléments que vous souhaitez faire office de liens entre les écrans.

Vous pouvez également ajouter des liens hypertexte vers des objets qui résident sur des pages maîtres, ce qui peut être un gain de temps réel. 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 l'apparence normale, le survol et le clic. Pour ajouter un survol ou cliquer sur des états de bouton, 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 sélectionnez-le dans la liste. Veuillez noter que les actions dans SWF / EPUB ne fonctionneront pas sur les fichiers PDF interactifs.

Pour créer des fenêtres contextuelles, choisissez Afficher / Masquer les boutons et les formulaires. Pour masquer les boutons jusqu'à ce que l'option soit activée, cochez «Masquer jusqu'à la prise de vue». Vous pouvez inclure des objets multi-états dans un PDF interactif, mais uniquement en les exportant d'abord sous forme de fichier SWF, puis en les replaçant dans la mise en page InDesign pour l'exportation PDF. Ce flux de travail est fastidieux et les fichiers PDF ne peuvent pas être affichés correctement dans tous les lecteurs PDF, essayez donc d'éviter de le faire à moins que cela ne soit vraiment nécessaire.

Si vous souhaitez convertir votre document en un prototype HTML à l'aide de la fonction Publier en ligne d'InDesign CC 2015, vous pouvez utiliser de nombreuses autres options interactives telles que des animations, des objets multi-états et diverses 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 en choisissant l'un des préréglages intégrés dans le menu déroulant et en définissant ses propriétés. Un objet ne peut avoir qu'une seule animation appliquée, mais si vous devez en ajouter plus, 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 l'affichage de différents états, créez un objet à états multiples. Créez un objet distinct pour chaque état. Les objets peuvent être un seul élément (image, zone de texte, graphique) ou un groupe d'éléments différents. Ouvrez le panneau Fenêtre> Interactif> États des objets, sélectionnez tous les objets que vous avez créés pour l'objet multi-états, puis cliquez sur le bouton 'Nouveau' en bas du panneau.

Après avoir créé votre objet multi-états, vous devrez créer des boutons pour passer d'un état d'objet à un autre. Aller à «État suivant» ou Aller à «Actions d'état précédent» révèle l'état de l'objet spécifique avec l'action «Aller à l'état».

Si vous souhaitez avoir un cadre déroulant dans votre structure / prototype, le moyen le plus simple d'en créer un est d'utiliser Boîtes de défilement universelles extension d'Ajar Productions. Après avoir téléchargé et installé l'extension, vous pouvez l'utiliser comme tableau de bord InDesign. Pour un cadre défilant, vous devrez créer du contenu et un cadre pour un conteneur.

raisons de la crise de la dette en grèce

Le contenu déroulant peut être une zone de texte, une image ou plusieurs éléments groupé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 Édition> Coller. Sélectionnez le conteneur et à l'aide des boîtes de défilement universelles, définissez 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 dans EPUB Interactivité. Vous pouvez prévisualiser une seule page ou le document entier. Développez le panneau d'aperçu selon vos besoins.

Si vous n'avez pas utilisé les fonctionnalités interactives d'Adobe InDesign, soyez prêt car il y a une légère courbe d'apprentissage au début. Mais avec un peu de pratique et quelques essais et erreurs, vous les comprendrez rapidement.

Exportation de documents finis

Lorsque vous avez terminé de créer vos wireframes et vos fichiers de présentation, il ne vous reste plus qu'à montrer vos meilleures idées au client sous le meilleur jour possible. Pour ce faire, vous devez exporter vos wireframes dans un format que votre client peut prévisualiser. Bien que les fichiers InDesign puissent être exportés dans divers formats, vous utiliserez probablement la fonction PDF interactif ou Publier en ligne si vous testez des prototypes fonctionnels basse ou haute fidélité. Pour enregistrer en tant que 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 si nécessaire. N'oubliez pas de cocher «Formulaires et médias» si vous souhaitez inclure des éléments interactifs. 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 un autre outil prenant en charge les fichiers PDF). Si votre outil de prototypage standard, peut-être merveille , vous ne pouvez pas importer un PDF, exporter vos wireframes InDesign sous forme d'images JPEG ou PNG.

Pour exporter un prototype HTML interactif qui peut être visualisé dans les navigateurs modernes sur différents appareils, allez dans Fichier> Publier en ligne ou cliquez sur le bouton 'Publier en ligne' dans la barre d'applications. Une fois le document prêt pour la publication en ligne et téléchargé, vous pouvez copier une URL de document à partager avec les parties prenantes et commencer 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 que vous n'avez aucun contrôle supplémentaire sur l'exportation et que les fichiers sont toujours stockés sur les serveurs d'Adobe. En outre, il s'agit toujours d'une fonctionnalité de prévisualisation et vous ne pouvez pas être sûr dans quelle direction Adobe va la développer, ni même si elle sera interrompue.

Une fois que votre structure / prototype est exporté, il est temps pour vous de démarrer le processus de test, de révision et d'itération.