Das Designsystem von Berlin.de

Designsystem Einstieg

Geltungsbereich

Alle Angebote der Berliner Verwaltung im Internet müssen auf Berlin.de veröffentlicht werden. Das Designsystem macht Layoutvorgaben für alle Seiten, die unter Berlin.de publiziert werden. Sein Einsatz ist verpflichtend, um die Homogenität der Seiten zu unterstützen und die Marke des Landes Berlin zu stärken. Hierfür ist es unerheblich, ob die Seiten mit dem Content-Management-System des Landes (Imperia) oder auf anderem Wege umgesetzt werden.

Allerdings ist das Designsystem als lebendig, erweiterbar und flexibel gedacht. Sollten Sie eine Anforderung haben, die aus Ihrer Sicht durch die aktuelle Version des Designsystems nicht abgedeckt wird, ist eine Erweiterung des Designsystems denkbar. Hierzu ist – wie bei der Erstellung eines neuen Auftritts ohnehin – eine Absprache mit der Landesredaktion / Koordinierung Berlin.de Voraussetzung. Gemeinsam kann dann eine angemessene Beantwortung Ihrer Anforderung im Rahmen des Designsystems oder ein Entwurf neuer Elemente diskutiert werden.

Designprinzipien

Im folgenden Abschnitt wollen wir Ihnen kurz grundsätzliche Designprinzipien vorstellen, die das Fundament des Designsystems umreißen und Ihnen zum besseren Verständnis in der Umsetzung bzw. Nutzung des Designsystems verhelfen sollen:

Marke

Als offizielles Hauptstadtportal kommuniziert Berlin.de mit der Hauptstadtmarke Berlin und pflegt die offizielle Markenkommunikation des Landes. Der Styleguide definiert und erweitert die Regeln des Markenhandbuchs Berlins für den Gebrauch unter Berlin.de-URLs im Web. Hinzutretende Marken ordnen sich der Marke Berlin und Ihrer Gestaltungsrichtlinien jederzeit unter.

Designsystem

Der Raum unter Berlin.de ist vielgestaltig und komplex, entsprechend haben Seiten teils sehr unterschiedliche Anforderungen an das Design. Diesen Anforderungen wird in Form eines flexiblen Designsystems Rechnung getragen, das auftrittsweise Varianz in Form von spezialisierten Verticals erlaubt und als erweiterbar gedacht ist. Zugleich ist das Designsystem für sämtliche Auftritte unter Berlin.de verbindlich und möglichst exakt anzuwenden, unabhängig davon, mit welcher Technologie der jeweilige Auftritt realisiert wird.

Userzentrierung

Im neuen Design von Berlin.de stehen die Nutzer*innen der Seiten im Mittelpunkt und das Angebot soll entlang der Bedürfnisse der tatsächlichen Nutzenden der Seiten gestaltet werden. Entsprechend spielt in allen Teilen der Erzeugung eines neuen Auftritts die Frage danach, was der hauptsächliche Auftrag der Seiten bei Nutzer*innen ist und wie diese die Seiten genau gebrauchen werden, eine zentrale Rolle. Dies beginnt bei der Auswahl eines Verticals, führt über die Bewertung von Anforderungen und der Auswahl von Modulen bis hin zur konkreten Gestaltung von Elementen auf den Seiten und der redaktionellen Ausgestaltung des Contents.

Barrierefreiheit

Bei Berlin.de handelt es sich um die offiziellen Seiten des Landes Berlin. Für die Seiten gelten verschiedene rechtliche Vorgaben zur digitalen Barrierefreiheit. Entsprechend müssen alle Angebote zwingend nach diesen Vorgaben Standards zur digitalen Barrierefreiheit erfüllen. Im Designsystem von Berlin.de wird diesen Standards in besonderem Maße Rechnung getragen. Redaktionen, Entwickler*innen und Designer*innen werden darin unterstützt, barrierefreie Auftritte für Berlin.de zu gestalten.

Mobile First und Responsivität

Webseiten werden auf vielfältigen Endgeräten mit sehr unterschiedlichen Bildschirmgrößen genutzt, dabei macht die Nutzung auf mobilen Geräten den größten Anteil aus. Auch existieren umfangreiche Gruppen von Nutzer*innen, die ausschließlich über mobile Endgeräte für die Internetnutzung verfügen. Die Seiten des offiziellen Hauptstadtportals Berlin.de müssen auf allen Endgeräten und für alle User-Gruppen gleichermaßen gut zugänglich und benutzbar sein.

Deshalb wurde ein Designansatz gewählt, der zunächst von einer Gestaltung für die mobile Nutzung auf kleinen Bildschirmgrößen ausgeht (Mobile First) und sich automatisch an den Raum anpasst, den der jeweils eingesetzte Bildschirm bietet (Responsivität). Dieser Ansatz bietet sich sowohl von daher an, dass für mobile Geräte designte Webseiten auf größeren Bildschirmen immer nutzbar bleiben, was umgekehrt nicht der Fall ist. Außerdem antwortet das Design so auf das Problem einer unüberschaubaren Vielfalt von Geräten und Bildschirmgrößen am Markt, indem es jede von Nutzenden eingesetzte Bildschirmgröße flexibel ausnutzt. Das Design von Berlin.de ist in diesem Sinne vollständig responsiv gestaltet und passt sich automatisch an den unbekannten Nutzungskontext an.

Verticals: Layoutvarianten des Designsystems

Das Designsystem von Berlin.de hat unterschiedliche Ausprägungen, sogenannte Verticals, die auf unterschiedliche Kommunikationsaufträge auf Seite der Nutzer*innen der Liveseiten spezialisiert sind. Weitere Informationen

Styleguide

Eine Übersicht über alle Layoutelemente des Designsystems bietet ein Living-Styleguide. Weitere Informationen

Auftritte im Designsystem

Sie haben vor, ein neues Online-Angebot an den Start zu bringen oder müssen einen bestehenden Auftritt an das Designsystem von Berlin.de anpassen? Hier erklären wir Ihnen die nötigen Schritte. Weitere Informationen

Kontakt

Landesredaktion / Koordinierung Berlin.de

BerlinOnline