• Agentur
    • Team
    • Kontakt
  • Leistung
    • Conversion-Optimierung
    • A/B-Testing
    • Webentwicklung
    • E-Commerce-Workshops & Seminare
    • Suchmaschinenoptimierung / SEO-Optimierung
    • E-Commerce-Strategie
    • Content-Marketing
  • Referenzen
    • Kundenmeinungen
  • E-Commerce Blog
    • E-Commerce Lexikon
  • Suche

Wireframing

A B C E G H I K L M N P R S T U W

Wireframing, Übersetzung: Erstellung eines Drahtgittermodells, Drahtgerüsts, Drahtgestells

Was ist Wireframing?

Als Wireframing wird die Erstellung eines sehr frühen, konzeptionellen Entwurfes einer Website bezeichnet. Hierbei handelt es sich um eine skizzenähnliche Darstellung der Inhalte und detaillierte Beschreibung des Layouts und der Funktionen. Beim Wireframing wird in der Entwicklungsphase, bevor die eigentlichen Inhalte eingestellt werden, die Struktur, und die daraus resultierende Benutzerführung, der Website definiert.

In einem sogenannten Wireframe (dt. Drahtgittermodell) werden die unterschiedlichen Bereiche der Website in Planquadrate aufgeteilt. Alle grundlegenden Elemente und Features, wie beispielsweise Logos, Inhaltsbereiche, Navigationselement, Suchfelder, Call-To-Action-Elemente etc., werden in verschiedenen Graustufen dargestellt und im Wireframe positioniert. Da es hier um die Planung und die erste Veranschaulichung eines zukünftigen Internetauftritts geht, werden noch keine konkreten Design-Elemente und Inhalte verwendet. Ein Wireframe kommt ganz ohne Farben, Fonts, Typographien, Grafiken und Texte aus.

Auf der Grundlage eines Wireframes werden im nächsten Schritt, sogenannte Mockups erstellt. Diese bauen auf dessen Struktur auf, sie sind aber bereits viel detaillierter. In einem Mockup, wird das spätere Erscheinungsbild (inklusive Farbschema, Typographien etc.), der zu erstellenden Website, so genau wie möglich abgebildet.

Arten des Wireframes

Beim Wireframing können zwei Arten von Entwürfen verwendet werden. Man unterscheidet zwischen dem statischen und dem dynamischen Wireframe. Bei beiden steht die Konzeption, nicht das Design im Vordergrund.

Bei einem statischen Wireframe handelt es sich um einen Erstentwurf einer Website. Es wird nur eine einzelne Seite, mit den grundlegenden Elementen, schematisch dargestellt. Hierbei geht es um ein konzeptionelles Layout, Inhalt und Design spielen noch keine Rolle.

Wireframing Mobile Beispiel » Creatistas

Wireframing | Mobile Beispiel

Ein dynamischer Wireframe besteht aus mehreren Seiten, die bereits miteinander verknüpft sind. Eine Navigation von einer Seite zur anderen ist möglich. Dies dient der ersten Überprüfung des Navigationskonzepts und der Usability. Die Struktur wird durch das Ergänzen eines Navigationsbaums bzw. eines Flussdiagramms verdeutlicht. Auch bei dem dynamischen Wireframe geht es vorrangig um die grundlegende Gliederung einer Website. Die einzelnen grafischen Elemente werden nur vereinfacht dargestellt.

Vorteile des Wireframings

Ein wesentlicher Vorteil des Wireframings ist, die Zeitersparnis. Denn Wireframes lassen sich deutlich schneller erstellen als die traditionellen Layouts, die alle Design-Elemente bereits beinhalten. Da die Erstellung nur wenig Zeit in Anspruch nimmt, können durchaus mehrere Layout-Vorschläge ausprobiert werden. Die Wünsche, beispielsweise eines Kunden, lassen sich ohne viel Aufwand integrieren, Variationen und neue Ideen schnell ausprobieren. Ebenfalls die Umsetzung eines Layouts, anhand eines fertigen Wireframes benötigt viel weniger Zeit, da z.B. die Form, Größe und Positionierung vieler Elemente bereits schon vorher bestimmt wurde.

Ein weiterer Vorteil ist die bessere Kommunikation zwischen den einzelnen Projektteilnehmern. Anhand der visuellen Darstellung des Layouts, haben alle Beteiligten von Anfang an, das gleiche Bild vor Augen. Mit Hilfe des Wireframes fällt es wesentlich leichter, die Funktionen der einzelnen Elemente zu erklären. Aus diesem Grund kommt es seltener zu Missverständnissen und zeitaufwendige Fehlentwicklungen können dadurch verhindert werden.

Da Änderungen schnell umgesetzt werden können, ist es möglich, dass der Auftraggeber stärker in die Entwicklung mit eingebunden wird. Jegliche Entwicklungsschritte können schnell abgestimmt und abgesegnet werden. In Folge dessen, ist die Gefahr, einer Entwicklung, die nicht den Vorstellungen des Auftraggebers entspricht, dadurch deutlich geringer.

Kategorien
  • Büroalltag (2)
  • Content-Marketing (5)
  • Conversion-Optimierung (54)
  • E-Commerce Strategie (6)
  • E-Commerce Trends (5)
  • Internet of Things (3)
  • Mobile (2)
  • Suchmaschinenoptimierung/ SEO-Optimierung (2)
Newsletter abonnieren

Suche

Socialising

Facebook
Twitter
Instagram

Newsletter abonnieren

© 2022 | Creatistas E-Commerce Beratung | Impressum & Datenschutz

Cookie-Zustimmung verwalten
Wir verwenden Cookies, um unsere Website und unseren Service zu optimieren.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}