Visualisierung: Nützliche Wireframes

18.06.2015 09:00:00
Wireframes verdeutlichen Webseiten, lange bevor sie fertig gestaltet sind. Mit diesen Tools gelingt die Vorschau.

In der Konzeptionsphase sind die Ideen von Webdesignern für Kunden manchmal nur schwer nachzuvollziehen. Um ihnen einen Eindruck vom geplanten Projekt zu ermöglichen, kann man Wireframes verwenden. Sie liefern einen ersten Überblick über Seitenstrukturen und Zusammenhänge und dienen so der Visualisierung von Webpages. Wir stellen fünf Tools vor.

Was sind Wireframes genau?

Quelle: Paul-Georg Meister / Pixelio.de
Übersetzt bedeutet Wireframe Drahtgerüst und kommt aus der Schneiderei dort meint der Begriff eine Schneiderpuppe, der Entwürfe angezogen werden können. „hnlich funktionieren Wireframes in der Web-Entwicklung. Wireframes dienen hier dazu, einen konzeptionellen Entwurf einer Webseite in einem sehr frühen Stadium zu visualisieren. Es geht vor allem darum, die Anordnung von Elementen und die Benutzerführung darzustellen, Gestaltung und Funktion sind dabei eher noch zweitrangig. Im Prinzip sind Wireframes Baupläne für Webseiten, sie können aber auch in der Entwicklung von Apps eingesetzt werden.

Statische und dynamische Wireframes

Eine schematische Darstellung bezeichnet man als statische Wireframes. Die wichtigsten Seitenelemente sind darauf erkennbar, auch das Grundlayout, das die Webseiten zusammen hält. Das Design ist jedoch in der Regel noch nicht fertig. Mehrere Seiten, die untereinander verknüpft sind, heißen dynamische Wireframes. Wie in der fertigen Webpage später ist die Navigation bereits nachvollziehbar. Die Sitemap wird meist zusätzlich durch ein Diagramm visualisiert, um so die Struktur der Webseite aufzuzeigen.

Vorteile

Für den Webdesigner selbst sind Wireframes wichtig, um einen Gesamtüberblick über ein Projekt zu erhalten, einschließlich der Abhängigkeit und Verlinkung der Seiten untereinander. Anhand des Drahtmodells wird der Webauftritt greifbarer und lässt sich dem Kunden leichter vermitteln. Auch Fachbegriffe, die der Auftraggeber vielleicht nicht kennt, lassen sich anhand eines Modells besser erklären, zudem lassen sich die Kosten exakter kalkulieren. Der wichtigste Vorteil besteht aber darin, einen roten Faden und einen klaren Fahrplan die nächsten Schritte betreffend zu haben.

Schwerpunkte

Layout, Design, visuelle Umsetzung: All diese Punkte sind in der Konzeptionsphase, wenn es um das große Ganze geht, noch nicht so wichtig. Viel entscheidender ist es, einen Plan zu erstellen, sich Gedanken über die Navigation und die Platzierung der einzelnen Elemente zu machen. Feinheiten wie Schriftgrade können zu einem späteren Zeitpunkt ausgearbeitet werden.

Tools für Wireframes

Es gibt mehrere Werkzeuge, mit denen sich Wireframes bequem erstellen lassen. Wer kein eigenes Tool dafür nutzen möchte, kann auf Adobe Illustrator zurückgreifen. Ansonsten sind Axure, Balsamiq, Moqups, OmniGraffle Pro und Wireframe.cc mögliche Anlaufstellen. Wir stellen die nützlichen Helfer kurz vor.

Axure

Quelle: Axure

Das Tool Axure ist eines der umfangreichsten, die es für Wireframes gibt. Hier stehen vorgefertigte Elemente zur Verfügung, die man als pixelgenaues Bild, aber auch in handschriftlicher Form darstellen kann. Die Prototypen lassen sich zudem mit Kommentaren versehen, die man in Word exportieren kann. Die Vielfalt der Funktionen macht das Werkzeug jedoch etwas unübersichtlich, zudem hat es in der Standard-Version mit 289 US-Dollar und mit 598 US-Dollar in der Pro-Version seinen Preis.

Balsamiq

Deutlich günstiger als Axure ist das Tool Balsamiq mit einem Einstiegspreis von 89 US-Dollar. Es stehen zahlreiche vorgefertigte Elemente zur Verfügung, mit denen ein erster Aufbau der Seiten einfach wird. Auch hier ist eine Kommentarfunktion inklusive. Zudem ist eine Web-App erhältlich, die ab 12 US-Dollar im Monat kostet.

Moqups

Quelle: Moqups

Das Tool Moqups läuft als App über einen Browser, Flash und Java sind nicht nötig. Stattdessen kann man den Zugangslink zu Projekten verschicken und so weitere Teilnehmer einladen. Im Vergleich zu anderen Werkzeugen stehen allerdings weniger vorgestaltete Elemente zur Verfügung, dafür ist die freie Version kostenlos nutzbar. Für die Premium-Version werden ab neun Euro im Monat fällig.

OmniGraffle Pro

Wer mit Photoshop arbeitet, kennt schon ein wesentliches Funktionsprinzip von OmniGraffle Pro: Die Software nutzt Ebenen, mit denen sich die Wireframes strukturieren lassen. Schablonen gehören ebenfalls zur Standardausstattung, zudem können interaktive Elemente verwendet werden. Das Tool läuft nur unter Mac-Betriebssystemen und kostet zwischen 99,99 und 199,99 US-Dollar.

Wireframe.cc

Quelle: wireframe.cc

Wer ein schnelles, kostenloses Online-Werkzeug sucht, ist bei Wireframe.cc richtig. Allerdings stehen hier nur rudimentäre Funktionen zur Verfügung, dafür erfolgt die Bedienung sehr intuitiv. Wireframes werden mit Hilfe einer URL gespeichert, über die sie sich später wieder aufrufen lassen. Auf diese Weise kann man den Zugang zu Skizzen teilen.

Übersicht Druckprodukte
  • zahlreiche Produkte im Digital- und Offsetdruck

  • umfangreiches Sortiment in der Werbetechnik

  • Rollenoffset Produkte für große Auflagen
  • 100% klimaneutral
Produkte finden
Wir helfen Ihnen weiter!
SIE BENÖTIGEN HILFE BEI DER DRUCKDATENERSTELLUNG?
Wir helfen Ihnen gerne bei der Erstellung Ihrer Druckvorlagen.
Auf unserer Serviceseite haben wir viele nützliche Hinweise dazu zusammengefasst.
SIE HABEN IHR WUNSCHPRODUKT NICHT GEFUNDEN?
Sollten Sie spezielle Anforderungen an ein Produkt haben, richten Sie bitte eine Anfrage an unser Service-Team. Gemeinsam finden wir die richtige Lösung für Sie!