Fast jedes Unternehmen hat ein Corporate-Design-Manual. Es regelt Logo, Farben, Schriften und Bildsprache für Briefpapier, Präsentationen und Website. Sobald sich etwas bewegt, bleiben aber viele Fragen offen: Wie schnell erscheint ein Text? Wie geht eine Szene in die nächste über? Wie sieht ein Layout im Hochformat aus? Wie lange muss eine Kennzahl stehen? Die Antworten darauf stehen in einem Motion-Styleguide.
Die Definition in einem Satz
Ein Motion-Styleguide ist die verbindliche Beschreibung, wie eine Marke in bewegten Medien aussieht und sich bewegt: mit Farbrollen, Typografie, Layouts für alle Seitenverhältnisse, Übergängen, Bewegungsprinzipien und Regeln für Lesbarkeit. Eine Kurzfassung steht im Glossar unter Motion-Styleguide.
Abgrenzung zu Corporate-Design-Manual und Videovorlage
Drei Begriffe werden oft durcheinandergeworfen:
| Corporate-Design-Manual | Motion-Styleguide | Videovorlage (Template) | |
|---|---|---|---|
| Zweck | Erscheinungsbild der Marke festlegen | Erscheinungsbild in Bewegung festlegen | einen bestimmten Film schneller bauen |
| Medium | Print, Website, Präsentation | Video, Animation, Social Clips | ein Schnitt- oder Animationsprogramm |
| Inhalt | Logo, Farben, Schriften, Bildsprache, Raster | Farbrollen, Typoskala, Layouts, Übergänge, Tempo, Regeln | feste Szenen mit Platzhaltern |
| Zeit und Bewegung | kommen meist nicht vor | stehen im Mittelpunkt | fest eingebaut, schwer zu ändern |
| Reichweite | alle Kanäle | alle Filme einer Marke | ein Filmtyp |
Das Manual legt fest, wie die Marke aussieht, der Motion-Styleguide, wie sie sich bewegt. Eine Vorlage ist ein einzelnes Werkzeug, das im besten Fall auf dem Motion-Styleguide beruht.
Die Bestandteile eines Motion-Styleguides
Ein vollständiger Motion-Styleguide besteht aus sieben Bausteinen. So ist auch der Motion-Styleguide in mint aufgebaut.
Farbwelt mit Rollen
Neben den Farbwerten braucht jede Farbe eine Rolle: Welche ist Hintergrund, welche trägt Text, welche hebt eine Kennzahl hervor? Ohne feste Rollen kann ein Film ganz in Markenfarben gehalten sein und trotzdem unruhig wirken.
Schriften und Typoskala
Dazu gehören Hausschrift, Schriftschnitte und eine feste Skala von der großen Aussage bis zur Bauchbinde. Im Video kommt die Lesezeit hinzu: Text muss lange genug stehen, um gelesen zu werden.
Formensprache und Bildstil
Ecken, Linien, Flächen, Icons und der Umgang mit Fotos. Sind Bilder freigestellt, gerahmt oder vollflächig? Wie werden Farbe und Licht behandelt?
Layouts für alle Seitenverhältnisse
Wiederkehrende Szenentypen wie Titel, Kennzahl, Liste, Vergleich, Prozess, Bild mit Text, Aussage, Bühne und Abschluss. Jeder Typ braucht eine eigene Fassung für 16:9, 9:16 und 1:1, denn ein Querformat lässt sich nicht einfach hochkant zuschneiden.
Übergänge und Bewegungsprinzipien
Wie Elemente erscheinen und verschwinden, mit welchem Tempo und welcher Beschleunigung, und wie Szenen ineinander übergehen. Daraus ergibt sich der Charakter: Eine Bank bewegt sich anders als ein Sportartikelhersteller.
Temperament, Kinetik und Tiefe
Das Grundtempo der Marke, von ruhig über ausgewogen bis dynamisch. Dazu kommen Kinetik, also Text, der auf den Takt der Musik erscheint, und räumliche Tiefe, etwa Flug-Übergänge in 2,5D.
Regeln für Lesbarkeit
Mindestkontraste, Mindestschriftgrößen, Ränder und Abstände. Mit diesen Regeln funktioniert ein Film, der auf dem großen Bildschirm gut aussieht, auch auf dem Smartphone.
Wie ein Motion-Styleguide entsteht
Klassisch entsteht ein Motion-Styleguide in einer Agentur. Designerinnen und Designer übersetzen das Corporate Design in Animationsprinzipien, bauen Beispielszenen und dokumentieren alles in einem PDF oder einer Vorlagensammlung. Das ist sorgfältig, aber aufwendig, und die Umsetzung hängt danach an den Menschen, die das Dokument kennen und die Vorlagen bedienen können.
In mint entsteht der Motion-Styleguide direkt aus deinem vorhandenen Material:
- Quellen angeben: die Website als URL, Bilder (auch SVG), ein Video, HTML oder ZIP, eine Präsentation (PPTX, PPT, Keynote, ODP oder PDF, bis 100 MB und 60 Folien) oder eine Kombination daraus.
- Schriften hochladen: eigene Hausschriften, damit jeder Film die richtige Typografie hat.
- Folien übernehmen: Folien einer Präsentation lassen sich als Layout-Vorlagen übernehmen.
- Styleguide entstehen lassen: In etwa 60 bis 90 Minuten entsteht der Styleguide mit allen Bausteinen.
- Nachbessern: Ein Element ändern oder ein neues Layout anlegen dauert etwa 10 Minuten, eine neue freie Szene etwa 5 Minuten.
Der Styleguide wird einmal angelegt. Danach entsteht jeder Film aus einem Briefing im gleichen Design. Gescheiterte Styleguide-Läufe werden nicht berechnet.
Tipp: Je klarer die Quelle, desto besser der Styleguide. Eine aktuelle Markenpräsentation mit Hausschrift ist meist eine bessere Quelle als eine Website mit vielen Altlasten. Mit dem Styleguide-Check siehst du vorab, welche Farben und Kontraste in einem Bild deiner Marke stecken.
Was ein Motion-Styleguide bringt
Für Unternehmen: Jedes Team produziert Filme, die nach derselben Marke aussehen, ob HR, Vertrieb oder interne Kommunikation. Brand muss nicht jeden Film von Grund auf kontrollieren, weil die Regeln im Styleguide stecken. Wie das im Alltag aussieht, zeigt der Ratgeber Corporate Design in Videos einhalten.
Für Agenturen: Jede Kundenmarke bekommt einen eigenen Styleguide. Varianten für Pitches und Kampagnen entstehen in hohem Tempo, und die Kreation bleibt bei der Agentur. Mehr dazu unter mint für Agenturen.
Für alle: Ein Briefing reicht, um einen Film in 16:9, 9:16 und 1:1 zu bekommen. Und weil jede Folie bearbeitbar bleibt, lässt sich jeder Film später anpassen.
Zusammen mit dem Brand Kit, in dem Logos, Stimmen, Musik, Schreibweisen und verbotene Begriffe liegen, bildet der Motion-Styleguide die Grundlage für mint motion design.
Vier häufige Missverständnisse
„Ein Motion-Styleguide ist eine Sammlung von Animationsvorlagen.“ Vorlagen können Teil davon sein, aber der Kern sind Regeln: Farbrollen, Typoskala, Bewegungsprinzipien, Lesbarkeit. Vorlagen ohne Regeln führen dazu, dass jede neue Szene wieder von vorn gestaltet wird.
„Mit einem Styleguide sehen alle Filme gleich aus.“ Sie sehen aus wie dieselbe Marke, nicht wie derselbe Film. Die Layouttypen von Titel bis Abschluss, Temperament, Kinetik und freie Szenen lassen genug Spielraum für einen Recruiting-Clip, eine Pflichtschulung und einen Produktfilm.
„Das lohnt sich nur für große Marken.“ Ein Motion-Styleguide lohnt sich, sobald mehr als ein Film im Jahr entsteht oder mehr als ein Team Filme produziert. Je öfter produziert wird, desto mehr zahlt sich die einmalige Arbeit aus.
„Wenn er einmal steht, ist er fertig.“ Marken entwickeln sich, neue Formate und Szenentypen kommen dazu. Ein guter Motion-Styleguide wird gepflegt: neue Layouts ergänzen, Details nachschärfen, Erfahrungen aus fertigen Filmen einarbeiten.
Checkliste: Ist dein Corporate Design bereit für Bewegung?
- Hausschriften liegen als Dateien vor, und die Lizenz deckt die Nutzung im Video ab.
- Die Farben haben klare Rollen für Hintergrund, Text und Hervorhebung.
- Das Logo gibt es als Vektordatei, etwa als SVG.
- Es gibt eine aktuelle Präsentation oder Website als Referenz.
- Der Bildstil ist beschrieben oder an Beispielen erkennbar.
- Brand weiß, welches Tempo zur Marke passt: ruhig, ausgewogen oder dynamisch.
Beispiele für fertige Styleguides findest du unter Motion-Design-Styleguides.