Das Wichtigste im Überblick.
Auf der Startseite der Mediathek kommen Module wie z.B. Hauptnavigation, Footer, Bühne, Cluster, Parallaxbild zum Einsatz.
Diese Module sind randlos und gehen bis zum Bildschirmrand.
![Startseite buehnen start2spaltig](/pictures/2634/a9d3c6b715a45be7118890e995fd50a902c35f18/Startseite_Buehnen_Start2Spaltig.png)
Auf Unterseiten kommen neben den Standardmodulen auch Content breite Module wie z.B. das Content Modul und das Videomodul zum Einsatz. Diese Module gehen nicht bis an den Bildrand.
![Videomodul 2spaltig](/pictures/2635/fdfb2523fb6b654dbd29e8eb9f228724b0e5b7f3/videomodul_2Spaltig.png)
In der Mediathek kommen die Bühnen in den Größen L, M und S vor. Bei der Gestaltung der Bühnen muss sowohl der Schutzraum für Sendungslogo und Text, als auch die Responsivität (seitliche Bereiche) mitberücksichtigt werden.
![Startseite bühnen schem](/pictures/2658/4b2eaf550a9f86fab41b8cd23f91b5db75480a5d/Startseite_Bu_hnen_schem.png)
Bilder in der Mediathek müssen authentisch, situativ, ausdrucksstark und hochwertig sein. Neben der Wahl des richtigen Motivs und des Bildauschnittes ist darauf zu achten, dass das Motiv klar und einfach ist.
![Startseite bühnen anatomie](/pictures/2674/64b14560346711a60d1ad0620941b55c74a8a0aa/Startseite_Bu_hnen_anatomie.png)
Bei kleinen Auflösungen (Mobil-Anwendung) wird die Kombination von Bild und Text anstelle nebeneinander, auch untereinander zugeordnet.
![Mobil ansicht](/pictures/2671/5c095722574e63f5dbb8984f0d007e028c558642/mobil_ansicht.png)
Randlose Module sind, z.B. Hauptnavi, Bühne, Parallaxbild, Clusterband und Footer. Sie gehen links und rechts bis an den Bildschirmrand.
![Bildrand](/pictures/2578/7528bc43176f31c7479c89b2e5f5a9268427259a/bildrand.png)
Detaillierte Richtlinien
Detaillierte Anleitungen und Richtlinien zu den Gestaltungs-Elementen.
-
Bühne auf der Startseite
01Die Bühne auf der Startseite wird in der L-Größe dargestellt.
02Bei der Gestaltung der Bühne muss sowohl der Schutzraum für Teasertexte, als auch die Responsivität mitberücksichtigt werden.
03Das Bühnenbild muss authentisch, hochwertig, situativ und ausdrucksstark sein und den Film inhaltlich näherbringen. Screenshots und Stills dürfen nur in Ausnahmefällen eingesetzt werden.
04Die Auswahl des Bühnenbildes muss sich an den Schlüsselszenen des Films orientieren. Der Fokus liegt immer auf dem Protagonisten.
05Bei der Gestaltung der Bühne ist darauf zu achten, dass der Bildschwerpunkt richtig gewählt ist und keine bildrelevanten Teile verdeckt werden.
06Es ist darauf zu achten, dass das Bildmaterial in ausreichender Qualität zur Verfügung steht. Größtes Format für die Bühne L (Retina-Displays): 2850 px x 855 px. Die Beschreibung der technischen Anforderungen befindet sich im Artwork-Styleguide.
-
Bühne im Sendungsbereich
01Die Bühne im Sendungsbereich kann nur in der L- oder M-Größe dargestellt werden. In der Regel wird die M-Größe empfohlen.
02Bei der Gestaltung der Bühne muss sowohl der Schutzraum für Teasertext und Logo, als auch die Responsivität mitberücksichtigt werden. Zum Rand hin sollte das Motiv keine bildmittigen Elemente enthalten. Es wird dort nur noch unscharf und abgedunkelt dargestellt.
03Die Bühne besteht aus einem Composing aus freigestellten Protagonisten auf einem sendungsbezogenem Hintergrund.
04Der Hintergrund kann das Kampagnenmotiv aufgreifen. Das eingesetzte Bildmaterial sollte in Belichtung und Schärfe den Anforderungen des Artwork-Styleguides entsprechen.
05Die Abbildung kann ein Composing aus freigestellten Protagonisten-Fotos und einer Verortung sein.
06Die Abbildung kann ein Composing aus freigestellten Protagonisten-Foto vor ein Motiv aus dem Sendungsdesign sein.
07Die Abbildung kann sich auch ohne Protagonisten aus dem Sendungsdesign ableiten.
08Die Bühne im Sendungsbereich kann in der L- und M-Größe dargestellt werden. In der Regel empfehlen wir die M-Größe.
-
Bühne auf Rubrikenseiten
01Die Bühne auf Rubriken-Seiten wird in der Regel nur in der S-Größe dargestellt.
02Bei der Gestaltung der Bühne-S muss sowohl der Schutzraum für die Rubrikenbezeichnung als auch die Responsivität mitberücksichtigt werden. Zum Rand hin werden die Grafiken geblurt und abgedunkelt.
03Das Motiv der Bühne ist generisch und tansportiert das Thema der jeweiligen Rubrik.
04Ein Sendungsdesign wird teilweise nur minimal zitiert. Es werden keine Protagonisten abgebildet.
05Die Motive sollten vordergründig keinen Collagen-Charakter haben. Freigestellte Motive werden so in den Kontext eingebunden, daß sie wie ein Einzelbild wirken.
-
Sendungsbild
01Teaserbilder kommen im Cluster, Übersichtsmodul, Einzelteaser und als Beitragsbild vor. Der Teaser L steht immer am Anfang eines Clusterbandes.
02Bei der Gestaltung der Teaser (L oder M) ist darauf zu achten, dass der Bildschwerpunkt richtig gewählt ist und keine bildrelevanten Teile verdeckt werden.
03Bei der Gestaltung der Motive für ein Clusterband gelten ebenfalls die Anforderungen der Bildgestaltung aus dem Artwork-Styleguide. Zusätzlich ist darauf zu achten, daß die Motive stilistisch und von der Farbgebung miteinander harmonieren.
-
Die wichtigsten Regeln zur Bildgestaltung
Neben der Wahl des richtigen Motivs und des Bildauschnittes ist darauf zu achten, dass das Motiv authentisch, situativ, ausdrucksstark und hochwertig ist. Für Startseiten, relevante Beiträge und Hinweise auf Sendungen muss das Bildmaterial in ausreichender Qualität zur Verfügung gestellt werden. Nachfolgend die wichtigsten Regeln zur Bildgestaltung:
01Motive klar und einfach gestalten.
02Keine Typografie im Bild.
03Keine Effektfilter, Bildverzerrungen oder -spiegelungen.
04Keine Farbverfremdungen.
05Freisteller und Composings vermeiden. Im Falle der Bildbearbeitung sollte nie eine Collage, sondern nur ein Einzelmotiv inszeniert werden.
06Bei der Gestaltung der Teaser ist darauf zu achten, dass keine bildrelevanten Teile verdeckt werden.
-
Sendungsteaser
01Sendungsteaser kommen gebündelt auf der A-Z Seite und im Suchergebnis vor und bestehen aus einem sendungsbezogenem Hintergrundmotiv und dem Sendungslogo. Das Sendungslogo wird mit vorgegebenem Schutzraum zentriert gesetzt.
02Die Wortmarke des Logos muss einfarbig (weiß oder dunkelgrau, RGB 79/79/79 und Web #4F4F4F) sein. Zusatz-Akzente können farbig dargestellt werden. Das Hintergrundmotiv gibt die Identität und die Stimmung der Sendung bzw. des Films wieder.