Lesezeit: ca. 4 min.
Wireframe-Inception. Warum ein Fundament ein Fundament braucht.
Nachdem wir im vorherigen Beitrag über das Konzept „Wireframe“ gesprochen haben, wollen wir in diesem Blog-Post darauf eingehen, welche Voraussetzungen es bei der konkreten Umsetzung des Wireframes unserer kommenden Website zu berücksichtigen gilt.
Nach zwanzig Jahren im Web-Design-Business können wir mit Bestimmtheit sagen, dass nahezu jede Website aus den folgenden Bereichen oder einer Schnittmenge daraus besteht:
- Der Header eröffnet die Seite. In diesem „holen wir den Besucher ab“ und zeigen ihm, wo er sich befindet – durch Abbildung des Logos und eventuell eines kurzen Statements. Oft sind hier die wichtigsten Navigationselemente, eine mögliche Suche oder in einem Online-Shop der Warenkorb zu finden.
- Mittels der Navigation bewegt sich der Besucher Ihrer Internet-Seite über die Site und kann die relevanten Informationen finden. Meist ist dieses Menü Teil eines anderen Bereiches. Wie dem oben erwähnten Header oder der unten genannten Sidebar. Die Navigation wird oft noch in ein Hauptmenü und einer Sekundärnavigation unterteilt. In letzterer finden sich weniger wichtige Links wie Impressum oder AGBs.
- Im Content-Bereich spielt sich der Inhalt ab. Dies ist meist die größte und oft dominierende Fläche.
- In einer Sidebar oder Seitenleiste bringen wir Querverweise oder ergänzende Inhalte unter die entweder die ganze Site oder den Kontext des Inhalts ergänzen.
- Der Fuß bzw. Footer bindet die Seite ab. Hier finden sich erneut wesentliche Navigationselemente, SEO-Texte und oft auch Kontaktdaten.
Ergänzend gibt es als Ergebnis des Kickoff/Content-Workshops (siehe dazu den Beitrag „Ein Grundkonzept als Leuchtturm für die Website„) die dort definierten Elemente, die wir für die jeweilige Website tatsächlich benötigen. Außerdem wissen wir, Dank der mit dem Kunden erarbeiteten Sitemap, wie unsere Navigation strukturiert ist. Ziel des Wireframes ist es, dieses Wissen und die Elemente sinnvoll auf die oben beschriebenen Bereiche aufzuteilen, so dass wir eine möglichst effektive Usability und eine gelungene User Experience hinbekommen.
Fachwörter über Fachwörter. Die wichtigsten Begriffe und Fachausdrücke die wir hier benutzen, finden Sie mit Erläuterungen in unserem Glossar.
Für unsere Website benötigen wir folgende Bausteine:
- Unternehmenslogo mit Subline („Grafik, Internet und Illustration“)
- Navigation mit Hauptmenü und Sekundärnavigation
- Volltextsuche
- Call-to-Action („Rufen Sie uns an.“)
- Content (Texte und Bilder. Diese oft groß.)
- SEO-Text (Ein oder mehrere begleitende Texte mit hoher Keyword-Dichte für Google und Co.)
- Ein Call-to-Action
Wie Sie sehen, ist das gar nicht viel. Und wenn Sie mit diesem Wissen demnächst durchs Web surfen, werden Sie feststellen, dass die meisten Sites nicht aus mehr als diesen Bestandteilen bestehen. Oft gibt es noch eine Sidebar. Diese benötigen wir nicht, da die Struktur unserer Site ausreichend übersichtlich ist. Querverweise und ähnliches bilden wir im Content ab.
Content is king, Website is throne, Wireframe is …
Noch so eine Phrase aus dem Online-Marketing: „Content is King“. Da das aber stimmt, muss die Website dann der Thronsaal des Inhalts sein.
Deshalb gibt es hinsichtlich des Contents einen weiteren Aspekt zu bedenken. Welche Form wird der Inhalt haben? Arbeiten wir sehr textlastig? Sind die Texte eher kurz oder ausschweifend? Müssen wir Bilder unterbringen? Und wenn ja, in welcher Größe und welcher Ausrichtung (Hoch-, Querformat)? Benötigen wir Platz für Videos?
An dieser Stelle wird deutlich, wie wichtig es ist, sich mit der Struktur und dem Content zu beschäftigen, bevor wir auch nur an das Layout und Design der Site denken. Auch ist dies ein wesentliches Argument dafür, bei Websites die einen gewissen Anspruch für sich erfüllen möchten, auf die Verwendung fertiger Themes zu verzichten. Dazu aber in einem späteren Blog-Post weitere Argumente, die gegen diesen Trend sprechen. Und einige wenige, die tatsächlich dafür sprechen.
Hier die Antworten auf die Frage hinsichtlich des Contents unseres zukünftigen Internet-Auftritts und dessen genereller Struktur:
- Natürlich werden auch wir auf unserer Website mit Text arbeiten. Das World Wide Web ist zu einem ausschlaggebenden Anteil und auf lange Sicht ein Text-Medium. Die Lesbarkeit von Text ist eine oft vernachlässigte Königsdisziplin. (Das Wortspiel mit dem König ist ein willkommener Zufall.)
- Da wir natürlich Arbeiten und Ergebnisse präsentieren möchten, müssen wir ausreichend Raum für Bilder haben. Diese werden mehrheitlich ein Hochformat haben – wie z. B. Abbildungen von Corporate Designs wie Briefbögen, Broschüren oder auch Web-Designs. Für diese brauchen wir also ausreichend Raum.
- Perspektivisch sind Videos nicht nur denkbar, sondern fest eingeplant.
Die Sache mit dem Fisch und dem Köder
Als letzte Komponente des Wireframes gilt es noch den Geschmack und Wünsche des Kunden zu berücksichtigen. Denn Teil des Workshops und unserer Kickoff-Fragebögen ist immer auch die Frage nach Websites, die dem Kunden branchenübergreifend gut gefallen – auch subjektiv. Wir halten nichts davon, den Ausdruck „Der Köder muss dem Fisch schmecken“ zu sehr aufzublasen.
Am Ende des Tages muss die Website ganz klar der Conversion dienen. Dennoch ist es ratsam, dafür zu sorgen, dass auch Ihnen als Anbieter die Website gut gefällt. Schließlich müssen Sie täglich damit arbeiten. Aus diesem Grund berücksichtigen wir selbstverständlich die Wünsche unserer Kunden. Im Design gilt: Es gibt immer mehr als ein „Richtig“.
Die Sache mit dem F und dem Dreieck
Bevor wir dann im kommenden Beitrag endlich zeigen, wie das Ergebnis im Wireframing für das Designbüro Freise aussieht, möchten wir noch das Prinzip des F-Layouts erläutern. Wir nennen das übrigens lieber Dreiecks-Layout.
Dies Konzept besagt, dass das Auge – und damit die Aufmerksamkeit – des Besuchers links oben auf der Website beginnt und dann herunterwandert. Am Anfang wird noch die volle Bildschirmbreite gesehen und gelesen. Umso weiter es heruntergeht, umso kürzer wird die Lesefreude. Ähnlich wie bei einem F oder einem Dreieck.
Deshalb gilt es darauf zu achten, alle wichtigen Informationen und UI-Elemente in diesem Bereich unterzubringen. Zur Verdeutlichung hier Screenshots des von uns realisierten Web-Shops Garnelenprofi und der kürzlich durch uns relauncheten Website Fehmarn Inn, die das visualisieren:
Im nächsten Beitrag zeigen wir Ihnen dann, wie wir diese Überlegungen zu einem sichtbaren Wireframe umgesetzt haben. Falls Sie Fragen zu den hier angesprochenen Aspekten und Themen haben, freuen wir uns über eine Kontaktaufnahme.Schreiben Sie uns einfach info@designbuero-freise.de oder rufen Sie uns unter 0521.97797996 an. Wir freuen uns drauf.