Themen, Relaunch, Experimente!

Design, System, Features, UX – alles neu bei baunetzwissen.de

Baunetz Wissen ist das kostenfreie Online-Lexikon des Architekturmagazins BauNetz. Ein langjährigerer Kunden von uns, für den wir bereits 2008 den Relaunch der einst Infolines genannten Wissensdatenbank erfolgreich umgesetzt haben. Zum Jahresende 2016 stand nun die erneute Modernisierung auf dem Programm. Gewünscht war ein moderneres, responsives Äußeres, neue Funktionalitäten und eine Verbesserung der Datenstruktur. Kurz: eine intelligente Überarbeitung. Kein Problem.

Start und Themen

Die neue Startseite protzt (aus guten Gründen, nämlich: zurecht!) mit der Vielzahl von Artikeln und Glossarbegriffen im System, visualisiert diese großzügig in Zahlen und Fakten, zeigt aber immer nur einen einzigen Artikelteaser. So steht sofort die Auswahl eines der 27 Themengebiete im Vordergrund. Bewegt man die Maus auf der Startseite über die untereinander aufgelisteten Begriffe im Themenfeld, wechselt das Hintergrundbild und zeigt eine Vorschau auf die Inhalte der Themenseiten.

Animation, bunt, Startseite

Dreiklang und Navigation

Die bewährte Dreiteilung in »Fachwissen«, »Objekte« und »Tipps« im Themenbereich bildet nach wie vor die Hauptstruktur, in die sich jedes Fachthema inhaltlich aufsplitten lässt. Einzelne Artikel sind nach einer dann folgenden Trefferliste erst auf der dritten Klickebene zu erreichen. Eine Tatsache, die in der Gewissenhaftigkeit und dem enormen Umfang der Datenbank begründet ist. Deshalb haben wir wichtige Veränderungen in der nun folgenden Navigation vorgenommen.

  • Infinite Scrolling auf Detailseiten-Ebene
  • Konsequente dynamische Navigation nur per Mouseover spart eine Klickebene
  • Doppeltfunktion der Themenauswahl: Themen-Home und -wechsel

Detailseite, Animation, Scroll, grau

Recherche-Protokoll und Merkliste

Auch andere, praktische Funktionen werden die regelmäßigen Nutzer erfreuen. So wird der eigene Verlauf über Cookies unabhängig vom Browser gespeichert und angezeigt. Eine Art Recherche-Protokoll. Außerdem lassen sich Detailseiten in einer Merkliste sammeln, die wiederum geteilt werden kann – ganz ohne Log-in-Zwang. Vor allem für die Zielgruppe (Architekturbüros, Studenten, etc.) eine Funktion mit viel Potential, ist Bauplanung doch immer auch Teamwork.Neben den Sharing-Funktionen, wurden die bekannten externen Surftipps und Newsletter-Abo-Vorschläge beibehalten.

Merkliste, Verlauf, schwarz, Desktop, Webseite

Mobile, natürlich

Die mobile Version der Seite setzt auf eine strukturelle Optimierung der Navigation, da die dynamische Variante des Desktop hier natürlich nicht greift. Ansonsten spielt die gesamte Seite natürlich nach responsiven Spielregeln und macht keinerlei inhaltliche Abstriche.

Tech

Apropos mobile. Technisch ist das Ganze natürlich auch nicht ohne. Unser Entwickler setzte für das Projekt auf Headless CMS, also Unabhängigkeit von eigentlichen Content Management System. Das Frontend selbst ist eine komplette Eigenentwicklung auf Basis von Slim und Twig. Bisschen Ajax noch, aber das ist ja normal, fertig ist die ganze Zauberei.

Typo

Typografisch werden zwei Ebenen aufgegriffen: die lexikalische, bzw. technische Ebene der Seite, für die eine Monospace-Schrift (Roboto Mono) zum Einsatz kommt. Sowie die etwas »magazinigere« Ebene, Detailseiten z.B., für die ein normaler Schnitt gewählt wurde (Roboto).

Gestaltung

Ein wichtiges Thema ist außerdem das Punkteraster im Hintergrund. Ein bekanntes, jetzt noch dominanter eingesetztes Stilmittel, das auf die Themen Genauigkeit und Architektur anspielt.

Die Fachgebiete sind weiterhin mit einem Farbcode ausgestattet, dessen Anwendung aber deutlich konsequenter gehandhabt wurde – z.B. in der Duplex-Einfärbung der großen Hintergrundbilder. Dem entgegen steht eine reduzierte, weiß auf schwarz gehaltene Anmutung aller Meta- und Funktionsseiten.

Unterstrich

Ein wichtiges inhaltliches und gestalterisches Element darf nicht unerwähnt bleiben: Der Unterstrich, ein bekanntes Symbol für das Technische, also passend als Metapher für ein digitales Kompendium, sowie der klassische »Lückenfüller« in der Dateienbetitelung, hat es vom Gestaltungselement bis ins Logo von Baunetz Wissen geschafft. Und verbindet dort das Logo mit dem Suchfeld, also den gesamten Auftritt mit dem auf Interessen zugeschnittenene Inhalte – eine starke Metapher!

Animation, Befgriffe, grau, schwarz

Fazit

Das Ergebnis ist ein von uns konzipiertes, gestaltetes und im Frontend programmiertes Projekt, welches das vermeintlich trockene Thema Lexikon auf allen Ebenen weiterdenkt, zeitgemäß visualisiert und animiert. Ein Umstand, der vor allem der Tatsache geschuldet ist, mit dem BauNetz seit Jahren einen treuen, vertrauten und uns Vertrauen schenkenden Kunden zu haben, der bereit ist, den Extraschritt in Richtung Innovation und Perfektion zu gehen. Themen, die schon bei Projekten wie Designlines oder uncube ein Garant für ein überzeugendes, wegweisendes Endergebnis waren.

P.S.

Apropos uncube… wie bei der Umsetzung unserer Idee für das internationale Architekturmagazin, hat auch diesmal wieder Christian von WebXells zusammen mit Jannis das Entwicklerteam gebildet. Und was für eins.

Auch interessant

CLOSE
close