Was sind Wireframes?

Ein Layout und das Konzept einer Website kann mit Wireframes dargestellt werden

Wenn es in der Planungsphase darum geht, das Konzept und Layout einer Website optisch darzustellen und zu planen, dann kann ein Wireframe hilfreich sein.

Ein Gittermodell einer Website veranschaulicht das Konzept und den Aufbau einer Website.

Wenn die Konzeption und Planung einer neuen Website noch am Anfang steht, geht es irgendwann darum, welche Informationen und Elemente auf einer Website enthalten sein sollen. Ist dies geklärt, dann gilt es festzulegen, wo diese Inhalte in welcher Form eingebunden werden sollen. Dann kommen oftmals Wireframes (Gittermodelle) zum Einsatz.

Gerade bei größeren Projekten ist die reine Textform für eine solche Planung nicht mehr praktikabel. Es wird dann schnell unübersichtlich. Wenn mehrere Personen (Projektleiter, Designer, Entwickler und Kunden) an einem Projekt beteiligt sind, man also im Team arbeitet, ist eine visuelle und verständlichere Darstellung unabdingbar. Eine solche Darstellung könnte man durch einfache Zeichnungen auf Papier erstellen (engl.  scribblen). Allerdings ist die Weiterleitung von Papier an andere Teammitglieder bekanntlich nur schwer zu ermöglichen und auch die Korrektur- und Anpassungsmöglichkeiten sind hier begrenzt. Also setzt man diese Zeichnungen einfach digital mit einer entsprechenden Software um.

Ein Wireframe (engl. für Drahtgerüst) dient dafür, einen recht frühen Entwurf einer Website zu visualisieren. Dabei gilt „keep it simple“  (engl. für halte es einfach).

Es bedient sich dabei lediglich minimaler Gestaltungselemente (schemenhafte Boxen, Rahmen, weitestgehend unformatierte Texte, Gitter und Linien). Eine erweiterte Visualisierung durch bindende Typografie-Angaben, Farben, Grafiken oder gar Bilder findet keine Verwendung.

Der Einsatz von Wireframes empfiehlt sich jedoch erst ab einer gewissen Projektgröße, da die Umsetzung einige Zeit in Anspruch nehmen kann. Bei sehr kleinen Projekten sollte man daher eher auf Textform und/oder scribblen zurückgreifen.

Wir alle kennen Wireframes aus dem privaten Bereich: Wenn man in eine neue Wohnung oder ein Haus umzieht und sich dann eine Skizze eines Raumes auf ein Blatt erstellt (scribblen) und dann Möbelstücke und Einrichtungsgegenstände dazu zeichnet, erstellt man im Grund ebenfalls ein Wireframe.

Ein Wireframe gibt also Aufschluss darüber, wie die reine Aufteilung/Struktur der Website später aussehen wird. Grafiker/Designer nutzen das Wireframe dann als Grundlage für den Designentwurf. 

Womit man Wireframes erstellt

Für die Erstellung kann man eigentlich eine normale Grafik-Software nutzen, allerdings ist das bei größeren Projekten etwas mühsam. Es gibt spezielle Wireframe-Software als die Desktop- oder Web-Applikationen. Mit einer solchen Lösung kann man die Gittermodelle in der Regel schneller und einfacher realisieren.

Der Markt bietet dank einer Vielzahl von Anbietern eine große Auswahl an Software zur Erstellung von Wireframes. Hier einige Anbieter:

Das könnte Sie auch interessieren

Tobias Karnetzke CEODer Autor: Tobias Karnetzke ist Mitinhaber der Internetagentur Karnetzke. Er ist seit 2004 selbständiger Webdesigner, Programmierer, SEO-Experte und Google zertifiziert. Agenturen im In- und Ausland vertrauen auf seine Erfahrung als Berater und WordPress-Spezialist. E-Mail: tk@karnetzke.de