!!! This page and all related sub-pages are currently under construction !!!

This documentation describes the new design of the DDB Main portal as implemented in the Neustart Kultur project of 2022/23. All changes made to the design are to be documented here as well for future reference.

Figmas:

Clickdummy (Cosmoblonde 2022) - considered out-of-date, only used for orientation/reference
DDB (Cosmoblone 2022) - examples for entire pages and their mobile versions
- some elements are outdated
DDB ComponentsLibrary (Cosmoblonde 2022) - up-to-date elements and their mobile versions. The Styleguide is based on this one
DDB Changes (DNB 2023) - mockups for missing pages (Overview Pages, MyDDB, Calendararchive)

Structure:

Page width (Seitenbreite) - covers entire content area, not to be confused with Content width
Content width (Contentbreite) - size of elements that are not sorted into a grid, structured around large portions of text
Screen width (Screenbreite) - covers entire screen of the user's device, mainly used for (background) images
Breakpoints:

	FIZ	Cosmoblonde
Desktop	>1100	>1200
Tablet Landscape	>980	>992
Tablet Portrait	>760	>768
Mobile big	>560	<768
Mobile small	<560	-

Grid: when elements are sorted next to each other, their relations to each are are oriented based on a grid:
- 50% / 50%
- 25% / 25% / 25% / 25%
- 33% / 33% / 33%
- 66% / 33%
- 33% / 66%

DDB-Dokumentation > DDB Frontend Documentation > image-2024-11-14_14-28-54.png

Components:

Global Elements

Header

Header - 2022

undergoing drastic changes as part of DDB-(Teil)Redesign 2024

Footer

Footer - 2022

undergoing drastic changes as part of DDB-(Teil)Redesign 2024

Side Menu

Main Menu / Side Menu

undergoing drastic changes as part of DDB-(Teil)Redesign 2024

Search

undergoing drastic changes as part of DDB-(Teil)Redesign 2024

Database

Object search page

undergoing drastic changes as part of DDB-(Teil)Redesign 2024

Object page

DDB-Dokumentation > DDB Frontend Documentation > Objectppage.png

	Component
1	Breadcrumb Navigation
2	Title and Description - Object
3	Mediaviewer
4	Metadata Accordions
5	Core Metadata
6	Sharing
7	Little Slider - Items / Editorial Content
8	Hierarchy - Object
9	Jump to Top Button

Person page

DDB-Dokumentation > DDB Frontend Documentation > Personpage.png

	Component
1	Breadcrumb Navigation
2	Title and Description - Person / not registered Organisation
3	Mediaviewer - Person / not registered Organisation
4	Little Slider - Items / Editorial Content
5	Metadata Blocks
6	Sharing
7	Jump to Top Button

not-registered Organisation page

DDB-Dokumentation > DDB Frontend Documentation > notRegisteredOrganisationpage.png

	Component
1	Breadcrumb Navigation
2	Title and Description - Person / not registered Organisation
3	Mediaviewer - Person / not registered Organisation
4	Metadata Blocks
5	Sharing
6	Jump to Top Button

registered Organisation page

DDB-Dokumentation > DDB Frontend Documentation > RegisteredOrganisationpage.png

	Component
1	Breadcrumb Navigation
2	Title and Description - registered Organisation
3	Mediaviewer - Map
4	Little Slider - Items / Editorial Content
5	Metadata Blocks
6	Hierarchy - Location
7	Sharing
8	Jump to Top Button

MyDDB

Account Overview

DDB-Dokumentation > DDB Frontend Documentation > AccountOverview.png

	Component
1	Breadcrumb Navigation
2	Title
3	User Data
4	Content Navigation
5	Slider Favorites
6	Slider Saved Searches
7	Jump to Top Button

(Public) Favorites List

DDB-Dokumentation > DDB Frontend Documentation > Favorites.png

	Component
1	Breadcrumb Navigation
2	Title and Description - Favorites
3	Favorites Lists Area
4	Favorites List - Functionalities
5	Favorites List - Items

Saved Searches

DDB-Dokumentation > DDB Frontend Documentation > SavedSearches.png

	Component
1	Breadcrumb Navigation
2	Saved Searches List

Editorial Pages

Startpage

<image>

	Component
1
2
3
4
5
6
7
8

Institutions list

DDB-Dokumentation > DDB Frontend Documentation > InstitutionsList.png

	Component
1	Header Image - generic
2	Breadcrumb Navigation
3	Introtext
4	Filters - editorial
5	Filters - alphabetical
6	Institutions Counter
7	Institutions List
8	Sharing
9	Jump to Top Button

Institutions map

DDB-Dokumentation > DDB Frontend Documentation > InstitutionsMap.png

	Component
1	Header Image - generic
2	Breadcrumb Navigation
3	Introtext
4	Filters - editorial
5	Institutions Counter
6	Institutions Map
7	Sharing
8	Jump to Top Button

Overview Pages

Dossiers

DDB-Dokumentation > DDB Frontend Documentation > OverviewDossiers.png

	Component
1	Header Image - generic
2	Breadcrumb Navigation
3	Introtext
4	Filters - editorial
5	Masonry Grid
6	Sharing
7	Jump to Top Button

Blog

DDB-Dokumentation > DDB Frontend Documentation > OverviewArticles.png

	Component
1	Header Image - generic
2	Breadcrumb Navigation
3	Introtext
4	List View - Editorial Content / Tile View - Editorial Content
5	Sharing
6	Jump to Top Button

Games

DDB-Dokumentation > DDB Frontend Documentation > OverviewGames.png

	Component
1	Header Image - generic
2	Breadcrumb Navigation
3	Introtext
4	Filters - editorial
5	Masonry Grid
6	Sharing
7	Jump to Top Button

Virtual Exhibitions

DDB-Dokumentation > DDB Frontend Documentation > OverviewVA.png

	Component
1	Big Slider - horizontal
2	Breadcrumb Navigation
3	Introtext
4	Filters - editorial
5	List View - Editorial Content / Tile View - Editorial Content
6	Sharing
7	Jump to Top Button

Content pages

Dossier

DDB-Dokumentation > DDB Frontend Documentation > Dossier.png

	Component
1	Big Slider - horizontal
2	Breadcrumb Navigation
3	Introtext
4	Masonry Grid
5	Sharing
6	Jump to Top Button

Article

DDB-Dokumentation > DDB Frontend Documentation > Article.png

	Component
1	Big Slider - horizontal
2	Breadcrumb Navigation
3	Introtext
4	Content Navigation
5	Text & Media Element
6	Text
7	Selected Objects
8	Quote
9	Text
10	Image Gallery
11	Text
12	Gallery Paragraph
13	Sharing
14	Jump to Top Button

Game

DDB-Dokumentation > DDB Frontend Documentation > Game.png

	Component
1	Header Image - generic
2	Breadcrumb Navigation
3	Introtext
4	Game
5	Accordion (variation)
6	Sharing
7	Jump to Top Button

Gallery

DDB-Dokumentation > DDB Frontend Documentation > Gallery.png

	Component
1	Header Image - specific
2	Breadcrumb Navigation
3	Introtext
4	Masonry Grid
5	Sharing
6	Jump to Top Button

Virtual Exhibition

Virtual Exhibitions have their own frontend.

FAQ

DDB-Dokumentation > DDB Frontend Documentation > FAQs.png

	Component
1	Header Image - generic
2	Accordion
3	Sharing Links
4	Jump to Top Button

Calendar Archive

DDB-Dokumentation > DDB Frontend Documentation > CalendarArchive.png

	Component
1	Breadcrumb Navigation
2	Title and Description - Calendar
3	Filters - Calendar
4	List View - Items
5	Sharing
6	Jump to Top Button