Digital Framework
Mit den Elementen und Prinzipen des Digital Framework gewährleisten wir einen konsistenten und funktional optimalen Auftritt der Suva auf allen digitalen Devices. Künftig werden Websites wie suva.ch, Microsites und das Markenportal nach diesen neuen Richtlinien aufgebaut.
Die einzelnen Komponenten des Frameworks können der UX-Box entnommen werden. Die Zugangsdaten erhalten Sie bei den aufgeführten Ansprechpartnern.
Layout
Logo
Das Logo bildet den Kern unseres Markenauftritts und steht auch in digitalen Anwendungen an erster und oberster Stelle. Allgemeine Informationen zum Logo und dessen Einsatz finden Sie im Kapitel Basiselemente.
Logogrösse
Die Logogrösse bleibt immer gleich, vom kleinsten bis zum grössten Screen:
Breite = 100px
Höhe = 25px
Schutzzone
Die Schutzzone ist der minimale Freiraum, der das Logo umgeben muss. Sie darf weder von typografischen noch von grafischen Elementen berührt werden. Die Schutzzone beträgt nach allen Seiten eine Höhe des Buchstabens s.
Logoposition
In digitalen Medien wird das Logo grundsätzlich oben links platziert.
Logohintergründe
Auf unserer Homepage steht das Logo auf einem ruhigen fotografischen Hintergrund. Auf einem dunklen Headerbild verwenden wir das weisse Logo, bei hellen Hintergründen setzen wir das graue Logo ein. In jedem Fall muss ein möglichst hoher Kontrast zwischen Logo und Bild gewährleistet sein.
Farben
Für den Auftritt in den digitalen Medien sind die Hex-Farbwerte relevant. Allgemeine Informationen zu unseren Farben finden Sie im Kapitel Basiselemente.
Farben
Breakpoints
Ein System von Raster, Spalten und reaktiven Breakpoints stellt eine optimale Wiedergabe des Layouts auf allen Endgeräten sicher. Für Suva verwenden wir hauptsächlich Breakpoints basierend auf vier Standard Screengrössen:
- 1440px = für grosse Screens
- 1024px = für Desktops und Tablets im Querformat
- 768px = für Tablets im Hochformat oder grosse mobile Geräte
- 320px = für kleine Bildschirme wie mobile Geräte
Grid und Spalten
Spalten
Die Breite von Spalten und Stegen ist variabel und ändert sich je nach Anzahl Spalten und Bildschirmgrösse.
- 12 Spalten, 55px Spaltenbreite, 24px Gutter, 50px Offset
- 12 Spalten, 55px Spaltenbreite, 24px Gutter, 50px Offset
- 8 Spalten, 49px Spaltenbreite, 22px Gutter, 40px Offset
- 6 Spalten, 35px Spaltenbreite, 14px Gutter, 20px Offset
Pixeldichte
Wir stellen sicher, dass alle Bilder für hochaufgelöste Displays optimiert sind: Es gilt die Faustregel, das Bilder doppelt so gross wie das angezeigte Bild erstellt werden. High-Definition-Displays bestehen sogar aus bis zu viermal höherer Pixeldichte als Standarddisplays.
Typografische Hierarchien nach Device
Die Helvetica Neue wird in den drei Schriftschnitten Roman, Medium und Bold verwendet. Durch einen konsequenten und konsistenten Einsatz der typografischen Spezifikationen, gewährleisten wir in den digitalen Medien eine klare typografische Hierarchie auf bis zu sieben Ebenen. Wir unterscheiden zwischen Desktop, Tablet und Mobile Screens (Breakpoints):
Navigation
Die Navigation ist das Inhaltsverzeichnis einer Website oder einer App. Sie bietet neben der Suche eine weitere Möglichkeit zum Einstieg in die Website und führt den User intuitiv an sein Suchziel. Die Navigation platzieren wir in der Regel oben in horizontaler Anordnung.
Navigationsebenen und -punkte
Die Navigation umfasst maximal drei Ebenen. Idealerweise enthalten die ersten zwei Ebenen maximal fünf Navigationspunkte, während die dritte Ebene mehr Punkte zulässt. Ein Navigationspunkt umfasst im Optimalfall nicht mehr als drei Worte.
Icons
Icons können zur Kennzeichnung von Funktionen oder zur besseren Verständlichkeit von Begriffen eingesetzt werden. Sie sorgen für mehr Orientierung, sind zugänglich und für Mobile-Anwendungen sehr platzsparend.
Icons
Bei Funktionsicons achten wir darauf, dass die Symbole möglichst selbsterklärend und vom Benutzer bereits gelernt sind, z.B. die Lupe für Suche oder der «Hamburger» für das Menü. Erklärende Icons hingegen stehen immer bei einem Begriff und verstärken dessen Aussage.
Für digitale Medien verwenden wir zwei Arten von Grundrastern:
- 24px x 24px für Funktions-Icons, Linienstärke 2px
- 48px x 48px für Quicklinks und andere Auszeichnungen, Linienstärke 2px
Verhalten
Die Navigationsleiste, blendet beim Scrollen nach unten aus. Sie erscheint erst wieder, wenn der Benutzer nach oben scrollt.
Interaktion
Linkverhalten
Für Call-to-Actions unterscheiden wir 4 Arten von Links:
Anker bzw. Tags, Buttons, freistehende Links und integrierte Textlinks. Die unterschiedlichen Verhaltensweisen können der UX-Box entnommen werden.
Mikroanimationen
Mithilfe von Mikroanimationen, d.h. kleinsten eingebetteten Bewegungen, leiten wir gezielt die Aufmerksamkeit des Betrachters. Wir erleichtern ihm die Navigation und fördern die Interaktion. Dabei beachten wir, dass solche Animationen ausschliesslich dort eingesetzt werden, wo ein Call-to-Action vorliegt.
