Einleitung

Willkommen im Designsystem von Berlin.de – dem offiziellen Hauptstadtportal. Das Designsystem macht Layoutvorgaben für alle Seiten des Landes Berlin, 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 CMS-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. Das vorrangige Ziel dabei ist es, alle Anforderungen möglichst mit den vorhandenen Modulen des Designsystems abzudecken. Erst wenn diese Möglichkeit aus gut nachvollziehbaren Gründen ausscheidet, muss eine Erweiterung des Designsystems überlegt werden. Hierzu ist – wie bei der Erstellung eines neuen Auftritts ohnehin – eine Absprache mit der Landesredaktion von Berlin.de (Kontakt unten) Voraussetzung. Gemeinsam mit der Landesredaktion kann dann eine angemessene Beantwortung Ihrer Anforderung im Rahmen des Designsystems oder ein Entwurf neuer Elemente diskutiert werden.

Auf den folgenden Seiten finden Sie Beispielseiten und Layoutschnippsel nebst Codefragmenten. Der Aufbau folgt hierbei auf der ersten Ebene einer Auftrennung in unterschiedliche Verticals (s. u.) und anschließend einer Beschreibung einzelner Layoutfragmente im Sinne des Atomic-Design-Gedanken (vgl. Brad Frost: atomic design. Zu finden unter: https://bradfrost.com/blog/post/atomic-web-design/ (Abgerufen am 14.04.2022)).

Im Folgenden wollen wir Ihnen kurz grundsätzliche Designprinzipien vorstellen, die das Fundament des Designsystems umreißen und Ihnen zum besseren Verständnis in der Umsetzung 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.

Verticals

Das Designsystem von Berlin.de hat unterschiedliche Ausprägungen, die wir als Verticals bezeichnen. Die Verticals haben je nach Ausgestaltung eine unterschiedliche Anmutung und unterschiedliche Möglichkeiten darin, welche Module für sie jeweils eingesetzt werden können. Gleichzeitig haben sie alle das gleiche Grundlayout und dasselbe Grid. Verticals werden anhand ihres jeweiligen Kommunikationsauftrages auf Seite der Nutzenden unterschieden. Etablierte Verticals werden im gesamten Raum von Berlin.de von Auftritten mit vergleichbarem Kommunikationsauftrag verpflichtend genutzt. Neue Verticals können jederzeit entstehen, wenn ein Kommunikationsauftrag gefordert ist, den das Designsystem noch nicht abdeckt. Ob es sich um einen neuen Kommunikationsauftrag handelt oder ein vorhandenes Vertical zu nutzen ist, entscheidet die Landesredaktion von Berlin.de.

Userzentrierung

Im neuen Design von Berlin.de stehen die Nutzenden 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 Nutzenden 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 die 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 gilt das Gesetz über die barrierefreie Informations- und Kommunikationstechnik Berlin (https://gesetze.berlin.de/bsbe/document/jlr-BIKTGBErahmen). Entsprechend müssen alle Angebote zwingend nach den Vorgaben des Gesetzes Standards zur digitalen Barrierefreiheit erfüllen. Im vorliegenden Designsystem wird den Bestimmungen der Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (Barrierefreie-Informationstechnik-Verordnung - BITV 2.0)(https://www.gesetze-im-internet.de/bitv_2_0/BJNR184300011.html) in besonderem Maße Rechnung getragen und es unterstützt Redaktionen, Entwickelnde und Designende darin 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 Nutzenden, die überhaupt nur ü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 Gruppen von Nutzenden 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). 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.

Kontakt

Ansprechpartnerin bei der Landesredaktion von Berlin.de

Nadine Lantzsch
Der Regierende Bürgermeister von Berlin –
Senatskanzlei
Landesredaktion / Koordinierung Berlin.de
Jüdenstraße 1; 10178 Berlin
E-Mail: nadine.lantzsch@senatskanzlei.berlin.de
Tel.: +49 30 9026-2446

Ansprechpartner bei der Betreibergesellschaft von Berlin.de

Björn Märtin
Leiter Produkt und Innovation
BerlinOnline GmbH
Stefan-Heym-Platz 1
10367 Berlin
E-Mail: bjoern.maertin@berlinonline.de

Introduction: Welcome to the design system of Berlin.de – the official website of Berlin. The design system provides binding layout specifications for all web pages of the Federal State of Berlin that are published under Berlin.de. Whether the web pages were created with the state’s content management system (Imperia) or in another way is not important.

The design system helps ensure the homogeneity of the web pages and strengthens the Berlin brand. It is designed to meet all requirements with its modules. It is not a rigid system, but is open to well-planned extensions. Therefore, if you have a requirement and you can demonstrate that it is not currently covered, an extension or a draft of new elements can be discussed in consultation with the state editorial office (‘Landesredaktion‘) for Berlin.de (contact details below).

On the following pages you will find sample pages and layout snippets along with code fragments. The structure is organised with a division into different verticals (see below) on the first level, followed by a description of individual layout fragments based on atomic design thinking (cf. Brad Frost: atomic design. Location: https://bradfrost.com/blog/post/atomic-web-design/).

We briefly present the basic design principles that form the foundations of the design system below to help you better understand how to implement it.

Brand

As the official website of Berlin, Berlin.de communicates with the Berlin brand and maintains the official brand communication of the state. The style guide defines and extends the rules of the Berlin brand manual for use under Berlin.de URLs on the internet. Additional brands are always subordinate to the Berlin brand and its design guidelines.

Design System

The space under Berlin.de is varied and complex, so different web pages can sometimes have very different design requirements. These requirements are taken into account by a flexible design system that allows for site-wise variations in the form of specialised verticals and is conceived to be extendable. At the same time the design system is binding for all sites under Berlin.de and should be followed as exactly as possible, regardless of the technology used to realise the respective site.

Verticals

The design system for Berlin.de has different variants, or ‘verticals’, that can be used as templates. Verticals differ in terms of their look and feel and in terms of the modules that can be used for them. However, they all use the same basic layout and have the same grid. Verticals can be differentiated from one another by their respective communication tasks as seen from a user perspective. Established verticals are bindingly used throughout Berlin.de by sites with similar communication tasks. The state editorial office makes the decision regarding selection of a vertical for an existing or new site. The state editorial office must always be contacted before new sites are created.
Additional verticals can be developed at any time if a communication task not yet covered by the design system is required. The state editorial office for Berlin.de also decides whether this involves a new communication task or whether an existing vertical can be used.

User-Centred Design

Focus of the new design of Berlin.de is on the users of the web pages and the site should be designed according to the needs of the actual users of the web pages. Accordingly, in all parts of development of a new site, the question of what the users mainly expect of the web pages and how exactly they will use the web pages plays a central role. This begins with the selection of a vertical and leads by way of evaluation of requirements and selection of modules to the concrete design of elements on the web pages and the editorial design of the content.

Accessibility

Berlin.de contains the official web pages of the Federal State of Berlin. The web pages are subject to the Berlin Accessible Information and Communication Technology Act (https://gesetze.berlin.de/bsbe/document/jlr-BIKTGBErahmen). Accordingly, all sites must meet the legal standards for digital accessibility. The present design system pays special attention to the provisions of the regulation on the creation of accessible information and communication technology in accordance with the Disability Equality Act (BITV 2.0) (https://www.gesetze-im-internet.de/bitv_2_0/BJNR184300011.html); it supports editorial teams, developers and designers in designing accessible sites for Berlin.de.

Mobile First and Responsiveness

Web pages are used on various end-user devices with a wide variety of screen sizes, with mobile devices making up the greatest share. There are also large groups of users who can only use the internet on mobile end-user devices. The web pages of the official website of Berlin, Berlin.de, must be easily accessible and usable on all end-user devices and for all groups of users. For this reason, a design approach that initially focuses on design for mobile use on small screens (mobile first) and automatically adapts to the space offered by the respective screen (responsiveness) has been selected. This approach makes sense because web pages designed for mobile devices can always be used on larger screens – but not the other way round. Additionally, the design responds to the problem of a vast array of devices and screen sizes on the market by being able to flexibly utilise any screen size used by a user. The design of Berlin.de is fully responsive and automatically adapts itself to the unknown context of use.

Contact

Contact at state editorial office for Berlin.de

Nadine Lantzsch
Die Regierende Bürgermeisterin von Berlin (The Governing Mayor of Berlin) –
Senatskanzlei – II A 24
Landesredaktion (state editorial office) / Koordinierung Berlin.de (coordination office for Berlin.de)
Jüdenstraße 1; 10178 Berlin
E-Mail: nadine.lantzsch@senatskanzlei.berlin.de
Tel.: +49 30 9026-2446

Contact from the operator company for Berlin.de

Björn Märtin
Leiter Produkt und Innovation (Head of Product and Innovation)
BerlinOnline GmbH
Stefan-Heym-Platz 1
10367 Berlin
E-Mail: bjoern.maertin@berlinonline.de
Tel.: +49 30 2327-5905