veloxvideo Styleguide

Social Media Videos selbst erstellen in nur 24h

Was ist veloxvideo

Kurze Einführung
Um die Kommunikation für unsere Kunden so einfach wie möglich zu gestalten, bieten wir neben den klassischen Allround-Produktionen seit 2020 auch veloxvideo an. Bei veloxvideo liefern uns die Kunden ihr fertig gedrehtes Material und wir kümmern uns innerhalb von 24h um die Postproduktion. Für regelmäßigen Videocontent können die Kunden ihre Videos im Abo oder Kontingent bestellen.

Logo Herkunft

Schreibweise

Dont

velox.video
velox-video
velox video
VELOX VIDEO
Velox Video

Do

veloxvideo

Typografie

Roboto

Die Roboto ist die Schriftart für alle Headlines. Sowohl auf der Plattform als auch für alle Kommunikationsmittel (Videos, Website, Ads etc.) für veloxvideo.
Download

Open Sans

Die Open Sans wird für Fließtexte auf der Plattform und für Kommunikationsmittel für veloxvideo verwendet.
Download

Comfortaa

Die Comfortaa ist eine Google Font und somit leicht zugänglich. Das ist die Hausschrift aus dem veloxvideo Logo und darf auch nur im Logo verwendet werden, ansonsten nicht.

Farben

Primary

Darkblue
#0d529e
Lightblue
#2F89FC
Green
#00E5BC
Darkblue & Lightblue kannst du für Headlines oder Buttons verwenden. Diese Farben sind unglaublich wichtig in einem Design und sollten immer angewendet werden.  Green ist ein absoluter Eye-Catcher und essentiell für jedes veloxvideo-Design. Du solltest vorsichtig und sparsam mit ihr umgehen.

Secondary

White
#ffffff
Light Grey
#E0E0E0
Body Grey
#282828
Diese Farben solltest du immer nur für Schrift oder als Hintergrund verwenden. Dunkelgrau ist gut für einen Fließtext auf weißem Hintergrund. Hellgrau hilft dir als Hintergrund, das Design zu strukturieren.

Feedback

Success
#00e5bc
Warning
#ffaa00
Error
#ff3c3c
Signalfarben: Diese Farben werden ausschließlich für veloxvideo verwendet, und nie in einem Design. Rot bedeutet „Warnung“, Gelb bedeutet „Info“, Grün bedeutet "Erfolg".

Farbverlauf

Background
Darkblue + Lightblue + Green
Background
Darkblue + Lightblue

Video Unterlagen / Richtlinien

Video Vorlagen

Download

Video Vorgaben für 16:9 in 1:1 Formaten

Wenn ein Video in 16:9 zu 1:1 editiert werden muss, können diese Regen hier beachtet werden. 

DO

Farbverlauf
Der Farbverlauf geht von Dunkelblau zu Hellblau, immer von oben links nach unten rechts. 
Layout
Die Schrift ist wie in dem Bild oben festgelegt.  Dabei sollte auch auf den SIcherheitsabstand geachtet werden. Außerdem ist dese immer in Weiß.
Intro
Während des Intros sollen die Balken immer ausgeblendet sein. 
Outro
Während des Outro sollen die Balken immer ausgeblendet sein. 
Abstände

DONT

Falscher Farbverlauf
Der Farbverlauf darf nicht Vertikal gesetzt, und Farben dürfen nicht vertauscht werden.
Falsche Farben
Es dürfen keine verschiedenen Farben gemischt werden, außerdem dürfen die Balken nicht Weiß sein. Diese sollen immer den Blauen Farbverlauf haben mit Weißer Schrift.
Intro
In dem Intro dürfen die Balken nicht stehen bleiben, da sonst der Titel sich doppelt. Die Balken sollten während des Intros ausgeblendet sein.
Outro
Sobald das Outro beginnt sollen die Balken ebenfalls ausgeblendet sein.
Falscher Bildauschnitt
Man sollte stets darauf achten, das keine Personen oder sonstig wichtige Elemente abgeschnitten sind. Personen brauchen immer ein wenig Freiraum zwischen Kopf und Balken.

Social Media Ad Gestaltung

Dont

In diesem Beispiel ist die Schrift nirgendwo ausgerichtet und das Design hat keine Konsistenz. Außerdem wurde das Logo zum einen auf dem falschen Hintergrund verwendet und es ersetzt in diesem Fall einen Teil der Headline. Außerdem ist viel zu viel Weißraum drumherum und der Platz wurde nicht gut ausgenutzt.
Die Headline ist hier etwas zu klein, in einem Fall wo man sehr wenig Text hat kann man den gesamten Platz wunderbar ausnutzen mit Schriftgrößen. Das Bild ist auf der Falschen Seite, der Laptop sollte eher zur Schrift gedreht sein. Außerdem ist das Logo unten in der Ecke sehr unauffällig und zu klein.
Bei diesem Beispiel wurde der Platz nicht richtig ausgenutzt, die Schrift ist viel zu nah am Bild und der Kontrast fehlt hier ebenso. Außerdem wurde das Falsche Logo verwendet. Außerdem gibt es hier keinen Call-to-action Button.

Do

Das verbesserte Design hat das richtige Logo und der Text verfüg über eine richtige Text Struktur. Das Bild ist vergrößert und leicht angeschnitten, das macht das Bild noch etwas spannender. Der Button ist größer gesetzt und soll zum klicken anregen.
Hier wurde der Platz wieder besser ausgenutzt, Die Jahreszahl konnte man hier wirklich schön und groß ziehen. Dadurch wird die Aufmerksamkeit sofort darauf gezogen. Außerdem ist das Bild nun auch viel größer und man erkennt besser was sich auf dem Bildschirm befindet
Hier wurde das Design neu überdacht und der Platz wurde besser genutzt. Es gibt mehr Kontrast von Schrift zu Hintergrund. Wenn auf bestimmten Designs Experten abgebildet sind, ist es immer besser deren Namen hinzu zu schreiben.

Bildsprache

Das Design von veloxvideo ist sehr ansprechend und einladend. Die Farben sind kräftig und frisch, die Formen weich und rund - es wirkt alles sehr harmonisch und entspannt. Auf den ersten Blick könnte man meinen, dass diese Bildsprache nur für Webdesigns geeignet ist, doch dem ist nicht so. Diese Stilelemente können auch in anderen Bereichen verwendet werden, zum Beispiel in der Werbung oder bei Präsentationen. Sie helfen dabei, die Aufmerksamkeit des Betrachters auf sich zu lenken und eine positive emotionale Reaktion hervorzurufen.
In dieser Sammlung gibt es ein paar Beispiele für unsere Bildsprache
Zur Bildsprache

Icons

Icons heißen auch Piktogramme und sind essentiell für das Webdesign. Icons ersetzen die Schrift und sollen mit Bedacht immer da verwendet werden, wo sie auch wirklich gebraucht werden.
Zu den Icons
crossmenu