tSL Design Brand Guidelines

tSL Design Brand Guidelines

​

















Willkommen

bei den timeSensor LEGAL Brand Guidelines. Diese Richtlinien sind für alle in timeSensor LEGAL.

Wenn Sie Designer, Texter, Produzent oder eine Agentur sind, die unser Team unterstützt, sind diese Richtlinien stilistische Regeln für die Verwendung unseres Logos und eine von mehreren Ressourcen, die das Fundament unserer Marke bilden und sie definieren.

Sie finden hier unsere aktuelle Markenstimme und Persönlichkeit, Farben und Typografie sowie Links zu hilfreichen Ressourcen wie Logodateien und ausführlichen Informationen. So werden Sie in kürzester Zeit markenkonforme Inhalte online und in der realen Welt erstellen.

Stimme und Ton

Hier wird eingefügt, wie wir schriftlich kommunizieren.

Als Eckpfeiler unserer Identität ist das timeSensor LEGAL Logo ein Symbol für Vertrauen, Qualität und ein wichtiges Erkennungszeichen für unsere Kunden. Um unser Logo in einer Vielzahl von Medien originalgetreu wiederzugeben, gibt es einige einfache Richtlinien, die zu beachten sind, um jederzeit Klarheit und Konsistenz zu gewährleisten. 


Logo



Originalfarben



Schwarz (wird nur in Ausnahmefällen benutzt)



Weiss (wird nur in Ausnahmefällen benutzt)

Ausschlussbereiche

Die Ausschlusszone gewährleistet die Lesbarkeit und Wirkung des Logos, indem sie es von konkurrierenden visuellen Elementen wie Text, Grafiken und Bildmaterial isoliert. Das untenstehende Bild zeigt die korrekte Größe des Raums, der das Logo umgeben sollte. In diesem Bereich sollten keine begleitenden Texte oder Logos erscheinen.



Bitte das Logo nicht verzerren oder Effekte anwenden. 

Platzierung

Das Logo wird immer an einer Ecke der Arbeitsfläche gesetzt.

Es gibt keine maximale Größe für timeSensor-Logos. Achten Sie jedoch darauf, dass das Logo nicht zu klein ist.

Auf einem 300 x 250 Pixel großen Asset wäre das Logo bei 10% nur 30 Pixel breit.
Ersetzen Sie es durch ein Logo, das 90 Pixel breit ist, um die Lesbarkeit zu gewährleisten. 

Typographie

Die einzige Schrift, die für die Unternehmenskommunikation genutzt werden kann, ist die Myriad Pro.


Um einen einheitlichen Ton beizubehalten, üben wir uns in Zurückhaltung bei den verwendeten Schriftschnitten und -arten. Die Schriftart Myriad Pro Regular wird allen anderen Schriftarten vorgezogen, während die Schriftart Myriad Pro Bold für Überschriften oder wichtige Informationen verwendet wird. Die Schriftart Myriad Pro Italic Regular wird für kurze Daten verwendet und kommt in unserem Identitätssystem nur selten vor.

Verwendung von Schrift

Wir verwenden Schrift auf eine klare, ruhige und selbstbewusste Weise. Mit so wenigen Stilen wie nötig setzen wir den Text linksbündig, achten sorgfältig auf den "Flattersatz" und vermeiden immer "Waisenkinder" (Bezeichnung für eine Anfangszeile eines Absatzes am Kolumnen- oder Spaltenende.) und "Witwen" (die Ausgangszeile eines Absatzes ist am Kolumnen- oder Spaltenanfang).

Systemschriften

Es kann in bestimmten Situationen vorkommen, dass unsere Schriftarten nicht verfügbar sind (z.B. wenn Webfonts blockiert oder nicht verfügbar sind, digitale Newsletter usw.). In solchen Fällen kann die web-sichere Schriftart Open Sans in "Bold", "Regular" und "Italic" verwendet werden.



Verwendungstabelle

Die Verwendungstabelle zeigt eine Reihe von Einstellungen für die effektive und lesbare Gestaltung von Schrift. Dies sollte als Leitfaden betrachtet werden.

 Screen
Grösse
Zeilenhöhe
Kerning
Laufweite

00–15 px
140%
Metrics
+1%

15–20 px
140%
Metrics
+0%

20–30 px
125%
Metrics
+0%

30–45 px
115%
Metrics
-1%

45–70 px
110%
Metrics
-1.5%

70 px+
100%
Metrics
-4%

 PrintGrösseZeilenhöheKerningLaufweite

00–8 px125%Metrics+1%

8–15 px120%Metrics+0%

15–25 px115%Metrics+0%

25–40 px110%Metrics-1%

40–70 px105%Metrics-1.5%

70 px+100%Metrics-4%


Farbe

Unsere Farbpalette zeichnet sich durch eine lebendige Reihe von satten, seriösen Farben aus, die durch eine Reihe von anspruchsvollen Grau- und Neutraltönen unterstützt werden. 

Farbauswahl und Gestaltungssoftware

Print
Bei der Gestaltung für den Druck arbeiten wir mit CMYK-Werten in Software, die diese Werte unterstützt, wie Adobe Illustrator oder InDesign.

Screen
Bei der Gestaltung für den Bildschirm arbeiten wir mit RGB- oder HEX-Werten in einer Software, die diese Werte unterstützt, z. B. Figma, Adobe Illustrator, InDesign, Canva, Keynote oder jede andere verfügbare Motion-Software.

Anmerkung

Die gedruckten Farbwerte werden auf dem Bildschirm nicht korrekt angezeigt. Die Bildschirmfarben werden nicht genau gedruckt.
 
Farbwerte

CMYK
Cyan, Magenta, Gelb und Schwarz. Die vier Farben, die im Offset- und Digitaldruck verwendet werden.

RGB

Rot, Grün und Blau, die Komponentenfarben, die alle Bildschirmfarben erzeugen.


HEX

Eine hexadezimale Darstellung der Farben Rot, Grün und Blau des Bildschirms.

Bitte beachten: 
Verschiedene Faktoren können die Farbwiedergabe beeinflussen. Vor jedem Großdruck ist ein Test immer ratsam.

Primärfarben:
Primärfarben sind der destillierte Ausdruck der Marke timeSensor LEGAL. Sie heißen Kunden in unserer Welt willkommen

tSL Blau

HEX: #00B5F0

tSL Hellblau

HEX: #87CFEB

tSL Schwarz-Weiss Töne

A HEX: #FFFFFF
B HEX: #FCFCFC
C HEX: #F8F8F8
D HEX: #DDDDDD
E HEX: #AAAAAA
F HEX: #919191
G HEX: #575756
H HEX: #333333

tSL Dunkelblau

HEX: #003366

Akzentfarben:
Nebst dem timeSensor Blau, werden diese Farben um Akzente zu setzen benutzt.

tSL Weinrot

 HEX: #590007

tSL Gold

 HEX: #D3AF45

tSL Beige

HEX: #997300

Tertiäre Farben:
An Stellen, wo man grössere Datenmengen differenzieren soll kann man zu den Tertiären Farben greifen.


I HEX: #FFCCE5
J HEX: #FFFACC
K HEX: #FFE2CC
L HEX: #EBFFCC
M HEX: #EDD0FB
N HEX: #FBFFCC
O HEX: #D0FBF3
P HEX: #F3E3D8
Q HEX: #D6CCFF
R HEX: #FFD5CC

Bildwelten-Übersicht

timeSensor nutzt unterschiedliche Medien, um effektiv zu vermitteln. Die wichtigsten Formate sind Fotos, Illustrationen, Blockframes von der Software und Icons.

Illustration

Ilustrationen funktionieren um Komplexere Ideen rüberzubringen.



In diesem Figma Dokument finden Sie Assets um weitere Illustrationen zu kreieren.  

Blockframes

Blockframes sind Produktillustrationen, die die Fähigkeiten und Funktionen von timeSensor LEGAL veranschaulichen. Sie stellen komplexe Geschichten auf eine vereinfachte und informative Weise dar, die über unsere Kontaktpunkte hinweg vermittelt werden: in Produkt-Erlebnissen, Präsentationen, Videos und digitalen Anzeigen.

Produktabbildungen informieren und helfen Interessenten und Kunden, das volle Potenzial von timeSensor LEGAL zu verstehen.

Fidelity-Stufen verdeutlichen das tatsächliche Produkt, die Produktfunktion und den Arbeitsbereich des Agents, indem sie mithilfe von Storytelling erklären, wie die Funktionen arbeiten.

Hohe Fidelität
Bildschirmaufnahme von tSL. Muss gross gesetzt werden damit es lesbar ist.
Verwendung für: Webseiten, Demovideos, interaktive Demos, Produktführungen.



Niedrige Fidelität
Diese Blockframes enthalten keinen Text. Sie werden in erster Linie für die Navigationsschulung beim Onboarding verwendet, um das visuelle Erlebnis so zu gestalten, dass die Benutzer durch verschiedene Funktionen des Produkts geführt werden. Verwenden Sie sie für Touchpoints mit komplexer Lokalisierung, Onboarding in der produktinternen Erfahrung und einige Produktpräsentationsdecks.
Verwendung für: Onboarding, Erfahrungen mit dem Produkt, Präsentationen



Vereinfacht
Illustrative Repräsentation von der Software. 
Verwendung für: Erklärvideos, in einem grösseren Kontext



Photographie

Alle unsere Fotografien sollten so naturgetreu wie möglich wirken. Beachten Sie die folgenden Stilprinzipien:

Natürlich
Verwenden Sie natürliches Licht, keine harten Blitzlichter oder extremen Kontraste.

Ungezwungen
Wählen Sie unverstellte Aufnahmen aus und beschränken Sie inszenierte Aufnahmen, die gezwungen wirken.

Wiederkehrende Motive sind Büroräumlichkeiten, Bürogebäuden und Business Menschen die am Computer arbeiten.

Iconographie

Unsere Icons basieren auf die "Simple Small" Bibliothek die auf icons8.com zu finden ist. Findet man ein benötigtes Icon nicht, kann man es im folgenden Figma Dokument Zeichnen.

Sie werden etweder in der GUI benutzt, oder bei Präsentationen um Ideen besser rüberzubringen:



    • Related Articles

    • [123.x] Audit Automatische Fakturierung

      Inhalt Das Add-in B05 Automatische Rechnungserstellung bietet in timeSensor LEGAL 365 die Möglichkeit, zum Beispiel monatlich oder jährlich automatische Rechnungen zu generieren. Mit diesem Bericht können Sie prüfen, ob der erstellte Plan eingehalten ...

    • timeSensor Word Integration

      timeSensor Word Template 7.8 Das timeSensor Word Template enthält alles was Sie benötigen, um Word Dokumente zu automatisieren. Sie können damit bestehende .docx Dokumente so anpassen, dass diese sich automatisch mit Daten aus timeSensor LEGAL ...

    • [121.x] Auswertung Adressbeziehungen

      Inhalt Dieser Bericht zeigt die über eine auszuwählende Beziehung miteinander verbundenen Adressen. Grundlage der Auswertung sind somit die Adressverknüpfungen, welche im Stammblatt vorgenommen wurden. Auf der linken Seite des Berichts werden die ...

    • [107.x] Saldenliste Bilanzkonten

      Inhalt Der Bericht zeigt alle Aktiv- und Passivkonten mit den jeweiligen Salden per wählbarem Datum. Klicken Sie auf "Script ausführen", um den im Report enthaltenen Script zu starten. Installation Zur Installation des Berichts, müssen Sie in ...

    • [104.x] Verrechenbare, noch nicht fakturierte Leistungen

      Inhalt Der Bericht zeigt alle Leistungspositionen, welche bis dato noch nicht verrechnet wurden. Es werden nur die verrechenbaren Leistungen angezeigt. Klicken Sie auf "Script ausführen", um den im Report enthaltenen Script zu starten. Installation ...