Share
Adobe Illustrator connaît un retour dans le monde de la conception Web. Non seulement SVG est de plus en plus utilisé en ligne, mais de plus en plus de concepteurs utilisent des vecteurs pour la représentation graphique. Les conseils suivants vous aideront à tirer le meilleur parti d'Illustrator en tant qu'outil filaire..
Le wireframing consiste à travailler rapidement et à itérer rapidement. Le but n'est pas de créer des interfaces attrayantes; votre priorité numéro un est de concevoir l'information et l'expérience.
Les structures filaires clarifient la hiérarchie d'une page Web; ils démontrent visuellement l'ordre dans lequel les utilisateurs doivent traiter les informations disponibles. Si vous voulez que les utilisateurs traitent le titre avant d'appuyer sur le bouton "acheter maintenant", le titre doit "l'emporter" sur le bouton en demandant plus d'attention..
Cette hiérarchie visuelle peut être définie de différentes manières. Nous pourrions utiliser la taille pour rendre le titre plus percutant, nous pourrions utiliser le positionnement (en le plaçant avant le bouton). Nous pourrions utiliser la couleur, les contrastes et toute une gamme d'autres choses, mais le faire en mode filaire ne fait que rendre les choses plus confuses..
En supprimant la couleur de l'équation, la relation visuelle définie par la position, la taille et (si vous voulez franchir l'étape supplémentaire) est beaucoup plus nette.
La chaude palette monochromatique des kits UX d'Eric Miller DesignNous ne construisons pas de jolis kits d’interface utilisateur au pixel près ici. Tenez-vous en à une gamme limitée de gris, puis utilisez la couleur uniquement pour les étiquettes et les notes.
En parlant d’étiquettes, de notes et de commentaires, c’est une excellente idée de placer chacun d’eux sur un calque dédié. Il en va de même pour tout ce qui a un but spécifique; tels que le comportement, l'interaction, les gestes, etc..
Placez les éléments visuels sur un calque, le comportement sur un autre et les étiquettes sur un autre afin de pouvoir facilement basculer leur visibilité si nécessaire.
SEC. est généralement utilisé comme terme de programmation, mais est également applicable au workflow de conception. Dans toute structure filaire, nous allons utiliser et réutiliser certains objets. Transformez ces objets en symboles et tout changement que vous apporterez à celui-ci sera immédiatement répercuté sur le reste.
Par exemple, voici un champ de formulaire simple:
Glissons-le dans le volet Symboles (Maj + Commande + F11)
Nous pouvons maintenant tirer ce symbole de la Symboles volet autant de fois que nous le souhaitons sur la planche d’art. En double-cliquant sur l'un d'entre eux, nous l'isolerons (un peu comme des objets groupés) afin de pouvoir le modifier. Toutes les modifications que nous apportons, dans ce cas en arrondissant les coins du rectangle, seront appliquées à chacun des symboles de champ de formulaire que nous avons utilisés..
Une fois que nous avons une collection de symboles, nous pouvons également les enregistrer sous forme de jeu:
Cela nous permettra de les charger dans d'autres fichiers pour l'avenir.
Si vous souhaitez en savoir plus sur la palette de symboles, consultez la rubrique Astuce: Utilisation des symboles dans Adobe Illustrator..
Un bon conseil est de tirer parti des pointes de flèche, ce qui est facilement disponible dans Illustrator dès la sortie de la boîte depuis CS5. Les structures filaires sont l’occasion idéale pour décrire visuellement les interactions, le flux des applications, la navigation et les mouvements..
Ces jours-ci, nous pouvons facilement ajouter des pointes de flèche aux traits, directement à partir du volet Traits.
Nous pouvons même éditer le fichier "Arrowheads.ai" d'Illustrator source, comme l'a expliqué Ryan Cornwell, et ajouter nos propres pointes de flèche au mélange.
Remarque: De manière gênante, l'outil Pipette n'applique pas les pointes de flèche avec les autres styles de trait. Il n'est donc pas aussi facile que possible de dupliquer l'effet que vous avez choisi. Mais quand même, ils sont parfaits pour le wireframing.
À bien des égards, cela découle de l’absence de couleur. L'unification des dimensions et de l'espacement supprime un élément de distraction des structures filaires, nous aidant ainsi à nous concentrer visuellement sur ce qui est important.
Peu importe si les dimensions exactes ne reflètent pas ce que sera l'interface utilisateur plus loin dans la ligne; tant que la hiérarchie et les relations restent vraies, nous sommes prêts à partir.
Appliquez une grille à votre Artboard en allant Voir> Afficher la grille. En sélectionnant Voir> Aligner sur la grille vous aidera à positionner vos objets avec précision.
Pour spécifier exactement à quoi vous voulez que votre grille ressemble (et rappelez-vous, vous n'allez pas dans les moindres détails ici), allez à Illustrator> Préférences> Guides et grille… Une fois là-bas, vous pouvez définir la distance entre les lignes de la grille, puis indiquer le nombre de subdivisions souhaitées dans ces lignes..
Remarque: N'hésitez pas à colorier votre grille avec autre chose que du gris; cela ne fera pas partie du produit final.
En fonction du niveau de fidélité (votre fidélité au site Web final que vous visez), vous pouvez avoir du texte réel, par exemple des boutons. Pour faire grossir et réduire ces boutons en fonction de leur contenu, n'utilisez pas d'objets, utilisez des styles graphiques.
Commençons par une chaîne de texte factice.
Maintenant ouvrons le volet Apparence en allant Fenêtre> Apparence.
À l'aide du volet Apparence, vous pouvez ajouter plusieurs surfaces à un objet. Nous pouvons superposer ces remplissages dans l'ordre que nous aimerions qu'ils affichent; dans cette image, vous pouvez en voir plusieurs, tous empilés les uns sur les autres.
Pour le moment, nous avons juste besoin de deux remplissages. Ajoutons donc un remplissage sombre pour le texte, puis une couleur plus pâle pour le fond..
Actuellement, nous ne pouvons pas voir le fond gris pâle, car il a exactement la même forme que le remplissage le plus élevé. Cependant, nous pouvons isoler et manipuler chaque remplissage séparément. Sélectionnez le remplissage du bas dans le volet Apparence, puis allez à Effet> Convertir en forme> Rectangle arrondi…
Entrez certains paramètres, peu importe ce que vous jugerez bon, assurez-vous simplement que la taille est relative à l'objet auquel nous appliquons ceci.
Le fond gris pâle en bas a maintenant pris la forme d’un rectangle arrondi, par rapport à la taille du texte. Un bouton! Pour appliquer cette apparence à d'autres objets, ouvrez le volet Styles graphiques et faites-y glisser l'intégralité du bouton. Ses apparences seront enregistrées sous un style que vous pourrez réutiliser.
Par exemple, voici une chaîne de texte plus longue. Avec le texte sélectionné, cliquez sur le style graphique nouvellement créé (sur lequel j'ai double-cliqué et renommé) pour l'appliquer instantanément..
La vitesse est le nom du jeu avec wireframing! Gribouiller une mise en page, passer à autre chose, gribouiller une autre, passer à autre chose. Il est donc logique d’avoir un point de départ prêt à l'emploi et facilement accessible. Vous constaterez peut-être que vous travaillez d'abord mieux sur une planche graphique massive, en insérant les objets finalisés dans un fichier séparé, ou que vous préférez travailler directement avec des planches d'art correctement dimensionnées..
Voici, par exemple, une disposition avec un écran iPad (1536x2048px) et quatre écrans d’iPhone 4S (640x960px), bien que vous puissiez préparer un fichier avec un nombre quelconque d’exemples d’écrans de périphérique. Définissez manuellement les dimensions que vous préférez, ou choisissez l’un des paramètres prédéfinis disponibles dans les options de la planche d’art:
Incluez tous les guides, noms de calques, jeux de symboles, etc. courants que vous pourriez utiliser, puis enregistrez le tout en tant que modèle pour une utilisation ultérieure (Fichier> Enregistrer en tant que modèle… ) Ce point de départ vous sera alors disponible en allant Fichier> Nouveau à partir d'un modèle… , complète avec tous les morceaux que vous avez laissés là.
Illustrator ne vient pas avec des outils de texte factices. Certains scripts valent la peine d’être utilisés, mais le moyen le plus simple d’obtenir un texte factice dans votre Illustrator Wireframes est d’utiliser TextExpander..
Remarque: si vous êtes un utilisateur Windows, PhraseExpress offre des fonctionnalités similaires à TextExpander
Ajoutez une série d'extraits de texte que vous utilisez fréquemment pour les structures filaires (telles qu'un gros en-tête, un en-tête court, une copie de corps de longueur variable, du texte de bouton typique, des éléments de menu, etc.) afin qu'ils soient facilement disponibles dans Illustrator..
En définissant une phrase clé pour chaque extrait, TextExpander remplacera cette phrase par votre contenu à chaque frappe, ce qui vous fera gagner du temps. Vous pouvez également utiliser les options de dossier pour vous assurer que ces extraits prennent effet uniquement dans Illustrator, si vous souhaitez.
Pour en savoir plus sur l'optimisation de votre flux de travail TextExpander, consultez Master TextExpander avec ces conseils et astuces utiles..
Le fait de pouvoir visualiser rapidement les changements et les idées est au cœur de la structure en encadrements, mais cela peut conduire à une énorme pile de fichiers désorganisés si vous ne faites pas attention. La clé est de sauvegarder aux étapes importantes et avec les conventions de nommage des fichiers logiques.
Par exemple, nous pourrions vouloir commencer chaque nom de fichier par le nom de la page sur laquelle nous travaillons. Ensuite, il peut être judicieux d’utiliser un nom de variante, après lequel le numéro de version: page-variant-version.ai
Par exemple, nous pourrions travailler sur une page de destination; qui se concentre sur la promotion d’une campagne de courrier électronique ou d’un livre électronique. Nous pourrions avoir des noms de fichiers comme:
Cela permet non seulement de garder les dossiers de projet organisés, mais il s’agit d’une forme de contrôle de version manuel. Matt Smith discute plus de l'idée dans son article Wireframing With Illustrator et InDesign.
En poussant plus loin l’idée de la gestion des versions, l’enregistrement direct de vos fichiers dans Dropbox supprimera complètement cette tâche de votre liste de tâches. Même le forfait gratuit de Dropbox stockera une copie de vos fichiers chaque fois que vous les enregistrez, pendant trente jours..
De même, Layervault offre un plan similaire avec son plan libre..
Dans les deux cas, cela est particulièrement utile si vous collaborez avec une équipe. Avoir tous les membres travaillant à partir d'un emplacement central, avec la possibilité de restaurer n'importe quelle version si quelqu'un fait quelque chose d'étrange, est idéal pour le travail d'équipe.
Bon nombre de ces conseils sont entièrement personnels à mon propre flux de travail et peuvent ne pas traduire parfaitement votre propre façon de faire les choses. Cependant, j'espère qu'ils susciteront au moins un peu de curiosité, pour vous faire réfléchir à la façon dont vous créez des mises en page Web filaires. Si vous avez d'autres suggestions à faire, veuillez les partager dans les commentaires.!
Accentsconagua