Wireframes erstellen

Wireframes sind eine gute Methode, um das erste Konzept einer Website zu erstellen. Es gibt sowohl analoge als auch digitale Methoden für die Erstellung von Wireframes.

Wireframes auf Papier

Der Vorteil von Wireframes

Ein Wireframe ist ist der erste grundsätzliche Entwurf einer Website. Farben und Funktionalität spielen hier noch keine Rolle. Es geht darum, die unterschiedlichen Websiteelemente, wie Logo, Metanavigation, Hauptnavigation, Inhaltsbereich, Footer und umgebenden Bereich zu positionieren. Dadurch entsteht die Grundstruktur der Website. Das Erstellen von Wireframes gehört somit zur frühen Konzeptionsphase einer Website.


Der Vorteil von Wireframes besteht darin, dass sich Kunden zu beginn rein auf die Inhalte und Funktionen der Website konzentrieren können, und nicht von optischen Dingen abgelenkt werden. Wo soll welcher Inhalt stehen? Welche Aktion soll mit einem Button ausgeführt werden? Welche Navigationspunkte bieten dem Nutzer die beste Orientierung? Solche Fragen können mithilfe von Wireframes geklärt werden.


Wenn auf Wireframes verzichtet wird, besteht die Gefahr, dass sich der Kunde zu sehr auf das Design konzentriert, sich zu wenige Gedanken um die Inhalte macht und der Webdesigner direkt mit dem Screendesign beginnt. Wenn später dann doch Änderungen am Inhalt vorgenommen werden müssen, ist davon meistens auch das Screendesign betroffen. Bei einem bereits fein ausgearbeiteten Screendesign sind Änderungen dann sehr aufwändig. Es gibt verschiedene Methoden zur Erstellung von Wireframes – von analog bis digital ist für jeden was dabei.

Papier-Wireframes

Trotz vieler digitaler Tools gibt es auch analoge Methoden zur Erstellung von Wireframes, die ihre Vorteile haben. Dazu gehören Papier-Wireframes. Bei dieser Methode werden Websitelemente auf Papier gezeichnet oder gesruckt und ausgeschnitten. Die Elemente werden dann z.B. auf einer Pinwand angeordnet und bilden so den Grundaufbau einer Internetseite. Die Elemente können schnell und unkompliziert neu angeordnet werden. Auf diese Weise können neue Ideen schnell visualisiert werden.


Außerdem wird bei Papier-Wireframes ganz deutlich, dass es sich hierbei um erste Entwürfe handelt, bei denen das Design keine Rolle spielt. Papier-Wireframes wirken zudem sehr anregend und eignen sich deshalb sehr gut zum Beleben von Diskussionen und zur Entwicklung neuer Ideen.

Gezeichnete Wireframes

Wireframes können auch ganz einfach mit Stift auf Papier gezeichnet werden. Dafür braucht man kein Zeichentalent zu sein. Es soll keine perfekte und schöne Zeichnung erstellt werden. Das würde dem Sinn von Wireframes widersprechen. Die einzelnen Websiteelemente sollen lediglich grob auf Papier angeordnet werden.


Auf diese Weise kann man schnell verschiedene Website-Varianten erstellen. Das geht schneller und unkomplizierter, als mit digitalen Tools, und ist für die ersten Entwürfe völlig ausreichend. Auch Entwürfe für verschiedene Bildschirmbreiten für ein responsives Webdesign lassen sich so schnell entwickeln.


Für viele ist es schwierig, das Zeichnen auf einem völlig weißen Blatt Papier zu beginnen. Eine Herausvorderung ist auch die Festlegung auf die passende Breite des Wireframe. Dafür gibt es online Papiervorlagen, die ausgedruckt werden können und einen “Rahme” für Wireframes bieten. Ein paar Vorlagen gibt es z.B. bei raincreativelab.com/paperbrowser.

Schreibblock mit Wireframes neben Handy auf Tisch

Digitale Wireframes

Wireframes lassen sich natürlich auch digital erstellen. Digitale Wireframes können als Erweiterung der analogen Versionen genutzt werden. Man kann die Konzeption einer Website aber auch direkt digital beginnen.


Wie auch bei den analogen Versionen, sind bei digitalen Wireframes sehr simple oder detailgetreue Skizzen möglich. Digitaler Wireframes sind allerdings viel sorgfältiger. Kleine Änderungen lassen sich hier einfacher und schneller vornehmen.


Für nahezu alle Elemente, wie Buttons, Navigationen oder Bilder, gibt es vorgefertigte Grafiken. So lässt sich ein digitales Wireframe schnell erstellen und wirkt insgesamt ordentlicher und professioneller. Daher wird es häufig für Kundenpräsentationen genutzt. Das birgt leider auch eine Gefahr: Häufig wirken digitale Wireframes auf Kunden wie fertige Designentwürfe. Dadurch kann sich die Aufmerksamkeit des Kunden schnell von der Struktur auf das Design verlagern. Dadurch geht der eigentliche Sinn des Wireframe verloren.

Software und Tools zur Erstellung digitaler Wireframes

Es gibt verschiedene Möglichkeiten, digitale Wireframes zu erstellen. Welche Methode besser oder schlechter ist, hängt von den persönlichen Vorlieben des Webdesigners ab.

Wireframe-Software

Spezielle Software beinhaltet verschiedene Elemente und Funktionen die optimal für die Erstellung von Wireframes ausgelegt sind. Beispiele für Wireframe-Software sind Balsamiq Mockup, Omnigraffle oder Axure.

Grafiksoftware

Grafikprogramme haben nicht unbedingt die spezialisierten Funktionen, wie Wireframe-Software, sie sind dennoch eine gute Alternative, insbesondere, wenn man den Umgang mit ihnen gewohnt ist. Wireframes lassen sich mit den Adobe-Programmen Photoshop, Illustrator und InDesign erstellen. Genauso gut ist dies auch mit den Affinity-Programmen Photo, Designer und Publisher möglich. Affinity ist zwar weniger bekannt als die Adobe-Programme, bietet aber nahezu dieselben Funktionen und ist zudem deutlich günstiger. Die Affinity-Produkte müssen nur einmal gekauft werden und es fallen keine monatlichen Gebühren an. Eine weitere Alternative ist Sketch.

Office-Programme

Auch mit Microsoft Word oder Powerpoint kann man Wireframes erstellen. Bei Kunden ist diese Option beliebt, weil sie den Umgang mit diesen Programmen meistens gewohnt sind.

Online-Tools

Es gibts diverse Online-Tools zur Wireframe-Erstellung. Besonders beliebt sind dabei wireframe.cc und Moqups.

Die Grenzen von Wireframes

Wireframes sind eine gute Methode, um Ideen zu entwickeln und eine erste Struktur einer Website zu entwerfen. Allerdings haben sich die Arbeitsabläufe bei vielen Webdesignern und Agenturen in den letzten Jahren verändert. Ein Grund für die Veränderungen ist die Entwicklung hin zum Responsive Webdesign.


Viele Webdesigner steigen direkt im Frontend in den Designprozess ein. Neben dem Responsive Webdesign ist dies auch durch die zunehmende Interaktivität der Websites zu erklären. Interaktive Elemente lassen sich nicht so gut in Wireframes darstellen, weshalb viele Webdesigner auf sie verzichten.


Insbesondere bei sehr umfangreichen Websites ist es dennoch wichtig, vor Beginn der Frontend-Umsetzung, eine klare Vorstellung von der Struktur der Website zu haben. Wir von concepto DESIGN nutzen Wireframes insbesondere bei komplexen Websites. Da sind sie auch sinnvoll, um gemeinsam mit dem Kunden eine Struktur der Website zu entwickeln. Bei kleinen Websites beginnen wir direkt im Frontend, wobei der Kunde jederzeit den aktuellen Stand seiner Website einsehen kann. Wenn Sie mehr zu unserem Webdesign wissen möchten, lesen Sie Webdesign Köln – Modernes Webdesign für den Erfolg unserer Kunden.


Die Meinungen zu Wireframes sind unter den Webdesignern geteilt. Viele nutzen sie weiterhin, dennoch lässt ihre Bedeutung deutlich nach. Aber zumindest als allererste händische Skizze scheinen Wireframes bei den meisten Webdesignern noch verbreitet zu sein. Ob und wie intensiv man sie nutzt hängt letztlich vom persönlichen Workflow und den persönlichen Vorlieben ab.