Maquettes Balsamiq - Introduction

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é).
  • Le développement du SDK AIR 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 suivantes.

  • 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 a 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 liste déroulante sont disponibles dans cette catégorie.

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