Ein Web-Drahtmodell ist eine einfache visuelle Anleitung, die Ihnen zeigt, wie eine Webseite aussehen würde. Es schlägt die Struktur einer Seite vor, ohne Grafiken oder Text zu verwenden. Ein Website-Drahtmodell würde die gesamte Site-Struktur anzeigen - einschließlich der Links zu den Seiten.
Web-Wireframes sind eine großartige Möglichkeit, um mit Ihrer Designarbeit zu beginnen. Und während Sie komplexe Wireframes mit sehr vielen Details erstellen können, kann Ihre Planung mit einer Serviette und einem Stift beginnen. Der Schlüssel für gute Wireframes besteht darin, alle visuellen Elemente wegzulassen. Verwenden Sie Kästchen und Linien, um Bilder und Text darzustellen.
Dinge, die in einem Wireframe einer Webseite enthalten sein sollten:
- Kästchen für primäre grafische Elemente
- Platzierung von Überschriften und Unterköpfen
- eine einfache Layoutstruktur
- ruft zum Handeln auf
- Textblöcke
So erstellen Sie ein einfaches Web-Drahtmodell
Erstellen Sie ein Wireframe für eine Webseite aus beliebigem Papierfetzen. So mache ich es:
- Zeichnen Sie ein großes Rechteck - dies kann entweder die gesamte Seite oder nur den sichtbaren Teil darstellen. Normalerweise beginne ich mit dem sichtbaren Teil und erweitere ihn dann um Elemente, die sich unterhalb der Falte befinden würden.
- Skizzieren Sie das Layout - sind es 2 Spalten, 3 Spalten?
- Hinzufügen eines Felds für eine Kopfzeilengrafik - Ziehen Sie die Spalten über die Spalten, wenn Sie eine einzelne Kopfzeile über den Spalten haben möchten, oder fügen Sie sie an der gewünschten Stelle ein.
- Schreiben Sie "Headline" an die Stelle, an der Ihre H1-Überschrift sein soll.
- Schreiben Sie "Sub-Head" an die Stelle, an der H2 und die unteren Überschriften angezeigt werden sollen. Es ist hilfreich, wenn Sie sie proportional machen - h2 kleiner als h1, h3 kleiner als h2 usw.
- Fügen Sie Boxen für andere Bilder hinzu
- In der Navigation hinzufügen. Wenn Sie Registerkarten planen, zeichnen Sie einfach Boxen und schreiben "Navigation" darüber. Oder fügen Sie Aufzählungslisten in die Spalten ein, in denen Sie die Navigation wünschen. Schreiben Sie nicht den Inhalt. Schreiben Sie einfach "Navigation" oder verwenden Sie eine Zeile, um Text darzustellen.
- Fügen Sie der Seite zusätzliche Elemente hinzu - identifizieren Sie, was sie mit Text sind, verwenden Sie jedoch nicht den eigentlichen Inhaltstext. Wenn Sie beispielsweise einen Aufruf zur Aktionsschaltfläche in der rechten unteren Ecke haben möchten, setzen Sie dort eine Box und nennen Sie sie "Aufruf zur Aktion". Schreiben Sie nicht "Jetzt kaufen!" in dieser Box
Sobald Sie Ihr einfaches Drahtgitter erstellt haben, sollten Sie es nicht länger als 15 Minuten brauchen, um eines zu skizzieren und einem anderen zu zeigen. Fragen Sie sie, wenn etwas fehlt, und nach anderen Rückmeldungen. Basierend auf dem, was sie sagen, können Sie ein anderes Drahtgitter schreiben oder das von Ihnen behalten.
Warum Papier-Wireframes am besten für erste Entwürfe geeignet sind
Es ist zwar möglich, mit Programmen wie Visio Wireframes zu erstellen, aber für Ihre ersten Brainstorming-Sitzungen sollten Sie sich an das Papier halten. Papier scheint nicht dauerhaft zu sein, und viele Leute werden davon ausgehen, dass Sie es in 5 Minuten zusammengeschmissen haben, und zögern Sie nicht, Ihnen gutes Feedback zu geben. Wenn Sie jedoch ein Programm verwenden, um ausgefallene Wireframes mit perfekten Quadraten und Farben zu erstellen, laufen Sie Gefahr, in das Programm selbst hineingezogen zu werden und Stunden damit zu verbringen, etwas zu perfektionieren, das niemals live wird.
Papier-Drahtmodelle sind einfach zu machen. Und wenn Sie es nicht mögen, zerknüllen Sie einfach das Papier, werfen es zum Recycling und greifen Sie nach einem neuen Blatt.
