Kanton St.Gallen Design Guidelines Web-Auftritt des Kantons St.Gallen

Transkript

1 Design Guidelines Web-Auftritt des Kantons St.Gallen Version CQ5-Redesign Juli 2011

2 Inhalt 1. Geltung und Reichweite der Guidelines 2. Visual Design Basics 3. Style Guide Internet «sg.ch» 4. Style Guide Intranet/Extranet/Container

3 Geltung und Reichweite der Guidelines Geltung Das Erscheinungsbild ist laut «RRB 2010/667» integral anzuwenden. Zu den Anwendungen des Erscheinungsbildes zählen auch die Websites der Dienststellen des Kantons St.Gallen. Ausgenommen davon sind die selbstständig öffentlich-rechtlichen Anstalten.

4 Visual Design Basics Farbcharakter Farbdefinitionen Design Elemente

5 Visual Design Basics Das Design ist schlicht und auf das Wesentliche reduziert. Die Farbe «grün» wird gezielt eingesetzt. Weiss und Graustufen (Neutralität) prägen das Bild und geben dadurch dem und farbigen Elementen mehr Bedeutung.

6 Farbcharakter Für den Online-Auftritt des Kantons St.Gallen werden auf weissem Hintergrund neutrale Graustufen-Flächen/Linien sowie ein charismatischer Grünton eingesetzt. Die Grünwerte sind WCAG 2.0 geprüft.

7 Farbdefinitionen HEX # RGB 0/131/52 HEX #ebfbf4 RGB 235/251/244 HEX #f5fdfa RGB 235/251/244 HEX # RGB 000/000/000 HEX #cccccc RGB 204/204/204 HEX #e5e5e5 RGB 229/229/229 HEX #f7f7f7 RGB 247/247/247

8 Farbcharakter in der Praxis

9 Design Elemente Logo (Wappen), Schrift und Icons sind die wichtigsten Gestaltungsmerkmale; sie ergänzen Raumaufteilung und Fotografien mit gestalteten Details, ohne die jede Seite prototypisch und unfertig bleibt. Ihr konsistenter Gebrauch ist Voraussetzung für ein einheitliches Erscheinungsbild. Für den Umgang mit Text und Bild im Rahmen der Freiräume gibt es zusätzlich Empfehlungen. Sie schaffen ebenfalls Konsistenz.

10 Design Elemente Wappen Der Haupttitel bleibt auf sämtlichen Departementen und Ämtern identisch. Hinterlegt ist ein Hyperlink auf Logo (Wappen) Das Wappen des Kantons St.Gallen ist das einzige grafische «Design Element» im Header. Position und Grösse des Wappens sind für alle Departemente und Ämter festgelegt. Dem Wappen wird ein Hyperlink auf hinterlegt.

11 Design Elemente Wappen

12 Design Elemente Schrift Schrift In den Online-Medien setzt der die Schriftfamilie der «Arial» ein. Falls auf dem Browser Arial nicht verfügbar ist, soll alternativ «Helvetica» und «Verdana» angezeigt werden. Für die Newstexte wird die Schrift «Georgia» eingesetzt. Falls auf dem Browser Georgia nicht verfügbar ist, soll alternativ «Arial» oder «Helvetica» verwendet werden.

13 Design Elemente Schrift Arial 11px Arial 12px Arial 16px Arial 12px Arial Bold 26px Arial 16px Arial 11px

14 Design Elemente Schrift News Georgia 12px

15 Design Elemente Hyperlinks Passiv Active HEX: # HEX: # text-decoration: none text-decoration: underline Hover/Focus Visited HEX: # HEX: # text-decoration: underline text-decoration: none

16 Design Elemente Icons Icons Sie sind die grafischen «Bedienelemente» einer Website und ein Instrument für die Umsetzung des Markencharakters. Findet der User sie auf allen Websites konsistent wieder, tragen sie zur Orientierung und optimalen Benutzerführung bei. Icons sind nur dann vollständig, wenn Grafik und Text kombiniert sind. Hinterlegt werden diese immer mit einem Alternativ-Text.

17 Design Elemente Icons

18 Style Guide Internet sg.ch Basis-Raster Benutzerführung Beispiele Fixed Points

19 Style Guide Internet sg.ch Um den optischen Zusammenhalt innerhalb des Kantons St.Gallen zu gewährleisten, sind jeweils die Header aller Internet-Sites in Farbe und Navigationsstruktur gleich gehalten. Dem Auftritt werden folgende Prioritäten vorausgesetzt: Funktionalität, Benutzerführung und Design. Darüber hinaus kann so die Einheitlichkeit in der Verlinkung zu den übergreifenden Departementen und Ämtern sichergestellt werden.

20 Basis-Raster Header

21 Basis-Raster Body

22 Basis-Raster Servicespalte (Teaserspalte) «Teaser» Wichtige Inhalte unter werden mittels eines «Teasers» (Hinweis auf aktuelle Themen) prominent auf der Startseite publiziert. Es dürfen Texte (mit/ohne Rahmen), Bilder, Texte und Bilder, Linklisten, aufklappbare Linklisten, Downloads, iframes (mit/ohne Rahmen) und Auflistungen aller Subseiten (einspaltig/mehrspaltig) in diesem Bereich publiziert werden.

23 Basis-Raster Servicespalte (Teaserspalte)

24 Benutzerführung Kopfnavigation (Staatspolitische Gewalten) Die Kopfnavigation führt über direkte Links zu den Inhalten der einzelnen Bereiche (Kanton, Kantonsrat, Regierung, Verwaltung, Gerichte). Diese Reihenfolge ist verbindlich. Allfällige Unterthemen werden über Navigationen innerhalb des Inhaltsfensters gelöst.

25 Benutzerführung Kopfnavigation

26 Benutzerführung Generische Navigation Die Generische Navigation beinhaltet die allgemeinen Werkzeuge für den Benutzer wie Feedback, Services etc. Allfällige Unterthemen werden über Navigationen innerhalb des Inhaltsfensters gelöst.

27 Benutzerführung Generische Navigation

28 Benutzerführung «Breadcrumb» Direkt unter der generischen Navigation wird als sogenannter «Breadcrumb» (Absoluter Pfad) die aktuelle Position innerhalb der Website dargestellt. Die einzelnen Punkte des «Breadcrumb» sind Links zur entsprechenden Ebene.

29 Benutzerführung «Breadcrumb»

30 Benutzerführung Themenübergreifende Navigation Die themenübergreifende Navigation bildet die Hauptnavigation der Website. In dieser Navigation werden maximal 6 Ebenen mit unbegrenzter Anzahl von Unterpunkten gleichzeitig dargestellt.

31 Benutzerführung Themenübergreif. Navigation

38 Beispiele Index

39 Beispiele Sitemap

40 Beispiele Links

41 Beispiele Adresslisten

42 Fixed Points Kopfnavigation «Breadcrumb» Suchfeld Generische Navigation Themenübergreifende Navigation Servicespalte (Teaser) Footer (Impressum) Medienmitteilungen/Content

43 Style Guide Intranet / Extranet / Container Basis-Raster Fixed Points Intranet Extranet Container

44 Basis-Raster Das Basis-Raster für das Intranet, Extranet sowie für alle Container wird vollständig von übernommen.

45 Fixed Points «Breadcrumb» Suchfeld Generische Navigation Themenübergreifende Navigation Servicespalte (Teaser) Footer (Impressum) Medienmitteilungen/Content

46 Intranet Als Unterschied zum Portal wird in der Kopfnavigation eine strukturierte Navigation angezeigt. Zusätzlich steht die Bezeichnung «Intranet» oberhalb der Generischen Navigation.

47 Intranet Beispiel Strukturorientierte Navigation «Container»-Bezeichnung

48 Extranet Die Bezeichnung «Extranet» steht oberhalb der Generischen Navigation.

49 Extranet Beispiel «Container»-Bezeichnung

50 Container Als Kopfnavigation wird der Domain des jeweiligen «Containers» eingesetzt. (Beispiel: informatik.sg.ch) Dieser dient gleichzeitig als Home-Link auf die Startseite des «Containers». Zusätzlich ist die vollständige Container- Bezeichnung oberhalb der Generischen Navigation ersichtlich.

51 Container Beispiel Titel bleibt auf der gesamten Site bestehen «Container»-Bezeichnung

52

53 Verbindliche Vorgaben für Websites ausserhalb des kantonalen CMS Organisationen (insbesondere Schulen), die eine Website mit eigenem CMS aufgebaut haben, sollen die kantonalen Vorgaben möglichst genau umsetzen. Ihnen werden aber grössere Freiheiten bei der Gestaltung der Navigation und der Seiteneinteilung eingeräumt. Trotzdem soll die Klammer des kantonalen Auftritts spürbar sein. Bei den Farben stehen alle neun definierten Farben des kantonalen Erscheinungsbildes zur Verfügung. Die Gestaltung der Website muss von der Staatskanzlei freigegeben werden.

54 Verbindliche Elemente Kopfbereich

55 Optionale Elemente Kopfbereich

56 Verbindliche Vorgaben Navigation In der Gestaltung der Hauptnavigation sind Sites ausserhalb des kantonalen CMS frei. Sie kann sowohl vertikal, wie auch horizontal angelegt werden.

57 Verbindliche Vorgaben Seiteneinteilung Die Seiteneinteilung des Hauptinhaltsbereiches ist frei. Mit vertikaler Hauptnavigation wird empfohlen, die kantonale Einteilung zu übernehmen. Der Abstand zum äusseren Rand beträgt jeweils 19 pix.

58 Verbindliche Vorgaben Schrift Für die Schriften gelten dieselben Vorgaben, wie für den gesamten kantonalen Auftritt. - Überschriften: Arial bold 26 pix - Zwischentitel: Arial 16 pix - Laufschrift: Arial 12 pix (für News Georgia 12 pix)

59 Verbindliche Vorgaben Farben Für die Hyperlinks gelten dieselben Vorgaben, wie für den gesamten kantonalen Auftritt. - Passiv text-decoration: none - Active text-decoration: underline - Hover/Focus text-decoration: underline - Visited text-decoration: none Als Farben stehen alle neun definierten Farben des kantonalen Erscheinungsbildes zur Verfügung.

60 Verbindliche Vorgaben Icons Für die Icons gelten dieselben Vorgaben, wie für den gesamten kantonalen Auftritt. Als Farben stehen alle neun definierten Farben des kantonalen Erscheinungsbildes zur Verfügung.

61 Staatskanzlei Kommunikation / Medien Regierungsgebäude 9001 St.Gallen Telefon +41 (0) info@sg.ch