Advertisement
  1. Design & Illustration
  2. UX
Design

10 Conseils pour réaliser des wireframes avec Illustrator

by
Length:MediumLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

Adobe Illustrator connaît un come-back dans le monde du web design. Non seulement le SVG devient couramment utilisé en ligne, mais de plus et plus de designers se servent de vecteurs pour le wireframing. Les conseils suivants vous aideront à profiter au maximum d’Illustrator comme outil de wireframing.

Le wireframing porte sur 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 de l'informations et de l’expérience.

1. Passez au monochrome

Les wireframes indiquent clairement la hiérarchie sur une page web ; visuellement, ils montrent l’ordre dans lequel les utilisateurs doivent traiter l’information disponible. Si vous souhaitez que les utilisateurs d traitent le titre avant de cliquer le bouton « Acheter maintenant », le titre a besoin de « primer » sur le bouton en demandant plus d’attention.

Cette hiérarchie visuelle peut être définie de diverses 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, le contraste et une gamme d’autres choses, mais procéder ainsi dans un wireframe rend seulement les choses plus confuses.

En enlevant la couleur de l’équation, la relation visuelle définie par la position, la taille et (si vous voulez passer une étape supplémentaire) le contraste, est beaucoup plus claire.

La chaude palette monochrome des Kits UX de Eric Miller Design

Nous ne construisons pas de jolis, pixel-perfect kits UI ici. Tenez-vous en à une gamme limitée de gris, puis utilisez la couleur juste pour les étiquettes et les notes.

2. Gardez les calques à des fins spécifiques

Au sujet des étiquettes, des notes et des commentaires, c’est une bonne idée de placer chacun dans un calque dédié. Il en va de même pour toute autre élément avec une utilité précise​ ; comme le comportement, l'interaction, les gestes et ainsi de suite.

Placez les visuels dans un calque, le comportement dans un autre et les étiquettes dans un autre, afin que vous puissiez facilement alterner leur visibilité lorsque nécessaire.

3. Tirez parti des symboles

D.R.Y. est généralement utilisé comme un terme de programmation, mais s’applique également au flux de travail du design. Dans tout wireframe donné, nous allons utiliser et réutiliser certains objets. Transformer ces objets en symboles et toutes les modifications apportées à l’un se refléteront instantanément sur le reste.

Par exemple, voici un champ simple de formulaire :

Faisons le glisser dans le panneau Symboles (Commande + Maj + F11)

Nous pouvons maintenant tirer ce symbole de la palette Symboles, autant de fois que nous le voulons, vers la plan de travail. En double-cliquant sur l’un d’eux, nous l'isolons (un peu comme les objets groupés) ainsi nous pouvons le modifier. Toutes les modifications que nous apportons, dans ce cas arrondir les angles du rectangle, s’appliqueront à chacune et à l'ensemble des symboles champ de formulaire que nous avons utilisés.

Une fois que nous avons une collection de symboles, nous pouvons également les enregistrer en tant qu'ensemble :

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

Si vous souhaitez en savoir plus sur la palette Symboles, jetez un oeil à Quick Tip: Working With Symbols in Adobe Illustrator.

4. Les flèches sont parfaites pour pointer

Une super astuce consiste à tirer parti des contours pointes de flèches, quelque chose de facilement disponibles dans Illustrator tout droit sorti de la boîte depuis CS5. Les wireframes sont l’occasion idéale pour décrire visuellement les interactions, le flux d’application, la navigation et le mouvement.

Ces jours-ci nous pouvons facilement ajouter des flèches aux contours, directement depuis le panneau Contours.

Nous pouvons même modifier le fichier source « Arrowheads.ai » d'Illustrator,  comme expliqué par Ryan Cornwell et ajouter nos propres flèches au mélange.

Remarque : Fâcheusement, l’outil pipette n’applique pas les pointes de flèche en même temps que d’autres styles de contour, ce n’est donc pas aussi facile que ça devrait l'être de reproduire l’effet que vous avez choisi. Mais, elles demeurent parfaites pour le wireframing.

5. Alignez sur la grille pour un espacement et un dimensionnement unifiés

À bien des égards, ceci fait suite à la non utilisation de couleur. Unifier les dimensions et l’espacement supprime un élément de distraction des wireframes, nous aidant à nous concentrer visuellement sur ce qui est important.

Peu importe si les dimensions exactes ne reflètent pas ce que sera l’interface utilisateur une fois terminée ; tant que la hiérarchie et les relations restent vraies, nous sommes bons.

Appliquez une grille à votre plan de travail en allant sur Affichage > Afficher la grille. Sélectionner Affichage > Magnétisme de la grille vous aidera à positionner vos objets avec précision.

Pour spécifier exactement ce à quoi vous voulez que votre grille ait l'air (et n’oubliez pas, vous n’êtes pas ici pour les petits détails) allez dans Illustrator > Préférences > Repères & grilles. Une fois là, vous pouvez définir la distance entre les lignes du quadrillage, spécifiez alors combien de subdivisions vous voulez entre ces lignes.

Remarque : N’hésitez pas à colorer votre grille en autre chose que le gris ; elle ne fera pas partie du produit final.

6. Utilisez des styles graphiques pour des boutons flexibles

Selon le niveau de fidélité (le niveau de ressemblance avec le site Web final que vous visez), vous devrez peut-être y utiliser du texte réel, par exemple, les boutons. Pour obtenir ces boutons qu'ils augmentent ou rétrécissent en fonction du contenu à l'intérieur, n'utilisez pas des objets, utilisez les styles graphiques.

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

Maintenant ouvrons la palette Aspect en allant dans Fenêtre > Aspect.

En utilisant la palette apparence, vous pouvez ajouter des remplissages multiples à un seul objet. Nous pouvons arranger ces remplissages dans l’ordre dans lequel nous tenons à les voir s'afficher ; dans cette image, vous pouvez voir plusieurs remplissages, tous entassés les uns sur les autres.

Pour l’instant, nous avons juste besoin deux remplissages, nous allons donc ajouter un remplissage noir pour le texte, puis une couleur plus pâle pour le fond.

Actuellement, nous ne voyons pas le fond gris pâle, parce qu'il est exactement de la même forme que celle du remplissage du dessus. Cependant, nous pouvons isoler et manipuler chaque remplissage séparément. Sélectionnez le remplissage de fond dans le volet Aspect, puis allez à Effet > Convertir en forme > Rectangle arrondi...

Entrer quelques paramètres, quoi que vous voyez s'accorder, assurez-vous juste que la taille est relative à l’objet auquel nous allons l'appliquer.

Le remplissage gris pâle sur le dessous prend désormais la forme d’un rectangle arrondi, en rapport avec la taille du texte. Un bouton ! Pour appliquer cette apparence à d’autres objets, ouvrez le volet Styles et faites glisser tout le bouton à l'intérieur. Son apparence sera enregistrée comme un style que vous pouvez réutiliser.

Par exemple, voici une longue chaîne de texte. 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.

7. Paramétrez des plans de travail couramment utilisés

Vitesse est le nom du jeu avec le wireframing ! Gribouiller une mise en page, avancer, en griffonner une autre, avancer. Il est donc logique d’avoir un point de départ prêt à l’emploi, auquel vous pouvez accéder facilement. Vous pourriez être à l'aise de travailler mieux sur un plan de travail massif tout d’abord, puis importer les objets finalisés dans un fichier séparé, ou vous pourriez préférer travailler directement avec les plans de travail correctement dimensionné.

Ici, par exemple, c'est une mise en page avec un écran d’iPad (1536x2048px) et quatre écrans d'iPhone 4S (640x960px), mais vous pouvez préparer un fichier avec n’importe quel nombre d’exemples d’écran d'appareil. Définissez vos dimensions par défaut manuellement ou choisissez n’importe laquelle des pré-configurations disponibles parmi les Options de plan de travail :

Incluez tout repères courants, noms de calques, ensemble de symboles etc. que vous pourriez utiliser, puis enregistrez le tout comme un modèle pour une utilisation future (Fichier > Enregistrer comme modèle..) Ce point de départ sera alors à votre disposition en allant dans Fichier > Nouveau à partir d'un modèle.., complet avec tous les éléments que vous y aviez prédéfinis.

8. Utilisez TextExpander pour le texte de remplissage

Illustrator ne vient pas avec des outils de texte factice quelconques. Il existe des scripts qui valent la peine de jouer avec, mais la meilleure façon d’obtenir le texte factice dans vos maquettes Illustrator est d’utiliser TextExpander.

Remarque : Si vous êtes un utilisateur de Windows, PhraseExpress offre des fonctionnalités similaires à TextExpander

Ajouter une série d’extraits de texte que vous trouver vous-même couramment pour les wireframes (comme une grand titre, un titre court, des corps de texte de différentes longueurs, texte de bouton typique, éléments de menu et ainsi de suite) afin qu’ils soient facilement disponibles dans Illustrator.

En définissant une phrase clé pour chaque extrait, TextExpander remplacera cette expression par votre contenu chaque fois que vous tapez, vous économisant des sacs de temps. Vous pouvez également utiliser les options de dossier pour vous assurer que ces extraits ne prendront effet que dans Illustrator, si vous le souhaitez.

Pour en savoir plus sur l’optimisation de votre flux de travail TextExpander, jetez un oeil à Master TextExpander With These Helpful Tips & Tricks.

9. Pratiquez le nommage logique de fichier

Être capable de visualiser rapidement des changements et des idées est au cœur du wireframing, mais cela peut conduire à une énorme pile de dossiers désorganisés si vous ne faites pas attention. La clé est d’enregistrer au étapes importantes et avec les conventions de nommage logique de fichier.

Par exemple, nous pourrions vouloir commencer chaque nom de fichier avec le nom de la page, sur laquelle nous travaillons. Alors il pourrait être judicieux d’utiliser une sorte de nom de variante, suivi du numéro de version : page-variante-version.ai

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

Non seulement cela garde les dossiers du projet organisés, mais cela agit comme une forme de contrôle de version manuelle. Matt Smith discute l’idée en profondeur dans son article Wireframing With Illustrator and InDesign.

10. Enregistrez dans Dropbox pour du contrôle de version simplifié

Passez au niveau suivant de l’idée du contrôle de versions, enregistrez vos fichiers directement dans Dropbox supprimera complètement cette tâche dans votre liste à faire. Même le plan gratuit de Dropbox va stocker une copie de vos fichiers chaque fois que vous enregistrez, pendant trente jours.

De même, Layervault offre une incrédibilité similaire dans son plan gratuit.

Dans les deux cas, ceci est particulièrement utile si vous êtes en collaboration avec une équipe. Avoir tous les membres travaillant depuis 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

Beaucoup de ces conseils sont tout à fait personnels à mes propres flux de travail et ne pourraient pas s'appliquer parfaitement à votre façon de faire les choses. Cependant, j’espère qu’ils déclenchent au moins une certaine curiosité, pour vous faire réfléchir sur la façon dont vous travaillez sur vos wireframes. Si vous avez d’autres conseils de votre cru, s’il vous plaît partagez-les dans les commentaires !

Lectures supplémentaires

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.