Maquettes Balsamiq - Guide rapide

En matière de développement logiciel, il est plus qu'important de savoir à quoi ressemblera le logiciel réel, bien avant le début du développement réel. Il s'agit d'une activité critique, car elle sert de guide à toutes les parties prenantes du projet logiciel.

Traditionnellement, des paragraphes de texte ont été utilisés pour décrire ou obtenir l'exigence logicielle. Cependant, lorsqu'il s'agit de comprendre ces textes, chaque individu aura sa propre façon de visualiser l'exigence. Cela conduit à une confusion dans les équipes de développement de logiciels et le coût ultime est en termes d'efforts, d'argent et de temps gaspillés.

Le wireframing peut être défini comme une activité permettant de visualiser la disposition d'un écran donné (mobile ou web). Ces dernières années, il y a eu une demande croissante sur le Wireframing des écrans / pages afin de mesurer son acceptabilité.

Pourquoi Wireframing?

Wireframing est nécessaire afin de gagner du temps investi dans la compréhension d'une exigence logicielle. Comme on dit, une image vaut plus de mille mots, Wireframing donne un aperçu de l'exigence de toute fonctionnalité / page en visualisant efficacement la disposition de l'écran et les éléments. Au final, cela aide également les équipes de développement à s'orienter vers l'objectif final commun.

Le propriétaire de l'activité Wireframing est généralement un Business Analyst / User Interface Designer / Interaction Designer. Ce membre de l'équipe est tenu de collaborer avec l'équipe avant, après et pendant le processus de Wireframing.

Balsamiq comme outil de wireframing

Pour un professionnel affecté à une activité Wireframing, il est logique de gagner du temps en utilisant un outil. L'un des outils les plus efficaces pour faire du Wireframing est d'utiliser un simple stylo et un crayon! Cela ne nécessite aucun investissement! Cependant, lorsqu'il s'agit de le communiquer aux équipes, nous avons besoin d'un aspect et d'une sensation similaire à un stylo et un crayon, mais avec des fonctionnalités supplémentaires telles que le partage par e-mail ou sur des supports similaires.

Balsamiqest un excellent outil, répondant à toutes les exigences du Wireframing, de la collaboration et de la créativité. Son ensemble unique de fonctionnalités permet au membre de l'équipe de faire du Wireframing rapide, d'obtenir un consensus sur la fonctionnalité à développer. Cela finira par aligner l'équipe sur la fonctionnalité en termes de mises en page.

Il permet également la collaboration entre différentes équipes, de sorte qu'un membre de l'équipe peut collaborer avec différentes équipes colocalisées ou distantes. Sa capacité à exporter les wireframes aux formats PDF / PNG permet une flexibilité, tout en partageant les wireframes avec les équipes.

Nous savons maintenant à quel point Balsamiq est efficace pour créer les wireframes à la volée. Si nous utilisons ce temps au début du développement du logiciel pour définir les attentes de la partie prenante, il y aura une plus grande satisfaction parmi les parties prenantes compte tenu du temps minimal requis pour créer le wireframe. C'est la principale raison pour laquelle Balsamiq est utilisé par la majorité des organisations de produits, où la rencontre des relations clients / parties prenantes est cruciale.

Pour un chef de produit / analyste UX, Balsamiq Mockups fournit une plate-forme pour ajouter de la valeur au début du développement. En utilisant son riche ensemble d'outils, Product Manager / UX Analyst peut conduire le produit de manière transparente vers son succès.

Installation de Balsamiq

Pour installer Balsamiq, veuillez vous assurer que vous disposez des conditions suivantes.

Pour exécuter Balsamiq sur votre ordinateur, Adobe Air 2.6 doit s'exécuter. Cela fonctionne bien sur la plupart des ordinateurs et des systèmes d'exploitation. La configuration système minimale requise pour Adobe Air 2.6 est indiquée ci-dessous -

Pour les fenêtres

  • Un processeur compatible x86 2,33 GHz ou plus rapide, ou un processeur Intel Atom TM 1,6 GHz ou plus rapide pour les appareils de classe netbook.

  • Microsoft® Windows Server 2008, Windows 7, Windows 8 Classique ou Windows 10.

  • Un minimum de 512 Mo de RAM (1 Go recommandé).

  • Développement du SDK AIR Prend en charge Microsoft® Windows 7 et versions ultérieures, 64 bits uniquement.

Pour Mac

  • Processeur Intel® Core TM Duo 1,83 GHz ou plus rapide.
  • Mac OS X v10.7 et supérieur.
  • Un minimum de 512 Mo de RAM (1 Go recommandé).
  • AIR SDK Development prend en charge Mac OS 10.9 et supérieur, 64 bits uniquement.

Lien de référence - Configuration système requise pour Balsamiq

Téléchargement de Balsamiq

Nous pouvons télécharger Balsamiq à partir du lien suivant - Balsamiq Mockups for Desktop Balsamiq est disponible sur Windows et Mac OS.

Interface utilisateur

Une fois l'installation terminée, nous devrions pouvoir ouvrir Balsamiq depuis notre ordinateur. Nous verrons l'écran suivant pour la première fois lorsque nous exécuterons Balsamiq.

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

  • Navigator
  • Bibliothèque d'interface utilisateur
  • Inspector
  • Espace / zone filaire

Dans la capture d'écran, la section surlignée en rouge est la bascule des sections Inspecteur / Informations sur le projet. Sur la base de la sélection, nous devrions être en mesure de voir soit l'Inspecteur / la section d'informations sur le projet (3).

Bibliothèque d'interface utilisateur

Comme le montre la capture d'écran suivante, la bibliothèque d'interface utilisateur est classée en fonction des différents éléments de l'écran. Vous pouvez faire défiler horizontalement sur la section «Tous» et avoir une idée des éléments d'écran disponibles dans Balsamiq.

Faisons connaissance avec les différentes catégories d'éléments d'écran de base disponibles dans Balsamiq.

  • All- Cela couvre tous les éléments de l'interface utilisateur présents dans Balsamiq. Vous pouvez faire défiler horizontalement pour les afficher / les utiliser.

  • Assets - À des fins d'introduction, ce sont les actifs personnalisés téléchargés par l'utilisateur.

  • Big- Cette catégorie comprend les éléments d'écran, qui sont raisonnablement élevés en taille / apparence. Vous pouvez voir les éléments tels que les espaces réservés, la fenêtre du navigateur, iPad, iPhone dans cette catégorie.

  • Buttons- Il comprend tous les contrôles de bouton utilisés dans les wireframes mobiles / Web. Un exemple typique sera le bouton d'action, la case à cocher, etc.

  • Common - Ce sont différentes formes / commandes utilisées pour désigner les interactions les plus courantes.

  • Containers - Comme son nom l'indique, il comprend la fenêtre, le jeu de champs, les navigateurs, etc.

  • Forms - Tous les contrôles UI liés à un formulaire sont présents dans cette catégorie.

  • Icons- À tout moment, vous devrez peut-être désigner une opération particulière par une icône. Par exemple, dans un passé récent, nous avons l'icône de disquette avec le bouton Enregistrer. Cette catégorie de commandes vous fournira les icônes requises pour cette opération. Balsamiq possède une énorme collection d'icônes; n'hésitez pas à les vérifier!

  • iOS - Les commandes de l'interface utilisateur, spécifiques au système d'exploitation mobile Apple iOS, sont disponibles dans cette catégorie.

  • Layout- Lors de la représentation d'une page / fonctionnalité de base, il devient important de représenter la mise en page de base. La disposition des catégories comprend la plupart d'entre eux, tels que les onglets accordéon, horizontaux / verticaux, etc.

  • Markup- Supposons que vous souhaitiez ajouter un commentaire sur un contrôle particulier dans le wireframe. La zone de commentaire est disponible dans le balisage. De plus, les légendes sont utilisées pour montrer l'interconnectivité dans de nombreux scénarios. Il est disponible dans la catégorie de balisage.

  • Media - Lorsqu'il s'agit d'afficher une image / un son dans notre filaire, les commandes d'interface utilisateur associées sont disponibles dans la catégorie Médias.

  • Symbols - Les symboles sont des composants réutilisables, ce qui peut réduire le temps de création des éléments les plus courants.

  • Text - Comme son nom l'indique, tous les contrôles de l'interface utilisateur liés au texte ou aux paragraphes, tels que la barre de liens, le bloc de texte, la zone de liste déroulante sont disponibles dans cette catégorie.

Dans le chapitre suivant, nous réaliserons le premier projet en Balsamiq.

Créons notre premier projet à Balsamiq. Avant de nous lancer dans le Wireframing, il devient plus qu'important de planifier les écrans / la page, afin que nos efforts soient concentrés. Nous parcourirons le site Web d'une entreprise au fur et à mesure de la création des wireframes.

Concept: un site Web d'entreprise

Pour les besoins de ce tutoriel, nous allons créer un site Web d'entreprise. Ce wireframe peut se rapporter à de nombreux sites Web de petites et moyennes entreprises.

Alors, que se passe-t-il lors de la phase de planification?

Dans la phase de planification, nous investissons du temps pour réfléchir à ce que toutes les pages seront présentes sur le site Web et au contenu de chacune. Considérez les pages suivantes pour le site Web.

Dans le prochain chapitre, nous verrons comment utiliser Balsamiq pour concevoir ces quatre pages.

Dans ce chapitre, nous discuterons de la façon d'utiliser Balsamiq pour concevoir les quatre pages suivantes pour notre site Web -

Maintenant que nous avons créé les pages, la partie critique est de les faire apparaître dans un ordre comme une page Web. Dans notre exemple, la navigation est réalisée à l'aide dulink bar dans le coin supérieur droit.

Voyons comment nous pouvons connecter la première page Home et la deuxième page Products and Services.

  • Aller à Home page

  • Clique sur le link bar

  • Référez le properties vitre

Comme souligné, du Links section, cliquez sur le menu déroulant pour Products. Il vous montrera la liste des maquettes disponibles. Les options sont présentées ci-dessous.

Dans la liste, cliquez sur Products and Services.

Une fois fait pour le Home Page, répétez la même procédure pour les autres pages - About Us, Contact Us. Notez que sur les autres pages; nous aurons le lien de navigation inséré pour les pages autres que celle sélectionnée.

Dans ce chapitre, nous verrons comment assembler toutes les maquettes du projet et les exporter en images PNG ou en fichier PDF.

Si vous deviez montrer le wireframe que vous avez créé à un utilisateur final / client, vous voudriez évidemment montrer ce wireframe dans un format plus courant, par exemple, un PDF. À cette fin, Balsamiq Mockups offre une flexibilité pourexport the mockups in the form of PNG images or PDF file.

Exportons la maquette au format PDF. Pour ce faire, cliquez sur le menu Projet, puis sur Exporter au format PDF. Il affichera un écran comme indiqué dans la capture d'écran ci-dessous.

Dans l'écran ci-dessus, cochez la case - «Afficher les conseils de liaison». Cliquez sur Exporter au format PDF. Il affichera une fenêtre contextuelle demandant un emplacement pour exporter votre PDF. Une fois que vous avez fourni un emplacement, le PDF sera exporté vers l'emplacement spécifié. La progression sera affichée dans la barre de progression comme indiqué ci-dessous.

Il y aura une boîte de confirmation, lorsque le PDF est exporté comme indiqué ci-dessous.

En cliquant sur ce message, vous verrez le PDF. Dans le PDF, vous pouvez essayer la navigation sur la barre de liens en surbrillance.

Pour une meilleure expérience de visualisation et de navigation, utilisez Adobe Acrobat Reader.