Artikel: Baukommunikation im digitalen Kontext
Baukommunikation im digitalen Kontext
Digitale Kanäle, wie unter anderem Websites, machen die Baukommunikation auch online für Reisende, Anwohnende und alle Interessierten erlebbar. Sie bieten aktuelle Meldungen, transparente Informationen und spannende Einblicke in die Baustellen – alles an einem Ort gebündelt und jederzeit abrufbar. Damit die digitale Baukommunikation wiedererkennbar und konsistent auftritt, sollten die spezifischen Gestaltungselemente gezielt integriert und die Gestaltung an den folgenden Best-Practice-Beispielen der Kernmodule Header, Teaser und Inhaltsmodule ausgerichtet werden. Die folgenden Empfehlungen gelten nur für die Kommunikation von Bauarbeiten (für Bauprojekte/Projektabschnitte in der Bauphase) und nicht bei Vorhaben, die sich noch in der Planungsphase befinden. Bei Projekt-Webseiten, die beide Phasen beinhalten, muss die Trennung im Design erkennbar sein.
Bei Projekten bzw. Projektabschnitten, die sich noch in der Planungsphase befinden, verwenden nur die allgemeinen Vorgaben zum Webdesign der DB angewendet. Für die grundlegende Gestaltung von Websites gelten die UI/UX-Vorgaben, die im Marketingportal verfügbar sind.
Header
Header schaffen den ersten visuellen Eindruck und führen thematisch in die Seite ein.
Teaser
Teaser bieten einen kurzen Vorgeschmack auf das Thema und motivieren zum Weiterlesen.
Inhaltsmodule
Inhaltsmodule machen Inhalte zugänglicher und erleichtern durch Struktur die Nutzerführung.
Barrierefreiheit
Bei der Gestaltung der Websites zur Baukommunikation ist die Einhaltung der aktuellen Barrierefreiheitstandards zu beachten. Weitere Informationen dazu finden Sie im Marketingportal unter Barrierefreiheit.
Header
Im Header entsteht der erste Eindruck einer Website – er ist der Einstiegspunkt in den gesamten Auftritt. Ausdrucksstarke, regionale Bilder oder Videos, kombiniert mit klaren Botschaften und einem erkennbaren Bezug zur Baukommunikation ermöglichen eine Einordnung der Inhalte und definieren die Tonalität des Auftritts.
Die Botschaften sollten eindeutig und klar sein. Redundanzen sollten vermieden werden. Die Streckendarstellung kann auch im digitalen Kontext zur Kenntlichmachung der örtlichen Zugehörigkeit genutzt werden. Bei bewegten Motiven oder unruhigeren Bildmotiven empfiehlt es sich, die Botschaften für eine bessere Lesbarkeit im Header in einer weißen Textbox zu platzieren.
In den Headern wird das Flatterband ausschließlich am unteren Bildrand oder innerhalb der Textbox eingesetzt, wodurch diese noch mehr Ausdrucksstärke erhält.
Interaktive Elemente im Header
Im Header können bewegte Videos einen regionalen Bezug erhöhen oder ein Newsticker die neuesten Beiträge hervorheben. Es sollten nur ruhige, klare Videos eingesetzt werden, die die Botschaft dezent und stimmungsvoll unterstützen. Beim Einsatz eines Newstickers sollte dieser entsprechend barrierefrei gestaltet sein: ausreichende Farbkontraste, gut lesbare Schriftgrößen, keine zu schnellen Animationen, Interaktion mit den Inhalten und Steuerungsmöglichkeiten zum Pausieren.
Bau-Puls als Träger der Navigation
Der für die Baukommunikation charakteristische große Puls kann als Träger der übergreifenden Seitennavigation eingesetzt werden und bündelt die Absender-Kennzeichnung, sowie die Steuerung der Seitentitel in einem Element. Zusätzlich kann der Header mit abgerundeten Ecken und einem leichten Passepartout gestaltet werden, um die Formsprache des großen Pulses weiterzuführen. Das Flatterband kann auch hier optional in die Textbox oder am unteren Bildrand eingesetzt werden.
Don’ts
Keine unruhigen Bilder ohne klare Botschaft verwenden.
Der große Puls wird nicht im Header randabfallend integriert.
Das Flatterband nur am unteren Bildrand oder in der Textbox einsetzen.
Störer werden ausschließlich als Kreis in DB Yellow 500 platziert.
Die Nutzerführung sollte nicht durch zu viele Elemente erschwert werden.
Doppelungen von Botschaften im Viewport sollten vermieden werden.
Teaser-Modul
Teaser wecken Interesse und geben einen kurzen Einblick in ein weiterführendes Thema, um anschließend tiefer einzutauchen. Sie kombinieren meist ein visuelles Element mit einer Überschrift und einem optionalen kurzen Text, um Nutzer:innen zum Weiterlesen zu motivieren. Diese Bildmotive passen dabei stets zu dem beschriebenen Thema und leiten dieses visuell ein.
Sie sollten ruhig und fokussiert sein, um die Kernaussage zu unterstützen und einen eindeutigen Eindruck zu vermitteln. Überladene oder unruhige Darstellungen lenken hierbei vom Wesentlichen ab.
Teaser mit Icons
Wenn kein passendes Bildmotiv vorhanden ist, können Icons als Alternative genutzt werden. Dabei sollte auf eine deutliche Darstellung und ausreichend Kontrast zu den UI-Gestaltungen geachtet werden. Empfehlenswert hierfür sind die illustrativen Icons und Baukommunikations-Icons.
Die charakteristischen Figuren der Baukommunikation können ebenfalls in einzelnen Teasern eingesetzt werden. Mithilfe des Baukasten-Prinzips lassen sich stimmige Szenerien gestalten, die den jeweiligen Inhalt unterstreichen. Der große Puls kann bei Bedarf gezielt in die Szenen integriert werden. Das Flatterband sollte nur mit Bedacht verwendet werden.
Kontextgerechte Illustrationen
Der Illustrationsbaukasten ermöglicht darüber hinaus thematisch passende Teaser-Szenen zu gestalten. Ein harmonisches Gesamtbild und Größenverhältnisse müssen dabei stets stimmen. Auch hierbei gilt: den großen Puls nur bei Bedarf und das Flatterband nur bei Highlight-Teasern einsetzen.
Don’ts
Unruhige, überladen wirkende Bildmotive sollten vermieden werden.
Ein ausreichender Kontrast zwischen Bild und Textbox sollte bestehen.
Keine komplexen Grafiken im Anschnitt als Teaser-Bildmotive.
Kein übermäßiger Einsatz des Flatterband in allen Teasern.
Inhaltsmodule
Die Websites stellen Informationen zu den Baumaßnahmen transparent und jederzeit zugänglich für Reisende, Anwohnende und Interessierte bereit. Die Inhalte sollen verständlich aufbereitet sein, zur Interaktion anregen und mithilfe von Storytelling-Formaten Einblicke in die Baustelle ermöglichen. Dadurch wird das Thema Bauen greifbarer und emotionaler vermittelt. Auf die Aktualität der Inhalte ist dabei stets zu achten. Interaktive Module, wie Steckbriefe, kombiniert mit Illustrationen und dem Flatterband aus der Baukommunikation, machen Themen zugänglicher, interaktiver und auffälliger.
Illustrationen in Inhaltsmodulen
Durch Illustrationen werden Verlinkungen und Ankerpunkte zu aufmerksamkeitsstarken Blickfängen.
Der Einsatz von Illustrationen in Kombination mit Modulen oder UI-Elementen (z. B. Bedienflächen) sorgt für eine nutzerfreundliche und lebendige Gestaltung.
Strukturierte Inhalte
Lange, unstrukturierte Texte erschweren den Zugang zu Inhalten und führen oft dazu, dass Nutzer das Interesse aufgrund geringer Lesebereitschaft im digitalen Kontext an der Seite verlieren. Mit klarer Struktur der Texte und visuellen Bausteinen, wie Cards, werden Informationen schnell und übersichtlich erfassbar.
Zusätzlich machen interaktive Module Inhalte erfahrbarer und erhöhen dadurch deren Zugänglichkeit. Klickbare Module halten Informationen übersichtlich und laden Nutzer ein, Prozesse aktiv zu entdecken, anstelle sich durch lange Texte zu lesen.
Kontakt-Modul
Im Kontakt-Modul können die Illustrations-Charaktere eingesetzt werden, um das Thema stärker zu emotionalisieren. Die Darstellung des Moduls sollte plakativ sein, idealerweise mit rotem Hintergrund, um maximale Sichtbarkeit zu erzielen. Eine spielerische, direkte Wortwahl erhöht die Zugänglichkeit der Texte.
Don’ts
Monotone, lange Texte beeinträchtigen das Verständnis und die Barrierefreiheit.
Überladene, unstrukturierte Designs sollten vermieden werden – sie lenken ab und erschweren die Orientierung.
Weiter