Digital präsent

Kreative Vielfalt und dabei höchste Wiedererkennbarkeit – bei Online-Bannern sind unsere CD-Grund­sätze besonders gefragt. Geht es doch darum, auf kleinstem Raum und mit minimalen Mitteln einen starken Eindruck zu hinterlassen. Wie, das beschreiben die folgenden Hinweise.

Anwendungsbeispiele

Prinzipien und Basics

Wir verwenden alle Elemente (Ringe, Tagline, Farben, Typografie, Bildstil, Layoutstruktur, Icons und Animation) so, wie sie im Kapitel „Basics“ beschrieben sind. 

Die Ringe werden stets in der regulären Version (schwarz oder weiß) verwendet, das TVC-Ending kommt bei Bannern nicht zum Einsatz.

Die Verwendung der Tagline ist gewünscht, wo immer das Format es zulässt.

Aufbau – Schritt für Schritt

 

1. Wählen Sie ein Format

Legen Sie sich eine Datei im gewünschten Format an. Wir nehmen in diesem Beispiel ein gängiges Querformat:

  • Half pager: 600 x 300 px

Die im Folgenden beschriebenen Schritte gelten grundsätzlich für jedes Format.





 

 

2. Bild einsetzen

Wählen Sie nun ein Bild aus und platzieren es vollflächig im Format. 
 






 

 

3. Ringe & Headline

Legen Sie nun das Verhältnis von Ringen und Headline fest.



Für die Ausrichtung beider Elemente stehen Ihnen mehrere Möglichkeiten zur Verfügung.
Siehe: Basics > Ringe & Typo

 

 

 

 

 

 

 

 

 

 

 

 

4. Markenfeld

Legen Sie das „Markenfeld“ für die Platzierung der Ringe fest.
Siehe: Anzeigen > Im Detail: Markenfeld


Die Ringe können an jeder beliebigen Stelle und in jeder beliebigen Größe im Markenfeld platziert werden. Die Typografie ist nicht an das Markenfeld gebunden.


 

5. Fläche bestimmen

Entscheiden Sie nun, ob Sie eine Fläche in das Layout integrieren möchten. Flächen werden nur eingesetzt, wenn sie eine konkrete Funktion erfüllen.
Siehe: Basics > Layoutstruktur


Das Layout ist so zu wählen, dass die Ringe möglichst auf dem Bild und andere Elemente auf der gewählten Fläche platziert sind.
 

 

6. Farbigkeit

Wählen Sie für die Fläche eine der fünf Audi Farben aus.
Siehe: Basics > Farben

Beachten Sie, dass Ringe und Headline immer einheitlich in Weiß oder Schwarz erscheinen.





 

7. Subheadline und Fließtext 

Der Text schließt bündig mit der Headline ab. Vertikal kann er frei positioniert werden (Mindestabstand: halbe Ringbreite).

Der Schriftschnitt wechselt von Extended Bold bis Normal.




 

8. Call-to-action-Buttons 

Ein weiterleitender Button mit konkreter Aufforderung zur Interaktion schließt den Textblock ab. Hierfür stehen zwei Versionen (primary und secondary) zur Verfügung.

Im Button wird die Audi Type Screen Normal verwendet; die Schriftgröße entspricht derjenigen der Copy (Basisschriftschröße) und bestimmt die Größe des Buttons.
Siehe: Guide > User Interface > Komponenten > Buttons



 

 

9. Icons

Für Zusatzleistungen (z.B. Garantien,
Versicherungen etc.) sind stets die eigens entwickelten Audi Icons zu verwenden.
Siehe: Basics > Icons

Social-Media-Icons (z.B. Facebook) können einfarbig eingesetzt werden. 

 

 

 

 


 

 

10. Tagline

Wählen Sie für die Tagline eine der definierten Platzierungs-, Größen- und Farb­optionen.
Siehe: Basics > Tagline

Anmerkung zu hochformatigen Bannern:
Sollte die Höhe des Banners mehr als doppelt so groß sein wie seine Breite, wird empfohlen auf die Tagline zu verzichten, da die Lesbarkeit nicht garantiert werden kann.

 

11. Fertig









 

 

Sonderfall:
Preise und Händlerinfos

Preise und andere Informationen wie Händlerinfos werden in der Audi Type Extended gesetzt. Achten Sie darauf, dass die Preisangabe stets kleiner als die Headline ist.

Der Name des Audi Partners wird in der Audi Type Extended Normal/Bold gesetzt (stets schwarz oder weiß). Die Schrift­größe beträgt maximal das 1,5-fache der Tagline/Wortmarke.

Aufbau – Schritt für Schritt

Für Slider-Banner können alle Elemente der statischen Banner nach demselben Prinzip eingesetzt werden. Dabei sind stets mindestens drei aufeinanderfolgende Slides zu gestalten. 

 

1. Möglichkeit: Aufbauende Typo

Die (typo)grafischen Elemente kommen nacheinander zum Bild hinzu. 



2. Möglichkeit: Aufbauende und ersetzende Typo

Die (typo)grafischen Elemente kommen nacheinander zum Bild hinzu und ersetzen sich teilweise.

 

 

3. Möglichkeit: Verändernde Fläche

Eine Fläche kommt dynamisch zum Bild hinzu und verändert dessen Format. Die Fläche kann sich im Laufe der Animation selber weiter verändern; auf der Fläche werden (typo)grafische Elemente platziert.



4. Möglichkeit: Verändernde und gleitende Fläche 

Eine Fläche kommt dynamisch zum Bild hinzu und verändert dessen Format. Die Fläche gleitet im Laufe der Animation weiter und macht dadurch einen anderen Bildausschnitt sichtbar; auf der Fläche werden (typo)grafische Elemente platziert.



Option: Ringe und Tagline als Abschluss

Die Animation besteht aus zwei Teilen: Im ersten Teil wird eine der vier vorangegangenen Möglichkeiten
realisiert, im abschließenden Teil erscheinen die Ringe alleine auf einer vollformatigen Fläche in einer der Audi Farben und werden von der Tagline abgelöst. Die Tagline am Ende der Sequenz kann optio­nal auch weggelassen werden.

Aufbau – Schritt für Schritt

Jeder filmische Banner besteht grundsätzlich aus drei Abschnitten: Intro, Inhaltsteil und Outro.
Die Ringe (ohne Tagline) kommen an zwei Stellen zum Einsatz.

  • Das Intro hat eine maximale Länge von 4 Sekunden. Darin erscheinen die Ringe als Opener (2 Sekunden). Sie können mithilfe der Software innerhalb der Introsequenz zu unterschiedlichen Zeitpunkten platziert werden.
  • Im Inhaltsteil kommen neben dem Bewegtbild auch Sprache (Off- und/oder Figurenstimme/n), Musik und Soundeffekte zum Einsatz. Optional kann auch Typo erscheinen. Die Länge ist variabel und beträgt mindestens 10 Sekunden.
  • Das Outro besteht aus der Einblendung der Ringe zusammen mit typografischen Elementen (Headline, Subheadline und Fließtext) und dem Call-to-Action-Button (Dauer des Aufbaus: 1 Sekunde). Die Einblendung kann auf dem Bewegtbild oder auf Fläche geschehen.
  • Nach dem Outro-Aufbau bleiben die eingeblendeten Elemente 7 Sekunden statisch im Bild. Damit wird möglich gemacht, dass der Nutzer auf den weiterführenden Button reagieren kann (Interaktionszeit). In dieser Zeit laufen Bild und Sound per Loop-Funktion. 

     
 

Intro 

Am Anfang eines filmischen Banners erscheinen die Ringe als Opener. Sie entstehen aus dem Bildmaterial heraus und gehen nach wenigen Sekunden darin wieder auf. Sie stehen zentriert im Bild, die Ring­größe ergibt sich aus dem Bild­seitenverhältnis (in unserem Beispiel 3.2:1) und wird mit einer Software automatisch generiert. Die Tagline wird beim Intro nicht eingesetzt.
Siehe: Guide > Motion pictures > TVC-Ending

 

Inhaltsteil

Der Inhaltsteil folgt den regulären Em­pfeh­lungen für Audi Filme. Zum Einsatz kommen Bewegtbild, Sprache (Off- und/oder Figurenstimme/n), Musik, Sound­effekte, optional auch typographische Elemente.

Outro

Am Ende eines filmischen Banners kommen die Ringe ebenfalls zum Einsatz. Hier ist auf das TVC-Ending zu verzichten; die Ringe kommen in Kombination mit Headline, Subheadline und Fließtext sowie Buttons zum Einsatz. Letztere verlinken auf gesonderte Seiten.

Es ist darauf zu achten, dass alle (typo-)grafischen Elemente durchgehend in Schwarz oder Weiß erscheinen. 

 

 

Outro 1: Ringe auf vollformatiger Fläche

Eine Fläche in einer der fünf Audi Farben kommt dynamisch ins Bild und füllt sie vollflächig aus. Darauf sind die (typo-) grafischen Elemente platziert.
Siehe: Basics > Farben

Zu verwenden ist der Secondary Button.
Siehe: Guide > User Interface > Komponenten > Buttons

 

 

 

 

Outro 2: Ringe auf nicht vollformatiger Fläche

Die (typo-)grafischen Elemente können auch auf einer kleineren (z.B. halbformatigen) Fläche erscheinen. 
Siehe: Basics > Layoutstruktur

Ansonsten folgt die Gestaltung dem Schema Outro 1.

 

 

 

Outro 3: Ringe auf Bewegtbild 

Alternativ besteht die Möglichkeit, die (typo-)grafischen Elemente auf Bewegtbild einzublenden.

In diesem Fall wird der Primary Button verwendet.
Siehe: Guide > User Interface > Komponenten > Buttons

 

 

 

Animationsarten

Die Animation vollzieht die für das Audi Erscheinungsbild typische Bewegung.
Siehe: Basics > Animation

CSS definition for web applications
transition-timing-function: cubic-bezier (0.75, 0.02, 0.5, 1);

Definition for Apple iOS Apps
[[CAMediaTimingFunction alloc] initWithControlPoints:0.75f:0.02f:0.5f:1.0f];

Definition for Google Android Apps
PathInterpolatorCompat

Definition for motion design in Adobe After Effects
Outgoing velocity: 75%
Incoming velocity: 95%


Bewegungsrichtung
Alle Elemente werden entweder horizon­tal oder vertikal bewegt, jedoch nicht schräg. 

Timing
Die Dauer der Animation orientiert sich an der Größe eines Elements und an der Strecke, die es zurücklegt. Bei mehreren Elementen oder Animations­schritten sollte eine nachvollzieh­bare Reihenfolge festgelegt werden. Dabei werden möglichst wenige Elemente zeitgleich animiert.

Don’ts

Der zweckmäßige Einsatz von Flächen fehlt, um die Lesbarkeit der Inhalte zu gewährleisten.
Bei extrem hochformatigen Banner sollte auf die Tagline verzichtet werden, da sie zu klein erscheint.
Die Ringe erscheinen viel zu nah bei den Ringen aus dem Content.
Auf zusätzliche Animationseffekte (z.B. sich bewegende Wolken) in der Bild­ebene ist zu verzichten.
Ringe als Opener sind bei extrem hochformatigen Banner zu ver­meiden.
Der Einsatz vom TVC-Ending am Ende eines filmischen Banners ist zu vermeiden.
Ihr CI-Support
Können wir Ihnen helfen?