{"id":12031,"date":"2022-06-25T11:56:37","date_gmt":"2022-06-25T09:56:37","guid":{"rendered":"https:\/\/janinegollub.com\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/"},"modified":"2024-10-11T12:34:01","modified_gmt":"2024-10-11T10:34:01","slug":"zdf-detlines-design-system-der-zdf-mediathek","status":"publish","type":"portfolio","link":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/","title":{"rendered":"ZDF DetLines – the design system for the ZDF-mediathek"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Client<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tZDF<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Agency<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tENDAVA<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Job<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tDirector UX Design<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

development of a design system for all ZDF-mediathek products<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

DetLines is the central design system for all ZDFmediathek products, providing users with a consistent user experience across all playout channels. The entire product landscape was considered: From Responsive Website to mobile apps, Smart TV to HbbTV. With DetLines it is possible to implement new features and applications efficiently, consistently and across platforms and to provide the team with a uniform understanding of the patterns and components.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Objective<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Starting from the Responsive Website as the maximum expression of all patterns and components, the system is designed according to the Atomic Design approach, so that further products can be developed efficiently at any time. An accessible set of rules helps in the development of new components and patterns for all playout channels. This avoids special cases, facilitates coordination, improves collaboration, and accelerates QA processes. All patterns were developed with a focus on accessibility and ensure inclusive use. By considering user studies, personas, and user journeys, DetLines helps to always develop products from the user’s perspective.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"ZDF\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Challenge<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Over the years, the number of patterns had grown, and these had not been systematized until then. Deviations and special cases, which were often not only technical in nature, made the products of the ZDFmediathek more complex and inconsistent. A uniformity of functional and design patterns was not given for the users. Members of the product team had different understandings of the patterns and how they could be used. The development of design principles, along with needs from user studies and personas, allowed for a detailed mapping of the patterns. The results were used to revise and systematize the components and patterns.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"ZDF\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Thanks to systematization and a newly created pattern single source of truth, products can now be developed and implemented consistently, responsively, and with uniform accessibility. Patterns only exist once in the design, concept and code and are referenced in other places. Through the constant comparison with the set design principles a uniform design and image language as well as user experience can be guaranteed across all platforms. This approach helps to accelerate the decision-making processes for new patterns.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

DESIGN<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Principles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
01<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We design for people.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
02<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We confidently show our competences.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
03<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We create an environment that presents the content in the best possible way.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
04<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We reflect the proximity to the user in the design.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
05<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We learn from user feedback and work with empathy on further development.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Design approach<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

DetLines is aimed at product owners, UX and UI designers, front-end developers, and the QA team; the components and patterns themselves are aimed at all users of ZDFmediathek. Over a year and a half, our team developed DetLines. This design system consists of a design master file, a design system manager for precise documentation with all use cases, and a frontend library. The Design System Manager becomes the central interface between design, concept, and frontend. The frontend library plays out the behavior, the characteristics and, by means of live data, an exact mapping of the respective patterns. With DetLines, new products can be designed and conceived efficiently and purposefully.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"ZDF\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Accessibility<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

During the entire process, all patterns were constantly checked from the point of view of accessibility. The results of BITV tests enabled targeted improvements to be made and inclusive use and participation to be ensured. New components and patterns must always comply with BITV accessibility requirements. DetLines has accelerated these processes in all trades and allows us to react more effectively and efficiently to changes in user needs.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Client ZDF Agency ENDAVA Job Director UX Design development of a design system for all ZDF-mediathek products DetLines is the…
Details »<\/a><\/p>\n","protected":false},"featured_media":18554,"menu_order":0,"template":"","meta":{"_pt_project_description":"","_pt_centered_description":false,"_pt_show_tags":true,"_pt_project_meta_one_label":"Date","_pt_project_meta_one_value":"","_pt_project_meta_two_label":"Client","_pt_project_meta_two_value":"","_pt_project_meta_three_label":"Agency","_pt_project_meta_three_value":"","_pt_project_link_text":"Launch Website","_pt_project_link_url":""},"portfolio_cats":[],"portfolio_tags":[],"class_list":["post-12031","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","pth-projects__item"],"yoast_head":"\nZDF DetLines - the design system for the ZDF-mediathek – Janine Gollub<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ZDF DetLines - the design system for the ZDF-mediathek – Janine Gollub\" \/>\n<meta property=\"og:description\" content=\"Client ZDF Agency ENDAVA Job Director UX Design development of a design system for all ZDF-mediathek products DetLines is the… Details »\" \/>\n<meta property=\"og:url\" content=\"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/\" \/>\n<meta property=\"og:site_name\" content=\"Janine Gollub\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-11T10:34:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/janinegollub.com\/wp-content\/uploads\/2022\/06\/ZDFTeasermitLogo-scaled.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"2560\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system-der-zdf-mediathek\\\/\",\"url\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system-der-zdf-mediathek\\\/\",\"name\":\"ZDF DetLines - the design system for the ZDF-mediathek – Janine Gollub\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system-der-zdf-mediathek\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system-der-zdf-mediathek\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/janinegollub.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/ZDFTeasermitLogo-scaled.jpeg\",\"datePublished\":\"2022-06-25T09:56:37+00:00\",\"dateModified\":\"2024-10-11T10:34:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system-der-zdf-mediathek\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system-der-zdf-mediathek\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system-der-zdf-mediathek\\\/#primaryimage\",\"url\":\"https:\\\/\\\/janinegollub.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/ZDFTeasermitLogo-scaled.jpeg\",\"contentUrl\":\"https:\\\/\\\/janinegollub.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/ZDFTeasermitLogo-scaled.jpeg\",\"width\":2560,\"height\":2560,\"caption\":\"ZDF Teaser Design System\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system-der-zdf-mediathek\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/janine-gollubdirector-ux-design-freelance\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ZDF DetLines – the design system for the ZDF-mediathek\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/\",\"name\":\"Janine Gollub\",\"description\":\"Director UX Design Freelance\",\"publisher\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/#\\\/schema\\\/person\\\/8740173e2a493925ed953c29e2f9077b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/#\\\/schema\\\/person\\\/8740173e2a493925ed953c29e2f9077b\",\"name\":\"Janine Gollub\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g\",\"caption\":\"Janine Gollub\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ZDF DetLines - the design system for the ZDF-mediathek – Janine Gollub","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/","og_locale":"en_US","og_type":"article","og_title":"ZDF DetLines - the design system for the ZDF-mediathek – Janine Gollub","og_description":"Client ZDF Agency ENDAVA Job Director UX Design development of a design system for all ZDF-mediathek products DetLines is the… Details »","og_url":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/","og_site_name":"Janine Gollub","article_modified_time":"2024-10-11T10:34:01+00:00","og_image":[{"width":2560,"height":2560,"url":"https:\/\/janinegollub.com\/wp-content\/uploads\/2022\/06\/ZDFTeasermitLogo-scaled.jpeg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/","url":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/","name":"ZDF DetLines - the design system for the ZDF-mediathek – Janine Gollub","isPartOf":{"@id":"https:\/\/janinegollub.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/#primaryimage"},"image":{"@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/#primaryimage"},"thumbnailUrl":"https:\/\/janinegollub.com\/wp-content\/uploads\/2022\/06\/ZDFTeasermitLogo-scaled.jpeg","datePublished":"2022-06-25T09:56:37+00:00","dateModified":"2024-10-11T10:34:01+00:00","breadcrumb":{"@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/#primaryimage","url":"https:\/\/janinegollub.com\/wp-content\/uploads\/2022\/06\/ZDFTeasermitLogo-scaled.jpeg","contentUrl":"https:\/\/janinegollub.com\/wp-content\/uploads\/2022\/06\/ZDFTeasermitLogo-scaled.jpeg","width":2560,"height":2560,"caption":"ZDF Teaser Design System"},{"@type":"BreadcrumbList","@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system-der-zdf-mediathek\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/janinegollub.com\/en\/janine-gollubdirector-ux-design-freelance\/"},{"@type":"ListItem","position":2,"name":"ZDF DetLines – the design system for the ZDF-mediathek"}]},{"@type":"WebSite","@id":"https:\/\/janinegollub.com\/en\/#website","url":"https:\/\/janinegollub.com\/en\/","name":"Janine Gollub","description":"Director UX Design Freelance","publisher":{"@id":"https:\/\/janinegollub.com\/en\/#\/schema\/person\/8740173e2a493925ed953c29e2f9077b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/janinegollub.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/janinegollub.com\/en\/#\/schema\/person\/8740173e2a493925ed953c29e2f9077b","name":"Janine Gollub","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g","caption":"Janine Gollub"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g"}}]}},"_links":{"self":[{"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio\/12031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":8,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio\/12031\/revisions"}],"predecessor-version":[{"id":19074,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio\/12031\/revisions\/19074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/media\/18554"}],"wp:attachment":[{"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/media?parent=12031"}],"wp:term":[{"taxonomy":"portfolio_cats","embeddable":true,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio_cats?post=12031"},{"taxonomy":"portfolio_tags","embeddable":true,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio_tags?post=12031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}