Conception de la page d'accueil

Step 1- Ouvrez les maquettes Balsamiq installées sur votre ordinateur. Dans la bibliothèque de l'interface utilisateur, dans le contrôle Ajout rapide, tapez -Browser.

Step 2 - Une fois que nous sélectionnons Browser, le contrôle sera disponible dans la zone filaire. Cliquez sur le bouton basculeInspector pour voir les détails des commandes de l'interface utilisateur dans le panneau de droite.

Dans la section inspecteur, entrez 0 (zéro) pour les deux Position X et Yzones de texte. Cela amènera le contrôle du navigateur dans le coin de l'espace filaire pour une meilleure visibilité.

dans le Size zones de texte, entrez 1024 comme width et 768 comme le height.

La fenêtre du navigateur s'étendra sur tout l'espace filaire à l'aide de l'option de zoom au-dessus de la section de la bibliothèque de l'interface utilisateur, définissez le niveau de zoom sur “Fit in Window”.

Une fois tous les paramètres ci-dessus définis, nous pourrons voir l'écran suivant.

Step 3 - Dans l'espace blanc sous la barre d'adresse du wireframe, créons l'en-tête du site Web.

Pour commencer par l'en-tête, créons un logo. Dans les wireframes, il suffit souvent de représenter le positionnement de la commande écran. Par exemple, nous utiliserons le contrôle Image et le nommerons comme“Logo”. Dans la zone d'ajout rapide, saisissez“Image”. Le contrôle d'image sera mis en évidence. Sélectionnez-le pour le placer dans la zone filaire.

Dans la boîte de dialogue des propriétés à droite, entrez la taille - width 139 et height comme 93. Positionnez l'image sur X-axis à 16 ans et plus Y-axis à 94.

Une fois cela fait, nous devrions être en mesure de voir l'espace filaire comme indiqué ci-dessous.

Step 4 - Sous l'image, pour une meilleure compréhension du spectateur, insérez un Labelà partir de la bibliothèque d'interface utilisateur; nommez-le comme «Logo de l'entreprise». Dans l'onglet des propriétés sur la droite, définissez le libellésize avoir 15 ans.

Une fois cette étape terminée, vous devriez pouvoir voir l'image et le texte comme indiqué ci-dessous.

Step 5- Insérons maintenant le titre de la société, dans une police relativement grande. Dans la zone Ajout rapide avec bibliothèque d'interface utilisateur, tapez“Title”. Le titre avec“A Big Title”le texte sera affiché à l'écran. Double-cliquez sur le texte pour le renommer. Saisissez le texte «Nom de votre société».

Pour les besoins de ce didacticiel, la position exacte sur X et Y-axis est fourni. Vous pouvez faire glisser le texte à la position que vous souhaitez.

Dans la section des propriétés à droite, mettez à jour la valeur sous la position pour X comme 626 et à Y comme 107.

Nous verrons l'en-tête se mettre en forme comme indiqué dans l'écran ci-dessous.

Step 6 - Ajoutez un séparateur horizontal sous le texte et le titre du logo pour séparer l'en-tête du contenu du corps de la page.

Dans la zone Ajout rapide, tapez “rule”. Cela vous montreraH.Rule et V.Rule. Il signifie règle horizontale et verticale. SélectionnerH.Ruleet insérez la règle sous le titre et le texte du logo en faisant glisser la souris. En utilisant les poignées de la règle, vous pouvez augmenter / diminuer la taille de la règle.

Effectuez un zoom avant d'un niveau pour voir la règle horizontale insérée. Positionnez-le comme indiqué sur l'écran ci-dessous.

Step 7 - De même, insérez la section Produits et Services, en utilisant les contrôles de l'interface utilisateur - block of text et title. Utilisez la règle horizontale pour séparer la section. Vous devriez pouvoir voir l'espace filaire comme indiqué ci-dessous.

Step 8 - Sur les mêmes lignes, ajoutez la section Vision d'entreprise en utilisant les mêmes contrôles d'interface utilisateur que ci-dessus.

Step 9 - Ajouter Link Barsur cette page à des fins de navigation. De nos jours, il est courant d'utiliser des barres de liens pour une navigation plus facile. Utilisez la zone Ajout rapide pour insérer une barre de liens. Les valeurs sont mises à jour en double cliquant sur la barre d'onglets insérée dans la page. Ajoutez des valeurs séparées par des virgules pour les différents liens de page. Positionnez la barre de liens comme indiqué ci-dessous.

Ceci conclut la conception filaire de la page d'accueil. Nous avons vu à quel point il est facile et simple d'ajouter des contrôles d'interface utilisateur et de commencer par la disposition d'interface utilisateur d'un site Web.

Enregistrez le fichier du projet Balsamiq en accédant à Project Menu → Save Project.