Blog

Was sind Webdesign Wireframes?

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

    Layout und Konzept einer Website mit Wireframes visualisieren.

    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.

    Wozu dienen Wireframes

    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.

    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 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. 

    Wann nutzt man Wireframes

    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.

    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.

    Wireframe Tools

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

    Aktuelle Januar Aktion
    Kostenfreier Website-Check

    Wir prüfen bei einer Potenzialanalyse, ob Ihre Website Ihre Ziele optimal verfolgt und ob Ihr Angebot wirksam an Besucher vermittelt wird.

    Optimierungspotenzial erkennen
    SEO, Content und Vertriebseffizienz-Check
    Inklusive Experten-Call und Nachbesprechung
    Der Autor - Tobias Karnetzke

    Tobias Karnetzke ist seit 2002 Webdesigner, WordPress Entwickler und Online-Marketing Experte für wertschöpfende Online-Positionierung. Bereits 2004 hat er die Digitalagentur Karnetzke gegründet und hilft Unternehmen dabei, das Internet als gewinnbringenden Business-Faktor zu nutzen. Er ist seit mehr als 12 Jahren als Freelancer und externer Berater für mehrere Agenturen im DACH-Raum tätig.

    Tobias Karnetzke, Gründer der Digitalagentur Karnetzke
    Aktuelles aus unserem Blog
    arrow-right
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram