Verwenden Sie Firefox, um einfache Modelle zu erstellen

Pencil ist ein Wireframing-Tool, mit dem wir ein Modell der Benutzeroberfläche unserer Anwendung skizzieren können. Das Tolle an Pencil ist, dass es leicht, einfach zu bedienen und fest in Firefox integriert ist. Darüber hinaus ist es eine kostenlose Open Source-Anwendung! Am Ende des Artikels geben wir Ihnen eine einfache Demo, wie Sie mit Pencil ein Brizzly-ähnliches Drahtgitter erstellen.

Warum erstellen wir Wireframes? ?

Ein Drahtmodell ist eine Skizze einer Seitenlayoutidee. Ein Drahtmodell konzentriert sich auf das Informationsdesign einer Seite, um sicherzustellen, dass das Design zu den Anforderungen des Benutzers passt. Ein Drahtgitter besteht normalerweise aus verschiedenen Formen (z. B. Boxen, Ovalen und Rauten), um Inhalts-, Funktions- und Navigationselemente darzustellen. Diese Formen zeigen ihre Platzierung auf der Seite an.

Auf den ersten Blick scheint es Zeitverschwendung zu sein, grobe Skizzen einer Seite zu erstellen. Ein Drahtrahmen ist wichtig, damit sich Ihre Benutzer auf das Wichtigkeitselement auf Ihrer Seite konzentrieren können. Durch das Erstellen einer groben Skizze einer Seite ohne ausgefallene visuelle Elemente lenken Sie die Aufmerksamkeit des Benutzers auf wichtige Elemente wie Größe, Layout und Platzierung Ihrer Seitenkomponenten. Wir werden anfangen, ein besseres Verständnis darüber zu gewinnen, was der Kunde wirklich von der Software wünscht und braucht, wenn der Benutzer sich auf die wichtigen Elemente einer Seite konzentriert. Durch die Erstellung eines Drahtrahmens können Sie und Ihre Benutzer effektiv zusammenarbeiten und potenzielle Designprobleme frühzeitig erkennen.

Erste Schritte mit Pencil

Laden Sie die Bleistift-Add-On-Seite von Pencil herunter. Nach der Installation von Pencil ist es über "Tools"> "Pencil Sketching" verfügbar..

So sieht Brizzly aus. Es ist eine ziemlich coole Webanwendung, die Facebook und Twitter auf einer einzigen Seite zusammenfasst.

Dies ist das Endergebnis des Drahtrahmens. Die Hauptformen in diesem Drahtmodell sind Rechtecke, Textfelder und Registerkarten. Der nächste Abschnitt des Artikels enthält ein einfaches Beispiel, wie die einzelnen Formen erstellt werden.

Rechteck erstellen

Der erste Schritt beim Erstellen einer Drahtrahmenform ist das Ziehen einer Form aus dem Menü 'Shape Collections' auf die Leinwand.

Ändern Sie die Größe des Rechtecks auf eine geeignete Breite und Höhe.

Wir können den Text, den Rand und die Hintergrundfarbe jeder Form in Pencil anpassen. Klicken Sie mit der rechten Maustaste auf das Rechteck und wählen Sie 'Eigenschaften', um die Eigenschaftenfenster zu öffnen. Dies ist der Bildschirm mit den Hintergrundeigenschaften. Setzen Sie die Hintergrundfarbe des Rechtecks auf Weiß (#FFFFFF)..

Klicken Sie auf die Registerkarte 'Rand' und passen Sie die Randeigenschaften an. Setzen Sie die Randfarbe auf Schwarz (# 000000) und ändern Sie die Randstärke auf 1.

Im Bildschirm mit den Texteigenschaften können wir Schriftart, Größe, Stil, Gewichtung, Farbe, Helligkeit und Deckkraft des Texts anpassen.

Tabs erstellen

Die Registerkarten Start, Entwurf und Bild sind drei Registerkarten, die aufeinander gestapelt sind. Ziehen Sie drei 'Tabs Panel' in das Rechteck. Ändern Sie die Größe der Registerkarten so, dass sie nebeneinander angezeigt werden.

Öffnen Sie den Texteigenschaften-Bildschirm, um die Schriftfarbe der Registerkarten "Bilder" und "Entwurf" anzupassen. Setzen Sie ihn auf Grau (# 989898).

Text erstellen

Ziehen Sie die Form 'Text' auf die Leinwand, um jedes Menü zu erstellen. Wir können die Textdarstellung anpassen, indem Sie auf das Texteigenschaftenfenster zugreifen.

Nützliche Tipps zum Ändern der Farbe

Farbe ist einer der wichtigsten Aspekte für ein angenehmes Drahtgitter. Die präziseste Möglichkeit, die Farbe einer Form zu ändern, besteht darin, den HTML-Code der Farbe anzugeben. Den HTML-Code für eine bestimmte Farbe herauszufinden, kann schwierig sein. Wir können HTML-Farb-Spickzettel von w3cschools.com verwenden, um den richtigen HTML-Code für eine bestimmte Farbe zu finden.

Gerne verwenden wir colorzilla, um Farben vom Bildschirm auszuwählen und in Pencil zu verwenden. Klicken Sie auf das Augentropfen-Symbol in der unteren linken Ecke von Firefox, um die Farbe auf dem Bildschirm auszuwählen. Wir können die Farbauswahl von ColorZilla auch öffnen, indem Sie auf das Augensymbol doppelklicken. Kopieren Sie einfach den Hex-Code in den HTML-Farbcode von Pencil.

Fazit

Pencil ist ein einfach zu bedienendes Wireframing-Tool. Die Integration mit Firefox ermöglicht die Verwendung anderer Firefox-Plugins, um ein besseres Drahtgitter zu erstellen

Links
Bleistift herunterladen
Laden Sie Colorzilla herunter
W3C HTML Color Cheat Sheet