23Jul
Pencil ist ein Drahtgitter-Werkzeug, mit dem wir die Benutzeroberfläche unserer Anwendung skizzieren können. Das Tolle an Pencil ist, dass es leicht, einfach zu benutzen und eng mit 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 können.
Warum erstellen wir Wireframes?
Ein Wireframe ist eine Skizze einer Seitenlayout-Idee. Ein Wireframe konzentriert sich auf das Informationsdesign einer Seite, um sicherzustellen, dass das Design in die Bedürfnisse des Benutzers passt. Ein Drahtmodell besteht normalerweise aus verschiedenen Formen( z. B. Kästchen, Ovalen und Rauten), um Inhalte, funktionale Elemente und Navigationselemente darzustellen. Diese Formen zeigen ihre Platzierung auf der Seite an.
Zunächst scheint es eine Zeitverschwendung zu sein, grobe Skizzen einer Seite zu erstellen. Ein Drahtgitter 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, wird der Benutzer auf wichtige Elemente wie Größe, Layout und Platzierung Ihrer Seitenkomponenten aufmerksam gemacht. Wir werden anfangen, ein besseres Verständnis darüber zu bekommen, was der Kunde wirklich von der Software will und braucht, wenn der Benutzer sich auf die wichtigen Elemente einer Seite konzentriert. Durch die Erstellung eines Drahtmodells können Sie und Ihre Benutzer effektiv zusammenarbeiten und potenzielle Designprobleme frühzeitig erkennen.
Erste Schritte mit dem Bleistift
Laden Sie den Bleistift von der Add-ons-Seite von Pencil herunter. Sobald Sie Pencil installiert haben, können Sie von 'Tools' & gt;"Bleistiftskizzen".
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 wird ein einfaches Beispiel zum Erstellen jeder Form geben.
Erstellen eines Rechtecks
Der erste Schritt beim Erstellen einer Drahtmodellform ist das Ziehen einer Form aus dem Menü "Formensammlungen" auf die Zeichenfläche.
Ändern Sie die Größe des Rechtecks auf eine geeignete Breite und Höhe.
Wir können den Text, die Grenze und die Hintergrundfarbe jeder möglicher Form im Bleistift besonders anfertigen. 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 Rechteck-Hintergrundfarbe auf Weiß( #FFFFFF).
Klicken Sie auf die Registerkarte 'Rahmen' und passen Sie die Rahmeneigenschaften an. Setzen Sie die Rahmenfarbe auf Schwarz( # 000000) und ändern Sie die Randstärke auf 1.
Über den Texteigenschaften-Bildschirm können Sie Schriftart, Größe, Stil, Gewicht, Farbe, Helligkeit und Deckkraft des Textes anpassen.
Erstellen von Registerkarten
Die Registerkarten "Home", "Entwurf" und "Bild" sind drei Registerkarten, die übereinander gestapelt sind. Ziehe drei 'Tabs Panel' in das Rechteck.Ändern Sie die Größe jeder Registerkarte so, dass jede Registerkarte nebeneinander angezeigt wird.
Öffnen Sie den Texteigenschaften-Bildschirm, um die Schriftfarbe für die Registerkarte 'Bilder' und 'Entwurf' anzupassen. Setze es auf Grau( # 989898).
Erstellen von Text
Ziehen Sie die Form 'Text' auf die Leinwand, um jedes Menü zu erstellen. Wir können die Textdarstellung anpassen, indem wir auf das Texteigenschaftenfenster zugreifen.
Nützliche Tipps zum Ändern der Farbe
Farbe ist einer der wichtigsten Bestandteile bei der Bereitstellung eines ansprechenden Drahtmodells. Die präziseste 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-Farbspickzettel von w3cschools.com verwenden, um den richtigen HTML-Code für eine bestimmte Farbe nachzuschlagen.
Wir verwenden auch Colorzilla, um Farben vom Bildschirm auszuwählen und sie in Pencil zu verwenden. Klicken Sie auf das Pipettensymbol in der unteren linken Ecke von Firefox, um die Farbe auf dem Bildschirm auszuwählen. Wir können auch ColorZillas Farbauswahl öffnen, indem Sie auf das Augentropfen-Symbol doppelklicken. Kopieren Sie einfach den Hex-Code in den HTML-Code des Pencil-Farbcodes.
Fazit
Pencil ist ein einfach zu bedienendes Drahtbildwerkzeug. Pencil Integration mit Firefox ermöglicht es uns, andere Firefox-Plugin zu verwenden, um ein besseres Drahtmodell zu erstellen
Links
Download Bleistift
Herunterladen Colorzilla
W3C HTML Farbe Spickzettel