SuisseID CI/CD-Manual

Transkript

1 SuisseID CI/CD-Manual Stand

2 Inhaltsverzeichnis Vorwort 1 Wording 2 Logo 3 Logo-Anwendung 6 Farben 7 Bildelemente 8 Typografie 9 Seitenaufbau 10 Allgemeine Hinweise 12

3 1 Vorwort Die SuisseID ist vom Staatssekretariat für Wirtschaft SECO initiiert und wird durch Privatanbieter umgesetzt und vertrieben. Diverse Firmen und Behörden bieten Dienstleistungen oder Produkte an, die mit der SuisseID verwendet werden können oder auf die SuisseID bauen. Um eine einheitliche Markenwahrnehmung zu gewährleisten ist es wichtig, dass sich alle an die gleichen Designrichtlinien halten. Gegen aussen soll die SuisseID als einheitlicher Standard wahrgenommen werden, unabhängig vom jeweiligen Anbieter. Die Einhaltung dieses CI/CD-Manuals ist integrierter Bestandteil des Lizenzvertrages. Das Corporate-Design der SuisseID ist schlicht, klar und freundlich. Die SuisseID steht für Werte wie Sicherheit, Zuverlässigkeit, Einfachheit und Effizienz. Auch wenn auf den expliziten Einsatz des Schweizerkreuzes verzichtet wurde, soll die «Swissness» der Marke gezeigt werden. Wird die Marke «SuisseID» verwendet, insbesondere beim schriftlichen Gebrauch, so ist am Ende des Textes (auf der letzten Seite) folgendes zu vermerken: «SuisseID» ist eine eingetragene Marke des Staatssekretariat für Wirtschaft SECO (CH-Marke Nr )

4 2 Wording Das Produkt ist weiblich: Die SuisseID Schreibweise Richtig: SuisseID SuisseIDs Falsch: SuisseId, suisseid, Suisseid, Suisse ID, Suisse-ID,... SuisseIDS, SuisseID 's «SuisseID» schreibt sich mit dem ersten und den letzten zwei Buchstaben in Grossschrift, die restlichen Buchstaben werden klein geschrieben. «SuisseID» wird immer zusammen geschrieben. Wortbestandteile dürfen nicht getrennt werden, weder durch einen Leerschlag noch durch einen Bindestrich. «SuisseID» wird entweder als Ganzes normal oder fett geschrieben. Es ist nicht zulässig, einzelne Wortbestandteile fett hervorzuheben. «SuisseID» wird niemals kursiv geschrieben, ausser der ganze Textabschnitt, der das Wort «SuisseID» enthält, ist ebenfalls kursiv. Die Mehrzahl lautet «die SuisseIDs» wobei das Pluralmorph «s» klein geschrieben und nicht apostrophiert wird. URL Die URL wird wie folgt geschrieben: Attribut Richtig: SuisseID-Anmeldung SuisseID Log-in SuisseID-Login Mit SuisseID einloggen Falsch: SuisseID-Log-in SuisseID Login Wird SuisseID als Attribut verwendet, so ist, wie in der deutschen Orthographie üblich, ein Bindestrich zu verwenden: z.b. «SuisseID-Kartenanbieter», «SuisseID-Anmeldung». Log-in Wird es als Substantiv gebraucht, so schreibt man «Log-in». Die zusammen geschriebene Variante «Login» kann alternativ verwerdet werden. Wird es als Verb gebraucht, so schreibt man «einloggen». «Log-in» wird als ursprünglich englischer Begriff, wie in der englischen Orthographie üblich, ohne Bindestrich, das eingedeutschte «Login», mit Bindestrich angehängt.

5 3 Logo SaveArea Das Logo ist von einer Schutzzone umgeben, die links, rechts und oben einen Abstand von 25% der Logo-Höhe hat und unten einen Abstand in der Grösse der kleinen Buchstabenhöhe hat (Referenzbuchstabe: s). Diese Schutzzone darf von keinen anderen Elementen verletzt werden. Innerhalb dieser Schutzzone dürfen auch keine anderen Elemente platziert werden. Grösse Die Grösse des Logos hat jeweils angemessen und verhältnismässig zu sein und sollte nicht kleiner sein als die eines Co- Logos. Sample Logo Positionierung Das Logo sollte oben rechts stehen. Wird das Logo zusammen mit einem Partnerlogo verwendet, so sind die zwei Logos horizontal anzuordnen und das SuisseID-Logo sollte rechts stehen. Die Höhe des Logos sollte dabei mindestens der des Co-Logos entsprechen. Bei einer vertikalen Anordnung sollte das SuisseID-Logo oben stehen und die Breite mindestens der des Co-Logos entsprechen. Verwendung Webseite Für Webseiten ist eine Platzierung oben links im Header nur dann zulässig, wenn die Seiten keinem Co-Branding unterliegen und sich der Inhalt ausschliesslich um die SuisseID dreht. In diesem Header darf kein anderes Logo sein. Ansonsten ist das Logo im Inhaltsbereich der Webseite zu verwenden.

6 4 Logo Logo-Hintergrund Der Hintergrund darf keinen Farbwert enthalten und hat eine Helligkeit von mehr als 75%. Bevorzugt wird weiss verwendet. Wird das Logo auf einem Grund verwendet, der von den zulässigen Hintergrundfarben abweicht, so ist das Logo auf weissem Grund zu verwenden. Gleiches gilt für die Verwendung auf einem strukturiertem Grund oder auf einem Bild. Die Kanten müssen eine Rundung, die der des Logo-Chips entspricht, aufweisen. Idealerweise wird die zur Verfügung gestellte Logovorlage verwendet. schwarz/weiss Für Ausnahmefälle (z.b. den Druck in schwarz/weiss) ist das Logo einheitlich schwarz für helle Hintergründe und einheitlich weiss für dunkle Hintergründe zu verwenden.

7 5 Logo Logo-Veränderungen Das Markenzeichen darf nicht verfremdet werden. Chip und Schriftzug dürfen nicht getrennt voneinander dargestellt werden. Einzige Ausnahme bilden die Log-In Buttons (nächste Seite) wo die alleinige Verwendung des Chips erlaubt ist. In digitalen Medien ist es ausserdem nicht zulässig, das Logo zu animieren. Die Veränderung des Logos in irgend einer Weise ist unzulässig. Es ist nicht erlaubt, Logoelemente für eigene Kreationen zu verwenden oder Teile des Logos in einen anderen Kontext zu stellen. Das Logo darf um keinerlei Zusätze (z.b. Ready, Approved oder Certified) ergänzt werden.

8 6 Logo-Anwendung Auf einer Webseite Für die Authentifizierung (SuisseID Log-in) oder die elektronische Signatur einer Datei mittels SuisseID (SuisseID Sign) auf einem Webservice oder in einer Applikation sind bevorzugt die offiziellen SuisseID-Buttons zu verwenden. Die Verwendung des Begriffs «sign-in» zu Anmeldezwecken ist untersagt, damit der Begriff «sign» klar mit der elektronische Signatur assoziiert wird. Eine Applikation oder ein Webservice darf nur dann die SuisseID Log-in und Sign Buttons verwenden oder das SuisseID- Logo zur Kennzeichnung nutzen, wenn Sie keine zusätzlichen Anforderungen an den Zertifikatsträger stellt bzw. die Liste der akzeptierten Zertifikatsanbieter nicht einschränkt. Auf einer Chipkarte Für die Kennzeichnung einer Chip-Karte sollte das Logo in einer Grösse von 2.5cm x 1.25cm (Grösse der SaveArea) integriert werden. Das Logo sollte rechts oben stehen und einen Abstand von 0.25cm zum Rand einhalten. 0.25cm 1.25cm 2.5cm 0.25cm

9 7 Farben Die Primärfarbe ist Weiss. Die drei Rottöne werden als Akzentfarben verwendet. Pantone CMYK RGB HEX rot / 94 / 100 / / 37 / 24 E42518 rot / 100 / 96 / / 7 / 27 B3071B rot / 90 / 100 / / 37 / 18 8B2512 Weitere Farben sind: Pantone CMYK RGB HEX grau 1 * * 230 / 237 / 237 E6EDED grau 2 * * 206 / 212 / 212 CED4D4 grau 3 * * 182 / 187 / 187 B6BBBB grau 4 * * 141 / 145 / 145 8D9191 grau 5 * * 103 / 106 / A6A * Für Print können die Pantone Cool Grey 1-11 und die Pendants in CMYK verwendet werden.

10 8 Bildelemente Bildsprache Die SuisseID-Bildsprache entspricht Bildern, die eine seitliche Bewegungsunschärfe (motion blur) ausweisen. Sie kommunizieren freundliche, positive Emotionen. Bilder dürfen nur zugeschnitten, nicht jedoch gedehnt oder verzerrt werden, um die passende Bildgrösse zu erreichen. Motive Bilder mit folgenden Motiven eignen sich besonders gut: offene, weite Landschaften am besten als Panorama. Der Horizont sollte im unteren drittel des Bildes sein. Über dem Horizont steht ein heller Himmel in freundlichen Farben. Im Vordergrund kann eine Landschaft mit grünen Wiesen und Feldern oder auch Wasser sein. Es ist auch möglich Sonnenuntergänge und Sonnenaufgänge zu verwenden, solange sie eine gute Grundstimmung vermitteln und nicht düster wirken. Die Motive müssen einen Bezug zur Schweiz haben oder Assoziationen mit der Schweiz wecken. Nicht geeignet sind «fremde» Motive mit Südsee-, Canyon- oder Palmen-Sujets. Ebenso sollten möglichst keine Gebäude auf dem Bild sein. Falls doch, dann nur als kleiner, unwichtiger Bildbestandteil. Es sollte nichts Geschlossenes gewählt werden, also auch keine Innenräume. Nahaufnahmen sind zu vermeiden. Visualisierungen Weitere Bildelemente können zur Visualisierung von Zusammenhängen oder zur Produktinformation verwendet werden. Bildausschnitte müssen dabei sinnvoll gewählt werden. Zu kleinteilige Bildinhalte sind zu vermeiden. Auf überflüssige «Füllbilder» (ausser den oben definierten Motiven) ist zu verzichten.

11 9 Typografie Schrift Für Printmedien wird Frutiger verwendet. Für elektronische Medien wird Arial als Systemschrift eingesetzt. Arial ist eine bildschirmoptimierte Schrift und steht auf allen Rechnern als Systemschrift zur Verfügung. Somit wird erreicht, dass die Darstellung in digitalen Medien bei allen Benutzern möglichst gleich ist. Web Für Web gelten die nachfolgende Angaben. Es sind bevorzugt relative Werte (em) zu verwenden. Wichtiger als Pixelgenauigkeit ist, dass die Verhältnisse sowie das Gesamtbild stimmen. Die Werte müssen diesen Angaben möglichst nahe kommen, da sie auf Barrierefreiheit geprüft sind. Element Farbe Grösse Stil Zeilenabstand Haupttitel, weiss 1.25em fett 1.25em (20px) Titel Teaserbox-gross: (20px) (grundsätzlich einzeilig) Abstract, Navigationstitel Head: Zwischentitel, Titel Teaserbox-klein: Fliesstext, Text Teaserbox: grau 5 weiss grau 5 weiss grau 5 weiss 1.25em (20px) 0.94em (15px) 0.75em (12px) regular 1.25em (20px) regular regular NavigationLinks: schwarz 0.75em regular (12px) Navigation Head Hover: rot (Hintergrund) Navigation Hover: rot bold 0.94em (15px) (grundsätzlich einzeilig) 0.94em (15px) Print Die Printgestaltung orientiert sich an der Webgestaltung.

12 10 Seitenaufbau Einteilung Eine Seite (Web oder Print) wird ungefähr horizontal gedrittelt. Der Inhalt kann dabei über die rechten zwei Drittel verteilt werden (1 oder 2 Spalten). Das linke Drittel ist für Navigationselemente (Web), Teaserboxen (Web und Print), Textmarker (Print, bei umfangreicheren Texten) oder Abschnitts-Abstracts (Print, bei umfangreicheren Texten). Bei einem doppelseitigen Layout kann die Einteilung für die gegenüberliegende Seite gespiegelt werden (Inhalt links, Elemente rechts). Vertikal soll eine Seite (für alle Medien) folgende Elemente in dieser Reihenfolge aufweisen: Kopf/Header mit SuisseID-Logo Bildstreifen über die ganze Seitenbreite mit Haupttitel Inhalt Falls es nicht möglich ist, den Titel auf den Bildstreifen zu setzen, kann dieser darunter platziert werden. Wenn nötig, kann ein Footer, der durch eine Linie über die ganze Seitenbreite vom Inhalt abgesetzt ist, hinzugefügt werden.

13 11 Seitenaufbau Befüllung Die Befüllung von Spalten sollte immer in Leserichtung von links nach rechts stattfinden (linksbündig). Die linke Spalte sollte im Idealfall länger sein als die Spalte rechts daneben. Seitenelemente Teaserboxen Textmarker Abschnitts-Abstracts Tabellen Rundungen Für Teaserboxen darf einer der definierten Rottöne gewählt werden, wobei die oberste Box die dunkelste sein muss und für die aufeinanderfolgende Boxen unterschiedliche Rottöne zu verwenden sind. Textmarker (Beispiel rechts) erleichtern dem Benutzer das Auffinden von Textpassagen zu bestimmten Stichwörtern innerhalb eines Abschnitts mit Zwischentitel. Sie dürfen nicht anstelle eines Zwischentitels verwendet werden. Abschnitts-Abstracts fassen längere Textpassagen in möglichst einem Satz zusammen. Tabellen dürfen so viele Zeilen und Spalten haben wie benötigt werden. Die Grösse der Zellen darf sich dabei nach dem Inhalt richten. Nach Möglichkeit werden ähnlich grosse Zeilen oder Spalten auf eine einheitliche Grösse gebracht, um die Tabelle optisch zu beruhigen. Listen ohne Rahmen haben immer einen alternierenden Zellenhintergrund (Zebra). Rundungen können als Stilelement verwendet werden. Es ist darauf zu achten, nicht zu viele Rundungen einzusetzen. Teaserboxen weisen immer Rundungen auf, Bildstreifen niemals. Die Grösse der Rundung ist nach der Ästhetik der Gesamtwirkung zu wählen.

14 12 Allgemeine Hinweise Die Wiedergabe von Farben kann je nach Ausgabegerät variieren. Die Abbildungen sind nicht farbverbindlich und teilweise verkleinert bzw. vergrössert dargestellt. Verantwortlichkeit Inhalt: Markus Pfister, Betriebsökonom FH Kommunikation egovernment für KMU Eidgenössisches Volkswirtschaftsdepartement EVD Staatssekretariat für Wirtschaft SECO Ressort KMU-Politik Holzikofenweg Bern Tel Fax markus.pfister@seco.admin.ch Design & Konzept: Agedo GmbH in Zusammenarbeit mit: Brannen Usable Brands