Richtlinien für Logoeinsatz, Grafiken (Charts) und Publikationen

Transkript

1 Richtlinien für Logoeinsatz, Grafiken (Charts) und Publikationen Inhalt des Dokuments: Richtlinien für den Logoeinsatz in der Webseite (Mitgliederfirmen, Partnerlogos etc.) Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Richtlinien und Maßangaben für die Titelbilder der Publikationen Autor/en: Martina Klinkau Tel.: DMKZWO GmbH & Co. KG Genter Str Köln 1

2 Richtlinien für den Logoeinsatz in der Webseite Logoanlieferung positiv 2

3 Richtlinien für den Logoeinsatz in der Webseite Logoanlieferung mangelnde Qualität 3

4 Richtlinien für den Logoeinsatz in der Webseite Bedingungen zu einer qualitativ hochwertigen Logoanlieferung > Logos immer hochauflösend liefern lassen (mind. 500 px x 500 px), je nach Ausrichtung des Logos (bei Querformat 500 px Breite, bei hochkantigen Logos 500 px Höhe) > Logos auf Farbechtheit und Schärfegrad prüfen und ohne Komprimierung (Schlieren) anliefern lassen > Optimalste Dateianlieferung: EPS-Format, alternativ hochauflösendes.tiff oder.jpg > Bei qualitativ hochwertiger Anlieferung der Logos kann auch eine Großansicht des jeweiligen Logos im Internetauftritt angeboten werden und ermöglicht somit, dass Logo-Unterschriften, die in der kleinen Darstellung im Web unmöglich zu lesen sind, somit lesbar dargestellt werden können So können Sie garantieren, dass Ihre Mitgliedsfirmen und Partner professionell im DWA-Auftritt präsentiert werden! 4

5 Richtlinien für den Logoeinsatz in der Webseite Logoplatzierung auf weißer Fläche negativ (ohne Raum links und rechts) Logoplatzierung auf weißer Fläche positiv (mit entsprechendem Raum links und rechts) 5

6 Richtlinien für den Logoeinsatz in der Webseite Einsatz der Logos in dem entsprechenden Logo-Modul mit entsprechendem Weißraum Maße der weißen Fläche, auf der das entsprechende Logo mit genügend Weißraum rundum platziert wird: 215 px x 109 px 6

7 Richtlinien für den Logoeinsatz in der Webseite Einsatz der Logos in der Vergrößerung Maße der weißen Fläche, auf der das entsprechende Logo groß mit genügend Weißraum rundum platziert wird: 500 px x 500 px 7

8 Richtlinien für den Logoeinsatz in der Webseite Maße der zu erstellenden Logo-Bilder im Überblick > Formate für die Logofläche im Logo-Modul der Mittelspalte: 215 px x 109 px (Das Format bezieht sich auf die Weißfläche. Das Logo sollte auf dieser Fläche mit genügend weißem Umraum stehen, also nicht bis zu den Rändern der weißen Fläche gezogen werden. > Formate für die Logofläche in der Lightbox (optional: als Vergrößerung zur Kleinansicht): 500 px x 500 px Das Format bezieht sich auf die Weißfläche. Das Logo sollte auf dieser Fläche mit genügend weißem Umraum stehen, also nicht bis zu den Rändern der weißen Fläche gezogen werden. 8

9 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Beispiel einer aktuellen Grafik, die sich vom Stil her nicht in den neuen Internetauftritt einpasst 9

10 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Anpassung der Grafik an das neue Layout (Farbwahl, Schrift, Effekte) Vor der Anpassung an das neue Layout WICHTIG: Vermeidung von räumlicher Verzerrung und zu starker Schattenhinterlegung 10

11 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Anpassung der Grafik an das neue Layout (Farbwahl, Schrift, Effekte) Vor der Anpassung an das neue Layout WICHTIG: Vermeidung von dem Effekt der 3D Buttonoptik 11

12 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite RGB: RGB: RGB: Zu verwendende RGB Farbwerte zur Erstellung der neuen Grafiken RGB: RGB: RGB: Zulässig: Dezenter Verlauf zwischen den Hell- und Dunkelwerten des jeweiligen Farbtons 12

13 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Negativbeispiele WICHTIG: Die Verläufe müssen von Hell (oben) nach Dunkel (unten) verlaufen. Dabei sollte der Verlauf weich eingesetzt werden und nicht wie in der ersten Reihe zu stufenhaft verlaufen. Von Dunkel nach Hell ist nicht zulässig. Weiterhin sollte die Buttonsoptik der untersten Reihe zukünftig gemieden werden, da sich dieser Effekt nicht stimmig zum grafischen Gesamtauftritt der Webseite verhält. 13

14 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite 1. Reihe positiv: dezenter, kaum wahrnehmbare Schattehinterlegung Reihe: Negativbeispiele von zu starker Schattenhinterlegung 14

15 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite 1. Reihe positiv: Hausschrift Meta linksbündig, mittig in der Fläche zentriert. Schrift immer weiß auf farbigen Grund. Ausnahme: dunkelgraue Schrift auf hellgrauer Fläche 2. Reihe Negativbeispiele: Schrift sollte weiß sein, die Schrift sollte nicht zentriert sondern linksbündig gesetzt werden. Sie sollte nicht zu groß eingesetzt werden, sondern einen entsprechenden Abstand zum Rand aufweisen. Zusammenfassung: Schrift: Die zu verwendende Schrift ist die Meta (Hausschrift der DWA) Zulässige Farben der Schrift: Weiß (RGB ) und Dunkelgrau (RGB ) auf hellgrauer Fläche. Die Schrift wird linksbündig verfasst und mittig in der jeweiligen Fläche positioniert. Die Schrift sollte genügend Umraum haben und nicht zu eng an den jeweiligen Rand positioniert sein. 15

16 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Zu Beachten: > Die Grafiken und Charts sollten in Zukunft vereinheitlicht und dem neuen Gesamtauftritt des DWA-Internetauftritts angeglichen werden. > Künftig sollte vermieden werden: Verzerrungen & perspektivische Effekte, Starke Schattenhinterlgung und Button-Optik mit 3D-Effekt > Die Grafiken und Charts werden in Zukunft nur in der Mittelspalte Verwendung finden, weil sie nur in einer größeren Darstellung entsprechend lesbar sind. Die feste Breite jeder Grafik für die Mittelspalte ist 478 Pixel! Die Höhe ergibt sich dann aus der Grafik selbst. Sollte eine Grafik nicht in die Breite passen, weil sie zu kleinteilig ist, muss das Vergrößerungsmodul der Lightbox eingesetzt werden. Es existiert ein entsprechendes Modul mit einem festen Grafikicon, das die Lupe zur Vergrößerung beinhaltet. Wenn möglich, sollte eine zentrale Stelle optimalerweise die interne Grafikabteilung die Grafiken erstellen, so dass eine Einheitlichkeit in der Darstellung als auch die Verwendung der Hausschrift sichergestellt werden kann. 16

17 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Altes Teasermodul zur Ankündigung neuer oder wichtiger Publikationen Wichtig: Anpassung des Moduls an das neue Layout 17

18 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Neues Teasermodul zur Ankündigung neuer oder wichtiger Publikationen Wichtig: Dieses Modul ist keine Grafik! Der Titel des Schriftwerks kann in Contao eingepflegt werden. 18

19 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Varianten des Publikationen-Teaser- Moduls. Der Button Neu kann ein- und ausgeschaltet werden. Das Modul kann als Blättermodul mehrere Broschüren beinhalten und wenn gewünscht mit einer Kurzbeschreibung versehen werden. 19

20 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Publikationen-Teaser-Modul > Das neue Publikationen-Teaser-Modul ermöglicht eine einheitliche Darstellung der kontextrelevanten Broschüren und Empfehlungen. Durch die Blätterfunktion können mehrere Broschüren dargestellt werden, ein Neu Button hebt die Neuerscheinungen hervor. Ein optionales Textfeld ermöglicht die detailliertere Beschreibung des Inhalts. > Der Nutzer kann durch die Kurzbeschreibung eindeutig den Inhalt der Broschüre erfassen. Durch Grafiken mit Kleindarstellungen der einzelnen Broschürentitel (siehe nächste Seite) wird es eher unübersichtlich. Hier würden wir empfehlen, eine reine Textgrafik zur Untermauerung hinzuzufügen, die einzelnen Titel aber in dem Publikationen-Modul vorzustellen. > Somit werden uneinheitliche Darstellungen, die ein beständiges Um- und Neuhineinversetzen des Nutzes erfordern, vermieden. 20

21 Richtlinien zur Erstellung von Grafiken und Charts in der Webseite Uneinheitliche Darstellung von kontextrelevanten Broschüren. Wenn auf eine schematische Grafik zur Untermauerung nicht verzichtet werden kann, so sollte diese den neuen Grafik-Vorgaben entsprechen und auf eine Kleinbild-Darstellung der Broschüren verzichten. 21

22 Richtlinien und Maßangaben für die Titelbilder der Publikationen Darstellung der Broschüren und Titel in einem Blättermodul für die Homepage und den Publikationen- Bereich Ziel: Vereinheitlichung der Darstellung der Publikationen in fest vorgesehenen Modulen. Maße: DIN A 4 wird unter Beibehaltung des Seitenverhältnisses in 126 px x 178 px dargestellt. 22

23 Richtlinien und Maßangaben für die Titelbilder der Publikationen Von DIN A 4 abweichende Formate: Schmalere Hochkant-Broschüren (Flyer) richten sich nach der Höhe der DIN A 4 Publikationen, sprich: 178 Pixel Höhe, die Breite ergibt sich. Quadratische oder Querformate (z.b. CDs) richten sich nach der Breite der DIN A 4 Publikationen, sprich: 126 Pixel Breite, die Höhe ergibt sich. Die Bilder sollen von hochauflösenden PDFs erstellt werden und ohne Effekte abgespeichert werden. Der Effekt selbst (Schatten und Spiegelung) wird in der Programmierung vorgenommen. 23

24 Richtlinien und Maßangaben für die Titelbilder der Publikationen Maße der Publikations-Cover in der Vergrößerung (Lightbox): Maße der PDF-Titel: 353 px x 500 px von DIN A 4 abweichende Maße richten sich auch hier wieder entweder an der Höhe oder Breite dieses Formats. Die Broschüren sollen auf einer weißen Fläche mittig platziert werden, so dass sich rundum ein 10 Pixel breiter weißer Rahmen ergibt. Maße der weißen Fläche: 373 px x 520 px 24

25 Richtlinien und Maßangaben für die Titelbilder der Publikationen Zusammenfassung Bildmaße der Publikationen-Cover > DIN A 4 Publikationen erhalten das Maß 126 px x 178 px > Schmalere Hochkant Broschüren (z.b. Flyer) orientieren sich an der Höhe: 178 px (Höhe ergibt sich) > Quadratische oder Querformate (z.b. CDs) orientieren sich an der Breite: 126 px (Breite ergibt sich) > Vergrößerte Darstellung der DIN A 4 Cover in der Lightbox: 353 px x 500 px (mit weißem Umraum von jeweils 10 Pixeln ergibt sich 373 px x 520 px) > Schmalere Hochkant Broschüren orientieren sich an der Höhe: 500 px, bzw. mit weißer Umrahmung 520 px Höhe (Breite ergibt sich) > Quadratische oder Querformate orientieren sich an der Breite: 353 px, bzw. mit weißer Umrahmung 373 px Breite (Höhe ergibt sich) 25

26 Richtlinien und Maßangaben für die Titelbilder der Publikationen Aktuell: Uneinheitliche Darstellung der Publikationstitel, zum Teil sehr unscharfe Darstellungen 26

27 Richtlinien und Maßangaben für die Titelbilder der Publikationen Zu beachten bei der Erstellung der verschiedenen Formate > Bitte auf größtmögliche Schärfung der Titelblätter achten ohne Überschärfung > Fartreue der einzelnen Serien gewährleisten (KA/KW) > Abspeicherung der angegebenen Größen ohne zusätzliche Schattenhinterlegung > geeignete PDF Vorlage (PDF Screenshotvorlage siehe nächste Seite) verwenden (vorzugsweise aus Indesign zu erstellen, so dass die Qualität der Schriften und Logos erhalten bleibt) > Bei Einbindung von Publikationen von Verlagen sollte ein entsprechend gutes PDF angeliefert werden Unbedingt vermeiden: Das Abscannen von Publikationen-Cover. Hier geht zu viel Qualität verloren! 27

28 Richtlinien und Maßangaben für die Titelbilder der Publikationen Mögliche Einstellung zur Erstellung eines PDFs für die Web-Weiterverarbeitung 28