Vom Inhaltsplan zum Inhalt
- Autor
Susanne Fankhauser - Veröffentlicht
13.06.2024 - Kategorie
Content
Der Inhalt bildet das eigentliche Herzstück jeder Website. Das visuelle Design ist darauf ausgerichtet, die Botschaft des Inhalts bestmöglich zu unterstreichen. Das schönste Layout und die schicksten Animationen sind nur leere Hüllen ohne die passenden Worte und Bilder. Doch wie stellen wir passende Inhalte sicher? Mit einem Plan! Einem Website-Bauplan, den wir umgangssprachlich als Wireframe kennen. Denn: lieben wir es nicht alle, wenn ein Plan reibungslos funktioniert?
Wozu dient ein Wireframe?
Mit Hilfe von Wireframes können Inhalte und Funktionen einer Website, basierend auf den Nutzerbedürfnissen, geplant und gestaltet werden. Sie legen die Grundstruktur fest, bevor das visuelle Design und der finale Inhalt erstellt werden. Sie stellen somit das Layout und die Anordnung der wichtigsten Elemente dar, ohne sich auf Details wie Farben, Schriften oder Bilder zu konzentrieren.
Sie planen, ein Haus zu bauen? Dann wird Ihnen der Architekt (hoffentlich) auch zuerst einen Grundriss erstellen, der die grundlegende räumliche Anordnung des Gebäudes einschliesslich der Positionen von Wänden, Türen, Fenstern usw. darstellt. Ähnlich verhält es sich mit einem Wireframe: Es unterstützt bei der Planung und Entscheidung, wo und in welchem Format Inhalte präsentiert werden. Dabei klären wir vorab verschiedene Fragen, wie zum Beispiel:
- Priorität: In welcher Reihenfolge werden Inhalte präsentiert und wieviel Raum erhalten sie jeweils?
- Darstellung: Wird dieser Inhalt in ein paar kurzen Paragraphen erzählt oder ist er vielleicht in tabellarischer Form besser verständlich?
In einem Wireframe können somit verschiedene Präsentationsweisen und Layouts einfach ausprobiert werden, um die beste Form für den jeweiligen Zweck zu finden.
Wie lese ich ein Wireframe?
Ein Wireframe kann eine einfache Handzeichnung sein oder mit einem digitalen Tool wie Balsamiq erstellt werden. Den Methoden gemeinsam bleibt die eher skizzenhafte Darstellung, meistens in Schwarz-Weiss. Das hat seinen Grund: Wireframes repräsentieren nicht das visuelle Design, sondern sind eine Blaupause, die anzeigt, wo und wie die einzelnen Bausteine präsentiert werden. Das sieht selten besonders sexy aus. Davon sollte man sich aber nicht irritieren lassen.
Die einfache Darstellung des Wireframes ist genau die Stärke, da es keine Farben, Typographie oder sonstigen visuelle Elemente gibt, die vom Wesentlichen ablenken. Man kann sich losgelöst und ungestört auf den Inhalt konzentrieren. So beleuchten wir in dieser Phase z.B. das Verhalten einzelner Inhalte im Kontext mit weiteren Inhaltselementen, Navigationen, Teasern und Call-to-Action Komponenten. Ein Wireframe hilft dabei, Inhalte zu strukturieren und Anforderungen an die verschiedenen Inhaltstypen festzuhalten, z.B. Länge und Art des Textes oder wo es Bilder und Icons braucht.
Wie unterstützt mich das bei der Erstellung des Inhalts?
Es kann eine schwierige Aufgabe sein, mit einem leeren Word-Dokument auf der grünen Wiese die richtigen Worte für eine Website zu finden. Wo nur beginnen? Wie wird das nachher auf der fertigen Website wirken? Zumal man diese Worte ja meist schreibt, währenddem die Website noch im Entstehungsprozess ist.
Nicht verzweifeln – wir haben einen Plan! Ein Blick aufs Wireframe kann helfen. Dadurch, dass Struktur und Inhaltstypen definiert sind, können und sollen die Texte für diesen vordefinierten Rahmen erstellt werden. Aus dem Wireframe können Sie ablesen, welche Titel und Zwischentitel benötigt werden, wie lang oder kurz die verschiedenen Textblöcke werden sollen, welche Inhalte als Liste präsentiert werden, usw.
Sich für das Schreiben der Texte am Wireframe zu orientieren, hat nicht nur den Vorteil, dass es leichter fallen kann, einen Anfang zu finden. Es sorgt auch dafür, dass sich visuelles Design und Inhalt optimal ergänzen.
Ein weiterer Vorteil des Wireframes ist es zudem, früh festzustellen, welche weiteren Assets (Bestandteile) noch fehlen und somit erstellt oder organisiert werden müssen, so z.B.:
- Bilder: Sind bereits welche in guter Qualität vorhanden? Muss ein Fotoshooting organisiert werden oder sollen Stockbilder verwendet werden?
- Icons und Illustrationen: Zu welchen Themen sollen Icons erstellt werden? Werden Illustrationen und/oder Infografiken benötigt?
- Downloads: Sind PDFs auf dem neuesten Stand oder müssen sie noch überarbeitet werden?
- Videos: bestehende verwenden oder neue kreieren? Was ist mit der Länge, müssen sie gekürzt werden?
Wir können also Schritt für Schritt dem Wireframe/Inhaltsplan bis zum Ziel folgen. Und sollten Sie trotzdem keinen Plan oder keine Zeit haben: Wir unterstützen Sie gerne auf dem Weg!
