Share
Nach dem Skizzieren sollten Sie eine letzte Sache bearbeiten, bevor Sie mit dem Entwerfen beginnen (obgleich dies alles Teil des Entwerfens ist). Wireframing ist im Wesentlichen ein visueller Leitfaden für eine Website, der Ihnen hilft, das Layout zu betrachten, ohne an die Ästhetik des Projekts zu denken.
Wie ein Drahtgitter aussehen sollte, hängt stark davon ab, mit wem Sie sprechen. Sie haben viele Möglichkeiten beim Erstellen von Wireframes - von der Darstellung Ihrer Wireframes bis hin zur Software, mit der Sie sie erstellen.
Bei der Erstellung Ihrer Wireframes müssen Sie mit dem Layout und dem zuvor kuratierten Inhalt arbeiten. Die Idee eines Drahtgitters - als Lieferung an einen Kunden oder einfach als zusätzlichen Schritt, den Sie bevorzugen - besteht darin, das visuelle Layout und den Fluss einer Website-Seite anzeigen zu können, bevor Sie sich mit dem Design verklemmen Details wie Farbe, Typografie oder andere visuelle Flairs.
Die beste Möglichkeit, digitale Wireframes für Ihr Projekt zu erstellen, besteht darin, direkt aus der Skizzierphase zu gelangen. In diesem Abschnitt sollten Sie bereits mit dem Layout herumgespielt haben. Die Erstellung eines digitalen Drahtgitters ist jedoch eine viel professionellere Methode, um Ihre Ideen in Bezug auf das Layout und den Fluss Ihrer Webseite festzulegen.
Wenn Sie kreative Wireframes entwerfen, möchten Sie sicherstellen, dass Sie den tatsächlichen Inhalt verwenden, den Sie am Anfang des Projekts kuratieren. Ich persönlich bevorzuge es, Wireframes zu entwerfen, denen alles fehlt, was den Kunden dazu bringen könnte, dass Designentscheidungen getroffen werden, die das Erscheinungsbild des Projekts beeinflussen. Daher stelle ich immer sicher, dass ich ein Wireframe entwerfe, das sich nur auf den Inhalt des Projekts und die Art der Darstellung der Inhalte auf der Seite konzentriert.
Ein Beispiel für ein Drahtgitter, das mit der Balsamiq Desktop-Anwendung erstellt wurde. Inhalte, die gut geschrieben und in einer Weise dargestellt und angezeigt werden, die für diejenigen, die sie lesen werden, relevant sind, führen immer zu einem besseren Design und Online-Erlebnis. Ein gut konzipiertes Drahtgitter erinnert daran, dass der Inhalt das Wichtigste auf der Seite ist und es sympathisch ist, diesen Inhalt in einer für das Projekt und seine Endbenutzer geeigneten Weise anzuzeigen.
Die Wireframe-Phase eines Projekts hängt stark davon ab, wann Sie am Anfang des Projekts gearbeitet haben und mit Ihren Inhalten gearbeitet haben. Als kurzes Beispiel haben Sie an diesem Punkt hart gearbeitet, um sicherzustellen, dass der Inhalt durch die richtige Verwendung von Überschriften und Listen leicht lesbar ist. Wenn Sie ein gutes Drahtgitter entwerfen, müssen Sie diesen Inhalt (in Abschnitten, Überschriften, Listen und auf welche andere Weise Sie den Inhalt auch formatieren) in Ihr Drahtgitter transportieren und prüfen, wie Sie mit der Erstellung beginnen können visuell Beziehungen zwischen den einzelnen Inhalten, Verbinden der Punkte, bis eine visuelle Darstellung des Inhalts auf einer Seite angezeigt wird.
Um Ihre Wireframes frei von Design und Inhalt zu halten, ist das Arbeiten mit Blöcken eine sehr einfache Möglichkeit, Teile einer Seite nach bestimmten Inhaltsbereichen zu unterteilen.
In der Praxis bedeutet dies, dass Sie, wenn Sie beispielsweise einen Standardheader oben auf der Seite wünschen, einen Block oben in Ihr Drahtgitterdesign einfügen möchten. Wenn Sie beispielsweise nur ein Logo und einen Navigationsbereich in der Kopfzeile hinzufügen möchten, platzieren Sie zusätzliche Blöcke für diese Elemente in der Kopfzeile Ihres Wireframe-Designs.
Sie können dann Blöcke für den Rest des Wireframe-Entwurfs verwenden und Bereiche für bestimmte Inhaltsbereiche abschneiden.
Blöcke müssen jedoch nicht nur ein buchstäbliches monochromes Quadrat oder Rechteck sein. Sobald Sie eine Vorstellung von Ihrem Grundlayout mit den hinzugefügten Blöcken haben, können Sie Ihren tatsächlichen Inhalt an Stellen verwenden, an denen er nützlich ist. Verwenden Sie beispielsweise den tatsächlichen Inhalt für die Navigationselemente, eine Einführung zu einer Seite, die Überschriften usw. Dies ist hilfreich, da Sie visuell sehen können, wie der Inhalt in dem von Ihnen erstellten Layout zusammenarbeitet.
Achten Sie beim Entwerfen von Wireframes immer darauf, die Bereiche oder Abschnitte zu kennzeichnen, die Sie in Ihr Drahtmodell einfügen. Obwohl Sie möglicherweise verstehen, was ein bestimmter Block bedeutet (insbesondere wenn der eigentliche Inhalt nicht dort abgelegt wird), kann es sein, dass ein Kunde oder ein Kollege dies nicht tut, und Sie sollten es so klar wie möglich machen, um zu verstehen, was er gerade sieht.
Beim Entwerfen von Wireframes sollten Sie über den Fluss der Seite nachdenken. Sehen Sie sich an, wie der Inhalt auf der Seite angezeigt wird und wie er von einem Inhaltsbereich zu einem anderen fließt.
Ziel ist es, sicherzustellen, dass der Inhalt korrekt gelesen wird und dass das Auge sich fließend von einem Abschnitt zum nächsten bewegt. Dies ist besonders wichtig, wenn Sie über inhaltsintensive Seiten verfügen. Benutzer sollten in der Lage sein, problemlos von einem Abschnitt zum nächsten zu wechseln, ohne dass dies ein erschütterndes Erlebnis ist. Wenn Seiten zu beschäftigt sind und nicht den richtigen Fluss haben, werden die Benutzer durch einen scheinbar schwer verständlichen oder nachvollziehbaren Prozess deaktiviert.
Eine Idee ist, darüber nachzudenken, was Sie beim Navigieren auf einer Website intuitiv tun würden. Beginnen Sie mit einem Blick auf das Logo und die Kopfzeile, dann auf die Hauptüberschrift und folgen Sie dem Hauptinhalt, bewegen Sie sich schrittweise in Richtung einer Seitenleiste und so weiter.
Beim Entwerfen einer Website ist es nahezu unmöglich, für jede Phase, für die sich die Website ändern kann, ein eigenes Drahtgitter zu erstellen, wie sie aussieht oder zusammenpasst. Anstatt zuvor über den Ablauf Ihres Designs und Ihres Inhalts nachgedacht zu haben, können Sie den Reaktionsfluss auf das Drahtgitterdesign betrachten.
Dies war ein Tipp, den ich in Sarah Parmenters Responsive Day Out-Vortrag erhalten hatte. Darin erklärte Sarah, wie sie ihren Wireframes Zahlen hinzufügt, die einem Kunden helfen zu verstehen, wie sich Inhalte und Elemente auf einem kleineren Bildschirm stapeln können. Dies ist sehr nützlich, da es einem Kunden dabei hilft, die Inhaltshierarchie besser zu verstehen. Dies bedeutet auch, dass Sie mögliche Gefahren und Herausforderungen in einer sehr frühen Phase des Projekts erkennen können. Dies kann Sie sparen viel Zeit später im Projekt.
Beim Entwerfen von Wireframes haben Sie eine lächerliche Auswahl, wenn es um die Software geht, die Sie verwenden können. Ich persönlich glaube, dass es definitiv drei Optionen gibt, die am populärsten erscheinen, insbesondere in der Webbranche.
Beim Entwerfen eines Drahtgitters ist es möglicherweise die einfachste Lösung, mit einer Grafik-App zu arbeiten, mit der Sie bereits vertraut sind - oder zumindest ein wenig zuvor verwendet haben. Dies bedeutet, dass es wenig bis keine Lernkurve gibt, sodass Sie hoffentlich mit dem Entwurf Ihrer Wireframes ein bisschen schneller beginnen können.
Die einfachste Möglichkeit, mit Ihrer Grafiksoftware zu entwerfen, besteht darin, die Form- und Textwerkzeuge zu verwenden, um Ihre Basisblöcke sowie bestimmte Bereiche mit echtem Inhalt zu erstellen. Vergessen Sie nicht, Ihre Drahtgitterblöcke mit dem Textwerkzeug zu beschriften, während Sie fortfahren.
Dies kann für einige überraschend sein, da Keynote und Powerpoint normalerweise zum Erstellen von Präsentationen verwendet werden. Sie sind jedoch sehr leistungsfähige und benutzerfreundliche Werkzeuge zum Erstellen anderer Elemente, einschließlich Drahtmodelle. Mit den Standard-Tools, die Ihnen in den Apps selbst zur Verfügung stehen, können Sie schnell und einfach professionell aussehende Wireframes erstellen.
Meine persönlichen Vorlieben, Balsamiq Mockups, ist eine App, die sich der Erstellung von Wireframes widmet. Diese App macht es wirklich einfach, Ihre Wireframes zu entwerfen, und verfügt über eine Vielzahl von Ressourcen, um die Elemente, die Sie platzieren möchten, schnell zu verschieben.
Was ich an Balsamiq Mockups sehr schätze, ist die Verwendung eines groben, skizzierten Stils, der zeigt, dass Wireframes genau das sind - eine Idee des Layouts, die später in ein ordentliches Design umgesetzt werden könnte. Sie haben die Möglichkeit, zwischen einem Standardgefühl der Wireframes und dem skizzierten Finish zu wählen, wenn Sie der Meinung sind, dass ein Kunde dafür aufgeschlossener wäre.
Mit der Einführung von Benutzeroberflächen-Kits ist es auch sehr einfach, komplexere Wireframes für eine Vielzahl von Apps zu entwerfen. Von vollständigen Kits, die Sie herunterladen können, um sie als PSD in Photoshop zu verwenden, bis hin zu Sets, mit denen Sie Wireframes in Keynote einfacher erstellen können - hier gibt es etwas, das Ihnen helfen kann.
Accentsconagua