Initiation au Wireframing avec Balsamiq

Le wireframing peut idéalement être défini comme une activité permettant de visualiser la disposition d'un écran. Il existe de nombreux outils de wireframing présents sur le marché aujourd'hui, mais le plus simple et le plus largement utilisé est Balsamiq - notre sujet d'aujourd'hui. Mais, avant cela, commençons par comprendre pourquoi avons-nous besoin de wireframe ?
Lorsqu'il s'agit de développement de logiciels, il est essentiel de savoir à quoi ressemblera le produit final, avant même que le développement ne commence. Cette première visualisation du produit sert de guide à toutes les parties prenantes et aide à éviter toute ambiguïté qui pourrait survenir à l'avenir.
Autrefois, des paragraphes de textes étaient utilisés pour élucider les exigences logicielles.

Cependant, ces morceaux de texte n'étaient pas suffisants pour lancer la visualisation - car chaque personne lisant les exigences le visualiserait d'une manière qui pourrait être différente du reste. Cette ambiguïté entraîne de nombreuses confusions et entraîne une perte de temps, d'argent et d'efforts. Pour aider la cause, le wireframing entre en scène. En raison de la facilité qu'il apporte au processus de développement global.

Dans cet article, nous vous aiderons à comprendre des questions telles que :

• • Qu'est-ce que Balsamiq ?

• • Comment commencer ?

• Comment exporter le wireframe/mockup final ?

Qu'est-ce que Balsamiq ?

Le wireframing, en toute essence, peut être réalisé sur une serviette à l'aide d'un stylo. À la fin de la journée, ce n'est qu'un croquis après tout. Cependant, lorsqu'il s'agit de collaborer et de le partager avec des professionnels, il est préférable de passer à l'un des nombreux outils présents sur le marché aujourd'hui. L'un de ces outils est Balsamiq - il est simple à utiliser et offre de nombreuses fonctionnalités pour créer une structure filaire utile.
Balsamiq est un excellent outil et répond à toutes les exigences du wireframing et de la collaboration. Il dispose d'un ensemble unique de fonctionnalités qui vous permettent d'effectuer un wireframing rapide, d'obtenir des retours en temps réel, d'intégrer ces retours et d'améliorer le wireframe. Cela permet finalement à toute l'équipe de s'aligner sur les fonctionnalités de l'application en ce qui concerne la mise en page.
Avec Balsamiq, la collaboration avec des membres de l'équipe situés à distance est également un jeu d'enfant car il peut exporter des wireframes aux formats PNG ou PDF, ce qui permet une flexibilité tout en partageant les wireframes.
10 outils de wireframing les plus efficaces

Premiers pas avec Balsamiq

Balsamiq est disponible pour Windows et Mac OS et peut être téléchargé en ligne . Une fois que vous avez téléchargé l'outil et l'avez ouvert, vous verrez un écran comme :

Comme le montre la capture d'écran ci-dessus, l'interface utilisateur de Balsamiq est divisée en quatre parties.

• • Navigateur

• • Bibliothèque d'interface utilisateur

• • Inspecteur

• Espace filaire/Zone

La section surlignée en rouge permet de basculer entre l'inspecteur de sections et les informations sur le projet. Les fonctionnalités sont incluses dans la bibliothèque d'interface utilisateur, examinons-la en profondeur.

La bibliothèque d'interface utilisateur

La bibliothèque d'interface utilisateur est classée en fonction de différents éléments d'écran.
Faisons connaissance avec les différentes catégories d'éléments d'écran disponibles dans Balsamiq.

• • Tous − Cliquez dessus pour afficher tous les éléments d'interface utilisateur proposés par Balsamiq. Le défilement horizontal vous permettra de les visualiser ou de les utiliser.

• • Actifs - Cette section comprend les éléments que vous pouvez télécharger et utiliser ultérieurement dans vos wireframes.

• • Grand - Cela inclut les éléments d'écran raisonnablement plus grands comme les espaces réservés, la fenêtre du navigateur, l'iPhone et l'iPad.

• • Boutons - Cette section comprend tous les boutons de contrôle dont vous aurez besoin dans une structure filaire, comme les boutons d'action, les cases à cocher, etc.

• • Commun - Cette section comprend les formes utilisées pour désigner les interactions les plus courantes.

• • Conteneurs - Il inclut les options telles que Window, FieldSet, Browser, etc. Comme son nom l'indique, il inclut Window, FieldSet, Browsers, etc.

• • Formulaires - Cette catégorie contient tous les contrôles liés aux formulaires, tels que les éléments d'entrée, les boutons radio, le bouton d'envoi, etc.

• • Icônes − Ceci contient l'ensemble des icônes que vous pouvez utiliser pour indiquer une opération particulière. Par exemple, une icône de disquette à la place du bouton de sauvegarde, etc. Balsamiq propose une vaste collection d'icônes gratuites pouvant être utilisées pour diverses actions.

• • iOS - Cela contient les contrôles de l'interface utilisateur spécifiques à l'iOS.

• • Mise en page − Les mises en page sont extrêmement importantes lorsque vous devez représenter une page/fonctionnalité de base. Cette catégorie comprend la plupart des mises en page telles que les onglets verticaux / horizontaux, les accordéons, etc.

• • Markup - Ceci est utilisé pour ajouter un commentaire sur un contrôle particulier dans le wireframe. Il contient également des légendes utilisées pour afficher la connectivité dans de nombreux scénarios.

• • Médias - Tous les contrôles de l'interface utilisateur liés aux médias sont disponibles dans cette section qui aide à afficher une image/vidéo/son dans le wireframe.

• • Symboles - Il s'agit d'une collection de composants réutilisables qui peuvent réduire le temps de création des composants communs.

• Texte - Comme son nom l'indique, il contient tous les contrôles de l'interface utilisateur liés au texte. Des fonctionnalités telles qu'un bloc de texte, une zone de liste déroulante, une barre de liens, etc. sont disponibles dans cette catégorie.

La connaissance de ces composants couplée au fait que Balsamiq vous permet de glisser-déposer facilement les composants vous aidera à créer rapidement et efficacement les wireframes de votre choix.
Lequel de ces outils de gestion de produit utilisez-vous déjà ?

Maintenant, supposons que pour votre site Web, vous ayez créé une structure filaire de ces quatre pages - Accueil, Produits et services, Contactez-nous et À propos de nous. Maintenant, nous devons effectuer une autre tâche essentielle qui donnera à notre structure filaire un peu plus l'apparence d'un site Web à part entière et moins d'un croquis. Pour cela, nous devons lier nos pages, car elles seraient idéalement liées dans un site Web. La liaison vous aide également à aller et venir facilement entre les wireframes.

Relier les pages

Cette étape aidera vos wireframes à apparaître dans l'ordre - comme ils le feraient sur n'importe quel site Web. Pour réaliser cette navigation, cliquez sur la barre de liens dans le coin supérieur droit .
Tout d'abord, commençons par connecter la page d'accueil à la page Produits et services :

• • Aller à la page d' accueil

• Cliquez sur la barre de liens dans le coin supérieur droit

Reportez-vous au volet des propriétés

La section en surbrillance verte montre les différents wireframes que vous avez créés jusqu'à présent. Commençons par lier la page d'accueil. Cliquez sur le menu déroulant pour voir la liste des maquettes disponibles. Il affichera une liste comme ci-dessous :

Dans la liste déroulante qui s'affiche, sélectionnez Produits et services pour créer un lien de l'accueil vers les produits et services. De même, répétez la même procédure pour les autres pages.
L'art de la prise de décision : pour les gestionnaires, les dirigeants et les spécialistes des produits

Exporter le filaire

Le wireframe que vous venez de créer ne sert à rien si vous ne pouvez pas le présenter à votre client/utilisateur final dans un format plus courant, comme PDF ou PNG. Pour cela, Balsamiq vous permet d'exporter facilement des maquettes dans l'un ou l'autre de ces formats.
Dans cet exemple, nous exportons notre maquette au format PDF. Pour cela, cliquez sur le menu Projet, puis cliquez sur Exporter en PDF.
Vous obtiendrez un écran comme celui illustré ci-dessous :

Cochez la case - "Afficher les conseils de liaison".
Ensuite, cliquez sur Exporter au format PDF . Il affichera une fenêtre contextuelle dans laquelle vous pourrez spécifier un local où vous souhaitez exporter le PDF. La progression sera affichée dans une barre de progression comme ci-dessous.

Lorsque l'exportation est terminée, il y aura une boîte de confirmation. En cliquant sur la case, vous pourrez afficher le PDF avec toutes les navigations que vous avez configurées.
Construire des produits minimums viables - combien c'est trop ?

Emballer…
On ne peut nier l'importance du wireframing dans le monde du développement d'applications aujourd'hui. Ils offrent de nombreuses fonctionnalités qui finissent par alléger votre charge de travail globale - les outils de wireframing ne manquent absolument pas, mais Balsamiq est l'un des rares outils qui répond à toutes vos exigences !

Apprenez des cours de MBA en ligne dans les meilleures universités du monde. Gagnez des programmes de maîtrise, Executive PGP ou Advanced Certificate pour accélérer votre carrière.