Inhalt. Inhalt. Vorwort

Transkript

1 Internet-Styleguide

2 Inhalt Inhalt Vorwort 1 Seitenstruktur 3 4 Raster 5 Raster Portalseite 6 Raster Folgeseite 7 Seitenaufteilung Portalseite 8 Seitenaufteilung Startseite Subsite Seitenaufteilung Folgeseite Subsite Feste Bereiche Kopfbereich 12 Kopfbereich Hauptnavigation 13 Orientierungsbereich 14 Fußbereich 15 Bausteine 16 Grundbausteine 17 Ergänzungsbausteine 18 2 Grundelemente 19 Wort-Bildmarke 20 Wort-Bildmarke Vermassung 21 Bildelement 22 Richtiger Logoeinsatz 23 Falscher Logoeinsatz 24 Projekt- und AktionsLogos im Bistum 25 Primärfarben 26 Sekundärfarben 27 Schriftformate 28 Schriftformate Überschriften 29 Impressum 30 2

3 allgemeine Informationen VORWORT Der vorliegende Styleguide beinhaltet vereinbarte Gestaltungsrichtlinien für die Der Der Internet-Styleguide Internet-Styleguide ist ist gültig gültig für für das das Onlineauftritte des Generalvikariats und stellen stellen (siehe (siehe Kapitel Kapitel Geltungsbereich Geltungsbereich im im seiner Dienststellen. Ziel ist die einheitliche Redaktionsleitfaden). Redaktionsleitfaden). Er Er ist ist verbindlich verbindlich für für und benutzerfreundliche Gestaltung der Online-Redakteure Online-Redakteure und und Medienagenturen, Medienagenturen, Internetpräsenzen des Erzbistums Köln, welche welche von von Abteilungen Abteilungen und und Dienststellen Dienststellen ohne individuelle Gestaltungsmöglichkeiten mit der Pflege und Gestaltung von Internet- zu sehr einzuschränken. Das neue Corporate seiten beauftragt sind. Im Internet unter netseiten beauftragt sind. Im Internet Design des Erzbistums Köln, das seit dem unter 1. März 2013 gilt, muss in Online-Medien de/ de/ kann kann stets stets die die aktuell aktuell gültige gültige Version Version seine besondere Umsetzung finden. Die eingesehen werden. werden. Der Der Internet-Styleguide Internet-Styleguide eingesehen Internetseiten des Erzbistums bieten steht in in einem einem ergänzenden komplementären Verhältnis steht Verhältnis zum ein außerordentlich breites Spektrum an zum Redaktionsleitfaden Internet und dem Redaktionsleitfaden Internet und dem Themen. Corporate Design Design Manual Manual des des GeneralvikaGeneralvika Corporate Gleiche Farben, Formen, Ikonographie, riats. riats. Generalvikariat Generalvikariat und und angeschlossene angeschlossene DienstDienst- Bildgestaltung, Regeln für Navigation und Interaktion all dies hilft dem Internetnut- Ansprechpartner zur zur Genehmigung Genehmigung von von Ansprechpartner zer sich im breiten Angebot des Erzbistums Internetprojekten im im Generalvikariat Generalvikariat und und seiinternetprojekten und im Verbund der Internetseiten zurecht- seinen Dienststellen ist die Projektgruppe nen Dienststellen ist das Referat Online der zufinden. Für den visuellen Auftritt des Erz- Internet-Relaunch. Fragen zum InternetStabsabteilung Kommunikation. Fragen zum Erzbistums Köln gelten medienunabhängig bistums Köln gelten medienunabhängig die Styleguide sind an die InternetadministraInternet-Styleguide sind an die Internetad- die Corporate Design-Regeln. GestalCorporate Design-Regeln. Bei Bei der der Gestaltung tion zu richten. ministration zu richten. von Web-Sites sind zudem die spezifischenschen Gegebenheiten des Mediums Internet Gegebenheiten des Mediums Internet zu zu berücksichtigen. Styleguides berücksichtigen. ZielZiel desdes Styleguides ist ist es, durch einen definierten Rahmen den InterneInternetauftritt des Erzbistums Köln einheittauftritt des Erzbistums Köln einheitlich und lich und damit erkennbar zu gestalten. damit erkennbar zu gestalten. Online-RedakOnline-Redaktionen derund Abteilungen tionen der Abteilungen Institutionen und Institutionen habenihren die Möglichkeit, haben die Möglichkeit, Internetauftritt ihren Internetauftritt in diesem Rahmen in diesem Rahmen zu individualisieren. zu individualisieren. Das Corporate Design schreibt feststehende Das Corporate Design feststehende Basiselemente vor, dieschreibt unabhängig vom Basiselemente vor, die unabhängig jeweiligen Angebotsbereich gelten. vom Diese jeweiligen Angebotsbereich gelten. Diese tragen so zu einem gemeinsamen Look and tragendes soonlineangebotes zu einem gemeinsamen Look Feel bei, also einerand Feel des Onlineangebotes bei, also einerdes einheitlichen Anmutung. Zur Umsetzung einheitlichen Anmutung. Zurdas Umsetzung Internet-Styleguides bietet Erzbistumdes Internet-Styleguides bietet Erzbistum Bedienungsanleitungen unddas DokumentaBedienungsanleitungen und Dokumentationen zum Content-Management-System tionen zum für Content-Management-System OpenCms Online-Redakteure an. OpenCms für zum Online-Redakteure an. Informationen OpenCms finden Sie auch auf den Hilfeseiten unter auf den Hilfeseiten unter erzbistum-koeln.de/hilfe. erzbistum-koeln.de/hilfe. 3

4 1 Seitenstruktur 4

5 Seitenstruktur 1 RASTER raster Die Website des Erzbistums Köln besitzt eine Darstellungsfläche mit einer Breitevon von eine Breite Es treten zwei verschiedene Rastervarianten Pixeln, welche immer mittig im Browserfens- tet werden: das Raster der Portalseite und ter ausgerichtet wird. das der Folgeseiten. Die Hintergrundfarbe dieser Fläche ist weiß, Beide sind vierspaltig, die Spalten besitzen die Flächen rechts und links des DarstellungsDarstel- jedoch unterschiedliche Breiten und Spalten- bereiches sind grau. lungsbereiches sind grau. abstände. auf, in denen die Inhaltselemente ausgerich- 5

6 Seitenstruktur 1 raster portalseite Die Breite der ersten drei auf der Portalseite werden, die rechte darf nur als Einzelspalte genutzten Spalten beträgt 215 Pixel, die der genutzt werden. letzten 200 Pixel. Die drei linken Spalten Der Spaltenabstand beträgt 25 Pixel, der können je nach Anforderung kombiniert Randabstand 20 Pixel. 6

7 Seitenstruktur 1 raster FolGeSeIte Im Raster der Folgeseiten beträgt die Breite Ausnahmefall wird auch die rechte Spalte sowohl der linken als auch der rechten Spalte hinzugenommen. In der Regel werden die 200 Pixel. Die beiden mittleren Spalten rechte und die linke Spalte einzeln genutzt. haben eine Breite von jeweils 230 Pixeln. In diesem Raster sind sowohl der Spalten- als Die beiden mittleren Spalten dürfen je nach auch der Randabstand 20 Pixel breit. Anforderung kombiniert werden, in einem 7

8 Seitenstruktur 1 SeItenauFteIlunG portalseite Die Portalseite bekommt zur Sicherung der zum Fußbereich durch. Links wird über drei Übersicht und Wiedererkennbarkeit einen Inhaltsspalten hinweg ein Bühnenbereich immer gleichen Seitenaufbau. Am oberen geschaffen. Seitenrand ist über die gesamte Breite der Darunter können die drei Inhaltsspalten je Kopfbereich (siehe Abschnitt Kopfbereich ) nach Anforderung kombiniert werden. zu finden, darunter teilt sich die Seite in Am Ende der Seite ist der Fußbereich (siehe mehrere Spalten. Die rechte Spalte zieht Abschnitt Fußbereich ) zu finden, der sich sich als Marginalspalte von oben bis hin über die gesamte Seitenbreite erstreckt. 8

9 Seitenstruktur 1 SeItenauFteIlunG StartSeIte SuBSIte So wie jede Seite des Internetauftritts Auf der rechten Seite leitet ein Bühnenbe- beginnt auch die Startseite einer Subsite reich die Subsite ein, der sich über die drei mit dem einheitlichen Kopfbereich (siehe rechten Spalten erstreckt. Abschnitt Kopfbereich ). Darunter teilt sich die Seite in den Inhaltsbe- Links ist auf jeder Seite bis auf das Portal reich zweispaltig und den Informations- der Navigationsbereich zu finden. Hier bereich, welcher vom Kontaktfeld eingeleitet befindet sich die Unternavigation und wird. darunter wenn vorhanden ein Unterlogo Am Ende der Seite ist der Fußbereich (siehe der Subsite. Abschnitt Fußbereich ) zu finden. 9

10 Seitenstruktur 1 SeItenauFteIlunG FolGeSeIte SuBSIte Die Folgeseite einer Subsite ist fast genauso Das Kontaktfeld ist hier nicht mehr verpflich- aufgebaut wie die Startseite. Einzig der tend. Bühnenbereich fällt komplett weg. 10

11 Seitenstruktur 1 FeSte BereIche Die Website des Erzbistums Köln ist in eine intuitive Navigation im Webauftritt zu mehrere Bereiche unterteilt. Einige dieser ermöglichen. Bereiche sind flexibel: Ihre Inhalte werden je Der Kopfbereich, der Orientierungsbereich nach Anforderung mit Inhalten gefüllt. und der Fußbereich sind solche festen Andere jedoch bleiben auf jeder Seite gleich, Bereiche. um ein einheitliches Erscheinungsbild und 11

12 Seitenstruktur 1 KopFBereIch Der Kopfbereich enthält einige der wichtigs- sich weder in Aufteilung noch im Umfang ten Elemente des Webauftritts. Als Träger des unterscheiden. Logos und der Hauptnavigation muss er auf Die Hintergrundfarbe ist weiß. jeder Unterseite gleich erscheinen und darf 1 Wort-Bildmarke 2 Hauptnavigation 3 Meta Navigation Position der Wort-Bildmarke: Position der Meta Navigation: horizontal linksbündig an der linken Raster- rechtsbündig an der rechten Rasterspalte spalte ausgerichtet ausgerichtet. Abstand zum oberen Seitenrand: 40px (Höhe Vertikal im oberen Randabstand der der Bildmarke) Wort-Bildmarke zentriert. Abstand zur Hauptnavigation: min. 40px Sie enthält Service-Links (z.b. Sitemap, (Höhe der Bildmarke) Kontakt, etc.) und ein Suchfeld. Die Wort-Bildmarke wird ohne jegliche Zusätze eingesetzt. Sie ist auf jeder Seite mit Das Datum findet man ebenfalls im Kopf. der Portalseite verlinkt. An der rechten Spalte ausgerichtet wird der aktuelle Tag im Format TT MM JJJJ ange- Position der Hauptnavigation: zeigt. linksbündig an der linken Rasterspalte ausgerichtet. Erstreckt sich horizontal über die gesamte Seitenbreite. Die Menüpunkte sind festgesetzt und werden nicht verändert. 12

13 Seitenstruktur 1 KOPFBEREICH KopFBereIch HAUPTNAVIGATION hauptnavigation Die Hauptnavigation der Website befindet sich am unteren Ende des Kopfbereichs. Hori- Sie werden vertikal angeordnet. Die Hinter- Horizontal erstreckt sie sich die gesamte zontal erstreckt sie sich überüber die gesamte das 20%Siena SienaGold Golddes descorporate CorporateDesigns Designsdes deserz- Breite der Seite. Hier befinden sich sechs bistums Köln, die (#ddd299) Schriftfarbe ist weiß. Erzbistums Köln. Hauptmenüpunkte, beim Überfahren mit der Beim Überfahren ändert sich die Hinter- Maus erscheinen die jeweiligen Unterpunkte grundfarbe zu 20% Siena Gold, die Schriftfar- in einem Drop-Down-Menü. be zu 100% Gold. grundfarbe innerhalb des Untermenüs ist das 13

14 Seitenstruktur 1 ORIENTIERUNGSBEREICH orientierungsbereich Der Orientierungsbereich hat die Aufgabe, dem Seitenbesucher in jeder Situation genau Unterhalb der Navigation bestehtdass die MögDies wird dadurch gewährleistet, alle Auskunft geben uz zu können, wo er sich auf der der geradeder aktiv ist. Unterhalb Navigation besteht die Seite befindet. befindet. Dies ist durch die vertikale Dies gilt nur für deren Weiterführung Möglichkeit, einlogos, Logo des Bereiches einzufü- Menüleiste gesichert, die in jeder Ebene durch dengerade DVR genehmigt gen, der aktiv ist. wurde. lichkeit, ein LogoSeiten des Bereiches einzufügen, übergeordneten angezeigt werden. anzeigt, wo der Besucher sich gerade aufhält. Dies wird dadurch gewährleistet, dass alle übergeordneten Seiten angezeigt werden. 1 Unternavigation 1. Ebene: Seelsorge + Glaube 2. Ebene: Spiritualität 3. Ebene: Spiritualität und Gebet 4. Ebene: Spirituelle Impulse (aktuelle Seite) 2 Unterlogo 14

15 Seitenstruktur 1 FuSSBereIch FUSSBEREICH Der Fußbereich besteht aus drei Bereichen: Links, etc.). Diesesich Links sind in den ersten Am Ende befindet eine kurze Meta Navi- Am oberen Rand sind Verlinkungen zu diver- drei Spalten darüberhinaus in gation, die zufestgelegt, den rechtlichen Informationen sen Social Media Plattformen eingebunden. den übrigen können die Subsite bezüglich derspalten Internetseite führt. deaktiviediese lassen sich aktivieren und deaktivieren, betreffende Links eingefügt werden. Nach dem Footerbereich werden keine weite- ren, so dass niemand ungewollt so dass niemand ungewollt eineneinen Link Link Am Seitenelemente Ende befindet sich eine kurze Meta Naviren angezeigt. anklickt. gation, die zu den rechtlichen Informationen Darunter befindet sich eine Sammlung von bezüglich der Internetseite führt. Links, die als Quick-Links zu verschiedenen Nach dem Footerbereich werden keine weite- Bereichen führen, die schnell erreicht werden ren Seitenelemente angezeigt. sollen (z.b. Hauptbereiche der Seite, ServiceLinks, etc.). 1 Social Media Buttons Quick-Links 2 Quick Links 3 Meta Navigation 15

16 Seitenstruktur 1 BauSteIne Sowohl der Inhalts- als auch der Informati- Aufgrund einer stark unterschiedlichen onsbereich werden durch diverse Bausteine Häufigkeit im Auftreten sind die Bausteine in mit Inhalten gefüllt. Diese Bausteine sind zwei Gruppen unterteilt: die Grundbausteine entweder statisch oder dynamisch, manche und die Ergänzungsbausteine. sind interaktiv. Einige Formatierungsvorgaben gelten für alle Bausteine, andere sind individuell. 16

17 Seitenstruktur 1 GRUNDBAUSTEINE Bausteine, die sehr häufig auftreten. Diese Bausteine haben die Aufgabe, Inhalte auszu- Textbaustein Fotoalbum geben und zu organisieren: sowohl Texte als Webformular auch diverse Medien. Dynamische Liste Kalender Kontaktinformation Teaser Reiter-Element Bild Rotator 17

18 Seitenstruktur 1 ergänzungsbausteine Diese Bausteine kommen auf der Website seltener vor. Einige basieren auf interaktiven Funktionen, wie z.b. Formularen, die nicht von jeder Subsite benötigt werden. 18

19 2 Grundelemente 19

20 Grundelemente 2 wort-bildmarke Das Logo des Erzbistums Köln ist eine Erzbistum Köln, besteht aus zwei Teilen, Wort-Bildmarke. Das Bildelement stellt in dem Wort Erzbistum in der Schrift Officina stilisierter Form die Kathedrale des Erzbis- Sans ITC TT Book in der Farbe Siena-Gold und tums, den Kölner Dom, in der Farbe Siena- dem Wort Köln in der Schrift Officina Sans Gold dar. Das rechts davon angeordnete, in ITC TT Bold in der Farbe Blau. Versalien geschriebene Wortelement 20

21 Grundelemente 2 wort-bildmarke VermaSSunG Der Aufbau der Wort-Bildmarke folgt klaren Der Mindestabstand wird eingehalten, damit gestalterischen Maßstäben: Die Höhe des das Logo gut zur Geltung kommt. Hauptschiffs des stilisierten Kölner Doms Er beträgt links, rechts und unten um das entspricht einem I aus der Höhe des Logo die doppelte Höhe des I aus dem Schriftzugs, die Breite beträgt drei I. Das Schriftzug. Nach oben hin beträgt der Logo kommt grundsätzlich als Wort-Bild- Mindestabstand die Höhe des I, gemessen marke zum Einsatz, der Schriftzug wird nicht ab dem höchsten Punkt der Domspitzen. einzeln verwendet. 21

22 Grundelemente 2 Logo 1 BIldelement Das Bildelement des Logos, der stilisierte Es ist wichtig, dass er sich in Größe und Kölner Dom, kann auch losgelöst vom Farbabstufung deutlich von dem Bildelement Schriftzug Erzbistum Köln als Gestal- im Logo unterscheidet. Der stilisierte Kölner genutzt muss BILdELEMENT tungselement Das Bildelement deswerden. Logos, Hierbei der stilisierte KölnerzuDom, kann sein, auch dass losgelöst vomals deutlich erkennen der Dom Schriftzug Erzbistum Köln wird: als GestalGestaltungselement verwendet tungselement genutzt werden. Hierbei muss deutlich zu erkennen sein, dass der Dom als Gestaltungselement verwendet Dom auch als Gestaltungselement nicht wird:darf Es ist wichtig, dass er sich in Größe und Farbabstufung von dem verzerrt werden unddeutlich sollte sparsam eingebildelement setzt werden.im Logo unterscheidet. Der stilisierte Kölner Dom darf auch als Gestaltungselement nicht verzerrt werden und sollte sparsam eingesetzt werden. Verwendung als Gestaltungselement: z.b. goldene Version mit 40% Deckkraft z.b. weiße Version mit 30% Deckkraft auf dunklem Hintergrund z.b. als Icon z.b. goldene Version mit 100% Deckkraft z.b. weiße Version mit 100% Deckkraft auf dunklem Hintergrund z.b. als Icon (Version Erzbistum Köln Köln Internet Styleguide Erzbistum Corporate Design Manual1) 822

23 Grundelemente 2 richtiger logoeinsatz Grundsätzlich sollte das Logo auf hellem Hintergründen, z.b. Hellgrau eingesetzt Hintergrund abgebildet werden, da dies eine werden. In Einzelfällen kann das Logo in gute Erkennbarkeit garantiert. Am besten Bildern stehen, jedoch nur dann, wenn der wirkt es auf Weiß, daher ist dies die bevor- Hintergrund hell genug und nicht zu unruhig zugte Hintergrundfarbe. Das Logo darf auch ist und der Mindestabstand eingehalten wird. auf anderen hellen, einfarbigen 23

24 Grundelemente 2 FalScher logoeinsatz Eine gute (Wieder-)Erkennbarkeit des Logos gelten folgende Abbildungsregeln: ist sehr wichtig. Um diese zu gewährleisten, LOREM IPSUM 24

25 Grundelemente 2 Logo 1 PROJEKT- und UND Das Logo gilt für alle Organisationseinheiten Erzbischöflichen Kurie) oder eingeführte projektaktionslogos IM BISTUM des Logo Generalvikariats. Ausnahmefällen Gütesiegel. Über Kurie) weitereoder Ausnahmen aktionslogos Im BIStum PROjEKT- und AKTIONSLOGOS Das gilt für allein OrganisationsErzbischöflichen eingeführte IM BISTuM können zusätzlich weitere Logos zum einheiten des Generalvikariats. In Einsatz kommen: Ausnahmefällen können zusätzlich Aktionslogos begrenzt/mit weitere Logos(zeitlich zum Einsatz kommen: örtlicher Eigenständigkeit), Logos mit Aktionslogos (zeitlich begrenzt/mit überdiözesaner Verwendung (mit örtlicher örtlicher Eigenständigkeit), Logos mit Eigenständigkeit/außerhalb überdiözesaner Verwendungder (mit örtlicher Eigenständigkeit/außerhalb der entscheidetüber im Einzelfall der DiözesanverwalGeneralvikar Gütesiegel. weitere Ausnahmen tungsrat auf Antrag. Bei der Neugestaltung auf Antrag. Bei der Neugestaltung von Logos entscheidet im Einzelfall der Generalvon Logos sollte darauf geachtet werden, sollte darauf geachtet werden, dass sie mit vikar auf Antrag. Bei der Neugestaltung dass sie mit dem Logo des Erzbistums kompadem Logo des Erzbistums kompatibel sind, von Logos sollte darauf geachtet werden, tibel sind, keinen DomErzbistums enthalten. z.b.sie keinen Dom enthalten. dass mitz.b. dem Logo des kompatibel sind, z.b. keinen Dom enthalten. z.b. Aktionslogos (zeitlich begrenzt/mit örtlicher Eigenständigkeit): z.b. Logos mit überdiözesaner Verwendung (mit örtlicher Eigenständigkeit/außerhalb der Erzbischöflichen Kurie): z.b. eingeführte Gütesiegel: ErzbistumKöln Köln Internet Corporate Design Manual (Version 1) Erzbistum Styleguide Diese Unterlogos werden auf der Website Unternavigation eingesetzt. Eine Platzierung ausschließlich am dafür vorgesehenen Platz in einem der anderen Bereiche ist nicht im Orientierungsbereich unterhalb der vorgesehen

26 Grundelemente 2 primärfarben PRIMäRFARBEN 100% aa8f % 80% bba f 80% Die Farben des Erzbistums Köln sind ein ist die festliche Variante der weißen Farbe. warmes Siena-Gold und ein tiefes Blau. Blau ist die Farbe der Unendlichkeit, Ruhe, Farben 2 Siena ist eine Erdfarbe, deren Name auf die Treue, des Himmels und Vertrauens. Im Raum Erde rund um die Stadt Siena zurückgeht. der Kirche steht sie für Reinheit, für Maria, Die Farbe kommt in einem warmen Wasser und den Hl. Geist. Die Primärfarben Goldton zum Einsatz, der für Werte, Gött- können in 100%, 80%, 60%, 40% und 20% Die Farben desund Erzbistums Köln einder lichkeit, Treue Glück steht. Imsind Raum warmes Siena-GoldGold und das ein ewige tiefesleben Blau. und Kirche symbolisiert Siena ist eine Erdfarbe, deren Name auf die Erde rund um die Stadt Siena zurückgeht. Die Farbe kommt in einem warmen Goldton zum Einsatz, der für Werte, Göttlichkeit, Treue und Glück steht. Im Raum der Kirche symbolisiert Gold das 60% ceb % 40% e0d09a 8d8aa6 40% ewige Lebenwerden. und ist die festliche Varianverwendet te der weißen Farbe. Blau ist die Farbe der Unendlichkeit, Ruhe, Treue, des Himmels und Vertrauens. Im Raum der Kirche steht sie für Reinheit, für Maria, Wasser und den Hl. Geist. Die Primärfarben können in 100%, 80%, 60%, 40% und 20% verwendet werden. Siena-Gold Sonderfarbe CMYK RGB # Pantone 456 C 0c 15m 100y 43k 170r 143g 0b aa8f00 Blau Sonderfarbe CMYK RGB # Pantone 2757 C 100c 82m 0y 30k 0r 51g 116b % efe6cb bdbacb 20% 26

27 Grundelemente 2 SEKUNDÄRFARBEN SeKundärFarBen SEKuNdäRFARBEN Sekundärfarben werden als Ergänzung zu den Die ist eine die Rot Farbe kommtrot bereits seitausweichfarbe, dem Frühmittelalter Primärfarben eingesetzt. Die Sekundärfarben wegen ihrer hohenzusignalwirkung nur in Einin Schriftstücken Auszeichnungszwecken Farben 2 des Erzbistums Köln sind Schwarz (in seiner zelfällen eingesetzt werden Die Verzum Einsatz, sollte aber auf sollte. Grund ihrer Aufrasterung Grau) und ein warmes Dunkel- wendung ist mit der Internetadministration hohen Signalwirkung eher zurückhaltend und rot. Schwarz wird aufgrund seiner guten abzusprechen.. Dieeingesetzt Sekundärfarben können nur in Einzelfällen werden. Die Lesbarkeit als Schriftfarbe bei Fließtexten in 100%, 60% und 20% verwendet werden. Sekundärfarben können in 100%, 60% und Sekundärfarben als Ergänzung genutzt, Grau z.b.werden bei Flächen. Die Farbe zu den Primärfarben eingesetzt. Die Sekundärfarben des Erzbistums Köln sind Schwarz (in seiner Aufrasterung Grau) und ein warmes Dunkelrot. Schwarz wird aufgrund seiner guten Lesbarkeit als Schriftfarbe bei Fließtexten genutzt, Grau z.b. bei Flächen. Die Farbe Rot kommt bereits seit dem Frühmittelalter 20% verwendet werden. in Schriftstücken zu Auszeichnungszwecken zum Einsatz, sollte aber auf Grund ihrer hohen Signalwirkung eher zurückhaltend und nur in Einzelfällen eingesetzt werden. Die Sekundärfarben können in 100%, 60% und 20% verwendet werden. Schwarz (Grau) Sonderfarbe Pantone Process Black CMYK 0c 0m 0y 100k RGB 0r 0g 0b # % % % dadada In Ausnahmefällen: Rot Sonderfarbe CMYK RGB # a % c47c70 60% Pantone 1807 C 0c 100m 96y 28 k 163r 48g 56b a33038 e6cac2 20% 27

28 Grundelemente 2 SchrIFtFormate Verdana Regular, 11px, 15px ZAB, # Abstand danach: 11px Hervorhebungen: Verdana Italic besondere Hervorhebungen: Verdana Italic, # Wenn nicht anders beschrieben, wird Verdana Hervorhebungen werden durch einen Regular eingesetzt, Schriftgröße 11px, ZAB kursiven Schriftschnitt vorgenommen, in 15px, grau (#333333). seltenen, besonders wichtigen Fällen wird die Der Abstand nach dem Absatz ist immer Zeichenfarbe zusätzlich auf blau (#003374) gleich der Schriftgröße. gesetzt. Texte stehen unabhängig davon, über wie Links werden durch eine blaue Zeichenfarbe viele Spalten sie sich erstrecken grundsätz- ausgezeichnet (#003374) und stehen eben- lich im Flattersatz. falls im Regular Schnitt. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. 28

29 Grundelemente 2 SchrIFtFormate ÜBerSchrIFten Überschrift 1 Verdana Regular, 20px, 25px ZAB, # Abstand danach: 20px Überschrift 2 Verdana Regular, 18px, 23px ZAB, # Abstand danach: 18px Überschrift 3 Verdana Regular, 16px, 20px ZAB, # Für die Auszeichnung diverser Schrifthier- Im Folgenden sehen Sie Schriftgrößen, archien werden unterschiedliche Absatzfor- Abstände und Farben der unterschiedlichen mate genutzt. Überschriften. Das hier ist eine Überschrift 1, die sich über zwei Zeilen erstreckt Das hier ist eine Überschrift 2, die sich über zwei Zeilen erstreckt Das hier ist eine Überschrift 3, die sich über zwei Zeilen erstreckt Abstand danach: 16px Überschrift 4 Verdana Regular, 14px, 18px ZAB, # Das hier ist eine Überschrift 4, die sich über zwei Zeilen erstreckt Abstand danach: 14px Überschrift 5 Verdana Regular, 13px, 17px ZAB, # Das hier ist eine Überschrift 5, die sich über zwei Zeilen erstreckt Abstand danach: 13px Überschrift 6 Verdana Regular, 12px, 15px ZAB, # Das hier ist eine Überschrift 6, die sich über zwei Zeilen erstreckt Abstand danach: 12px 29

30 Grundelemente 2 IMPRESSUM Sollten Sie Fragen zur Verwendung des Styleguide verfasst und zusammen- Styleguides haben, nehmen Sie bitte Kontakt gestellt von: mit uns auf: Goldbug Kommunikation & Design Erzbistum Köln Generalvikariat Daniel Lülsdorff Marzellenstraße 32 Maxstraße Köln Bonn Nele Harbeke Telefon Telefon info@goldbug-design.de nele.harbeke@erzbistum-koeln.de Ralf Diessner Telefon: Webdesign: ralf.diessner@erzbistum-koeln.de Wolfgang Koch-Tien Ketchum Pleon GmbH Telefon Bahnstraße 2 wolfgang.koch-tien@erzbistum-koeln.de Düsseldorf Germany OpenCms-Support Telefon Telefon: Telefax support@erzbistum-koeln.de Bei technischen Fragen siehe auch: Corporate Design des Erzbistums Köln: The Vision Company Werbeagentur GmbH Werderstraße Köln Dr. Nicole Grünewald Andreas Volkert Inga Kruse Telefon Telefax info@the-vision-company.de 30