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.
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.
DownloadOpen Sans
Die Open Sans wird für Fließtexte auf der Plattform und für Kommunikationsmittel für veloxvideo verwendet.
DownloadComfortaa
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 & 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
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
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
Video Unterlagen / Richtlinien
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 Regeln 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 diese immer in Weiß.
Intro
Während des Intros sollen die Balken immer ausgeblendet sein.
Outro
Während des Outros 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 sich sonst der Titel doppelt. Die Balken sollten während des Intros ausgeblendet sein.
Outro
Sobald das Outro beginnt, sollen die Balken ebenfalls ausgeblendet sein.
Falscher Bildausschnitt
Man sollte stets darauf achten, dass keine Personen oder sonstige 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ügt ü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 hinzuzuschreiben.
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 BildspracheIcons
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