Einer der zentralen Knackpunkte war die Frage, wie man Mockups für eine Website gestaltet, bei der jede Seite und jeder Beitrag in unzähligen Kombinationen zusammengesetzt werden kann. Dieses Thema begegnete uns bei Say Hello bereits früh, als wir Anfang 2019 damit begannen, Websites für den Einsatz mit Gutenberg zu konzipieren.
Den Kund:innen den Block Editor zu geben, ist wie ihnen eine Kiste LEGO ohne Bauanleitung zu überreichen. Man sollte ihnen nicht nur die Bausteine geben – sondern auch Anleitungen und visuelle Beispiele, wie bestimmte Seiten aussehen könnten.
Kundinnen und Kunden sind in der Regel keine Expert:innen für digitale Kommunikation und benötigen Unterstützung beim Aufbau einer Website. Ein Tool mit unendlichen Möglichkeiten zur Inhaltserstellung wirkt in diesem Zusammenhang selten hilfreich. Sie brauchen weiterhin eine Begleitung: nicht nur durch die Bereitstellung dutzendweise schön gestalteter Blöcke, sondern auch durch konkrete Anleitung, wie diese Blöcke – sowie Seiten- und Layout-Kombinationen – gezielt eingesetzt werden können, um ihre Kommunikationsziele zu erreichen.
Ein Master Sheet bereitstellen
Der einfachste Weg, dem weiterhin bestehenden Wunsch von Kund:innen nach Mockups gerecht zu werden, ist die Gestaltung eines sogenannten «Master Sheets»: einer einzigen Übersicht, in der eine Auswahl der wichtigsten Blöcke und deren Erscheinungsbild als einzelne Elemente dargestellt wird. (Es ist natürlich nicht möglich, jede erdenkliche Kombination vorab zu visualisieren.) Diese Übersicht sollte alle Kernblöcke enthalten, die die Kund:innen mit grosser Wahrscheinlichkeit nutzen werden.
Ein Beispiel dafür ist in diesem Beitrag zu sehen: verschiedene Blöcke werden mit ihren Layout- und Farbvarianten dargestellt. Eine solche Konstellation wird nie eins zu eins auf der Website vorkommen – aber die Kund:innen erkennen, dass jedes Element (jeder Block) individuell angepasst werden kann.
Es ist sinnvoll, möglichst viele der üblichen Blöcke visuell aufzubereiten – zusätzlich zu allen individuell entwickelten Blöcken oder Block-Kombinationen. Mithilfe von Farbpaletten und typografischen Stilvorlagen in Tools wie Adobe XD oder Figma kann dieses Master Sheet für jedes Projekt angepasst werden, was den Initialaufwand effizienter und wirtschaftlicher macht.
Beispiel-Seiten aufbereiten
Ergänzend zur Blockübersicht bietet es sich an, ein paar Beispielseiten zu erstellen – etwa für die Startseite oder die «Über uns»-Seite. Diese dienen als Orientierungshilfe und können von den Kund:innen nach ihren eigenen Bedürfnissen angepasst werden. Solche Mockups helfen dabei, sich ein Bild davon zu machen, wie die Website später aussehen könnte. Denn viele Kund:innen können sich ohne visuelle Referenz schwer vorstellen, wie sich die Inhalte zusammensetzen lassen.
Auch wenn wir ihnen ein Tool in die Hand geben, mit dem sie Inhalte flexibel gestalten können, wissen viele zunächst nicht, wo sie anfangen sollen. Schon bevor der Block Editor eingeführt wurde, unterstützten wir unsere Kund:innen dabei, Seiten zu erstellen, die aus fachlicher Sicht benutzerfreundlich und zielführend sind. Das bleibt weiterhin ein zentraler Teil unserer Arbeit. Wir empfehlen beispielsweise, auf der Startseite klare Handlungsaufforderungen und passende Texte zu platzieren oder auf der Kontaktseite alle nötigen Informationen bereitzustellen. Genau hier helfen Seiten-Mockups weiter.
