videoboost Logo
videoboost Logo

Styleguide

make great work visible

Logo Herkunft

Typografie: Markenname

Unser Markenname wird durchgehend kleingeschrieben, also „videoboost“. Ausnahme: Der Markenname steht am Satzanfang. Hier wird der Name gemäß der deutschen Rechtschreibregeln groß geschrieben, also bspw. „Videoboost ist Ihr Corporate-Video-Partner.“ Die frühere Schreibweise mit großem B im Namen („VideoBoost“) wird nicht mehr verwendet.

Alle Logos auf einen Blick

Download
Das Negativ-Logo in Dunkelblau wird von allen Logos auf weißem Hintergrund bevorzugt. Es ist zeitgemäß und lässt dir mehr Designfreiheiten als das Original.
Download
Das Original-Logo kommt nur selten zum Einsatz (bspw. bei Visitenkarten, Briefpapier o.Ä.), wird aber natürlich trotzdem gerne gesehen. Primär solltest du aber das Negativ-Logo benutzen.
Download
Das Negativ-Logo in Weiß wird ausschließlich auf dunklem Hintergrund verwendet.

Weißraum

Das Negativ-Logo in Dunkelblau wird von allen Logos auf weißem Hintergrund bevorzugt. Es ist zeitgemäß und lässt dir mehr Designfreiheiten als das Original.

Gib dem Logo Raum zum Atmen

Immer den Mindestabstand einhalten! Gemessen wie dieser an dem b wie in „boost“. Nur mit genug freiem Platz kann das Logo seinen maximalen visuellen Effekt erreichen.

Mehr geht nicht

Um die Lesbarkeit zu garantieren, hat unser Logo eine Mindestgröße, die nicht unterschritten werden darf.
Druck 5mm; Web 125px
Zu wenig Platz? Dann nimm nur das Symbol, um unsere Marke darzustellen

No-Go's:

Logo-Orientierung verändern
Effekte wie Schatten, Embossing etc.
Logofarben ändern
Logo auf unruhigem Hintergrund
Logo auf dunklem Hintergrund
Logo auf grellen Farben
Logo selbst nachbauen (mit anderer Schrift etc.)
Unproportional verzerren
Zu wenig Platz um das Logo herum

Bildsprache

Videoboost ist eine innovative Video-Lösung, die sich durch ihre klare und professionelle Gestaltung auszeichnet. Hier werden häufig Moderne Bilder verwendet, um fesselnde und elegante Farben zu schaffen. Die Gestaltung der Kommunikationsmittel ist klar und professionell, mit nicht mehr als ein paar verschiedenen Elementen. Am häufigsten werden technische Bilder für die Designs verwendet und dies wirkt authentisch und überzeugend.
In dieser Sammlung gibt es einige Beispiele für unsere Bildsprache
Zur Bildsprache

Das Negativ-Logo

Wenn es unvermeidbar ist, das Logo auf eine Farbe (wir bevorzugen das videoboost-Dunkelblau) oder ein Foto zu setzen, nutze das Negativ-Logo:
Diese Version des Logos sollte nicht auf zu hellen oder zu überladen/unruhigen Hintergründen platziert zu werden.

Farben

Primary

Dark Blue
#263654
Light Blue
#1B96F4
Green
#3ED098

Secondary

White
#ffffff
Light Grey
#C8C8C8
Body Grey
#585858

Feedback

Success
#3ED098
Warning
#F0B428
Error
#F03C3C

Farbverlauf

Background
Darkblue + Lightblue

Typografie Montserrat

Heading 1

H1 / 3.5 EM / 1.25 LH - Nur im Header verwenden

Heading 2

H2 / 2.6 EM / 1.25 LH - Für neue Section

Heading 3

H3 / 1.8 EM / 1.25 LH - Zwischenüberschrift für Absätze.

Heading 4

H4 - 1.5 EM / 1.25 LH - Unterüberschrift für H1. Zwischenüberschrift
Heading 5
Heading 6

Rich Text - 1.4 EM / 1.6 LH / 22px

Ich bin ein größerer Text und werde verwendet um einzelne Sätze oder Zitate hervorzuheben.

Small Text

Ich bin nur ein kleiner Text. Diese Formatierungen wird für Bildunterschriften oder Datenschutzrichtlinien verwendet.

Body Text

Das ist ein gewöhnlicher Fließtext in der Größe 16px. Überall wo lange Texte kommen wird diese formatierung verwendet.

Buttons

Primary Button

Der Grüne Button ist der wo am meisten zum Einsatz kommt, dieser wird ausschließlich nur für CTAs verwendet. 

Secondary Button

Der Blaue Button wird für Textlinks und sonstige Buttons anderer Art verwendet. Wenn zwei Buttons nebeneinander gebraucht werden nimmt man einen Outline Button.

Icon Styles

Circle Icons

Die Circle Icons werden dann verwendet wenn das Icon anstelle eines Bildes gesetzt wird. Beispielsweise in Contentkarten oder bei Aufzählung mit mehr als 2 Sätzen.

Circle Icons dunkler Hintergrund

Normale Icons

Bei weniger Text werden die Icons ohne den Kreis verwendet. Auf hellen Hintergrund werden icons in der Farbe "Darkblue" verwendet. Um mehr Kontrast in das Design zu bringen kann auch auf die Farbe "Light Blue" zurück gegriffen werden. Die Farbe "Light Blue" wird dann verwendet wenn das Icon Kontrast in das Design bringen soll.

Social Media Icons

Diese Social Media Icons werden auf hellen Hintergrund in "Darkblue" verwendet. Um mehr Kontrast in das Design zu bringen kan auch au die Farbe "Light Blue" zurück gegriffen werden. Auf dunklen Hintergrund werden die Icons in White oder Light Blue verwendet.

Content Cards - Website

Image Content Card

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua dolore magna ut labore et dolore magna aliquyam erat. 
Primary CTA Button

Normal Content Card

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Ich bin ein Text Link

Icon Content Card

Damit das Deesign ein bisschen mehr platz bekommt und nicht alles in Kasten fest sitzt, kann auch diese Variante der Content Karten verwendet werden.

Borders für die Content Cards

Die Borders sind immer 1px groß in der Farbe #c8c8c8
Der Radius beträgt in jedem Fall 8px
Ausnahme bei Content Cards mit Schlagschatten. Da bekommt der Border keine Farbe.

Normal Content Card

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.
Ich bin ein Text Link

Image Content Card vertical

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua dolore magna. 
Primary CTA Button

Schatten

Karten mit grauen Schatten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Karten mit blauen Schatten

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

Pricingbundles

Imagefilm

Bewegen Sie Ihre Zielgruppe mit eindrucksvollen Videos, die Ihren Werten und Visionen ein Statement setzen.
Inhalte des Bundles
Individuelle Hintergründe
Professionelles Voice Over
Illustration von bis zu 6 Charakteren
2 Korrekturschleifen
120 Sekunden
1 Drehtag (8 Std.)
Aufnahmeleitung, Kamera Operator & Kamera Assistenz
inkl. 2 Korrekturschleifen
Preis anfragen

Eventfilm

Dokumentieren Sie Messen oder Veranstaltungen & nutzen Sie diese Videos für eine mitreißende Kommunikation.
Inhalte des Bundles
Individuelle Hintergründe
Professionelles Voice Over
Illustration von bis zu 6 Charakteren
2 Korrekturschleifen
90 Sekunden
Professionelle Technik
Aufnahmeleitung, Kamera Operator & Kamera Assistenz
inkl. 2 Korrekturschleifen
Preis anfragen

Recruiting Video

Verschwinden Sie nicht in den Jobportalen! Überzeugen Sie qualifizierte Bewerber, dass Ihr Unternehmen die Top-Wahl ist.
Inhalte des Bundles
Individuelle Hintergründe
Professionelles Voice Over
Illustration von bis zu 6 Charakteren
2 Korrekturschleifen
120 Sekunden
1 Drehtag (8 Std.)
Aufnahmeleitung, Kamera Operator & Kamera Assistenz
inkl. 2 Korrekturschleifen
Preis anfragen

Forms

Normal Label
What's your Name? 
Focused Label
My name is Jeff
Message Label
Tell us more...
Error Message
E-Mail Adrese existiert nicht
Success Message
Thank you!

Example Form

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
Vorname
Nachname
E-Mail Adresse
Telefonnummer
Nachricht
Primary CTA Button

Example Form

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
Vorname
Nachname
E-Mail Adresse
Telefonnummer
Nachricht
Primary CTA Button

Searchbar

Normal Searchbar
Suche
Focused Searchbar
|
Searchbar dunkler Hintergrund
Suche
Focused Searchbar dunkler Hintergrund
|

Abstände

Abstand zwischen Sections

Section 1

100 px Space zwischen den Sections

Section 2

Abstand zwischen Modulen innerhalb einer Section

Modul 1

50 px Space zwischen den Modulen

Modul 2

Abstand zwischen Divs innerhalb des Moduls

DIV

25
px

DIV

25px

DIV

25
px

DIV

25
px

DIV

25
px

DIV

crossmenu