30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. UX
Webdesign

Guide du débutant pour le wireframing dans Omnigraffle

by
Length:MediumLanguages:
This post is part of a series called UX Foundations.
A Beginner’s Guide to Wireframing
Defining And Applying Personas to UX Design

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

Omnigraffle est un outil qui peut être utilisé à des fins multiples, mais aujourd'hui, nous allons explorer comment l'utiliser pour le wireframing. J'ai utilisé toutes sortes d'applications pour le wireframing et, s'il n'est pas parfait, Omnigraffle a la meilleure combinaison de capacités et d'efficience pour mon flux de travail.

La chose la plus importante qu'il ne possède pas est est une grande interactivité pour le prototypage. Vous pouvez produire des prototypes cliquables, mais c'est le plus loin que vous pouvez aller. Vous pouvez faire des choses comme afficher/masquer les calques, mais cela ne fonctionne exclusivement qu'au sein d'Omnigraffle.

L'autre inconvénient est que c'est une application uniquement disponible sur Mac.

Quoi qu'il en soit, malgré ses quelques lacunes, c'est un outil fantastique de wireframing. Explorons le programme, voyons à quel point Omnigraffle est puissant et comment nous pouvons l'utiliser pour mettre sur pied des wireframes stellaires.

L'Interface

Les éléments suivants sont ceux que nous allons étudier dans ce tutoriel. Si vous avez des questions ou d'autres éléments sur lesquels vous souhaitez avoir davantage d'informations, laissez un commentaire et je ferai de mon mieux pour vous fournir cette information.

  • Plan de travail et barre latérale de calques
  • Fenêtre de pochoirs
  • L'inspecteur
    • Éditeurs de style
      • Remplissage
      • Contours
      • Ombre
      • Image
      • Texte
    • Alignement/propriétés
    • Interactivité

Plans de travail et calques

Les plans de travail et les calques servent à voir l'organisation complète de votre document et de son contenu. Ils montrent à la fois la structure du contenu et la structure hiérarchique du document pour vous aider à le gérer et à l'organiser très facilement.

Canvas Layer Sidebars

Les plans de travail montrent comment vous configurez vos pages. Ils peuvent accueillir toute sorte de contenu dont vous avez besoin. Je commence généralement avec une page de garde, quelques diagrammes de flux, et des informations sur les utilisateurs et le problème que je suis en train de résoudre. Ensuite je commence mes wireframes réels.

Canvas Sidebar

Les calques sont utilisés pour l'organisation dans un plan de travail. Si vous êtes familier avec Photoshop ou Illustrator, cela fonctionne de la même manière dans Omnigraffle. Dans les calques, vous pouvez organiser et déplacer des éléments individuels. Déplacer les calques de haut en bas aidera à créer une structure de page gérable qui s'affiche comme vous le souhaitez.

Layers Sidebar

Avez-vous quelque chose comme une barre de navigation, un fond ou un pied de page qui s'étend sur plusieurs pages sans changer ? Utilisez un calque partagé dans ce cas. Cela vous permet de réutiliser facilement un calque à travers plusieurs plans de travail. Cela vous permet également de modifier facilement ce calque et de voir ces changements se répercuter à travers tous les plans de travail dans lesquels le calque partagé est utilisé.

N'oubliez pas, cependant, qu'il doit conserver la même position dans l'ensemble de tous les plans de travail. Si cela pose problème, alors utilisez des objets partagés qui sont décrits plus loin dans l'article.

Shared Layers

Formes et texte

Formes

Les formes sont un outil essentiel lors de la création de wireframes. Je conserve généralement les miens assez basiques avec des rectangles, des cercles et des triangles. Créer une mise en pages à l'aide de formes simple peut aider à vous faire une idée décente de la manière dont la page va se ressentir et couler. En dehors de l'iconographie vous aurez rarement besoin d'autre chose que du texte et des formes simples pour vos wireframes.

Shape

Il y a plusieurs propriétés que vous pouvez modifier selon la forme.

La couleur de remplissage

Shape Fill

La forme en cours et le contour (couleur, taille du contour, etc.)

Shape Outline

Ombre

Shadow

Propriétés géométriques

Shape Properties

Vous pouvez également ajouter des formes à vos formes préférées. C'est très pratique lorsque vous avez une forme qui possède des propriétés particulières que vous utilisez encore et encore. Il suffit de sélectionner la forme que vous voulez ensuite sélectionnez Ajouter la sélection actuelle aux styles préférés dans le menu formes.

Favorite Shape

Texte

Vous pouvez ajouter du texte dans une forme et l'y aligner. Ce texte agit alors comme une propriété de la forme et se déplace en tandem avec cette dernière.

Text within shape

Vous pouvez aussi avoir du texte autonome. En dehors de votre utilisation standard, cela peut aussi être très pratique pour les formes lorsque vous avez besoin de plusieurs morceaux de texte placés dans la forme.

Text outside shape

Il y a également de nombreux outils typiques pour mettre votre texte en forme. Omnigraffle étant un outil de design, il rend également des choses comme l'approche, le crénage et les marges très faciles à manipuler.

Text Edit

Pochoirs et gabarits

Les pochoirs et les gabarits sont d'excellents outils pour les éléments que vous réutiliserez. Les gabarits vous permettent d'avoir un document déjà configuré et prêt à être rempli. J'ai un gabarit spécifique dont je me sers pour mon travail, mais Omnigraffle est livré avec quelques-uns pré-chargés. Bien sûr, il est facile de créer le vôtre. Les pochoirs sont des éléments pré-stylés tels que des boutons, du texte, des icônes et d'autres éléments individuels pour vos wireframes.

Templates

Vous pouvez également modifier les pochoirs et les gabarits. Pour les pochoirs vous cliquez juste sur le pochoir et ensuite allez dans le menu en haut et cliquez sur "modifier le pochoir". Ceci fait apparaître le pochoir et vous pouvez le modifier à l'instar de tout autre document Omnigraffle. Il en va de même pour les gabarits, que vous pouvez modifier à l'instar de tout autre document Omnigraffle.

Edit Stencil

Vous pouvez créer vos propres pochoirs ou choisir parmi plusieurs ensembles déjà disponibles en téléchargement sur Internet. J'en utilise certains de Graffletopia.com. J'utilise habituellement ceux-là pour des choses spécifiques comme des personnages en bâtonnets ou des éléments mobiles. Mes ensembles principaux d'éléments les plus courants sont :

Ceux-ci vous permettront de bâtir très rapidement de fantastiques wireframes.

Stencils

Objets partagés

En avant pour quelques bizarreries

Pendant longtemps, je pensais que l'absence d'objets partagés était un gros inconvénient dans Omnigraffle, mais Omnigraffle possède actuellement des objets partagés. Le problème est que la façon dont vous les créez et les modifiez n'est pas saillante, quoi qu'il en soit. La plupart du temps les calques partagés suffisent, bien que parfois vous vouliez que l'objet soit le même mais dans une position différente sur une autre page. Cela ne fonctionne pas sur des calques partagés. Parcourons les étapes nécessaires à la création d'objets partagés.

Tout d'abord créez votre objet. Il peut être aussi compliqué que vous le souhaitez. Regroupez tous les éléments ensemble pour créer un objet. Sélectionnez l'objet, puis sélectionnez Copier en tant que PDF dans le menu Edition.

Copy as PDF

Maintenant, quelques bizarreries. Supprimez l'original et collez cette nouvelle copie. Vous devez ensuite double cliquer dessus pour le modifier. Il s'ouvrira ensuite comme un nouveau document Omnigraffle. Ne vous inquiétez pas, modifiez-le simplement et enregistrez-le. Ensuite, vous pouvez fermer ce document et revenir à l'original. Toutes les modifications seront prises en compte dans toutes les instances que vous collez dans le document.

Alignement et propriétés du document

Il y a aussi quelques petites choses non essentielles à votre wireframing, mais en être conscient rendra certainement votre vie plus facile. Ceci inclut l'alignement, l'espacement, et les propriétés du plan de travail.

L'alignement est quelque chose que j'utilise tout le temps. Tout ce que vous devez faire c'est, cliquer sur le côté, sur le coin ou le centre de l'objet que vous souhaitez aligner et puis cliquer sur le bouton d'alignement horizontal ou vertical. Ce qui aligne ainsi les objets sélectionnés. Le premier objet sélectionné va servir d'ancre à l'alignement, alors soyez-en conscient.

Alignment

Espacer des éléments est aussi important. Vous pouvez régler les distances d'espacement spécifiques et ensuite les appliquer aux éléments sélectionnés. Cependant, ce que je fais plus communément c'est utiliser simplement les boutons rapides d'espacement. Ils prennent tous les éléments sélectionnés et les espacent uniformément entre le premier et le dernier élément sélectionné. Donc, il suffit de positionner vos deux éléments les plus éloignés où vous le souhaitez, sélectionner tous les éléments dont vous avez besoin et cliquez sur le bouton. Bingo ! Vos éléments sont jolis et régulièrement espacés.

Le paramètre par défaut de l'unité de mesure que j'ai vu habituellement a les propriétés du plan de travail réglés en pouces. En numérique, ce n'est pas très courant donc basculer à pixels est beaucoup plus utile. La meilleure façon de régler cela est de le faire au sein de votre gabarit. Sélectionnez tous les plans de travail puis changer les unités de la règle de pouces à pixels. Il existe plusieurs autres options si bien bien sûr vous ne souhaitez pas travailler dans des unités de mesure différentes.

Canvas Properties

Interaction

Si vous avez besoin d'une interactivité sommaire pour vos wireframes alors Omnigraffle vous couvre. Tout ce que vous devez faire est de sélectionner l'élément qui sera interactif puis ouvrir le menu Actions dans l'Inspecteur. Vous pouvez alors voir l'élément effectuer les actions suivantes sur un clic :

  1. Ouvrir une URL
  2. Ouvrir un fichier
  3. Exécuter un Script
  4. Bondir ailleurs
  5. Afficher/masquer des calques

Je n'ai jamais utilisé que les options d'URL et bondir ailleurs. Bondir ailleurs est le plus utile, car il transforme les wireframes en prototypes cliquables qui se déplacent de plan de travail en plan de travail.

Actions

Avertissement : je n'ai jamais vu l'option Afficher/masquer des calques fonctionner dans un fichier PDF. Elle ne fonctionne que dans un mode interactif au sein même d'Omnigraffle (en maintenant la touche B du clavier enfoncée).

Conclusion

OmniGraffle est un excellent outil dont beaucoup de UXers se servent quotidiennement. Il crée de superbes wireframes et fournit les moyens de les créer assez rapidement.

Si vous êtes en UX ou simplement à la recherche d'un excellent outil pour mettre sur pied des wireframes alors essayez Omnigraffle. Encore une fois, faites-le moi savoir dans les commentaires si vous avez des questions, et je ferai de mon mieux pour répondre. Bonne chance dans le wireframing !

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.