Digitale Bibliotheksservices einheitlich gestalten
Bibliotheken bewegen sich in einem komplexen digitalen Umfeld: Neben klassischen Websites bieten sie umfangreiche Recherchesysteme, Nutzerkonten, Kataloge und andere spezialisierte Online-Dienste an und konkurrieren mit anderen Angeboten im Web. Mit jedem neuen Angebot wächst die Herausforderung, Konsistenz und Benutzerfreundlichkeit zu wahren – für Studierende, Forschende, aber auch für die Bibliothekar:innen selbst.
In der Projektpraxis zeigt sich dabei häufig ein Problem: Bibliotheken stellen Agenturen oder Dienstleistern wie uns ein Corporate Design Manual bereit, das einige Jahre alt ist und ursprünglich für Print-Medien entwickelt wurde. Dort sind zwar Logo, Hausschriften und Grundfarben definiert – doch für digitale Medien fehlen entscheidende Bausteine. Oft gibt es nicht genug Farben, um Statusmeldungen oder Interaktionen hervorzuheben, Maße sind in Millimetern angegeben und müssen mühselig in Pixel umgerechnet werden, und interaktive Elemente wie Buttons, Formulare oder Navigationsmuster sind schlicht nicht beschrieben. Die Folge: Teams vor Ort oder externe Dienstleister sollen oder müssen „einfach mal machen“. In unterschiedlichen Projekten derselben Bibliothek entstehen so Dienste und Oberflächen, die funktional zwar arbeiten, aber optisch und in der Nutzerführung durchaus stärker voneinander abweichen. Für die Nutzer:innen entsteht dadurch oft nicht mehr der Eindruck, dass alle Angebote zur selben Bibliothek gehören – und auch die wahrgenommene Qualität der Software leidet darunter.
Design-Systeme setzen genau hier an. Sie sind eine Art „Single Source of Truth“ für digitale Produkte: eine Sammlung von wiederverwendbaren Komponenten (Buttons, Formulare, Typografie, Farben, Abstände usw.) kombiniert mit klaren Regeln und Guidelines, wie diese eingesetzt werden. So entstehen nicht nur konsistente visuelle Elemente, sondern auch definierte Verhaltensmuster, Accessibility-Prinzipien und Interaktionsregeln.
Kundenbeispiel: Manual für SkoHub
Ein digitales Manual ist die dokumentierte Version davon – quasi die Gebrauchsanweisung. Früher gab es dicke CI/CD-Brandbooks als PDFs oder Print. Heute sind es meist lebendige Online-Dokumentationen, die Designer:innen und Entwickler:innen in Echtzeit nutzen können. Digitale Manuals lassen sich über Plattformen wie Storybook, Zeroheight, Figma Libraries oder Frontify (DAM) realisieren – alternativ funktioniert auch ein Wiki oder eine selbst gehostete, einfache Website – bei einem kleineren Umfang reicht natürlich auch immer noch eine PDF-Datei.
Kundenbeispiele
Kitodo
Für die Software Kitodo Presentation und Kitodo Production haben wir ein umfassendes Design-System samt Manual erstellt, das alle Oberflächen konsistent und nutzerfreundlich macht.
belugino 2.0
Wir haben die belugino Icon-Schrift entwickelt, die speziell für Bibliotheksprojekte konzipiert wurde. Die belugino ist erhältlich unter der Lizenz CC BY-SA 4.0 (Download).
Was in ein digitales Manual gehört
In der Praxis zeigt sich, dass ein digitales Manual mindestens einige zentrale Bausteine enthalten sollte, damit Websites und Software-Oberflächen konsistent und nutzerfreundlich umgesetzt werden können. Gleichzeitig gibt es ein optimales Maß, das die Qualität und Skalierbarkeit deutlich steigert:
Mindestmaß – ohne diese „Basics“ geht es kaum
- Logo-Dokumentation (mit Abständen, Schutzraum, Varianten und Farben – und dazu: Beschreibung einer Logo-Familie oder wie passende Logos gestaltet werden können, denn in Projekten braucht es oft eigene Logos, die vom Hauptlogo abweichen)
- Farbpalette mit Grund- und Akzentfarben, inkl. Statusfarben (Erfolg, Warnung, Fehler)
- Typografie-Regeln für Überschriften, Fließtext, Links und Labels
- Basiselemente für Interaktion: Buttons, Formulare, Links, Navigation
- Grid- und Abstandsdefinitionen (responsives Raster)
- Icon-Set oder Icon-Schrift (mit Dokumentation, wie man neue Icons erstellt) und grundlegende Bildregeln für den Einsatz von Fotos und Grafiken
- Einheitliche Buttons und Formulare für Standard-Interaktionen
- Kurze Hinweise zur Tone-of-Voice / Textgestaltung (z. B. Buttons, Fehlermeldungen, Labels)
Optimales Maß – für ein zukunftsfähiges Manual
- Erweiterte Komponentenbibliothek (Tabs, Accordions, Cards, Modale Fenster etc.)
- Detaillierte Zustände für Interaktionen (Hover, Focus, Active, Disabled)
- Definierte Layoutsysteme für verschiedene Endgeräte (Desktop, Tablet, Mobile)
- Dokumentierte Content-Patterns (Suchergebnisse, Detailseiten, Formulare, Fehlermeldungen)
- Barrierefreiheits-Standards (Farbenkontrast, Tastaturbedienung, Screenreader-Kompatibilität)
- Design-Tokens für Entwickler:innen (Farben, Schriftgrößen, Abstände in Code-Variablen)
- Prozesse zur Pflege & Weiterentwicklung (Versionierung, Dokumentation neuer Komponenten, Governance)
- Guidelines für Interaktionssprache (Fehlertexte, Hinweise, Bestätigungen)
Fazit: Konsistenz und Qualität sichern
Ältere Print-Manuals reichen für die Gestaltung von digitalen Angeboten oft nicht aus – Design-Systeme und digitale Manuals schaffen die Basis für einheitliche, nutzerfreundliche Oberflächen. Bibliotheken können fehlende digitale Bausteine ergänzen, UI-Komponenten, Farbschema und Layoutsysteme definieren und alle Regeln in einem lebendigen digitalen Manual dokumentieren.
Wir unterstützen Bibliotheken dabei, diese Systeme aufzubauen und bestehende Print-Manuals für die digitale Welt zu erweitern. Mit unserer Erfahrung in wiederverwendbaren Komponenten, Layoutsystemen, interaktiven Guidelines, Icon-Sets wie der belugino oder Pattern- und Komponentenbibliotheken helfen wir, Konsistenz, Qualität und Nutzerfreundlichkeit in digitalen Angeboten zu sichern. Das Ergebnis: professionelle, leicht gestaltbare, pflegbare und erweiterbare digitale Services, die die Wahrnehmung der Bibliothek nach Außen und Innen insgesamt stärken.
Als Sparringspartner unterstützen wir Sie gerne dabei, Ihre digitalen Projekte zu planen und mit uns gemeinsam zu gestalten. Sprechen Sie uns an – wir freuen uns auf den Austausch!
In unserem nächsten Beitrag geht es um „Grafik-Design & Visuelle Kommunikation“ – dazu stellen wir dann auch ein kleines Icon-Set kostenlos zum Download zur Verfügung.
Weitere Beiträge in dieser Serie: