Web Design: Die Grundlagen der Wireframing
EIN Drahtgitter-
Ansicht ist ein Diagramm einer Webseite Seite, die einfachen Formen und Textelemente verwendet Seitenstruktur zu zeigen, Inhalte und Navigation. Sie können ein Programm wie Illustrator oder InDesign verwenden Drahtmodelle zu bauen, aber Informationen Architekten im Allgemeinen Microsoft Visio bevorzugen Sitemaps für die Entwicklung.
Kartierung Inhalt Zonen für eine Website
Arbeiten Sie heraus, was auf jeder Seite geht und wie der Inhalt dargestellt wird und navigiert ist eine große Aufgabe, vor allem für große Unternehmensstandorte. Einige Unternehmen entscheiden sich für eine kleine Pre-Drahtgitter- Vorbereitungsarbeit und erstellt ein Vorlage das Team schnell kartieren Inhalt Zonen sicher, dass sie alle arbeiteten gut zusammen und waren konsistent zu machen für jede Seite zu helfen.
Die Vorlage enthalten wichtige Informationen, um das Team der Seitenebene Ziele erinnern. Zum Beispiel kann ein wichtiger Geschäfts Ziel sein, neue Produkte auf der Startseite und zu präsentieren, auf den folgenden Seiten, empfehlen andere Produkte ein Benutzer von Interesse sein könnten. Mit der Kenntnis dieser Ziele, können Sie ein paar Inhalt Zonen definieren und ihre relative zeigen Platzierung, Dimensionierung und die Priorität dieser Komponenten auf der Seite. Beachten Sie, wie mit niedriger Priorität Elemente fallen unter der Falte (Aus der anfänglichen Sichtbereich auf der Webseite, dass die Anwender sie zu scrollen, um zu sehen).
Wireframing in Web-Design
Nach einer Voraus wireframing Übung, können Sie in den Details der einzelnen Seite zu füllen. (A Pre-wireframing Runde ist ein optionaler Schritt empfohlen für große, komplexe Websites. Die meisten Websites gehen Sie einfach rechts auf Wireframes aus der Sitemap.)
Wireframes dienen als eine Art von Wäsche Liste von dem, was von einem Content und Medien Perspektive auf jeder Seite geht, und auch die Karte aus Interaktionsdesign (Wie Benutzer verwenden Werkzeuge auf der Seite oder navigieren Inhalte). Hier sind einige Beispiele dafür, was Ihre Drahtgitter- zeigen könnte:
Was kopieren - und wie viel davon - geht auf der Seite
Welches CMS-Objekte auf der Seite gehen (wenn Sie ein Content-Management-System verwenden)
Welche Art von Bildern und Medien (wie Flash und Video-Dateien) gehen auf der Seite
Ihre technischen und Interaktion Plan für die Seite - Links, Widgets wie Drop-Down-Menüs, Content-Bereiche erweitern, Kontrollkästchen und Schaltflächen
Wireframing ist ein wichtiger Schritt, dass Sie sollten nicht aus jedem interaktiven Projekt verlassen - sei es für eine mobile App ist eine Flash-Präsentation auf einer Messe oder (natürlich) eine Website. Wie ein guter architektonischen Entwurf, der Drahtmodell ist Ihre Chance, zu arbeiten, alle Inhalte und Interaktionsdesign Fragen auf Papier mit nicht nur den Kunden, sondern auch das technische Team, die die Website baut.
Sie brauchen nicht ein Drahtmodell für jede Seite der Website zu bauen. Sie brauchen nur ein Drahtmodell für jedes einzelne Layout zu machen. Zum Beispiel, wenn Sie 100 Produktdetailseiten in Ihren Seitenindex haben, können Sie nur ein Drahtmodell erstellen, das zeigt, wie die Produktdetailseite funktioniert. Wenn ein oder zwei Produktseiten ein etwas anderes Layout oder Inhalt Wendung zu ihnen haben, aber es ist eine gute Idee, ein spezielles Produkt-Detail Drahtmodell nur für sie zu machen.
Es ist wichtig, dass Ihre Wireframes als langweilig und schematisch wie möglich aussehen. Sie sind in der Regel in Graustufen, mit Linien, Boxen, graue Kästen und Blindtext. Dies ist um sicherzustellen, dass Kunden machen klar zu verstehen, dass sie an einem Skelett suchen und nicht eine vorgeschlagene visuelle Gestaltung.