!!! 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%
Components:
Global Elements
Header
undergoing drastic changes as part of DDB-(Teil)Redesign 2024
Footer
undergoing drastic changes as part of DDB-(Teil)Redesign 2024
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
| 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
not-registered Organisation page
| 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
MyDDB
Account Overview
| Component | |
|---|---|
| 1 | Breadcrumb Navigation |
| 2 | Title |
| 3 | User Data |
| 4 | Content Navigation |
| 5 | |
| 6 | |
| 7 |
(Public) Favorites List
| Component | |
|---|---|
| 1 | Breadcrumb Navigation |
| 2 | Title and Description - Favorites |
| 3 | Favorites Lists Area |
| 4 | Favorites List - Functionalities |
| 5 | Favorites List - Items |
Saved Searches
| Component | |
|---|---|
| 1 | Breadcrumb Navigation |
| 2 | Saved Searches List |
Editorial Pages
Startpage
<image>
| Component | |
|---|---|
| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 | |
| 7 | |
| 8 |
Institutions list
| 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
| 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
| Component | |
|---|---|
| 1 | Header Image - generic |
| 2 | Breadcrumb Navigation |
| 3 | Introtext |
| 4 | Filters - editorial |
| 5 | Masonry Grid |
| 6 | Sharing |
| 7 | Jump to Top Button |
Blog
| 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
| 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
| 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
| Component | |
|---|---|
| 1 | Big Slider - horizontal |
| 2 | Breadcrumb Navigation |
| 3 | Introtext |
| 4 | Masonry Grid |
| 5 | Sharing |
| 6 | Jump to Top Button |
Article
| 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
| Component | |
|---|---|
| 1 | Header Image - generic |
| 2 | Breadcrumb Navigation |
| 3 | Introtext |
| 4 | Game |
| 5 | Accordion (variation) |
| 6 | Sharing |
| 7 | Jump to Top Button |
Gallery
| 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
Calendar Archive
