Stellen Sie sich vor, sie wollten ein Haus bauen und das Bauunternehmen würde sagen: „Ach. Jetzt wissen wir ja so ungefähr wie viele Leute in dem Haus wohnen sollen und welche Farben sie mögen. Wir bauen einfach mal was.“ Dann wird ein paar Tage gemauert und gehämmert und gebohrt. Am Ende steht dann da ein fertiges Haus und jemand fragt: „Und wie gefällt es ihnen? Wir haben das Bad erstmal weggelassen. Aber der Garten ist riesig! Toll, was?“

Update: Durch die rasante Entwicklung des Designbüro Freise in den Jahren 2016 und 2017 haben wir das Making-of nicht weiter verfolgen können. Zudem haben wir aus strategischen Gründen das hier zum Teil erarbeitete Konzept und Wireframe zwischenzeitlich angepasst. Dennoch erfahren Sie in unserem Website-Making-of einige interessante Konzepte und Basics bei der Erstellung von Websites und Webshops.

Würden Sie sich nicht auch fragen, ob es nicht vielleicht doch besser gewesen wäre, einen Architekten zu beauftragen?Vorab einen Plan zu haben, wo welche Räume sind und wie die funktional zusammenhängen? Genau aus diesem Grund gibt es im Bereich der Website- und Webshop-Entwicklung das Konzept des Wireframes.

Was ein Wireframe ist

Ein Wireframe für Ihre Internet-Seite ist nichts anderes als der Grundriss für das spätere Design. Es legt fest, welche Inhaltsflächen, Navigationselemente und Funktionen sich an welchen Stellen befinden. Anhand des Wireframes definieren wir gemeinsam die Funktionalität der Website und welcher Content sich wo wieder findet. Aufgrund der starken Abstraktion sind Änderungen schnell gemacht und können sogar erste Usability-Tests gemacht. Je nachdem wie weit man gehen möchte.

Eine einfache – oft ausreichende – Form des Wireframes ist ein schematisiertes Konstrukt aus Flächen, dass wir z. B. mittels Adobe InDesign oder Omnigraffle erstellen. In manchen Fällen genügt sogar etwas handgezeichnetes. Dies Schema dient als Gesprächsgrundlage mit ihnen. Anhand dieser Grafik klären wir mit Ihnen den Aufbau der Website, so dass wir ein Fundament für das anschließende Web-Design haben. Das stellt sicher, dass wir in dieser aufwändigen Phase keine unnötigen Korrekturschleifen fliegen müssen und Budget an Stellen verbrennen, wo es sich vermeiden lässt. Denn selbst kleine Änderungen am Design können schnell langwierige Arbeiten nach sich ziehen.

Genug der Worte: Ein Beispiel

Hier sehen sie das Wireframe der Website des DSC Arminia Bielefeld neben dem daraus folgenden Resultat.

(Anmerkung: Mittlerweile hat die Startseite von Arminia eine weitere Evolution erfahren. Das entsprechende Wireframe des aktuellen Aufbaus ist jedoch per Hand am Whiteboard entstanden. Deshalb zeigen wir Ihnen hier die ausgearbeitete Variante des Relaunches aus dem Sommer 2013.)

Wenn Sie genau hinschauen, stellen Sie auch fest, dass manche Details aus dem Wireframe in der späteren Umsetzung noch geändert wurden. So finden sich die Schaltflächen für das Karussell im Wireframe rechts und in der Ausarbeitung links. Solche Änderungen im laufenden Prozess sind nicht ungewöhnlich. Schließlich ist ein Projekt ein fließender Vorgang. Da das Wireframe in diesem ganz am Anfang steht, weicht das Endergebnis meist in einigen Punkten davon ab.

Der Prototyp – die (oft unnötige) Eskalation des Wireframes

Gelegentlich kommt es vor – bei komplexeren Websites mit entsprechendem Budget – dass das Wireframe bereits erste echte Navigationsmöglichkeiten bietet. So lässt sich schon ein Feeling für die spätere Benutzerführung und die User Experience bekommen. Dann sprechen wir nicht mehr von Wireframes, sondern von Prototypen. Diese werden entweder mit Spezial-Anwendungen wie Axure erstellt oder bereits als einfache Websites aufgebaut. In Zeiten, wo die meisten sogenannten „UI-Patterns“ bekannt sind, ist das aber oft nicht notwendig, da bei allen Beteiligten genügend Erfahrung in der Nutzung des Internets vorhanden ist. Die Abstraktion des Wireframes in eine funktionale Website stellt keine Hürde da. So lässt sich Budget freischaufeln und auf das Design und den Content verteilen.

UI-Pattern? Wireframe? Zuviele Fremdworte? Dann schauen Sie doch ins Glossar. Wir möchten, dass Sie die Fachausdrücke und keine verkrampft übersetzten oder umschriebenen Verklausulierungen lernen können. Damit wir uns nicht um Wortklaubereien, sondern um das Wesentliche kümmern können: Ihr Projekt.

Die Wireframe-Phase eines Web-Projekts ist in der Dauer überschaubar. Dennoch ist das Wireframe als Fundament für das spätere Web-Design so wichtig, dass wir nicht mehr darauf verzichten. Und sei es, dass wir ihnen eine mit dem iPhone abfotografierte Hand-Skizze schicken. Wie diese hier vom Grundriss unserer kommenden Website, auf den wir im Folgebeitrag eingehen werden:

Wenn auch Sie Interesse an durchdachten Konzepten für Ihre Website oder Ihren Shop haben, freuen wir uns auf eine Nachricht an info@designbuero-freise.de oder einen Anruf unter 0521.97797996. Lassen Sie uns starten!