Digital Basics

Dieses Kapitel zeigt wie grundlegende Markenelemente in der digitalen Welt angewendet werden sollen, um deviceübergreifend eine konsistente Corporate User Experience zu schaffen und die Marke Baloise digital zu stärken. Dabei müssen Funktionen, Informationen und Inhalte nach ähnlichen Patterns und denselben Prinzipien auf allen Devices organisiert werden.

Die Baloise verfolgt in der digitalen Welt das Prinzip des Flat-Design. Es wird auf eine realistische Darstellung via Texturen, Verzierungen und Schatten im Zuge von Übersichtlichkeit und Einfachheit verzichtet. Verschiedene Ebenenhierachien werden dabei über die Kombination von Farbe, Kontrast und Helligkeit verdeutlicht. Der User wird so zielgerichtet zu relevanten Inhalten geführt.

Dieses Kapitel versteht sich als „Living Document“ und basiert auf dem jetzigen Stand der Corporate Website.

Grid

Das Rastersystem der Baloise basiert auf einem „fixed-column-grid“, also ein Raster bei dem die definierte Spaltenbreite (58px) über alle Viewports hinweg gleich bleibt. Je kleiner der Viewport, desto weniger Spalten beinhaltet das Grid schlussendlich. Für Desktop-Auflösungen ist das Grid 12-spaltig. Das Tablet-Grid ist 8-spaltig. Der Steg ist in diesen Größen 20px gross. Mobil stehen 4 Spalten zum Layouten zur Verfügung. Zusätzlich verschmälert sich der Steg auf Mobile auf 16px.

Logoeinsatz

Anders als bei den Printmedien dürfen im digitalen Raum Wort- und Bildmarke getrennt werden, wenn es durch bestimmte Formate erforderlich wird.

Es muss sichergestellt sein, dass der Benutzer beim Öffnen einer Anwendung den Absender sieht (Baloise). Deshalb sollte das Logo, wenn irgend möglich, zu-
mindest im Toplevel sichtbar sein. In Apps auf dem Splashscreen sollte das Logo auf der ersten Seite erscheinen. In Small Devices darf das Branding auch im Footer platziert werden (Ausnahmen sind bei platzkritischen Tools möglich).

Baloise Linie

Als markencharakteristisches Element sollte die Baloise Linie möglichst auch im digitalen Raum sichtbar platziert werden.

Bei Kleindevices oder platzkritischen Applikationen (z. B. Rechnertools) darf darauf medienspezifisch verzichtet werden. So ist sichergestellt, dass bei einer Skalierung der Website das Verhältnis der Blauflächen erhalten bleibt. Sie soll auf allen digitalen Medien prominent und mindestens im Initialzustand sichtbar sein.

Im Gegensatz zur allgemeingültigen Baloise Linien-Konstruktion wird mit CSS (Cascading style sheets) nicht nach einem fixierten, sondern nach einem prozentualen Verhältnis aufgebaut.

Farben

Primärfarben

Die primären Farbakzente der Baloise bilden auch im digitalen Raum die beiden Blautöne (Dunkelblau: #003399, Hellblau: #008AC9). Zusammen mit grosszügig eingesetztem Weissraum bilden sie das farblich-visuelle Grundgerüst. Das dunkle Blau wird etwas zurückgenommener eingesetzt und dient zur Akzenturierung.

Anstelle eines tiefen Schwarzes wird als Textfarbe vorrangig ein dunkles Grau (#444444) verwendet, wodurch der etwas abgeschwächte Kontrast eine angenehmere Lesbarkeit an Bildschirmen gewährleistet.

Sekundärfarben

Sekundärfarben werden zur kontext-bezogenen Akzentuierung genutzt. Für Interaktionselemente, unter anderem Buttons und Textlinks wird Orange verwendet. Die Farbe wirkt klickaffin und fordert somit stark zu einer Interaktion auf.

Für den flächigen Einsatz dieser Interaktionselemente, wie Buttons wird #FF9900 verwendet. Für den Einsatz von Textlinks hingegen sollte aus Gründen besserer Kontrastverhältnisse, gerade auf nicht weissen Hintergründen, der Farbton #FF8304 verwendet werden.

Die rote #FF3366 und grüne #2DB200 Farbauszeichnung finden vor allem in Formularen oder Quizkomponenten Anwendung und sollten ebenfalls nur kontext-bezogen verwendet werden.

Flächenfarben

Die digitale Baloise verfügt über ein breites Spektrum von Farbabstufungen für eine flächige Nutzung. Die verschiedenen Farbtöne dienen dabei zur Abgrenzungen einzelner Sinnbereiche und bzw. oder zur Hinterlegung spezieller Funktionen oder Module.

Eine inflationäre Nutzung der Grautöne sollte vermieden werden. Die Nutzung der Blauabstufungen ist zu bevorzugen.

Der Farbcode der BackgroundColor ist #E5F3F9.

Typografie

In digitalen Medien wird die Hausschrift Meta Pro über einen Webfont integriert. Der Text wird linksbündig in einem Flattersatz gesetzt. Eventuelle Abweichungen bei speziellen Modulen sind erlaubt, aber abzuwägen.

In nativen Applikationen empfehlen wir den Einsatz der von den Systemen vorgegebenen Schriften (San Francisco ab iOS 9, Roboto bei Android). Für Applikationen wie z. B. in Kampagnen sollte die Corporate-Schrift (Meta) verwendet werden.

Schriftschnitte

In digitalen Medien wird die Hausschrift Meta Pro über einen Webfont integriert. Derzeit wird Text in zwei Schriftschnitten dargestellt:

  • Der Bold-Schnitt dient zur grafischen Hervorhebung von Headlines und wichtiger Textpassagen im Fließtext, Teasern oder Aufzählungen.
  • Für Fließtext, Teasertext, etc. ist der Normal-Schnitt zu verwenden.

Der Bold-Schnitt kann zusätzlich in Versalien, also Großbuchstaben, als Label- und Kategorie-Auszeichnung verwendet werden. Zu beachten ist, dass die Schrift dafür über das Letter-Spacing etwas gesperrt werden muss.

Weitere Schnitten werden bis dato nicht verwendet und sollten nur eingebunden werden, wenn unbedingt notwendig.

Mediävalziffern

Die Benutzung von Mediävalziffern ist nicht vorgesehen. Stattdessen sollten Versalziffern verwendet werden. 

Interaktionselemente

Buttons

Buttons dienen in der gesamten digitalen Welt der Baloise zur Interaktionsauforderung der User. Für die Primäraktion muss der orange Primärbutton verwendet werden. Gibt es, je nach Modul, ein oder mehrere Parallel-Aktionen sollte eine Kombination mit sekundären Buttons gewählt werden, um die Führung der Benutzer gewährleisten zu können. Die Mouseover-Auszeichnung aller Buttons sind gleich.

Textlinks

Textlinks sind die alternative, etwas zurückgenommene Aufforderungs-Auszeichnung. Sie finden ihre Anwendung hauptsächlich bei Teasern oder Linklisten. Der sekundäre Textlink sollte nur in ebenenbasierten Kontexten verwendet werden, z.B. für die Zurückfunktion bei Formularen, oder das Vor- bzw. Rückwärtsblättern bei News-Modulen. Die Textlinks der Flyout-Navigation werden im Zuge der Übersichtlichkeit in Blau dargestellt.