01g_Anhang_G_Online Styleguide.pdf

[Seite 1]

Anhang G

Online Styleguide

Stand Januar 2018

[Seite 2]

Anhang G BBVVLL OONNLLIINNEE SSTTYYLLEEGGUUIIDDEE 2

Inhaltsverzeichnis

Designgrundlagen 02.11 Formular Detail ..................................26 05.8 Redaktionelle Anforderungen .......................47 01.1 Schriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 02.12 Suche ...........................................27 01.2 Schriftsystem ...................................... 5 02.13 Suche Detail .....................................28 Technische Rahmenbedingungen 01.3 Schriftsystem Beispiel ............................... 6 06.1 Barrierefreiheit ....................................49 01.4 Textausrichtung .................................... 7 Navigation 01.5 Farben ............................................. 8 03.1 Metanavigation & Pfadnavigation ...................30 01.6 Logo Desktop ...................................... 9 03.2 Hauptnavigation ...................................31 01.7 Logo Tablet & Smartphone .........................10 03.3 Flyout „Menü“ & „Arbeitsbereiche“ ..................32 01.8 Icons .............................................11 03.4 Flyout „Service“ & „Aufgaben“ ......................33 01.9 Piktogramme .....................................12 03.5 Subnavigation .....................................34 01.10 Buttons ........................................13 03.6 Footer ...........................................35 01.11 Links ............................................14 Bildsprache Struktur & Seitentypen 04.1 Formale Kriterien Teil 1 ............................37 02.1 Grundraster Desktop ...............................16 04.2 Formale Kriterien Teil 2 ............................38 02.2 Grundraster Tablet & Smartphone ...................17 02.3 Startseite .........................................18 Inhaltselement Bild 02.4 Übersichtsseite ....................................19 05.1 Bildformate .......................................40 02.5 Bereichsseite Ebene 1 ..............................20 05.2 Bildgrößen Bühne .................................41 02.6 Bereichsseite Ebene 2 ..............................21 05.3 Bildgrößen Video ..................................42 02.7 Detailseite ........................................22 05.4 Bildgrößen Standard Teaser ........................43 02.8 Presse ............................................23 05.5 Bildgrößen Premiumthemen Teaser .................44 02.9 Infothek ..........................................24 05.6 Bildgrößen Sonstige Teaser . . . . . . . . . . . . . . . . . . . . . . . . . 45 02.10 Formular ........................................25 05.7 Bildgrößen Fotos ..................................46

[Seite 3]

01 Anhang G

Designgrundlagen

[Seite 4]

Anhang G BVL ONLINE STYLEGUIDE 4

01.1 Schriften

Aa

Die Hausschriften des Bundesamtes für Verbrau- cherschutz und Lebensmittelsicherheit (BVL) sind die BundesSerif und die BundesSans.

abcdefghijklmnopqrstuvwxyz 0123456789

Die Schriften zeichnen sich durch Klarheit, Prägnanz und optimale Lesbarkeit aus. Sie ABCDEFGHIJKLMNOPQRSTUVWXYZ gewährleisten einen zeitgemäßen Auftritt und ein BundesSerif Regular medienübergreifendes einheitliches Erschei- nungsbild. Für die Online-Medien des BVL wurden weboptimierte Varianten beider Schriften

Aa

entwickelt. Diese werden von den meistge- nutzten Browsern in neueren Versionen unter-

stützt. abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Die BundesSans steht in den Schriftschnitten Regular und Bold zur Verfügung und findet sich BundesSans Regular vorwiegend in Fließtext und Bildunterschrift sowie in Tabellen wieder. Unterstützend zur

Aa

BundesSans wird die BundesSerif in dem Schrift- schnitt Regular verwendet. Im Sinne der Barriere- freiheit wird sie an ausgewählten Stellen wie den abcdefghijklmnopqrstuvwxyz 0123456789 Headlines, der Hauptnavigation und der Beschrei-

ABCDEFGHIJKLMNOPQRSTUVWXYZ

bung der Schnelleinstiege eingesetzt.

BundesSans Bold

[Seite 5]

Anhang G BVL ONLINE STYLEGUIDE 5

01.2 Schriftsystem

Im Folgenden werden die wichtigsten Elemente H1 Bühne Headline des typografischen Systems der BVL-Website für

BundesSerif Regular | Schriftgrad 38px

die Desktopansicht aufgeführt. Alle angegebenen Werte sind Mindestgrößen.

H2 Content Section Headline

BundesSerif Regular | Schriftgrad 30px

H3 Teaser Headline

BundesSerif Regular | Schriftgrad 24px

H4 Teaser Headline

BundesSerif Regular | Schriftgrad 18px

TEXTLINKS BUNDESSANS REGULAR | SCHRIFTGRAD 14PX

Hauptnavigation

BundesSerif Regular | Schriftgrad 18px

Content Section Copytext | Teaser Copytext | Tabelle | Fließtext BundesSans Regular | Schriftgrad 16px

[Seite 6]

Anhang G BVL ONLINE STYLEGUIDE 6

01.3 Schriftsystem Beispiel

H1 Bühne Headline

H2 Content Section Headline

Content Section Copytext

H3 Teaser Headline

Teaser Copytext

[Seite 7]

Anhang G BVL ONLINE STYLEGUIDE 7

01.4 Textausrichtung

Bühne Übersichtsseite Die Inhalte auf der BVL-Website werden vorrangig linksbündig ausgerichtet. Die einzigen Ausnahmen sind nachfolgend aufgelistete Module: die Bühne der Übersichtsseite, alle Content Sections und der Copytext des Video-Moduls.

Content Section

Copytext Video-Modul

[Seite 8]

BVL ONLINE STYLEGUIDE 8

01.5 Farben

NEBRAFRÄMIRP

NEBRAFRÄDNUKES Anhang G

Die Primärfarbe des Webauftrittes des BVL Dunkelblau stellt das Blau in verschiedenen Abstufungen 26, 91, 129 dar. Dazu zählt das Dunkel-, Schiefer- und #1A5B81 Hellblau. Das Hellblau wird vorrangig als Hintergrund für Schieferblau Hauptmodule wie die Bühne eingesetzt. 74, 139 ,167 Das Dunkelblau findet Anwendung für aktive #4A8BA7 Elemente wie Links und Buttons und wird Hellblau außerdem im Footer verwendet. 201, 223, 232 Schieferblau bildet zusätzlich eine Alternative #C9DFE8 für Navigationselemente und Hovereffekte.

Als Sekundärfarbe wird Beige für die Hinterle- gung von Text benutzt. Schwarz dient vor allem Anthrazit ausschließlich als Textfarbe. Grau tritt in der 25, 25,25 Metanavigation und in einigen Fällen als #191919 Iconfarbe auf.

Grau Die Farbdefinitionen sind verbindlich für den 136, 150, 149 Einsatz im Web definiert. Bei der Farbkombi- #889695 nation „Vordergrund- bzw. Hintergrundfarbe“ gilt immer das Kontrastverhältnis >4,5:1. Beige 237, 231, 222 #EDE7DE

Weiß 255, 255, 255 #FFFFFF

[Seite 9]

Anhang G BVL ONLINE STYLEGUIDE 9

01.6 Logo Desktop

Desktop GRÖSSE UND POSITION DES LOGOS IM HEADER – DESKTOP Das Logo wird in der Größe 200 x 82 Pixel im Header der Webseite bei einer Bildschirmbreite von 1280 Pixel abgebildet. Das Logo hat einen 22 Abstand von 22 Pixel nach oben und 28 Pixel nach unten zum Header.

82 132

200 28

Detailansicht Logo

Header Desktop (1280 x 132 Pixel)

[Seite 10]

Anhang G BVL ONLINE STYLEGUIDE 10

01.7 Logo Tablet & Smartphone

Tablet GRÖSSE DES LOGOS TABLET & SMARTPHONE Das Logo wird in der Größe 220 x 65 Pixel im Tablet Header abgebildet. Das Logo sitzt im

21 220

Header mit 21 Pixel Abstand zum oberen und 24 Pixel zum unteren Rand.

65 110 Smartphone Das Logo wird in der Größe 174 x 53 Pixel im Tablet Header abgebildet. Das Logo sitzt im Header mit 14 Pixel Abstand zum obereren und 24 13 Pixel zum unteren Rand. Maße Logo - Tablet

14

53 80

13 174

Maße Logo - Smartphone

[Seite 11]

Anhang G BVL ONLINE STYLEGUIDE 11

01.8 Icons

Funktionale Icons finden an einer Vielzahl von Stellen zu verschiedenen Thematiken der BVL-Website Anwendung. Sie helfen beim Navi- Menü Suche Home Warenkorb gieren und decken die wichtigsten und wesent- lichen Bedienfunktionen der Website ab. Rechts sind exemplarisch ausgewählte Icons abgebildet, die zu den Standard GSB Icons zählen.

Stets in Grau (#889695) werden dargestellt:

• Icons der Metanavigation und das Home-Icon
• Pfeil „Download“ in Kombination mit Down- Pfeil Pfeil Breadcrumb Pfeil Chevron Indikator loadlink Teaserlink Slider Chevron Download down Slider
• Breadcrumb Chevron

Stets in Anthrazit (#191919) werden dargestellt: -Icons für Menü, Suche, Chevron down und Warenkorb SOCIAL-MEDIA-ICONS METANAVIGATION

Stets in Dunkelblau (#1A5B81) werden darge- stellt: -Pfeil „Teaserlink“ in Kombination mit Teaserlink Facebook Twitter Leichte Sprache Gebärdensprache -Hinterlegung Social-Media-Icons -Aktuelle Position beim „Slider Indikator“

[Seite 12]

Anhang G BVL ONLINE STYLEGUIDE 12

01.9 Piktogramme

Alle sieben verschiedenen Arbeitsbereiche PIKTOGRAMME DER ARBEITSBEREICHE „Lebensmittel“, „Futtermittel“, „Verbraucherpro- dukte“, „Pflanzenschutzmittel“, „Tierarzneimit- tel“, „Gentechnik“ und „Untersuchungen“ der BVL-Website sind mit einem individuell gestal- teten Piktogramm versehen. Diese illustrativen Piktogramme werden größer und detaillierter als die üblichen funktionalen Icons dargestellt und lenken den Blick auf die Schnelleinstiege der Startseite. Sie werden außerdem für die jewei- ligen Arbeitsbereiche als Kennzeichnung für entsprechende Inhalte verwendet, beispielswei- Futtermittel Gentechnik Lebensmittel Verbraucherprodukte se in den Premiumteasern auf Start- und Über- sichtsseite.

Neben einer einfarbigen Variante (Dunkelblau #1A5B81) wird auf der Website hauptsächlich die zweifarbige Variante (Dunkelblau #1A5B81, Mittelblau #90B5CA) der Piktogramme verwen- det.

Pflanzenschutzmittel Tierarzneimittel Untersuchungen

[Seite 13]

Anhang G BVL ONLINE STYLEGUIDE 13

01.10 Buttons

Die Buttons werden in Weiß (#FFFFFF) mit einer BUTTON (DEFAULT / HOVER) dunkelblauen (#1A5B81) Kontur von 1 Pixel mit einer Deckkraft von 70 % dargestellt und haben eine Höhe von 52 Pixel. Per Hover färbt sich der Hintergrund des Buttons Hellblau (#C9DFE8). Auf dunklem Hintergrund wird der Button entsprechend invertiert und bekommt als SUBNAVIGATION (DEFAULT / HOVER) Füllfarbe die Farbe des Hintergrundes sowie eine weiße Kontur (#FFFFFF) von 1 Pixel mit 40-pro- zentiger Deckkraft.

Die Buttons der Subnavigation werden in Weiß (#FFFFFF ) mit einer dunkelblauen (#1A5B81) Kontur von 1 Pixel mit 20-prozentiger Deckkraft BUTTONS „KONTAKT“ UND „ANMELDEN“ INVERTIERT dargestellt. Sie haben eine feste Breite von 380 Pixel und eine Höhe von 83 Pixel und werden in der Desktopansicht dreispaltig angeordnet, siehe Seite „Subnavigation“ (siehe Seite 34). Die Hintergrundfarbe der Buttons färbt sich per Hover Hellblau (#C9DFE8) mit einer Deckkraft von 20 %.

[Seite 14]

Anhang G BVL ONLINE STYLEGUIDE 14

01.11 Links

Teaserlinks werden in Dunkelblau (#1A5B81) TEASER-LINK (DEFAULT / HOVER) und in Großbuchstaben ausgezeichnet und in Verbindung mit dem entsprechenden Pfeil dargestellt. Der Pfeil wird stets, wie der Text, in Dunkelblau (#1A5B81) ausgezeichnet.Auf dunklen Hintergrund färbt sich der Teaserlink weiß (#FFFFFFF). Wird ein Icon mit einem WEITERFÜHRENDER LINK (DEFAULT / HOVER) DOWNLOAD–LINK (DEFAULT / HOVER) Textlink benutzt, färbt sich dieses und (bei Downloadlinks) die zusätzliche Beschreibung, Grau (#889695).

Eine Ausnahme bilden die Links in der Haupt- navigation („Aufgaben“, „Arbeitsbereiche“, „Service“ und „Menü“). Diese werden in Schwarz (#91919) dargestellt. Im aktiven Zustand wird TEXTLINK NAVIGATION der ausgewählte Navigationspunkt durch eine hellblaue (#C9DFE8) Unterstreichung von 3 Pixel gekennzeichnet.

ausgewählter Navigationspunkt „Aufgaben“

[Seite 15]

02 Anhang G

Struktur & Seitentypen

[Seite 16]

[Seite 16: nicht lesbar — ValueError]

[Seite 17]

Anhang G BVL ONLINE STYLEGUIDE 17

02.2 Grundraster Tablet & Smartphone

Tablet

Tablet – 768 px Smartphone – 320 px

Der Inhaltsbereich beim Tablet dehnt sich maximal auf 688 Pixel aus und ist mittig im 688 px 280 px Browser platziert. Das Grundraster ist in 6 Spalten je 90 Pixel mit 30 Pixel Zwischenraum eingeteilt. Der Seitenrahmen ist maximal 768 Pixel breit.

Smartphone Der Inhaltsbereich beim Smartphone dehnt sich maximal auf 280 Pixel aus und ist mittig im Browser platziert. Das Grundraster ist in 4 Spalten je 56 Pixel mit 19 Pixel Zwischenraum eingeteilt. Der Seitenrahmen ist maximal 320 Pixel breit.

Max. Breite: 768 px Max. Breite: 320 px Äußerer Rand: 40 px Äußerer Rand: 20 px Kolumnen: 6 Kolumnen: 4 Zwischenraum: 30 px Zwischenraum: 19 px Breite Kolumne: 90 px Breite Kolumne: 56 px

[Seite 18]

Anhang G BVL ONLINE STYLEGUIDE 18

02.3 Startseite

1

1. Identitätsbereich / Navigation
2. Bühne mit Slider Startseite
3. Teasersammlung Themen 7 2
4. Teaser Aktuelle Meldungen
5. Teasersammlung Premiumthemen
6. Teaser Termine
7. FAQs (Häufig gefragt Modul, Anzahl der 3 Fragen variabel, aber nie mehr als 5) 8
8. Teaser Stellenangebote 2er Kombination
9. Publikationsslider (on click erscheinen jeweils 2 weitere Teaser) 4
10. Footer

9 Pflichtelemente: Alle, bis auf 6. und 8., falls keine Termine oder Stellenangebote vorhanden sind

5 10

6

[Seite 19]

Anhang G BVL ONLINE STYLEGUIDE 19

02.4 Übersichtsseite

1. Identitätsbereich / Navigation
2. Bühne, groß
3. Teasersammlung Inhaltsübersicht, nur Teaser Ebene 2
4. Teasersammlung Premiumthemen (3 Themen) 4
5. Publikationsslider (on click erscheinen jeweils 2 weitere Teaser)
6. Subnavigation
7. Footer

Pflichtelemente: Alle, bis auf 5. (diese nur, wenn vorhanden) 5

6

7

[Seite 20]

Anhang G BVL ONLINE STYLEGUIDE 20

02.5 Bereichsseite Ebene 1

1

1. Identitätsbereich / Navigation
2. Bühne, klein 5
3. Teasersammlung Inhaltsübersicht, nur Teaser ab Ebene 3 (Bild / kein Bildvariante) 2
4. Videoelement
5. Linkboxen
6. Premiumthemen Teaser (1 Thema)
7. Publikationsslider (on click erscheinen jeweils 6 2 weitere Teaser)
8. Subnavigation
9. Footer 3

Pflichtelemente: 7 1., 2., 3., 5., 7., 8., 9. 4. & 6. an entsprechender Position einsetzbar, wenn Inhalte vorhanden sind. Bei 4. kann das Video auch durch ein großes Bild 8 ersetzt werden. 5. & 8. optional

4

9

[Seite 21]

Anhang G BVL ONLINE STYLEGUIDE 21

02.6 Bereichsseite Ebene 2

1

1. Identitätsbereich / Navigation
2. Bühne ohne Bild
3. Teasersammlung Inhaltsübersicht, 2 3 Bild / kein Bildvariante
4. Publikationsslider (on click erscheinen jeweils 2 weitere Teaser)
5. Subnavigation
6. Footer 4

Pflichtelemente: Alle, 5 bis auf 4. (diese nur, wenn vorhanden)

3 6

[Seite 22]

Anhang G BVL ONLINE STYLEGUIDE 22

02.7 Detailseite

1

1. Identitätsbereich / Navigation 11
2. Header der Detailseite ohne Bild 6 2
3. Fließtext mit Bild
4. Downloadliste
5. Bild, groß 7 12
6. Akkordeon
7. Fließtext mit Bild
8. Tabelle 8
9. Fließtext mit Liste weiterführender Links
10. Publikationsslider (on click erscheinen 3 13 jeweils 2 weitere Teaser)
11. Kontaktmodul, klein
12. Subnavigation 9
13. Footer

Pflichtelemente: 1., 2., 3., 5., 7., 12., 13. 5. gewünscht zur visuellen Aufwertung, kann bei 4 geringem Inhalt weggelassen werden. 4. & 6. an entsprechender Position einsetzbar, 10 wenn Inhalte vorhanden sind.

5

[Seite 23]

Anhang G BVL ONLINE STYLEGUIDE 23

02.8 Presse

1

1. Identitätsbereich / Navigation
2. Bühne, groß
3. Aktuelle Pressemitteilung Teaser 6 2
4. Pressekontakt
5. Abonnements
6. Twitter-Modul
7. Terminslider
8. Downloadteaser 7
9. Überblick „Neues aus der Infothek“
10. Footer 3

Pflichtelemente: 8 Alle Reihenfolge verpflichtend

9 4

10 5

[Seite 24]

Anhang G BVL ONLINE STYLEGUIDE 24

02.9 Infothek

1

1. Identitätsbereich / Navigation
2. Bühne, Slider normal
3. Teaser „Neueste Inhalte“
4. Sprungmarkennavigation 2
5. Contentbereich, Teasersammlung diverse Inhalte
6. Footer

3 Pflichtelemente: Alle 4 Reihenfolge verpflichtend

5

[Seite 25]

Anhang G BVL ONLINE STYLEGUIDE 25

02.10 Formular

1

1. Identitätsbereich / Navigation
2. Bühne, groß
3. FAQ Teaser
4. Formular 5
5. Kontaktmodul, groß 2
6. Footer

Pflichtelemente: Alle Reihenfolge verpflichtend 3

6

4

[Seite 26]

Anhang G BVL ONLINE STYLEGUIDE 26

02.11 Formular Detail

Detail Eintrag Detail Dropdown Detail Fehlermeldung

[Seite 27]

Anhang G BVL ONLINE STYLEGUIDE 27

02.12 Suche

1 1

1. Identitätsbereich / Navigation
2. Suchfeld 2
3. Filter
4. Suchergebnisliste (Bild / Kein Bild) 2 3
5. Footer

Pflichtelemente: Suche Popup mit Typeahead Alle Reihenfolge verpflichtend

4

5

[Seite 28]

Anhang G BVL ONLINE STYLEGUIDE 28

02.13 Suche Detail

links: Suche Details und Hoverzustände

oben: Suche Popup mit Typeahead

[Seite 29]

03 Anhang G

Navigation

[Seite 30]

Anhang G BVL ONLINE STYLEGUIDE 30

03.1 Metanavigation & Pfadnavigation

Die Metanavigation befindet sich oberhalb der METANAVIGATION & PFADNAVIGATION Hauptnavigation. Hier befinden sich die Ein- stiege für die Fachmeldungen, Presse, Sprach- FACH auswahl, Leichte Sprache und Gebärdensprache.

Die Pfadnavigation befindet sich als letztes Element innerhalb der Bühne. Durch diese Navigation wird der Nutzer über seinen derzei- tigen Standort innerhalb der Hierarchie der Webseite informiert. Sie zeigt ihm genau an, wo er sich gerade befindet und in welchen überge- ordneten Menüpunkten dieser Bereich liegt. Der Nutzer hat dabei stets die Möglichkeit, die nicht Un aktiven Navigationspunkte anzuklicken und zu anderen Seiten im aktuellen Seitenbaum zu wechseln.

Der aktuelle Standort des Nutzers wird in Anthrazit (#191919) und in der BundesSans im PFADNAVIGATION DETAIL Schriftschnitt Bold, vorherige Links in Regular ausgezeichnet. Das Home-Icon wird stets in Grau (#889695) dargestellt.

[Seite 31]

Anhang G BVL ONLINE STYLEGUIDE 31

03.2 Hauptnavigation

Im Header befinden sich neben dem Logo des HAUPTNAVIGATION BVL die drei Hauptnavigationspunkte der Website („Aufgaben“, „Arbeitsbereiche“ und „Service“), das Menü und die Suche. Bei Klick der Navigationspunkte erscheint ein Flyout, welches Auf über die gesamte Breite mit einem kurzen Introtext und den Navigationspunkten der 2. Ebene abgebildet wird.

[Seite 32]

Anhang G BVL ONLINE STYLEGUIDE 32

03.3 Flyout „Menü“ & „Arbeitsbereiche“

Bei Klick auf den Punkt „Menü“ öffnet sich ein Flyout „Menü“ rechtsbündiges Flyout mit den Unterpunkten „Das Bundesamt“, „Arbeitsbereiche“, „Infothek“, „Karriere“ und „Fragen & Kontakt“.

Unter dem Punkt „Arbeitsbereiche“ findet man die sieben Arbeitsbereiche des BVL.

Flyout „Arbeitsbereiche“

[Seite 33]

Anhang G BVL ONLINE STYLEGUIDE 33

03.4 Flyout „Service“ & „Aufgaben“

Unter dem Navigationspunkt „Service“ verber- Flyout „Service“ gen sich die Navigationspunkte der 2. Ebene „Infothek“, „Unsere Bereiche“, FAQ und „Veran- staltungen“.

Unter dem Navigationspunkt „Aufgaben“ verbergen sich die Navigationspunkte der 2. Ebene „Vorbeugen“, „Koordinieren“, „Zulas- sen“ und „Informieren“.

Flyout „Aufgaben“

[Seite 34]

Anhang G BVL ONLINE STYLEGUIDE 34

03.5 Subnavigation

Bei Bedarf sorgt eine Subnavigation für einen systematischen Zugang zu untergeordneten, vertiefenden Inhalten in der Seitenstruktur. Nutzer können sich so auch bequem im lokalen Kontext bewegen, ohne die Navigation zu nutzen. Die Subnavigation tritt am Ende einer Seite über dem Footer platziert auf. Dort liefert sie einen schnellen Einstieg in die Themenwelt des BVL und regt zum Erkunden der Website an.

[Seite 35]

Anhang G BVL ONLINE STYLEGUIDE 35

03.6 Footer

Der oberste Bereich des Footers, hinterlegt in Hellblau (#C9DFE8), bietet neben einer Suche den Link zu den FAQs und gibt dem Nutzer so am Ende einer Seite die Möglichkeit, Inhalte bei Bedarf gezielt zu suchen und offene Fragen zu klären. Der unterste Bereich des Footers, abgegrenzt in Dunkelblau (#1A5B81) gibt dem Nutzer die Möglichkeit mit dem BVL in Kontakt zu treten oder sich für den Newsletter anzumelden. Unter dem Kontaktbereich befindet sich Platz für Social-Media-Icons, die den Nutzer auf die entsprechenden Social-Media-Seiten weiterlei- ten. Anschließend befinden sich auf weißem Hintergrund die Links zu Datenschutz, Impres- sum, Sitemap und Glossar - sowie das Copyright.

[Seite 36]

04 Anhang G

Bildsprache

[Seite 37]

Anhang G BVL ONLINE STYLEGUIDE 37

04.1 Formale Kriterien Teil 1

Der authentische und realistische Bildstil der Bundesregierung und somit des BVL ist ein klares Erkennungsmerkmal ihres visuellen Auftritts. Daher sind die hier definierten Kriterien sowohl bei der Auswahl von Bildmaterial als auch bei Shootings zu beachten. Für den Einsatz von Bildern in Online-Medien sollten folgende Punk- te berücksichtigt werden:

–Keine kleinteiligen Bilder verwenden –Auf ausreichende Kontraste achten –Auf klaren Bild- bzw. Textbezug zum Seitenin- halt achten

Licht Natürliche Lichtquellen sorgen dafür, dass Bilder authentisch und ungeschönt wirken.

Farbraum Farbgebung und Farbsättigung sind realistisch und natürlich. Starke oder schwache Farbsätti- gung ist zu vermeiden.

Schärfe/Unschärfe Das Spiel mit Schärfe und Unschärfe wird gezielt genutzt, um Nähe zum Motiv bzw. zur Person herzustellen.

[Seite 38]

Anhang G BVL ONLINE STYLEGUIDE 38

04.2 Formale Kriterien Teil 2

Perspektive & Anschnitt Bildausschnitte und Anschnitte werden gezielt eingesetzt, um die Neugierde beim Betrachter zu wecken. Spannungsreiche Perspektiven kenn- zeichnen die Bilder.

Fokus & Storytelling Der Fokus der Bilder ist deutlich und die darge- stellten Situationen sind verständlich und klar. Die spannende Inszenierung lässt den Betrachter unmittelbar am Geschehen teilhaben.

[Seite 39]

05 Anhang G

Inhaltselement Bild

[Seite 40]

Anhang G BVL ONLINE STYLEGUIDE 40

05.1 Bildformate

Bilder werden in der Größe von 1920x1080 (16:9) 16:9 4:3 1:1 3:4 Pixel gepflegt und mit Hilfe der Slice-Funktion im CMS automatisch in verschiedene Bildfor- mate - beispielsweise von 16:9 in 4:3 - expor- 18:7 tiert. Der Bildausschnitt kann im CMS je nach Format optional bestimmt werden.

1920 px

[Seite 41]

Anhang G BVL ONLINE STYLEGUIDE 41

05.2 Bildgrößen Bühne

Die folgende Übersicht zeigt die verschiedenen Bildgrößen in ihrer maximalen einzupflegenden Größe. 2 1

1. Bühne groß | 1196 x 513 Pixel
2. Bühne Slider | 884 x 483 Pixel
3. Bühne klein | 788 x 431 Pixel

3

[Seite 42]

Anhang G BVL ONLINE STYLEGUIDE 42

05.3 Bildgrößen Video

4. Video | 995 x 560 Pixel

4

[Seite 43]

Anhang G BVL ONLINE STYLEGUIDE 43

05.4 Bildgrößen Standard Teaser

5. Teaserbild klein| 379 x 214 Pixel | 16:9
6. Teaserbild mittel | 427 x 241 Pixel | 16:9
7. Teaserbild groß | 584 x 330 Pixel | 16:9

[Seite 44]

Anhang G BVL ONLINE STYLEGUIDE 44

05.5 Bildgrößen Premiumthemen Teaser

8. Teaserbild groß | 584 x 330 Pixel | 16:9
9. Teaserbild klein | 379 x 214 Pixel | 16:9

8

9

9

[Seite 45]

Anhang G BVL ONLINE STYLEGUIDE 45

05.6 Bildgrößen Sonstige Teaser

10. Teaserbild Maxi | 584 x 330 Pixel | 16:9
11. Teaserbild Infothek | 345 x 194 Pixel | 16:9

10

11

[Seite 46]

Anhang G BVL ONLINE STYLEGUIDE 46

05.7 Bildgrößen Fotos

12. Foto groß 790 x 455 Pixel | 16:9
13. Foto klein | 277x 156 Pixel | 16:9 13
14. Foto Thumbnail | 166 x 94 Pixel | 16:9 12

14

[Seite 47]

Anhang G BVL ONLINE STYLEGUIDE 47

05.8 Redaktionelle Anforderungen

Bildtitel Der Bildtitel erscheint ausschließlich im Mouse- over.

Textfeld In dieses Feld können Sie eine Bildunterschrift eintragen. Die Bildunterschrift, soll den Bildin- halt – im Gegensatz zum beschreibenden Alternativtext – kontextuell ergänzen.

Alternativtext Für Bilder soll grundsätzlich ein Alternativtext angegeben werden, der einen gleichwertigen Ersatz darstellt. Screenreader können anhand eines angemessenen Alternativtextes einen Bildtitel Eindruck vom Bild verschaffen, ohne dass der „Käse auf einem Holzbrett. (Quelle Fotolia)“ Text im Artikel angezeigt wird. Textfeld „Fans des Camembert müssen mit Urheberrecht + Bildquelle einem Preisanstieg von 20% rechnen.“ Tragen Sie hier die Copyright-Angabe für das Bild ein. Alternativtext „Das Bild zeigt einen französischen Weißschimmelkäse mit Tomaten auf einem Holzbrett. (Quelle Fotolia)“

Urheberrecht & Bildquelle „(c) Fotolia“

[Seite 48]

06 Anhang G

Technische Rahmenbedingungen

[Seite 49]

Anhang G BVL ONLINE STYLEGUIDE 49

06.1 Barrierefreiheit

Alle Nutzer sollen unabhängig von körperlichen Leichte Auffindbarkeit: Barrierefreie Websites werden Einschrän kungen mit allen Browsern und Plattformen zu durch ihren gut strukturierten Code besser von Suchma- allen Daten und Informationen Zugang haben. Die Gestal- schinen indexiert und werden so vom Nutzer leichter tung und Umsetzung orientiert sich stark an der BITV 2.0 gefunden. (Barrierefreie Informationstechnik-Verordnung) und den WCAG2 (Web Content Accessibility Guidelines), um einen Barrierefreiheit ist jedoch kein technisches Feature und hohen Grad an Barrierefreiheit zu erreichen. Neben einer nicht nur bei der Programmierung der Website zu beach- leichten Zugäng lichkeit für Menschen mit körperlichen ten. Damit eine Website nachhaltig barrierefrei ist, muss Einschränkungen ist auch das Thema Plattformunabhängig- zu einer leistungsstarken technischen Grundlage eine keit – also eine einfache Portierbarkeit auf mobile Endgerä- barrierefreie Textaufbereitung hinzukommen (z. B. das te – ein wichtiger Faktor. Texten von Überschriften, das Schreiben von Vorspannen, Eine nach modernen Webstandards barrierefreie Website die Verwendung von Absätzen und Zwischenüberschriften bietet mehr Komfort für alle Nutzer: etc.).

Verbesserte Usability: Viele Barrierefreiheits-Funktionen Neben den Informationen auf der Website ist es auch verbessern gleichzeitig die Benutzerführung. So wird wichtig, dass zusätzliche Informationen wie PDF- durch große Klickflächen, Tastaturbenutzbarkeit, kon- Dokumente, die zum Herunterladen angeboten werden, trastreiche Farben, klare Strukturierung, hilfreiche Icons, barrierefrei sind. Zoomstufen oder vergrößerbare Schrift die Benutzbarkeit für alle Nutzer erleichtert.

Schnelle Ladezeit: Weniger und gut strukturierter HTML- Code, wenige ausgelagerte JavaScripte, die Trennung von Inhalt und Design und der Verzicht auf Layouttabellen lassen die Website um ein Vielfaches schneller laden.

[Seite 50]

Anhang G

Aperto GmbH – An IBM Company In der Pianofabrik · Chausseestrasse 5 · 10115 Berlin www.aperto.com