Adobe Illustrator connaît un retour en force dans le monde de la conception web. Non seulement le SVG devient couramment utilisé en ligne, mais de plus en plus de concepteurs utilisent des vecteurs pour le wireframing. Les conseils suivants vous aideront à tirer le meilleur parti d’Illustrator comme outil de wireframing.

Le wireframing consiste à travailler rapidement et à itérer rapidement. L’objectif n’est pas de créer des interfaces attrayantes ; votre priorité numéro un est de concevoir l’information et l’expérience.

1. Allez monochrome

Les wireframes rendent claire la hiérarchie sur une page web ; ils démontrent visuellement l’ordre dans lequel les utilisateurs doivent traiter l’information disponible. Si vous voulez que les utilisateurs traitent le titre avant d’appuyer sur le bouton « acheter maintenant », le titre doit « éclipser » le bouton en exigeant plus d’attention.

Cette hiérarchie visuelle peut être définie de plusieurs façons. Nous pouvons utiliser la taille pour rendre le titre plus percutant, nous pouvons utiliser le positionnement (en le plaçant avant le bouton). Nous pourrions utiliser la couleur, le contraste et toute une série d’autres choses, mais le faire dans un wireframe 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 aller plus loin) le contraste, est beaucoup plus propre.

Nous ne construisons pas de jolis kits UI parfaits 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.

2. Gardez des couches à des fins spécifiques

En parlant des étiquettes, des notes et des commentaires, c’est une excellente idée de placer chacun d’eux sur une couche dédiée. Il en va de même pour tout ce qui a un but spécifique ; comme le comportement, l’interaction, les gestes et ainsi de suite.

Placez les visuels sur une couche, le comportement sur une autre, et les étiquettes sur une autre, de sorte que vous puissiez facilement basculer leur visibilité lorsque cela est nécessaire.

3. Exploitez les symboles

D.R.Y. est généralement utilisé comme un terme de programmation, mais il est tout aussi applicable au flux de travail de conception. Dans tout wireframe donné, nous allons utiliser et réutiliser certains objets. Transformez ces objets en symboles et toute modification apportée à l’un d’entre eux sera instantanément répercutée sur les autres.

Par exemple, voici un champ de formulaire simple :

Déplaçons-le dans le volet Symboles (Shift + Commande + F11)

Nous pouvons maintenant tirer ce symbole du volet Symboles, autant de fois que nous le souhaitons, sur la maquette. En double-cliquant sur l’un d’entre eux, nous l’isolerons (un peu comme les objets groupés) afin de pouvoir le modifier. Toutes les modifications que nous apportons, dans ce cas l’arrondissement des 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 comme un ensemble:

Cela nous permettra de les charger dans d’autres fichiers à l’avenir.

Si vous souhaitez en savoir plus sur la palette de symboles, jetez un coup d’œil à Conseil rapide : Travailler avec des symboles dans Adobe Illustrator.

4. Les pointes de flèche sont parfaites pour pointer

Une excellente astuce consiste à tirer parti des pointes de flèche de trait, quelque chose de facilement disponible dans Illustrator directement depuis CS5. Les wireframes sont l’occasion idéale de décrire visuellement les interactions, le flux des applications, la navigation et le mouvement.

De nos jours, nous pouvons facilement ajouter des pointes de flèche aux traits, directement depuis le volet Stroke.

Nous pouvons même modifier le fichier source Illustrator « Arrowheads.ai », comme l’explique Ryan Cornwell, et ajouter nos propres pointes de flèche au mélange.

Note : De manière ennuyeuse, l’outil compte-gouttes n’applique pas les pointes de flèches en même temps que les autres styles de traits, il n’est donc pas aussi facile qu’il pourrait l’être de dupliquer l’effet que vous avez choisi. Mais tout de même, ils sont parfaits pour le wireframing.

5. Snap to Grid pour un espacement et un dimensionnement unifiés

À bien des égards, cela fait suite à la non-utilisation de la couleur. L’unification des dimensions et de l’espacement supprime un élément de distraction des wireframes, ce qui nous aide à nous concentrer visuellement sur ce qui est important.

Il importe peu que les dimensions exactes ne reflètent pas ce que sera l’IU plus tard ; tant que la hiérarchie et les relations restent vraies, nous sommes prêts à partir.

Appliquez une grille à votre Artboard en allant sur View > Show Grid. Sélectionner View > Snap to Grid vous aidera à positionner vos objets avec précision.

Pour spécifier exactement ce à quoi vous voulez que votre grille ressemble (et rappelez-vous, vous n’allez pas chercher des détails minuscules ici) allez dans Illustrator > Preferences > Guides & Grid…. Une fois là, vous pouvez définir la distance entre les lignes de la grille, puis indiquer le nombre de subdivisions que vous voulez à l’intérieur de ces lignes.

Note : N’hésitez pas à colorer votre grille dans autre chose que du gris ; cela ne fera pas partie du produit final.

6. Utilisez des styles graphiques pour des boutons flexibles

Selon le niveau de fidélité (degré de fidélité au site web final que vous visez), vous pouvez avoir du texte réel à l’intérieur, par exemple, des boutons. Pour que ces boutons grandissent et rétrécissent en fonction du contenu qu’ils contiennent, n’utilisez pas d’objets, mais des styles graphiques.

Commençons par une chaîne de texte factice.

Ouvrons maintenant le volet Apparence en allant dans Fenêtre > Apparence.

En utilisant le volet Apparence, vous pouvez ajouter plusieurs remplissages à un objet. Nous pouvons superposer ces remplissages dans l’ordre dans lequel nous voulons qu’ils s’affichent ; dans cette image, vous pouvez en voir plusieurs, tous empilés les uns sur les autres.

Pour l’instant, nous avons juste besoin de deux remplissages, alors ajoutons un remplissage sombre pour le texte, puis une couleur plus pâle pour le fond.

En ce moment, nous ne pouvons pas voir le fond gris pâle, car il a exactement la même forme que le remplissage supérieur. Cependant, nous pouvons isoler et manipuler chaque remplissage séparément. Sélectionnez le remplissage du bas dans le volet Apparence, puis allez dans Effet > Convertir en forme > Rectangle arrondi…

Entrez quelques paramètres, ceux que vous jugez appropriés, assurez-vous simplement que la taille est relative à l’objet auquel nous appliquons ceci.

Le remplissage gris pâle du bas a maintenant pris la forme d’un rectangle arrondi, relatif à la taille du texte. Un bouton ! Pour appliquer cette apparence à d’autres objets, ouvrez le volet Styles graphiques et faites-y glisser l’ensemble du bouton. Ses apparences seront enregistrées comme 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éé (que j’ai double-cliqué et renommé) pour l’appliquer instantanément.

7. Configurez quelques tableaux couramment utilisés

La rapidité est le nom du jeu avec le wireframing ! Griffonner une mise en page, passer à autre chose, en griffonner une autre, passer à autre chose. Il est donc logique d’avoir un point de départ prêt à l’emploi auquel vous pouvez accéder facilement. Vous trouverez peut-être que vous travaillez mieux sur un artboard massif d’abord, en tirant les objets finalisés dans un fichier séparé, ou vous préférerez travailler directement avec des artboards de taille correcte.

Voici, par exemple, une mise en page avec un écran d’iPad (1536x2048px) et quatre écrans d’iPhone 4S (640x960px), bien que vous puissiez préparer un fichier avec n’importe quel nombre d’exemples d’écrans d’appareils. Soit vous définissez vos dimensions préférées manuellement, soit vous choisissez parmi l’un des préréglages disponibles dans les options du tableau d’art :

Incluez tous les guides communs, les noms de calques, les jeux de symboles, etc. que vous pourriez utiliser, puis enregistrez le tout comme modèle pour une utilisation future (Fichier > Enregistrer comme modèle…) Ce point de départ sera ensuite disponible pour vous en allant Fichier > Nouveau à partir du modèle…, complet avec tous les morceaux que vous avez laissé là.

8. Utilisez TextExpander pour le texte factice

Illustrator n’est pas livré avec des outils de texte factice. Il existe quelques scripts avec lesquels il vaut la peine de jouer, mais la façon la plus simple d’obtenir du texte factice dans vos Wireframes Illustrator est d’utiliser TextExpander.

Note : si vous êtes un utilisateur Windows, PhraseExpress offre une fonctionnalité similaire à celle de TextExpander

Ajoutez une série d’extraits de texte que vous vous retrouvez à utiliser couramment pour les wireframes (comme un grand titre, un titre court, un corps de texte de différentes longueurs, un texte de bouton typique, des éléments de menu et ainsi de suite) afin qu’ils soient facilement disponibles depuis Illustrator.

En définissant une phrase clé pour chaque extrait, TextExpander remplacera cette phrase par votre contenu chaque fois que vous la taperez, ce qui vous fera gagner des sacs de temps. Vous pouvez également utiliser les options de dossier pour vous assurer que ces extraits ne prennent effet que dans Illustrator, si vous le souhaitez.

Pour en savoir plus sur l’optimisation de votre flux de travail TextExpander, jetez un coup d’œil à Maîtriser TextExpander avec ces conseils utiles & Trucs.

9. Pratiquez le nommage logique des fichiers

Pouvoir visualiser rapidement les changements et les idées est au cœur du wireframing, mais cela peut conduire à une énorme pile de fichiers désorganisés si vous ne faites pas attention. La clé est de sauvegarder à des étapes significatives et avec des conventions de noms de fichiers logiques.

Par exemple, nous pourrions vouloir commencer chaque nom de fichier par le nom de la page sur laquelle nous travaillons. Ensuite, il pourrait être judicieux d’utiliser une sorte de nom de variante, après quoi le numéro de version : page-variant-version.ai

Par exemple, nous pourrions travailler sur une page de destination ; une page qui se concentre sur la promotion soit d’une campagne d’emailing, soit d’un ebook. Nous pourrions avoir des noms de fichiers comme:

Non seulement cela permet de garder les dossiers de projet organisés, mais cela agit comme une forme de versionnement manuel. Matt Smith discute davantage de cette idée dans son article Wireframing With Illustrator and InDesign.

10. Enregistrez dans Dropbox pour un versionnage facile

En poussant l’idée du versionnage encore plus loin, l’enregistrement de vos fichiers directement dans Dropbox supprimera complètement cette tâche de votre todo list. Même le plan gratuit de Dropbox stockera une copie de vos fichiers chaque fois que vous les enregistrez, pendant trente jours.

De même, Layervault offre une awesomeness similaire dans son plan gratuit.

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.

Conclusion

Plusieurs de ces conseils sont entièrement personnels à mon propre flux de travail et peuvent ne pas se traduire parfaitement dans votre propre façon de faire les choses. Cependant, j’espère qu’ils susciteront au moins un peu de curiosité, pour vous amener à réfléchir à votre façon de concevoir des mises en page Web. Si vous avez d’autres astuces de votre cru, n’hésitez pas à les partager dans les commentaires !

Lectures complémentaires

• Wireframing With InDesign and Illustrator
• Wireframing With Illustrator and InDesign (différence subtile !)
• Guide du débutant pour le wireframing
• Illustrator and Arrowheads

.