23Jul
Pencil est un outil filaire que nous pouvons utiliser pour esquisser une maquette de l'interface utilisateur de notre application. La grande chose à propos de Pencil est qu'il est léger, facile à utiliser, et étroitement intégré avec Firefox. En plus de tout cela est une application open source gratuite!À la fin de l'article, nous vous donnerons une démo simple sur la façon d'utiliser Pencil pour créer un fil de fer Brizzly.
Pourquoi créons-nous des wireframes?
Un fil de fer est un croquis d'une idée de mise en page. Un fil de fer se concentre sur la conception de l'information d'une page pour s'assurer que la conception correspond à ce que l'utilisateur a besoin. Une structure filaire se compose généralement de différentes formes( telles que des boîtes, des ovales et des diamants) pour représenter les éléments de contenu, fonctionnels et de navigation. Ces formes affichent leur emplacement sur la page.
Au début, cela peut sembler une perte de temps en créant des ébauches d'une page. Un cadre filaire est important pour que vos utilisateurs se concentrent sur l'élément d'importance sur votre page. La création d'un croquis sommaire d'une page, sans éléments visuels sophistiqués, attire l'attention de l'utilisateur sur des éléments importants tels que le dimensionnement, la disposition et le positionnement des composants de votre page. Nous allons commencer à mieux comprendre ce que le client veut vraiment et ce dont il a besoin du logiciel lorsque l'utilisateur commence à se concentrer sur les éléments importants d'une page. La création d'une structure en fil de fer vous permet, ainsi qu'à vos utilisateurs, de collaborer efficacement et d'identifier rapidement les problèmes de conception potentiels.
Mise en route avec Pencil
Télécharger Pencil à partir de la page d'ajout de crayon. Une fois que vous installez Pencil, il est accessible à partir de «Outils» & gt;'Croquis au crayon'.
Voici à quoi ressemble Brizzly. C'est une application web assez sympa qui agrège votre Facebook et Twitter sur une seule page.
Ceci est le résultat final de la trame de fil. Les formes principales dans ce fil de fer sont les rectangles, les zones de texte et les onglets. La section suivante de l'article donnera un exemple simple comment créer chaque forme.
Création d'un rectangle
La première étape de la création d'une forme de cadre filaire consiste à faire glisser une forme depuis le menu 'Formes de formes' sur le canevas.
Redimensionnez le rectangle à une largeur et une hauteur appropriées.
Nous pouvons personnaliser le texte, la bordure et la couleur d'arrière-plan de n'importe quelle forme dans Pencil. Cliquez avec le bouton droit sur le rectangle et sélectionnez "Propriétés" pour ouvrir les fenêtres Propriétés. C'est l'écran des propriétés d'arrière-plan. Définissez la couleur d'arrière-plan Rectangle sur blanc( #FFFFFF).
Cliquez sur l'onglet 'Bordure' et ajustez les propriétés de la bordure. Définissez la couleur de la bordure sur noir( # 000000) et modifiez le poids de la bordure à 1.
L'écran des propriétés de texte nous permet de personnaliser le type de police, la taille, le style, le poids, la luminosité et l'opacité du texte.
Création d'onglets
Les onglets Accueil, Brouillon et Image sont trois onglets empilés les uns sur les autres. Faites glisser trois 'Panneau d'onglets' dans le rectangle. Redimensionnez chaque onglet de sorte que chaque onglet s'affiche côte à côte.
Ouvre l'écran des propriétés de texte pour ajuster la couleur de police des onglets 'Images' et 'Brouillon'.Réglez-le sur Gris( # 989898).
Création de texte
Faites glisser la forme 'Texte' sur le canevas pour créer chacun des menus. Nous pouvons ajuster l'apparence du texte en accédant à la fenêtre des propriétés du texte.
Conseils utiles pour changer de couleur
La couleur est l'un des éléments les plus essentiels pour fournir un fil de fer agréable. La manière la plus précise de changer la couleur d'une forme est de spécifier le code HTML de la couleur. Déterminer le code HTML pour une couleur particulière peut être difficile. Nous pouvons utiliser la feuille de triche de couleur HTML de w3cschools.com pour rechercher le bon code HTML pour une couleur particulière.
Nous aimons aussi utiliser colorzilla pour choisir les couleurs de l'écran et l'utiliser dans Pencil. Cliquez sur l'icône du compte-gouttes dans le coin inférieur gauche de Firefox pour choisir la couleur sur l'écran. Nous pouvons également ouvrir le sélecteur de couleurs de ColorZilla en double-cliquant sur l'icône représentant un œil. Copiez simplement le code hexadécimal dans le code HTML couleur de Pencil.
Conclusion
Pencil est un outil facile à utiliser. L'intégration de Crayons avec Firefox nous permet d'utiliser un autre plugin Firefox pour créer un meilleur filaire
Liens
Télécharger Pencil
Télécharger Colorzilla
W3C HTML Couleur Cheat Sheet