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 eng 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 Drahtmodell erstellen.
Warum erstellen wir Drahtgitter?
Ein Drahtmodell ist eine Skizze einer Idee für das Seitenlayout. Ein Drahtmodell konzentriert sich auf das Informationsdesign einer Seite, um sicherzustellen, dass das Design den Anforderungen des Benutzers entspricht. Ein Drahtmodell besteht normalerweise aus verschiedenen Formen (z. B. Kästchen, Ovale und Diamanten), 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. Wenn Sie eine grobe Skizze einer Seite ohne ausgefallene visuelle Elemente erstellen, lenken Sie die Aufmerksamkeit des Benutzers auf wichtige Elemente wie Größe, Layout und Platzierung Ihrer Seitenkomponenten. Wir werden ein besseres Verständnis dafür bekommen, was der Kunde wirklich von der Software will und braucht, wenn sich der Benutzer auf die wichtigen Elemente einer Seite konzentriert. Durch das Erstellen eines Drahtrahmens können Sie und Ihre Benutzer effektiv zusammenarbeiten und potenzielle Entwurfsprobleme frühzeitig erkennen.
Erste Schritte mit Bleistift
Laden Sie Pencil von der Add-On-Seite von Pencil herunter. Sobald Sie Pencil installiert haben, können Sie über "Extras"> "Bleistiftskizze" darauf zugreifen.
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 für die Erstellung jeder Form.
Rechteck erstellen
Der erste Schritt zum Erstellen einer Drahtrahmenform besteht darin, eine Form aus dem Menü "Formsammlungen" auf die Leinwand zu ziehen.
Ä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 Bleistift 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. Stellen Sie die Hintergrundfarbe des Rechtecks auf Weiß (#FFFFFF).
Klicken Sie auf die Registerkarte "Rahmen" und passen Sie die Rahmeneigenschaften an. Stellen Sie die Rahmenfarbe auf Schwarz (# 000000) und ändern Sie das Rahmengewicht auf 1.
Auf dem Bildschirm mit den Texteigenschaften können Sie Schriftart, Größe, Stil, Gewicht, Farbe, Helligkeit und Deckkraft des Texts anpassen.
Registerkarten erstellen
Die Registerkarten Home, Draft und Picture sind drei Registerkarten, die übereinander gestapelt sind. Ziehen Sie drei Registerkarten in das Rechteck. Ändern Sie die Größe jeder Registerkarte so, dass jede Registerkarte nebeneinander angezeigt wird.
Öffnen Sie den Bildschirm mit den Texteigenschaften, um die Schriftfarbe der Registerkarten "Bilder" und "Entwurf" anzupassen. Stellen Sie es auf Grau (# 989898).
Text erstellen
Ziehen Sie die Textform auf die Leinwand, um jedes Menü zu erstellen. Wir können das Erscheinungsbild des Textes anpassen, indem wir auf das Fenster mit den Texteigenschaften zugreifen.
Nützliche Tipps zum Ändern der Farbe
Farbe ist einer der wichtigsten Bestandteile bei der Bereitstellung eines ansprechenden Drahtgitters. Die genaueste Möglichkeit, die Farbe einer Form zu ändern, besteht darin, den HTML-Code der Farbe anzugeben. Es kann schwierig sein, den HTML-Code für eine bestimmte Farbe herauszufinden. Wir können den HTML-Farb-Spickzettel von w3cschools.com verwenden, um den richtigen HTML-Code für eine bestimmte Farbe zu finden.
Wir verwenden Colorzilla auch gerne, um Farben vom Bildschirm auszuwählen und in Bleistift zu verwenden. Klicken Sie auf das Pipetten-Symbol in der unteren linken Ecke von Firefox, um die Farbe auf dem Bildschirm auszuwählen. Sie können den ColorZilla-Farbwähler auch öffnen, indem Sie auf das Augentropfensymbol doppelklicken. Kopieren Sie einfach den Hex-Code und fügen Sie ihn in den HTML-Farbcode von Pencil ein.
Fazit
Bleistift ist einfach zu bedienendes Drahtgitter-Werkzeug. Die Bleistiftintegration in Firefox ermöglicht es uns, andere Firefox-Plugins zu verwenden, um ein besseres Drahtmodell zu erstellen
Links
Laden Sie Pencil herunter
Laden Sie Colorzilla herunter
W3C HTML Color Spickzettel
