Digitale Medien, UX-UI Design > Online-Banner, Mobile Ads

Transkript

1 Inhalte Auf einen Blick: Gestaltungsprinzipien CD-Regeln: Logobox Logobox Platzierung Extreme Querformate Bei Online-Bannern und Mobile Ads steht für die Gestaltung medienbedingt nur begrenzter Raum zur Verfügung. Um die Möglichkeiten jedes Formates optimal nutzen zu können, wird die variabel platzierbare Logobox eingesetzt. Bei extremen Hoch- und Querformaten kann die Absendermarke aus Platzgründen alternativ auch im Logostreifen platziert werden. Die Größe des Logos kann jeweils individuell festgelegt werden. Dadurch bieten sich neue Möglichkeiten, auf wenig Raum mehr Emotionen und eine starke Markenpräsenz zu vermitteln. Extreme Hochformate (Skyscraper) Farb- und Bildflächen, DB Winkel Rahmen Typografie Animation Alternative Bannerformate Seite 1

2 Auf einen Blick: Gestaltungsprinzipien Die Breite der DB-Bildmarke ist als Bezugsgröße DBx (1) maßgebend für Größe und Platzierung der Gestaltungselemente. Die Kombination aus Markenlogo und Farbkennung kennzeichnet den jeweiligen Absender. Es werden die Hausfarben des Corporate Designs verwendet. Das Logo wird in der Logobox (2), bei extremen Hoch- und Querformaten alternativ auch im Logostreifen (3) platziert. Wenn möglich, wird der DB Winkel (4) eingesetzt. Das Prinzip der betonten Horizontalen wird in der Flächenaufteilung und bei der Motivauswahl berücksichtigt. Als Satzschrift wird die DB Sans Condensed Alternate aus dem Schriftsystem DB Type (5) anstelle der bei Printmedien eingesetzten DB Head bzw. DB Sans verwendet. Weitere Informationen zu allen in den elektronischen Medien verwendeten Gestaltungsementen finden Sie hier. Seite 2

3 CD-Regeln: Logobox Die Logogröße ist für jedes Bannerformat frei wählbar: Das Logo muss zu Format und Inhalt passen und auch in kleinen Größen lesbar sein. Das Logo steht auf einer rechteckigen weißen Fläche, der Logobox. Die Proportionen der Logobox sind fest definiert und dürfen nicht verändert oder selbst nachgebaut werden. Hier finden Sie die verbindlichen Vorlagen der Logobox zum Download: Marke DB, DB Schenker, DB Netze. Die Logobox hat einen Schlagschatten (1). Dieser ist bereits in den Logobox-Vorlagen enthalten. Logobox Platzierung Die Logobox kann am linken oder rechten Formatrand variabel in der oberen Hälfte des Online-Banners platziert werden. Die für die Platzierung der Logobox und der anderen Gestaltungselemente definierten Mindestabstände sind proportional zur Breite der DB-Bildmarke (DBx): Mindestabstand anderer Gestaltungselemente zur Logobox: ½ DBx Mindestabstand der Logobox zum oberen Formatrand: ¾ DBx Mindestabstand anderer Gestaltungselemente wie z. B. Texte und Zusatzlogos zum Formatrand: ½ DBx Die Logo-/Logoboxgröße ist frei wählbar. Seite 3

4 Extreme Querformate Wenn die Logobox bei extremen Querformaten aus Platzgründen nicht eingesetzt werden kann, wird das Logo im vertikalen Logostreifen am rechten Formatrand platziert. Die Breite des Logostreifens ergibt sich aus der Breite des Logos, dessen Abstand zum rechten Formatrand von ½ DBx, sowie dem Abstand von mindestens ½ DBx links des Logos. Wenn Zusatzlogos oder Markierungen im Logostreifen platziert werden, wird der Logostreifen entsprechend vergrößert. Das Logo steht oben rechts im vertikalen Logostreifen Abstand nach rechts und oben und Mindestabstand zu anderen Elementen: ½ DBx Die Logogröße ist frei wählbar. Die Größe von Angebots- und Regio-Markierungen steht in einem festen Verhältnis zur Breite der DB-Bildmarke. Die Versalhöhe der Markierung entspricht 1/3 DBx. Markierungen werden in der Satzschrift DB Sans Alternate Bold Italic gesetzt. Seite 4

5 Extreme Hochformate (Skyscraper) Wenn die Logobox bei extremen Hochformaten aus Platzgründen nicht eingesetzt werden kann, wird das Logo im Logostreifen am oberen Formatrand platziert. Das Logo steht mit ½ DBx Abstand zum rechten Formatrand und vertikal zentriert im Logostreifen (s. Website Prinzipien). Das Logo steht rechts und vertikal zentriert im Logostreifen. Die Höhe des Logostreifens ist proportional zur Breite der DB-Bildmarke und beträgt 1½ DBx. Die Logogröße ist frei wählbar. Seite 5

6 Farb- und Bildflächen, DB Winkel Umgang mit Bildern und Farbflächen Gestaltung und Farbgebung orientieren sich an den Vorgaben für Printmedien. Bild- und Farbflächen verlaufen über die volle Formatbreite und gehen in den Anschnitt. Als Abbildungen können Fotografien oder Illustrationen verwendet werden. Empfohlen wird der Einsatz eines einzelnen plakativen Motivs (1). Wenn möglich, wird der DB Winkel (2) eingesetzt. Die Größe des Winkelversatzes beträgt immer ½ DBx. Bei extremen Querformaten (3) wird wegen der besonderen Proportionen anstelle der horizontalen eine vertikale Flächenaufteilung verwendet. Auf den DB Winkel wird in diesem Fall verzichtet. Bei Einsatz mehrerer Bilder: Bestimmung eines Hauptmotivs, das den größten Anteil der Bildfläche einnimmt (Ausnahme: Multipicture). Betonung der Horizontalen (nach Möglichkeit) Keine Trennlinien und Bildrahmen: Bilder grenzen direkt aneinander. Das gilt auch für Multipictures. Umgang mit Bildern auf einer Farbfläche Bilder, die auf einem Fond platziert werden, haben keinen Rahmen. Um sie vom Untergrund abzuheben, können sie mit einem Schatten versehen werden. Farben Es werden die definierten Unternehmensfarben des DB-Konzerns verwendet. Die genauen Farbwerte finden Sie unter folgendem Link: Farben Seite 6

7 Umgang mit Freistellern Es ist möglich, Teile von Bildern aus dem Format/der Bildfläche herausragen zu lassen (partielle Freisteller) oder komplette Freisteller innerhalb der Bildfläche über anderen Hintergrundmotiven oder einem Farbfond zu platzieren. Als partielle Freisteller eignen sich Motivteile, die dem Betrachter zugewandt sind. Freisteller befinden sich perspektivisch immer im Vordergrund, so dass sich ein plausibles Größenverhältnis zum Bildhintergrund ergibt. Teilweise freigestellte Motive können in benachbarte Motive hineinragen. Die Grenze zwischen den Motiven muss erkennbar bleiben. Rahmen Trennen sich Logobox bzw. Logostreifen nicht ausreichend vom Hintergrund der Internetseite erhält der Banner einen 1px breiten Rahmen in DB Grau. Wenn die Farbfläche in DB Rot oder DB Blau vollflächig eingesetzt wird, kann optional ein Rahmen in der Farbe der Farbfläche verwendet werden. Auf weißem Untergrund erhalten Banner einen 1px starken Rahmen in DB Grau oder (bei Textbannern) optional in der Farbe der Farbfläche. Seite 7

8 Typografie Wegen des häufig geringen Platzangebotes wird auf Online-Bannern die Schrift DB Sans Condensed Alternate oder die DB Sans Condensed aus dem Schriftsystem DB Type bzw. aus den DB Webfonts verwendet. Typografischer Umgang mit Überschriften Die Hervorhebung einzelner Wörter oder Wortgruppen bei Headlines ist ein charakteristisches Merkmal im Erscheinungsbild des DB-Konzerns. Der horizontale Versatz einzelner Zeilen ist bei Online-Bannern wegen des begrenzten Platzangebotes optional. Überschriften werden in der DB Sans Condensed Alternate in den Schnitten Regular und Black gesetzt. Einzelne Satzteile (Schlüsselworte, Kernaussagen oder überraschende Wortkombinationen) werden in der DB Sans Condensed Alternate Black hervorgehoben. Da nicht alle Schriftschnitte der DB Type als Webfonts zur Verfügung stehen, kann alternativ auch die DB Sans Condensed Regular/Bold eingesetzt werden. Seite 8

9 Animation Animierte Banner bieten zusätzliche Möglichkeiten für die Gestaltung und Dramaturgie. Die Art der Animation ist entsprechend des Inhalts und der Zielgruppe zu wählen. Auf unnötige Effekte, die der Übertreibung dienen, ist zu verzichten. Betonung der Horizontalen Das im Corporate Design der DB verankerte Prinzip der betonten Horizontalen findet auch bei Online-Bannern Anwendung z.b. durch sich in der Horizontalen bewegende Elemente. Seite 9

10 Alternative Bannerformate Manche Inhalte lassen sich über herkömmliche Standardformate weniger effizient kommunizieren. Für besondere Akzente auf der Trägerwebseite empfehlen sich daher auffälligere Arten der Bannerwerbung: Pushdown Ad Wallpaper Pushdown Ads haben eine vorgegebene Startgröße von 90 Pixeln Höhe. Die Breite kann von 728 Pixeln bis zur gesamten Seitenbreite variieren. Der Banner wird beim Besuch einer Seite aktiviert. Bei Aktivierung schiebt das Pushdown Ad den kompletten Content bis zu 300 Pixel nach unten. Pushdown Ads schließen sich nach wenigen Sekunden automatisch. Wallpaper ermöglichen es, die komplette Website mit einem CD- oder einem Kampagnen-Motiv zu prägen. Dazu stehen der obere und rechte Rand um den Contentbereich zur Verfügung. DHTML Banderole Ad Interstitial Mit Hilfe von DHTML lassen sich dynamische Werbebotschaften auf Webseiten abbilden. Die gesamte Seite dient dabei als Präsentationsfläche. Feste Formate sind hierbei nicht definiert. Banderole Ads wickeln sich vordergründig um den Content. Die Ausgangsgröße liegt bei Pixeln und erweitert sich bei Aktivierung auf die gesamte Seitenbreite. Interstitials erscheinen beim Wechsel von einer zur nächsten Seite. Interstitials sind zeitlich begrenzt. Bei Bedarf kann das gesamte Format genutzt werden. Seite 10

11 Universal Flash Layer Flash Layer Universal Flash Layer werden bei Aufruf einer Internetseite platziert. Der Pixel große Banner liegt über dem Content und wird mit Hilfe eines Buttons geschlossen. Flash Layer werden bei Aufruf einer Internetseite platziert. Flash Layer haben kein fest vorgegebenes Format. Beispiel für einen Flash Layer. Ansprechpartner Fragen zum Inhalt dieser Seite? [1] veröffentlicht: Verweisliste [1] Fragen zum Inhalt dieser Seite?: Seite 11