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
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.
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.
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 BildspracheDas 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 überladenen/unruhigen Hintergründen platziert werden.
Farben
Primary
Secondary
Feedback
Farbverlauf
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 Formatierung 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
Primary CTA Button Primary CTA Button
Der grüne Button ist der, der am meisten zum Einsatz kommt. Dieser wird ausschließlich für CTAs verwendet.
Secondary Button
Secondary Button 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ählungen mit mehr als 2 Sätzen.
Circle Icons dunkler Hintergrund
Normale Icons
Bei weniger Text werden die Icons ohne den Kreis verwendet. Auf hellem Hintergrund werden Icons in der Farbe „Darkblue“ verwendet. 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 hellem Hintergrund in „Darkblue“ verwendet. Um mehr Kontrast in das Design zu bringen, kann auch auf die Farbe „Light Blue“ zurückgegriffen werden. Auf dunklem 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.
Primary CTA ButtonNormal 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 Design ein bisschen mehr Platz bekommt und nicht alles in Kästen 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
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.
- 120 Sekunden
- 1 Drehtag (8 Std.)
- Aufnahmeleitung, Kamera Operator & Kamera Assistenz
- inkl. Korrekturschleifen
Eventfilm
Dokumentieren Sie Messen oder Veranstaltungen & nutzen Sie diese Videos für eine mitreißende Kommunikation.
- 90 Sekunden
- Professionelle Technik
- Aufnahmeleitung, Kamera Operator & Kamera Assistenz
- inkl. Korrekturschleifen
Recruiting Video
Verschwinden Sie nicht in den Jobportalen! Überzeugen Sie qualifizierte Bewerber, dass Ihr Unternehmen die Top-Wahl ist.
- 120 Sekunden
- 1 Drehtag (8 Std.)
- Aufnahmeleitung, Kamera Operator & Kamera Assistenz
- inkl. Korrekturschleifen
Forms
Normal Label
Focused Label
Message Label
Error Message
E-Mail Adresse existiert nicht
Success Message
Example Form
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
Example Form
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
Searchbar
Normal Searchbar
Focused Searchbar
Searchbar dunkler Hintergrund
Focused Searchbar dunkler Hintergrund
Abstände
Abstand zwischen Sections
Abstand zwischen Modulen innerhalb einer Section
Abstand zwischen Divs innerhalb des Moduls