design guidelines web-auftritt des kantons st.gallen … · design guidelines web-auftritt ......
TRANSCRIPT
![Page 1: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/1.jpg)
Kanton St.Gallen
Design Guidelines Web-Auftritt
des Kantons St.Gallen
Version 8.0 - CQ5-Redesign
Juli 2011
![Page 2: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/2.jpg)
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
![Page 3: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/3.jpg)
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.
![Page 4: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/4.jpg)
Kanton St.Gallen
Visual Design Basics
• Farbcharakter
• Farbdefinitionen
• Design Elemente
![Page 5: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/5.jpg)
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.
![Page 6: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/6.jpg)
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.
![Page 7: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/7.jpg)
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
![Page 8: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/8.jpg)
Kanton St.Gallen
Farbcharakter in der Praxis
![Page 9: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/9.jpg)
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.
![Page 10: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/10.jpg)
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.
![Page 11: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/11.jpg)
Kanton St.Gallen
Design Elemente – Wappen
![Page 12: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/12.jpg)
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.
![Page 13: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/13.jpg)
Kanton St.Gallen
Design Elemente – Schrift
Arial 16px
Arial Bold 26px
Arial 12px Arial 11px
Arial 11px
Arial 16px
Arial 12px
![Page 14: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/14.jpg)
Kanton St.Gallen
Design Elemente – Schrift News
Georgia 12px
![Page 15: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/15.jpg)
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
![Page 16: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/16.jpg)
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.
![Page 17: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/17.jpg)
Kanton St.Gallen
Design Elemente – Icons
![Page 18: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/18.jpg)
Kanton St.Gallen
Style Guide Internet sg.ch
• Basis-Raster
• Benutzerführung
• Beispiele
• Fixed Points
![Page 19: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/19.jpg)
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.
![Page 20: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/20.jpg)
Kanton St.Gallen
Basis-Raster – Header
![Page 21: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/21.jpg)
Kanton St.Gallen
Basis-Raster – Body
![Page 22: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/22.jpg)
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.
![Page 23: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/23.jpg)
Kanton St.Gallen
Basis-Raster – Servicespalte (Teaserspalte)
![Page 24: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/24.jpg)
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.
![Page 25: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/25.jpg)
Kanton St.Gallen
Benutzerführung – Kopfnavigation
![Page 26: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/26.jpg)
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.
![Page 27: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/27.jpg)
Kanton St.Gallen
Benutzerführung – Generische Navigation
![Page 28: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/28.jpg)
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.
![Page 29: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/29.jpg)
Kanton St.Gallen
Benutzerführung – «Breadcrumb»
![Page 30: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/30.jpg)
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.
![Page 31: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/31.jpg)
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
![Page 32: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/32.jpg)
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
![Page 33: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/33.jpg)
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
![Page 34: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/34.jpg)
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
![Page 35: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/35.jpg)
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
![Page 36: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/36.jpg)
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
![Page 37: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/37.jpg)
Kanton St.Gallen
Benutzerführung – Themenübergreif. Navigation
![Page 38: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/38.jpg)
Kanton St.Gallen
Beispiele – Index
![Page 39: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/39.jpg)
Kanton St.Gallen
Beispiele – Sitemap
![Page 40: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/40.jpg)
Kanton St.Gallen
Beispiele – Links
![Page 41: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/41.jpg)
Kanton St.Gallen
Beispiele – Adresslisten
![Page 42: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/42.jpg)
Kanton St.Gallen
Fixed Points
Themenübergreifende
Navigation
Suchfeld
Kopfnavigation
Footer (Impressum)
Servicespalte
(Teaser)
Medienmitteilungen/Content
«Breadcrumb»
Generische Navigation
![Page 43: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/43.jpg)
Kanton St.Gallen
Style Guide Intranet / Extranet / Container
• Basis-Raster
• Fixed Points
• Intranet
• Extranet
• Container
![Page 44: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/44.jpg)
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.
![Page 45: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/45.jpg)
Kanton St.Gallen
Fixed Points
Themenübergreifende
Navigation
Suchfeld
Footer (Impressum)
Servicespalte
(Teaser)
Medienmitteilungen/Content
«Breadcrumb»
Generische Navigation
![Page 46: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/46.jpg)
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.
![Page 47: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/47.jpg)
Kanton St.Gallen
Intranet Beispiel
Strukturorientierte Navigation «Container»-Bezeichnung
![Page 48: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/48.jpg)
Kanton St.Gallen
Extranet
Die Bezeichnung «Extranet» steht oberhalb der
Generischen Navigation.
![Page 49: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/49.jpg)
Kanton St.Gallen
Extranet Beispiel
«Container»-Bezeichnung
![Page 50: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/50.jpg)
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.
![Page 51: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/51.jpg)
Kanton St.Gallen
Container Beispiel
Titel bleibt auf der gesamten Site bestehen «Container»-Bezeichnung
![Page 52: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/52.jpg)
Kanton St.Gallen
![Page 53: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/53.jpg)
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.
![Page 54: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/54.jpg)
Verbindliche Elemente
Kopfbereich
Kanton St.Gallen
![Page 55: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/55.jpg)
Optionale Elemente
Kopfbereich
Kanton St.Gallen
![Page 56: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/56.jpg)
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
![Page 57: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/57.jpg)
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
![Page 58: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/58.jpg)
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
![Page 59: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/59.jpg)
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.
![Page 60: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/60.jpg)
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
![Page 61: Design Guidelines Web-Auftritt des Kantons St.Gallen … · Design Guidelines Web-Auftritt ... Raumaufteilung und Fotografien mit gestalteten ... prominent auf der Startseite publiziert](https://reader034.vdocuments.net/reader034/viewer/2022051407/5ba05d6209d3f267388ceaf7/html5/thumbnails/61.jpg)
Kanton St.Gallen
Kanton St.Gallen
Staatskanzlei
Kommunikation / Medien
Regierungsgebäude
9001 St.Gallen
Telefon +41 (0)71 229 32 64
www.sg.ch