Share
Omnigraffle est un outil qui peut être utilisé à de nombreuses fins, mais nous verrons aujourd’hui comment l’utiliser pour la wireframing. J'ai utilisé toutes sortes d'applications pour la trame en fils et, bien que ce ne soit pas parfait, Omnigraffle offre la meilleure combinaison de fonctionnalités et d'efficacité pour mon flux de travail..
La plus grande chose c'est ne pas ont une grande interactivité pour le prototypage. Vous pouvez produire des prototypes cliquables, mais c'est à peu près tout ce que vous pouvez faire. Vous pouvez faire des choses comme afficher / masquer les calques, mais ceux-ci ne fonctionnent que dans Omnigraffle.
L'autre inconvénient est qu'il est uniquement Mac.
Cependant, malgré ses quelques lacunes, il s’agit d’un fantastique outil de wireframing. Parcourons le programme, examinons la puissance d'Omnigraffle et comment l'utiliser pour assembler des structures filaires stellaires..
Les éléments suivants sont ceux que nous allons examiner dans ce tutoriel. Si vous avez des questions ou d’autres éléments sur lesquels vous souhaitez des informations complémentaires, laissez un commentaire et je ferai de mon mieux pour vous fournir ces informations..
Les barres latérales Toile et Couches permettent d’afficher l’organisation de votre document complet et son contenu. Ils montrent à la fois le contenu et sa structure hiérarchique pour vous aider à gérer et à organiser très facilement.
Les toiles sont comment vous configurez vos pages. Ils peuvent héberger tout type de contenu dont vous avez besoin. Je commence généralement par une page de couverture, des diagrammes de flux et des informations sur les utilisateurs et le problème que je tente de résoudre. Puis je commence mes wireframes.
Les calques sont utilisés pour organiser dans une toile. Si vous connaissez Photoshop ou Illustrator, cela fonctionne de la même manière dans Omnigraffle. Dans les couches, vous pouvez organiser et déplacer des éléments individuels. Déplacer les couches de haut en bas aidera à créer une structure de page gérable qui affiche la manière dont vous en avez besoin.
Avez-vous quelque chose comme une barre de navigation, un arrière-plan ou un pied de page qui s'étend sur plusieurs pages sans changer? Ensuite, utilisez une couche partagée. Cela vous permet de réutiliser facilement une couche sur plusieurs toiles. Cela vous permet également de changer facilement ce calque et de le transférer en cascade dans toutes les toiles dans lesquelles le calque partagé est utilisé..
Gardez toutefois à l'esprit qu'il doit conserver la même position sur toutes les toiles. Si cela pose un problème, utilisez les objets partagés décrits plus loin dans l'article..
Les formes sont votre outil le plus crucial lors de la création de structures filaires. En général, je garde le mien assez basique avec des rectangles, des cercles et des triangles. Créer une mise en page dans des formes de base peut vous aider à avoir une idée décente de la façon dont la page se sentira et coulera. Autre que l'iconographie, vous avez rarement besoin de quoi que ce soit en dehors des formes de base et du texte pour vos structures filaires..
Il y a plusieurs propriétés que vous pouvez changer concernant une forme.
La couleur de remplissage
La forme réelle et le contour (couleur, taille du trait, etc.)
Ombre
Propriétés de la géométrie
Vous pouvez également ajouter des formes à vos formes préférées. Cela est pratique lorsque vous avez une forme qui a des propriétés particulières que vous utilisez encore et encore. Il suffit de sélectionner la forme que vous voulez, puis sélectionnez Ajouter la sélection actuelle aux styles favoris dans le menu Formes.
Vous pouvez ajouter du texte dans une forme et l'aligner dans une forme. Ce texte agit alors comme une propriété de la forme et se déplace avec cette forme..
Vous pouvez également avoir un texte autonome. Outre votre utilisation standard, cela est également utile pour les formes lorsque vous avez besoin de plusieurs morceaux de texte positionnés dans la forme..
Il existe également de nombreux outils typiques pour mettre votre texte en forme. Comme Omnigraffle est un outil de conception, il facilite également la gestion des tâches telles que l’alignement, le crénage et les marges..
Les gabarits et les modèles sont d'excellents outils pour les éléments que vous allez réutiliser. Les modèles vous permettent d'avoir un document déjà configuré et prêt à être rempli. J'ai un modèle spécifique que j'utilise pour mon travail, mais Omnigraffle est également livré avec des pré-chargés. Bien sûr, il est facile de créer le vôtre. Les gabarits sont des éléments prédéfinis tels que des boutons, du texte, des icônes et d'autres éléments individuels pour vos structures filaires..
Vous pouvez également modifier des gabarits et des modèles. Pour les gabarits, cliquez simplement sur le gabarit, puis allez dans le menu situé en haut et cliquez sur Modifier le gabarit. Cela fait apparaître le gabarit et vous pouvez le modifier comme n'importe quel autre document Omnigraffle. Il en va de même pour les modèles, dans la mesure où vous pouvez les modifier comme n'importe quel autre document Omnigraffle..
Vous pouvez créer vos propres pochoirs ou plusieurs jeux sont déjà disponibles sur Internet à télécharger. J'utilise certains de Graffletopia.com. J'utilise habituellement ceux-ci pour des choses spécifiques comme des bonhommes bâtons ou des éléments mobiles. Mes ensembles principaux pour les éléments les plus communs sont:
Cela vous permettra de construire très rapidement de fantastiques structures filaires.
Maintenant pour une certaine étrangeté
Pendant longtemps, je pensais que le manque d’objets partagés était un gros inconvénient pour Omnigraffle, mais Omnigraffle en fait. Est-ce que ont des objets partagés. Le problème est que la façon dont vous les créez et les modifiez n’est pas très importante. La plupart du temps, les couches partagées sont adéquates, bien que parfois vous ayez besoin que l'objet soit identique, mais à une position différente sur une autre page. Cela ne fonctionne pas sur les calques partagés. Passons en revue les étapes nécessaires à la création d'objets partagés..
Premier créer votre objet. Cela peut être aussi compliqué que nécessaire. Regroupez tous les éléments pour créer un seul objet. Sélectionnez l'objet, puis sélectionnez Copier en PDF dans le menu Edition.
Maintenant pour une certaine étrangeté. Supprimer l'original et coller cette nouvelle copie. Vous devez ensuite double-cliquer dessus pour l'éditer. Il l'ouvrira ensuite en tant que nouveau document Omnigraffle. Ne t'inquiète pas, juste éditer et sauvegarder. Vous pouvez ensuite fermer ce document et revenir à votre original. Toutes les modifications seront visibles dans toutes les instances que vous collez dans le document..
Il y a aussi quelques choses qui ne sont pas cruciales pour votre wireframing, mais en être conscientes vous facilitera certainement la vie. Ceux-ci incluent les propriétés d'alignement, d'espacement et de canevas.
L'alignement est quelque chose que j'utilise tout le temps. Tout ce que vous avez à faire est de cliquer sur le côté, le coin ou le centre que vous souhaitez aligner, puis sur le bouton d'alignement vertical ou horizontal. Cela aligne ensuite les objets sélectionnés. Le premier objet sélectionné va servir d’ancre pour l’alignement, alors soyez conscient de cela..
Les éléments d'espacement sont également importants. Vous pouvez définir des distances d'espacement spécifiques, puis espacer les éléments sélectionnés de cette manière. Cependant, ce que je fais le plus souvent, c’est d’utiliser les boutons rapides, même les boutons espace. Ceux-ci prennent tous les éléments sélectionnés et les espacent uniformément entre le premier et le dernier élément sélectionné. Il vous suffit donc de placer vos deux éléments les plus éloignés à l'endroit souhaité, de sélectionner tous les éléments dont vous avez besoin et de cliquer sur le bouton. Bingo! Vos éléments sont agréables et régulièrement espacés.
Le paramètre par défaut que j'ai généralement vu a les propriétés de la toile définies pour mesurer en pouces. En numérique, ce n'est pas très courant, le passage aux pixels est donc beaucoup plus utile. La meilleure façon de configurer ceci est dans votre modèle. Sélectionnez toutes les toiles, puis basculez les unités de la règle de pouces en pixels. Il existe également plusieurs autres options si vous devez travailler dans différentes unités de mesure..
Si vous avez besoin d’interactivité de base avec vos structures filaires, Omnigraffle est là pour vous. Tout ce que vous avez à faire est de sélectionner l'élément qui sera interactif et d'ouvrir le menu Actions dans l'inspecteur. Vous pouvez ensuite demander à l'élément d'effectuer les actions suivantes en cliquant dessus:
Je n'ai jamais utilisé que les options URL et Jumps Elsewhere. Sauter ailleurs est le plus utile car il fait des structures filaires un prototype cliquable qui passe de la toile à la toile..
Attention: Je n'ai jamais eu l'option Afficher / Masquer les calques dans un fichier PDF. Cela ne fonctionne qu'en mode interactif dans Omnigraffle (en maintenant B enfoncé).
Omnigraffle est un excellent outil que de nombreux utilisateurs d'informatique utilisent quotidiennement. Il crée de superbes structures filaires et permet de les créer relativement rapidement..
Si vous êtes intéressé par l'UX ou cherchez simplement un excellent outil pour assembler des structures filaires, essayez Omnigraffle. Encore une fois, laissez-moi savoir dans les commentaires si vous avez des questions et je ferai de mon mieux pour y répondre. Bonne chance filframing!
Accentsconagua