Pencil est un outil de wireframing que nous pouvons utiliser pour esquisser une maquette de l'interface utilisateur de notre application. L'avantage de Pencil est qu'il est léger, facile à utiliser et étroitement intégré à Firefox. En plus de tout cela, c'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 Brizzly comme un filaire.
Pourquoi créons-nous des wireframes?
Un wireframe est une esquisse d'une idée de mise en page. Un wireframe se concentre sur la conception des informations d'une page pour s'assurer que la conception correspond 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 losanges) pour représenter des é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 à créer des croquis approximatifs d'une page. Un fil de fer est important pour que vos utilisateurs se concentrent sur l'élément d'importance de votre page. Créer une esquisse approximative d'une page, sans éléments visuels sophistiqués, déplacez 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 veut et a vraiment besoin du logiciel lorsque l'utilisateur commence à se concentrer sur les éléments importants d'une page. La création d'un cadre filaire vous permet, à vous et à vos utilisateurs, de collaborer efficacement et d'identifier rapidement les problèmes de conception potentiels.
Premiers pas avec Pencil
Téléchargez Pencil à partir de la page des modules complémentaires de Pencil. Une fois que vous avez installé Pencil, il est accessible depuis «Outils»> «Dessin au crayon».
Voici à quoi ressemble Brizzly. C’est une application Web très intéressante qui regroupe votre Facebook et votre Twitter sur une seule page.
C'est le résultat final du fil de fer. Les formes principales de ce filaire sont des rectangles, des zones de texte et des onglets. La section suivante de l'article donnera un exemple simple de création de chaque forme.
Créer un rectangle
La première étape de la création d’une forme en fil de fer consiste à faire glisser une forme du menu «Collections 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. Ceci est l'écran des propriétés d'arrière-plan. Définissez la couleur d'arrière-plan du 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 changez l'épaisseur de la bordure sur 1.
L'écran des propriétés du texte nous permet de personnaliser le type de police, la taille, le style, l'épaisseur, la couleur, la luminosité et l'opacité du texte.
Créer des 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 afin que chaque onglet s'affiche côte à côte.
Ouvrez l’écran des propriétés du texte pour régler la couleur de la 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 créer un filaire agréable. La manière la plus précise de changer la couleur d’une forme consiste à spécifier le code HTML de la couleur. Comprendre le code HTML d'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 également utiliser colorzilla pour sélectionner les couleurs de l'écran et les utiliser dans Pencil. Cliquez sur l'icône du compte-gouttes dans le coin inférieur gauche de Firefox pour choisir la couleur à l'écran. Nous pouvons également ouvrir le sélecteur de couleurs de ColorZilla en double-cliquant sur l’icône du collyre. Copiez-collez simplement le code hexadécimal dans le code HTML couleur de Pencil.
Conclusion
Pencil est un outil de wireframing facile à utiliser. L'intégration de Pencil avec Firefox nous permet d'utiliser d'autres plugins Firefox pour aider à créer un meilleur wireframe
Liens
Download Pencil
Télécharger Colorzilla
Aide-mémoire HTML W3C
