Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ......
61
Kanton St.Gallen Design Guidelines Web-Auftritt des Kantons St.Gallen Version 8.0 - CQ5-Redesign Juli 2011
Transcript of Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ......
Kanton St.Gallen
Design Guidelines Web-Auftritt
des Kantons St.Gallen
Version 8.0 - CQ5-Redesign
Juli 2011
Kanton St.Gallen
Inhalt
1. Geltung und Reichweite der Guidelines
2. Visual Design Basics
3. Style Guide Internet «sg.ch»
4. Style Guide Intranet/Extranet/Container
Kanton St.Gallen
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.
Kanton St.Gallen
Visual Design Basics
• Farbcharakter
• Farbdefinitionen
• Design Elemente
Kanton St.Gallen
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.
Kanton St.Gallen
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.
Kanton St.Gallen
Farbdefinitionen
HEX #cccccc
RGB 204/204/204
HEX #ebfbf4
RGB 235/251/244
HEX #000000
RGB 000/000/000
HEX #e5e5e5
RGB 229/229/229
HEX #008334
RGB 0/131/52
HEX #f7f7f7
RGB 247/247/247
HEX #f5fdfa
RGB 235/251/244
Kanton St.Gallen
Farbcharakter in der Praxis
Kanton St.Gallen
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.
Kanton St.Gallen
Design Elemente – Wappen
Kanton St.Gallen
Der Haupttitel bleibt auf sämtlichen Departementen und
Ämtern identisch. Hinterlegt ist ein Hyperlink auf
www.sg.ch.
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 «Kanton St.Gallen» wird
ein Hyperlink auf www.sg.ch hinterlegt.
Kanton St.Gallen
Design Elemente – Wappen
Kanton St.Gallen
Design Elemente – Schrift
Schrift
In den Online-Medien setzt der Kanton St.Gallen 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.
Kanton St.Gallen
Design Elemente – Schrift
Arial 16px
Arial Bold 26px
Arial 12px Arial 11px
Arial 11px
Arial 16px
Arial 12px
Kanton St.Gallen
Design Elemente – Schrift News
Georgia 12px
Kanton St.Gallen
Design Elemente – Hyperlinks
Passiv Active
HEX: #008334 HEX: #008334
text-decoration: none text-decoration: underline
Hover/Focus Visited
HEX: #008334 HEX: #008334
text-decoration: underline text-decoration: none
Kanton St.Gallen
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
Kanton St.Gallen 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.
Kanton St.Gallen
Design Elemente – Icons
Kanton St.Gallen
Style Guide Internet sg.ch
• Basis-Raster
• Benutzerführung
• Beispiele
• Fixed Points
Kanton St.Gallen
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.
Kanton St.Gallen
Basis-Raster – Header
Kanton St.Gallen
Basis-Raster – Body
Kanton St.Gallen
Basis-Raster – Servicespalte (Teaserspalte)
«Teaser»
Wichtige Inhalte unter www.sg.ch 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.
Kanton St.Gallen
Basis-Raster – Servicespalte (Teaserspalte)
Kanton St.Gallen
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.
Kanton St.Gallen
Benutzerführung – Kopfnavigation
Kanton St.Gallen
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.
Kanton St.Gallen
Benutzerführung – Generische Navigation
Kanton St.Gallen
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.
Kanton St.Gallen
Benutzerführung – «Breadcrumb»
Kanton St.Gallen
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.
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
Kanton St.Gallen
Beispiele – Index
Kanton St.Gallen
Beispiele – Sitemap
Kanton St.Gallen
Beispiele – Links
Kanton St.Gallen
Beispiele – Adresslisten
Kanton St.Gallen
Fixed Points
Themenübergreifende
Navigation
Suchfeld
Kopfnavigation
Footer (Impressum)
Servicespalte
(Teaser)
Medienmitteilungen/Content
«Breadcrumb»
Generische Navigation
Kanton St.Gallen
Style Guide Intranet / Extranet / Container
• Basis-Raster
• Fixed Points
• Intranet
• Extranet
• Container
Kanton St.Gallen
Basis-Raster
Das Basis-Raster für das Intranet, Extranet sowie für
alle Container wird vollständig von www.sg.ch
übernommen.
Kanton St.Gallen
Fixed Points
Themenübergreifende
Navigation
Suchfeld
Footer (Impressum)
Servicespalte
(Teaser)
Medienmitteilungen/Content
«Breadcrumb»
Generische Navigation
Kanton St.Gallen
Intranet
Als Unterschied zum Portal wird in der
Kopfnavigation eine strukturierte Navigation
angezeigt.
Zusätzlich steht die Bezeichnung «Intranet»
oberhalb der Generischen Navigation.
Kanton St.Gallen
Intranet Beispiel
Strukturorientierte Navigation «Container»-Bezeichnung
Kanton St.Gallen
Extranet
Die Bezeichnung «Extranet» steht oberhalb der
Generischen Navigation.
Kanton St.Gallen
Extranet Beispiel
«Container»-Bezeichnung
Kanton St.Gallen
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.
Kanton St.Gallen
Container Beispiel
Titel bleibt auf der gesamten Site bestehen «Container»-Bezeichnung
Kanton St.Gallen
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 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.
Kanton St.Gallen
kantonalen Erscheinungsbildes zur Verfügung.
Die Gestaltung der Website muss von der Staatskanzlei freigegeben werden.
Verbindliche Elemente
Kopfbereich
Kanton St.Gallen
Optionale Elemente
Kopfbereich
Kanton St.Gallen
Verbindliche Vorgaben
Navigation
In der Gestaltung der Hauptnavigation sind Sites ausserhalb des kantonalen CMS frei. Sie kann ausserhalb des kantonalen CMS frei. Sie kann sowohl vertikal, wie auch horizontal angelegt werden.
Kanton St.Gallen
Verbindliche Vorgaben
Seiteneinteilung
Die Seiteneinteilung des Hauptinhaltsbereiches ist frei. Mit vertikaler Hauptnavigation wird empfohlen, die kantonale Einteilung zu übernehmen. Der Abstand zum kantonale Einteilung zu übernehmen. Der Abstand zum äusseren Rand beträgt jeweils 19 pix.
Kanton St.Gallen
Verbindliche Vorgaben
Schrift
Für die Schriften gelten dieselben Vorgaben, wie für den gesamten kantonalen Auftritt.den gesamten kantonalen Auftritt.- Überschriften: Arial bold 26 pix- Zwischentitel: Arial 16 pix- Laufschrift: Arial 12 pix (für News Georgia 12 pix)
Kanton St.Gallen
Verbindliche Vorgaben
Farben
Für die Hyperlinks gelten dieselben Vorgaben, wie für den gesamten kantonalen Auftritt.für den gesamten kantonalen Auftritt.- Passiv text-decoration: none- Active text-decoration: underline- Hover/Focus text-decoration: underline- Visited text-decoration: none
Kanton St.Gallen
Als Farben stehen alle neun definierten Farben des kantonalen Erscheinungsbildes zur Verfügung.
Verbindliche Vorgaben
Icons
Für die Icons gelten dieselben Vorgaben, wie für den gesamten kantonalen Auftritt.gesamten kantonalen Auftritt.
Als Farben stehen alle neun definierten Farben des kantonalen Erscheinungsbildes zur Verfügung.
Kanton St.Gallen
Kanton St.Gallen
Kanton St.Gallen
Staatskanzlei
Kommunikation / Medien
Regierungsgebäude
9001 St.Gallen
Telefon +41 (0)71 229 32 64
www.sg.ch
