Pencil est un outil de fil de fer que nous pouvons utiliser pour dessiner une maquette de l’interface utilisateur de notre application. Le grand avantage de Pencil est qu’il est léger, facile à utiliser et étroitement intégré à Firefox. En plus de tout, c'est une application open source gratuite! À la fin de l'article, nous vous ferons une démonstration simple sur l'utilisation de Pencil pour créer un Brizzly ressemblant à une structure filaire.
Pourquoi crée-t-on des structures filaires?
Une structure filaire est l'esquisse d'une idée de mise en page. Une structure filaire se concentre sur la conception des informations d'une page pour garantir que la conception s'adapte aux besoins de l'utilisateur. 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 le contenu, les éléments fonctionnels et les éléments de navigation. Ces formes affichent leur emplacement sur la page.
Au début, cela peut sembler une perte de temps de créer des croquis approximatifs d’une page. Un fil de fer est important pour amener vos utilisateurs à se concentrer sur l'élément d'importance de votre page. La création d’une esquisse 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 mise en page et le placement des composants de votre page. Nous commencerons à mieux comprendre ce que le client souhaite vraiment et ce qu'il souhaite extraire du logiciel lorsque l'utilisateur commence à se concentrer sur les éléments importants d'une page. La création d’un fil de fer vous permet, à vous et à vos utilisateurs, de collaborer efficacement et d’identifier rapidement les problèmes de conception potentiels.
Commencer avec Pencil
Téléchargez Pencil à partir de la page d’extensions de Pencil. Une fois que vous avez installé Pencil, il est accessible depuis "Outils"> "Dessin au crayon".
Créer un rectangle
La première étape de la création d’une forme de fil de fer consiste à faire glisser une forme du menu "Collections de formes" sur le canevas.
Création d'onglets
Les onglets accueil, brouillon et image sont trois onglets empilés les uns sur les autres. Faites glisser trois ‘Tabs Panel’ dans le rectangle. Redimensionnez chaque onglet afin que chaque onglet soit affiché côte à côte.
Création de texte
Faites glisser la forme "Texte" sur le canevas pour créer chaque menu. 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 créer une structure filaire agréable. Le moyen le plus précis de changer la couleur d’une forme consiste à spécifier le code HTML de la couleur. Trouver 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 code HTML approprié pour une couleur particulière.
Nous aimons aussi utiliser colorzilla pour choisir les couleurs à l’écran et les utiliser au crayon. Cliquez sur l'icône compte-gouttes dans le coin inférieur gauche de Firefox pour choisir la couleur à l'écran. Nous pouvons également ouvrir le sélecteur de couleur de ColorZilla en double-cliquant sur l’icône en forme de collyre. Copiez simplement le code Hex dans le code HTML couleur de Pencil.
Conclusion
Pencil est un outil facile à utiliser. L'intégration du crayon avec Firefox nous permet d'utiliser d'autres plugins Firefox pour créer une meilleure image filaire.
Liens Télécharger le crayon Télécharger Colorzilla Aide-mémoire HTML du W3C
