7 outils de wireframing impressionnants que vous devriez utiliser –

Vous voulez apprendre l'UX de la base? Obtenez une collection complète de livres UX sur des projets, des astuces, des outils, etc., avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 dollars par mois .

Au fil des ans, nous sommes devenus beaucoup plus informés sur le processus de conception UX, en particulier en ce qui concerne le wireframing – un exercice de conception extrêmement utile qui peut considérablement améliorer l'expérience utilisateur globale du produit final.

Dans cette synthèse, nous allons examiner les meilleurs outils de wireframing.

Qu'est-ce qu'une structure filaire?

Une structure filaire est la maquette squelettique d'un dessin – le fondations nues et sans style qui existaient avant l’ajout de polices, de couleurs et de toute autre esthétique visuelle. Le fil de fer est souvent utilisé après les idées, mais avant le prototypage haute fidélité.

Le fil de fer est souvent appelé "mi-fidélité" et permet aux concepteurs de faire glisser des éléments de conception prédéfinis. composants sur la toile, afin qu'ils puissent rapidement expérimenter des idées dans un environnement non destructif, recueillir les réactions des parties prenantes et même procéder à des tests avec les utilisateurs.

Comment les solutions filaires sont-elles utilisées dans UX?

Les solutions filaires offrent aux concepteurs une chance de Réfléchissez bien à l'UX de base de leur conception, c'est-à-dire à la convivialité, à l'accessibilité, à la numérisation, au cliquabilité, etc. (souvent en mettant l'accent sur la navigation, la forme et le paiement UX).

La conception visuelle contribue également à UX. , la conception de la «couche de surface» à côté du noyau UX peut rapidement se transformer en désordre compliqué, raison pour laquelle nous concevons ces maquettes squelettiques appelées structures filaires avant de passer à la haute fidélité.

jetez un coup d'œil aux meilleurs outils de création d'images en fil actuellement disponibles.

• Plates-formes: Web, macOS, Windows
• Tarification : diverses options pour le Web et l'ordinateur de bureau

Balsamiq est un acteur majeur dans le domaine de la trame en fils.

Ce qui le distingue des autres modèles est son esthétique visuelle (optionnelle) ressemblant à un croquis, qui nous rappelle que les structures filaires doivent être expérimentales, de faible / moyenne fidélité et même jetables – le type d'attitude qui permet aux structures filaires de prospérer.

Balsamiq est idéal pour les équipes souples et agiles, avec des fonctionnalités qui aident les concepteurs à tester des structures filaires sur des appareils réels et à collaborer aux commentaires des parties prenantes. Grâce à des intégrations permettant le suivi des bogues (avec Jira Cloud, par exemple), Balsamiq convient aussi bien aux concepteurs qu'aux gestionnaires.

En ce qui concerne les composants de wireframing, Balsamiq est l'un des outils les plus équipés, l'un des plus expérimentés. sur le marché aujourd'hui. Comme avec tous les outils de création d'images en fil de fer, ils sont utilisés simplement en faisant glisser des composants sur la zone de travail pour visualiser rapidement les idées.

• Plateformes: Web uniquement
• Tarification : Plan gratuit, 8 $ ou 12 $ (/ mois)

Bien qu’il soit relativement nouveau dans l’industrie et qu’il possède donc le plus petit répertoire de composants filaires, Whimsical est le plus beau, le plus facile à utiliser, le plus amusant divertissement à utiliser, et enfin, le moins cher des outils de wireframing disponibles sur le marché. marché aujourd’hui (moins Justinmind, qui n’est gratuit que pour les «wireframing seulement»).

Un inconvénient majeur est qu’il n’existe aucune fonctionnalité permettant de tester les utilisateurs. Cependant, d'autres collaborateurs peuvent au moins ajouter leurs commentaires en commentant des structures filaires, et même gérer des bogues, des tâches et des améliorations dans un tableau de style kanban. Jusqu'à présent, les fonctionnalités se préparent pour être extrêmement utiles dans un flux de travaux de style sprint de conception .

De plus, des fonctionnalités de cartographie conceptuelle sont sur le chemin.

• Plateformes: macOS et Windows [19659025] Tarification : différentes options pour les équipes et les individus

Axure RP, comme Balsamiq, est un autre outil gigantesque de fil de tramage, offrant modestement des fonctionnalités de contenu dynamiques, basées sur les données, des fonctionnalités d'animation, ainsi que des mises en page adaptatives et conditionnelles. Il n’est pas étonnant que «87% des sociétés du Fortune 100 utilisent Axure».

Axure existe depuis 16 ans. Son seul inconvénient est le manque de fonctionnalités de test utilisateur / utilisabilité.

• Plateformes: Web
• Tarification : Plan gratuit, 12 $, 42 $ ou 84 $ (/ mois)

Marvel est connu pour être l’un des les outils les plus faciles à maîtriser, qui inclut ses fonctionnalités de wireframing. Bien que la majeure partie du flux de travail se déroule dans Sketch, où les conceptions sont ensuite transmises aux développeurs, les outils de trame filaire moins connus de Marvel sont à la fois simples à utiliser et agréables à regarder – un peu comme celui de Whimsical.

Etant donné que Marvel intègre avec l'outil de test utilisateur Lookback, on pourrait dire que Marvel est un produit plus aguerri, bien que plus coûteux en raison de l'ajout de fonctions de prototypage et de transfert, mais néanmoins très utile. ajout à cette liste.

• Plateformes: Web
• Tarification : Plan gratuit, 13 $ ou 19 $ (/ mois)

Moqups est une version moderne d’un outil de tréfilage traditionnel, qui le rend particulièrement bien adapté pour les parties prenantes de type gestionnaire. Il offre une quantité décente de composants filaires appelés «Stencils» et inclut également des fonctionnalités de prototypage interactif.

Il peut sembler un peu maladroit pour les concepteurs UX, mais pour les équipes cherchant à rendre le design plus démocratique aux premiers stades de la conception UX, Moqups aide les non-concepteurs à devenir des concepteurs.

• Plateformes: macOS uniquement
• Prix : 99,99 $ pour Standard ou 199,99 $ pour Pro (une seule fois)

Si vous êtes prêt à utiliser un outil qui permet une conception haute fidélité, tout en basant ses fondements sur une structure filaire, OmniGraffle est un choix décent. Même si elle n’est pas aussi belle que Whimsical, OmniGraffle est une application réservée uniquement à MacOS qui tire parti de l’utilisation de l’interface utilisateur macOS native, ce qui la rend un peu moins encombrée par rapport à un outil comme Moqups.

OmniGraffle est aussi sportif De puissantes fonctionnalités, contrairement à d'autres outils d'encadrements filaires, telles que la possibilité de créer des extensions à la volée à l'aide de JavaScript ou d'AppleScript, ce qui peut aider les concepteurs à automatiser leur flux de travail. Comme vous pouvez le constater, OmniGraffle est plus technique que la plupart des outils filaires, vous devez donc en tenir compte si vous décidez d'aller de l'avant avec cet outil.

Pro prévoit de passer d’une structure filaire à une conception haute fidélité pouvant être exportée. Le plan Pro comprend des planches d’art, des couches partagées, des outils vectoriels, des modes de fusion, des actions (interactions) et, bien sûr, des exportations (y compris au format SVG).

Un compte standard vous limitera à la création de diagrammes et à la représentation en boucle, qui est très bien si c'est tout ce que vous cherchez.

• Plateformes: Web
• Prix : Forfait gratuit, 0 $, 19 $ ou 39 $ (/ mois)

Justinmind est le seul vrai ] outil gratuit de création de wireframing, car il permet un nombre illimité de conseils, d’équipes et d’utilisateurs, tant que vous êtes toujours en wireframing (et qu’il n’est pas encore très fidèle à la haute fidélité). 19659006] Comparé à d’autres outils prenant en charge le «spectre complet» (conception basse fidélité, moyenne, et haute fidélité), Justinmind est agréable à utiliser. Il est plus propre et plus moderne que les anciens combattants tels qu'Axure et OmniGraffle.

Justinmind contient toutes les fonctionnalités dont vous auriez besoin pour passer de la conception filaire à la haute fidélité au transfert de la conception.

Dans notre résumé du design d'écran, nous Parlez d’un certain nombre d’outils utilisés pour concevoir des maquettes haute fidélité. Bien que ces outils ne soient pas exactement des outils filaires, il n’ya aucune raison qu’ils ne puissent pas être utilisés tels quels, bien qu’il ne faut pas s’attendre à voir de véritables composants filaires.

L'avantage de choisir l'un des outils suivants est la possibilité de contenir votre flux de travail dans un seul abonnement.

Daniel Schwarz est un Concepteur UX / UI, développeur Web et concepteur d'origine, mais écrivain, éditeur, auteur et enseignant de cœur. Actuellement concepteur chez SitePoint (ex Toptal), fondateur de UX Tricks écrivain chez .net Magazine et Web Designer Magazine, et collaborateur occasionnel avec les plus grandes entreprises de design telles qu'Adobe et InVision.