Utiliser Firefox pour créer des maquettes simples

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 comme wireframe.

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 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 diamants) pour représenter le contenu, les éléments fonctionnels et les éléments de navigation. Ces formes affichent leur placement 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 fantaisistes, attire l’attention de l’utilisateur sur des éléments importants tels que le dimensionnement, la mise en page et le placement de vos composants de page. Nous commencerons à mieux comprendre ce que le client souhaite et ce qu’il souhaite réellement 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 depuis la page d’extensions de Pencil. Une fois que vous avez installé Pencil, il est accessible à partir de "Outils"> "Esquisse au crayon"..

Voici à quoi ressemble Brizzly. C'est une application web plutôt cool qui regroupe vos comptes Facebook et Twitter sur une seule page..

C'est le résultat final du fil de fer. Les formes principales de cette structure sont des rectangles, des zones de texte et des onglets. La section suivante de l’article donnera un exemple simple pour créer chaque forme..

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..

Redimensionner le rectangle à une largeur et une hauteur appropriées.

Nous pouvons personnaliser le texte, la bordure et la couleur d'arrière-plan de toute forme au crayon. Cliquez avec le bouton droit sur le rectangle et sélectionnez «Propriétés» pour ouvrir les fenêtres de propriétés. Voici l'écran des propriétés de l'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 le noir (# 000000) et modifiez son poids en 1..

L'écran des propriétés du texte nous permet de personnaliser le type de police, la taille, le style, le poids, la couleur, 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 pour que chaque onglet soit affiché côte à côte..

Ouvrez l'écran de propriétés du texte pour ajuster la couleur de la police des images et des brouillons. Réglez-le sur gris (# 989898).

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. Comprendre 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 à 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 hexadécimal 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