*

Die Zukunft interdisziplinärer Energieforschung gestalten

2025
Corporate Design / Information Design / Web Design / Programmierung / Barrierearmut

Die neue Website von NFDI4Energy wurde sowohl visuell als auch strukturell überarbeitet und präsentiert das Konsortium modern, professionell und einladend. NFDI4Energy ist die zentrale Anlaufstelle für Best Practices im Bereich Forschungsdaten im Energiesektor und gehört zum übergeordneten deutschen NFDI-Programm.

Erstellt für NFDI4Energy.

Screens of the new NFDI4Energy website

NFDI4Energy ist eines von 26 Konsortien der Nationalen Forschungsdateninfrastruktur (nfdi.de). NFDI hat als Ziel, wertvolle Datenressourcen systematisch zu erschließen, zu vernetzen und für die langfristige Nutzung im deutschen Forschungssystem zu sichern sowie deren Nutzbarkeit und Austauschbarkeit zu verbessern. Dadurch wird sichergestellt, dass Daten gemäß der FAIR-Prinzipien bereitgestellt werden.

Der Relaunch war umfassend: von einem neuen Content-Management-System (CMS) über eine zielgruppenorientierte Website-Struktur bis hin zu einem barrierefreien Design.

In verschiedenen Workshops mit NFDI4Energy analysierten wir Designelemente, Zielgruppen, Nutzer*innenführung, Inhaltstypen, Zielgruppen und Ziele, um eine Strategie für die Website-Entwicklung zu erarbeiten.

Das Design wurde aktualisiert und weiterentwickelt, um eine moderne digitale Plattform mit hohen Barrierefreiheitsstandards zu gewährleisten. Die Farbpalette wurde erweitert und die Farbkodierung sowie Farbkombinationen analysiert. Für die Benutzeroberfläche und die Hero-Bereiche wurden passende, schriftbasierte Icons und Open-Source-Illustrationen recherchiert und verwendet. Die gewählte Schriftart ist die Hyperlegible Atkinson Font, die für optimale Lesbarkeit entwickelt wurde.

Die Website ist ein Use-Case für barrierefreies Webdesign und erfüllt die Standards von WCAG 2.1, 2.2 und BITV 2.0. Sie bietet Nutzenden vielfältige, übersichtlich strukturierte und leicht auffindbare Inhalte und ist gleichzeitig für Suchmaschinen und KI-Bots optimiert. Der modulare Aufbau und das Open-Source-CMS ermöglichen den Mitarbeitenden maximale Flexibilität bei der Erstellung und Gestaltung von Inhalten. Eine interne Anleitung, die direkt als Microsite im CMS integriert ist, ermöglicht schnellen Zugriff und dient als zentrale Informationsquelle.

*

Fakten zum Projekt

Bei der Neugestaltung der Informationsstruktur einer Website ist es unerlässlich, das Thema aus möglichst vielen Blickwinkeln zu betrachten und mit verschiedenen Nutzer*innen zu testen.

Wir möchten unseren Projektpartner*innen ermöglichen, selbstständig mit der Website zu arbeiten. Dazu bieten wir umfassende Anleitungen und Schulungen an und optimieren das Backend für eine intuitive Nutzung.

Um die Barrierefreiheit von Farbkombinationen zu testen, haben wir das kostenlose Tool von barrierefreies.design verwendet.

Kontrastchecker von barrierefreies.design

Die Neugestaltung des Corporate Designs erfordert ein gutes Verständnis der Schlüsselelemente einer etablierten Marke sowie Einblicke in die Branche selbst.

Um die allgemeine Barrierefreiheit einer Website anhand der WCAG- oder BITV-Standards zu testen, verwendeten wir verschiedene Tools. Unser neuer Favorit war Accesstive.

accesstive.com

Diese Website erfasst Statistiken mithilfe der Open-Source-Software Matomo, der führenden DSGVO-konformen Lösung für Website-Analysen.

matomo.org

Die Website wurde hauptsächlich mit dem Open-Source-CMS WordPress und dem Toolset-Plugin erstellt.

Die Hero-Illustrationen wurden mithilfe der Open-Source-Kits von Storyset erstellt.

storyset.com

Die illustrativen Icons wurden von Flatart vom Noun Project (CC BY 3.0) entworfen.

thenounproject.com

Wir lieben die System-Icons von Remix Icon und haben sie auch in diesem Projekt verwendet.

remixicon.com