FH Potsdam Styleguide

Transkript

1 1 FH Potsdam Styleguide Version

2 Styleguide Einleitung 2 Dieser Styleguide der FH Potsdam stellt die grundlegenden Definitionen zu den wichtigsten Bereichen des Internetauftritts bereit. Hinweise zur Nutzung dieses Styleguides: - Alle Maßangaben erfolgen in Pixel (abgekürzt px ). - Alle Texte in Abbildungen von Layouts sind als Blindtext zu betrachten, d.h. sie dienen nur zu Layoutzwecken. - Alle in Layouts verwendten Photographien sind nur zu Layoutzwecken bzw. zur Demonstration eingefügt. Die Berücksichtigung der im Styleguide definierten Regeln gewährleistet eine klare Kontinuität im Design, die den Umgang mit der Seite vertraut und intuitiv erscheinen lässt. Aber Gestaltungsregeln sind nicht dazu da, blind eingehalten zu werden. Sie erfordern einen verantwortungsvollen Umgang. Es wird einzelne Fälle geben, die hier nicht dargestellt sind oder bei denen eine Regel zu erweitern ist, um dem Inhalt einer Seite gerecht zu werden. Diese Dokumentation beruht auf einem Arbeitsstand von Januar 2013.

3 Styleguide Inhaltsverzeichnis 3 Seitenaufbau und -verhalten Navigation Templates Druckansicht Module Graphische Elemente Interaktion 2 Einleitung 3 Inhaltsverzeichnis 5 Aufbau der Website 6 Raster 7 Zustände Menü-Band 8 Details Menü-Band 10 Haupt-Navigation blau 11 Haupt-Navigation hell 12 Haupt-Navigation hell 13 Codierung & Content-Navigation 15 Übersicht Bühnenmodelle 16 Startseite 17 Verteilerseite Informieren 18 Verteilerseite Studieren 19 Verteilerseite Fachbereich 20 Verteilerseite Studiengang 21 Contentseite 22 Personen-Seite 23 Projekt-Verteilseite 24 Projekt-Detailseite 25 Termine-Verteilseite 26 Termine-Detailseite 27 News-Verteilseite 28 News-Detailseite 29 Download-Seite 30 Suchergebnis-Seite 32 Druckansicht - Beispiel 33 Druckansicht - Regeln 35 Module 36 Module Contentbereich: Bühne 37 Module Contentbereich - gesamte Breite 38 Module Contentbereich 48 Module Marginalspalte 53 Typographie 55 Bilder und Bildformate 57 Farben 58 Linien und Flächen 59 Icons und Buttons 61 Verhalten 62 Interaktion

4 Styleguide Seitenaufbau und Seitenverhalten 4

5 Grundlagen & Grundlayout Aufbau der Website 5 Aufbau und das Verhalten der Website berücksichtigen die aktuellen Standards im Webdesign und sind auf die Anforderungen der in der Konzeptphase untersuchten Nutzergruppen zugeschnitten. Der Seiteninhalt liegt auf einer weißen Fläche auf grauem Seitenhintergrund. Die Fläche wird durch einen leichten Schatten vom Hintergrund abgesetzt. Ebeneneffekt Schlagschatten: Füllmethode: Multiplizieren #000000, Deckkraft 25 %, Winkel: 180, Abstand 3 px, Überfüllen 1 px, Größe 3 px Der Seiteninhalt wird links ausgerichtet.

6 Grundlagen & Grundlayout Raster 6 Der gesamten Website liegt ein gemeinsames Gestaltungsraster zu Grunde. Dieses Raster definiert die verwendeten Spaltenbreiten, Bildformate und Abstände. Der Einsatz eines solchen Rasters führt zu einem konsistenten und ausgeglichenen Erscheinungsbild der Website. Das Raster ist vierspaltig aufgebaut, eine schmale Menüspalte und im Contentbereich drei gleichbreite Spalten. Dabei werden zwei Spalten für den Hauptinhalt und die rechte Spalte als Marginalspalte genutzt. 140 px 30 px 255 px 255 px 255 px 30 px Breite nutzbarer Bereich 805 px Volle Contentspalte 530 px Marginalspalte 255 px 1005 px

7 Grundlagen & Grundlayout Zustände Menü-Band 7 Das blaue Band mit Hauptmenü ist auf den Seiten der Fachhochschule selbst und den Seiten der Fachbereiche und Studiengänge unterschiedlich. Der Inhalt des Menüs bleibt gleich, es findet jedoch ein Wechsel zwischen blauem Band und Menü auf grauem Hintergrund statt. Das blaue Band bleibt beim Scrollen an der gleichen Stelle, der Inhalt fließt unter ihm. Auch die Social-Media-Icons bleiben am unteren Rand haften. Das blaue Band findet sich auf allen Seiten mit Content zur Fachhochschule selbst. Beim grauen Band verhalten sich Menü und Icons ebenso, hier rückt allerdings der weiße Hintergrund nach unten und erhält ein Band zur Codierung, die Meta- Navigation liegt auf der grauen Fläche. Es kommt auf Fachbereichs- und Studiengangsebene zum Einsatz.

8 Grundlagen & Grundlayout Details Menü-Band 8 TheSans Bold 16 px, #ffffff 35 px 30 px 15 px

9 Styleguide Navigation 9

10 Navigation Haupt-Navigation blau 10 Von zentraler Bedeutung ist die ständige Erreichbarkeit aller Ebenen der gesamten Website. Deshalb ist die Hauptnavigation schrittweise bis in die fünfte Ebene per Flyout vorgesehen. Sie richtet sich in der zweiten Ebene am unteren Ende der Navigation aus und ab der 3. Ebene in gleicher Größe am ausgewählten Eintrag und bleibt so stets im Viewport des Nutzers. 2. Ebene, am unteren Rand der ersten Ebene ausgerichtet 3. Ebene, zentriert zum ausgewählten Eintrag ausgerichtet, maximal jedoch bündig zum oberen oder unteren Rand 4. und 5. Ebene, gleiche Ausrichtung, Höhe der 3. Ebene wird adaptiert

11 Navigation Haupt-Navigation hell 11 Ebenso funktionert die Haupt-Navigation in Fachbereichs- und Studiengangsebene. 2. Ebene, am unteren Rand der ersten Ebene ausgerichtet 3. Ebene, zentriert zum ausgewählten Eintrag ausgerichtet, maximal jedoch bündig zum oberen oder unteren Rand 4. und 5. Ebene, gleiche Ausrichtung, Höhe der 3. Ebene wird adaptiert

12 Navigation Haupt-Navigation hell 12 Anwendungsbeispiel:

13 Navigation Codierung & Content-Navigation 13 Neben der Hauptnavigation, die stets an gleicher Stelle steht, gibt es eine Navigation innerhalb des Contents, die offen alle Punkte zeigt. Ausgangsstatus ist hier die Ebene Fachbereich mit Codierung am oberen Bühnenreand, unterhalb die 2. Menüebene: The Serif Bold, 24 px, #ffffff The Sans plain, 12 px, #ffffff Mouseover zeigt 3. Ebene als Flyout: The Sans plain, 12 px, # active: #0773b6 Nach dem Wechsel zur 4. Ebene befindet sich die Codierung unterhalb der Bühne und das Menü besteht aus 3 offenen Ebenen: FH-Contentnavigation und Codierung finden immer auf weißem Band statt:

14 Styleguide Templates und exemplarische Seiten 14

15 Templates Übersicht Bühnenmodelle 15 Startseite: Größe 1 (865 x 305 px, mit Steuerung) Verteilerseiten: Größe 2 (865 x 190 px) Studiengang-Seite und Contentseiten: Größe 3 (865 x 100 px)

16 Templates Startseite Die Startseite der FH Potsdam beinhaltet die größtmögliche Bühne mit Steuerung durch die Bilder der verschiedenen Fachbereiche. Welche Module hier eingesetzt werden können zeigt das Feinkonzept. 16

17 Templates Verteilerseite Informieren Die Seite Informieren kann ebenfalls mit verschiedensten Modulen befüllt werden. 17

18 Templates Verteilerseite Studieren 18

19 Templates Verteilerseite Fachbereich 19 Mit grauem Band und Hauptmenü - die Codierung des Fachbereich liegt im Fokus.

20 Templates Verteilerseite Studiengang 20 Die Verteilerseiten der einzelnen Studiengänge können ebenfalls unterschiedliche Module enthalten.

21 Templates Contentseite 21

22 Templates Personen-Seite 22 Die Personen-Seite beinhaltet neben zusätzlichen Modulen die Visitenkarte.

23 Templates Projekt-Verteilseite 23

24 Templates Projekt-Detailseite 24

25 Templates Termine-Verteilseite 25

26 Templates Termine-Detailseite 26

27 Templates News-Verteilseite 27

28 Templates News-Detailseite 28

29 Templates Download-Seite 29

30 Templates Suchergebnis-Seite 30

31 Styleguide Druckansicht 31

32 Druckansicht Druckansicht - Beispiel 32

33 Druckansicht Druckansicht - Regeln 33 Großflächige Elemente wie Menü-Band, Hintergrundfläche und Bühne werden für die Druckansicht ausgeblendet. In der Umsetzung soll darauf geachtet werden, dass der Webfont für die Druckansicht zur Verfügung steht. Die Verortung (erste und zweite Menü-Ebene) wird durch einen blauen Balken vom Inhalt getrennt. Galerie-Modul 3 wird auf das Start-Bild beschränkt ausgegeben. Der Pfad wird in einen Textpfad beginnend mit einem horizontalen grauen Balken unter den Fließtext gestellt. Marginalspalten-Module werden hiernach untereinander und in selbiger Breite gesetzt. Handelt es dich um Elemente mit Bild und Text erscheinen diese nebeneinander.

34 Styleguide Module 34

35 Module Module 35 Die Systematik der Module orientiert sich an folgendem Schema: Abstand Module zum Menü: 50 px Contentspalte: Fester Abstand der Module zueinander: 50 px Ausnahme: Breadcrump: 30 px danach 50 px Marginalspalte: Fester Abstand der Module zueinander: 30 px, am Spaltenende 60 px, Hintergrund: Breite 255 px, # eeeeee, Linie oben gesamte Breite: 1 px, # a5a5a5 50 px 30 px Abstand Footer zur weißen Fläche: 50 px 60 px 50 px 30 px

36 Module Module Contentbereich: Bühne 36 Es werden drei verschiedene Bühnenmodule verwendet: Größe 1: Bühne mit Steuerfunktion - Verwendung nur auf Startseite vorgesehen, automatische Rotation ist möglich. Bildformat: 865 x 305 px The Sans plain 14 px, #ffffff 28 px Größe 2: Bühne mittlerer Größe, für Verteilerseite bis Fachbereichsebene / Studiengang Bildformat: 865 x190 px Größe 2: Bühne mittlerer Größe, für Studiengang-Verteilseite und Contentseiten Bildformat: 865 x100 px

37 Module Module Contentbereich - gesamte Breite 37 Als einziges Modul ist für den Termine-Teaser die komplette Contentspalte geplant: Linie: 1 px, # a5a5a5 Kreis: Ø 50 px, # , The Sans Bold 36 px, 12 px The Sans plain 14 px, #000000, line-height: 18 px min

38 Module Module Contentbereich 38 Text-Teaser Linie: 1 px, # a5a5a5 Dachzeile: The Sans plain 14 px, #555555, Headline h2: The Serif Semibold 24 px, #000000, line-height: 28 px Fließtext: The Sans plain 14 px, #555555, line-height: 22 px Link 15 px Text-Image-Teaser Linie: 1 px, # a5a5a5 Dachzeile: The Sans plain 14 px, #555555, Headline h2: The Serif Semibold 24 px, #000000, line-height: 28 px Fließtext: The Sans plain 14 px, #555555, line-height: 22 px Bildformat: 255 x 170 px Link 15 px Text-Image-Teaser einspaltig Linie: 1 px, # a5a5a5 Bildformat: 255 x 170 px Headline h2: The Serif Semibold 24 px, Fließtext: The Sans plain 14 px, #555555, line-height 22 px Links 15 px

39 Module Module Contentbereich 39 Linie: 1 px, # a5a5a5 Bildformat: 255 x 170 px Headline h2: The Serif Semibold 24 px, line-height 28 px Links Link-Teaser zweispaltig Linkliste zweispaltig Linie: 1 px, # a5a5a5 Headline h4: The Serif Semibold 16 px, line-height The Sans plain 14 px, #000000, line-height: 18 px 15 px 40 px Text-Modul Link, Headline h2: The Serif Semibold 24 px, line-height 28 px Einlesetext The Sans Bold 14 px, #555555, line-height 22 px Zwischenüberschrift Headline h4: The Serif Semibold 16 px, line-height Fließtext: The Sans plain 14 px, #555555, line-height 22 px 30 px

40 Module Module Contentbereich 40 Text-Image-Modul Fließtext: The Sans plain 14 px, #555555, line-height 22 px Bildunterschrift: The Sans plain 12 px, #555555, line-height 14 px Bildformat: 255 x 170 px Höhe: 30 px Kontur: 1 px, # e4e4e4 Dropdown Hintergrund: #eeeeee The Sans plain 14 px, # px 30 px Galerie-Modul 1 Bildformat: 530 x 355 px Bildunterschrift: The Sans plain 12 px, #555555, line-height 14 px

41 Module Module Contentbereich 41 Galerie-Modul 2 Bildformat: 530 x 355 px Bildunterschrift: The Sans plain 12 px, #555555, line-height 14 px Galerie-Modul 3 Bildformat: 530 x 355 px Bildformat Miniatur: 60 x 88 px, active: Kontur: 1 px, #0773b6 Bildunterschrift: The Sans plain 12 px, #555555, line-height 14 px 5 px

42 Module Module Contentbereich 42 Video-Modul active: Kontur: 1 px, # 0773b6 Bildunterschrift: The Sans plain 12 px, #555555, line-height 14 px List-Teaser Linie: 1 px, # a5a5a5 Headline h2: The Serif Semibold 24 px, #000000, line-height: 28 px Headline h4: The Serif Semibold 16 px, line-height Fließtext: The Sans plain 14 px, #555555, line-height 22 px Link Bildformat: 165 x 1 30 px

43 Module Module Contentbereich 43 Akkordeon-Modul Kontur: 1 px, #e4e4e4 Hintergrund: #eeeeee Headline: h5:the Sans Semibold 14 px, #555555, Ebeneneffekt Schlagschatten offener Teil: Füllmethode: Multiplizieren #000000, Deckkraft 20 %, Winkel:90, Abstand 1 px, Größe 3 px 30 px Tabelle Linie: 1 px, #a5a5a5 Hintergrund: #eeeeee Linien innerhalb: 1 px, #e4e4e4, #ffffff Headline h2: The Serif Semibold 24 px, #000000, line-height: 28 px Fließtext: The Sans plain 14 px, #555555, line-height 22 px Link 30 px Paginierung Linien: 1 px, #ffffff Hintergrund: #eeeeee The Sans plain 14 px, #555555, # px 25 px 30 px Downloads Linie: 1 px, # a5a5a5 Headline h2: The Serif Semibold 24 px, #000000, line-height: 28 px Fließtext: The Sans plain 14 px, #555555, line-height 22 px Link

44 Module Module Contentbereich 44 Tab-Modul active: Linie: 1 px, #a5a5a5 Kontur: 1 px, #e4e4e4 Hintergrund Tab: #eeeeee Headline: h5:the Sans Semibold 14 px, #555555, 15 px 28 px Redaktionszeile Linie: 1 px, # a5a5a5 Fließtext: The Sans plain 14 px, #555555, line-height 22 px Link 5 px Breadcrump Hintergrund: #eeeeee The Sans plain 12 px, #555555, # px Visitenkarte Linie: 1 px, #a5a5a5 Hintergrund: #eeeeee Linien innerhalb: 1 px, #ffffff Headline h1: The Serif Semibold 24 px, #000000, line-height: 28 px Fließtext: The Sans plain 14 px, #555555, line-height 22 px Link Bildformat: 165 x 1 28 px

45 Module Module Contentbereich 45 Sprunganker Linie: 1 px, #a5a5a5 Hintergrund: #eeeeee Headline h2: The Serif Semibold, line-height 24 px, The Sans plain 14 px, # px Meta-Navigation The Sans plain 12 px, # px 15 px 15 px Footer The Sans plain, The Sans bold 12 px, #000000, line-height 16 px 25 px 25 px 25 px 5 px Testimonial-Banner Bildformat: 530 x 175 px, Die Banner müssen je nach Motiv und Textlänge neu gestaltet werden, Einsatz aller Schriften: The Sans, The Serif, The Mix

46 Module Module Contentbereich 46 Termine - Listenmodul Linie: 1 px, #a5a5a5 Hintergrund: #eeeeee The Sans plain 14 px, #555555, Headline h1: The Serif Semibold 24 px, line-height 28 px, Link Achtung: Ort ist variabel: kann entfallen oder durch Einlesetext ersetzt werden, siehe S px 15 px Termine - Detailansicht (erweitertes Text-Modul) Link, Headline h2: The Serif Semibold 24 px, line-height 28 px Einlesetext The Sans Bold 14 px, #555555, line-height 22 px Zwischenüberschrift Headline h4: The Serif Semibold 16 px, line-height Fließtext: The Sans plain 14 px, #555555, line-height 22 px 70 px 30 px 25 px 25 px News - Listenmodul (erweitertes Text-Image Modul) Linie: 1 px, #a5a5a5 The Sans plain 14 px, #555555, Headline h1: The Serif Semibold 24 px, line-height 28 px, Link Bildformat: 255 x 170 px 15 px

47 Module Module Contentbereich 47 News - Detailansicht (erweitertes Text-Modul) Link, Headline h2: The Serif Semibold 24 px, line-height 28 px Einlesetext The Sans Bold 14 px, #555555, line-height 22 px Zwischenüberschrift Headline h4: The Serif Semibold 16 px, line-height Fließtext: The Sans plain 14 px, #555555, line-height 22 px 30 px

48 Module Module Marginalspalte 48 Schnellzugriff Maße: 235 x 40 px, #ffffff Headline h2: The Serif Semibold 18 px, 15 px Twitter-Modul Linie: 1 px, #a5a5a5 Maße: 235 x 40 px, #ffffff Headline h3: The Serif Semibold 16 px, lineheight The Sans plain, 12 px, #555555, #000000, line-height Button 15 px 15 px News-Modul Linie: 1 px, #a5a5a5 Headline h3: The Serif Semibold 16 px, lineheight Fließtext: The Sans plain 14 px, #555555, #000000, line-height 18 px Button

49 Module Module Marginalspalte 49 Linkliste einspaltig Linie: 1 px, #a5a5a5 Headline h3: The Serif Semibold 16 px, lineheight Fließtext: The Sans plain 14 px, #555555, line-height 18 px, Verwendung bei mehr als 3 Links 15 px 40 px Text-Image-Teaser Linie: 1 px, #a5a5a5 Bildformat: 255 x 170 px Headline h3: The Serif Semibold 16 px, lineheight Fließtext: The Sans plain 14 px, #555555, line-height 18 px Link 15 px Link-Modul Linie: 1 px, #a5a5a5 Headline h3: The Serif Semibold 16 px, line-height Link Verwendung bei weniger als 3 Links

50 Module Module Marginalspalte 50 Tagcloud Linie: 1 px, #a5a5a5 Headline h3: The Serif Semibold 16 px, lineheight The Serif plain, 12-2 px, #ffffff Flächen: Höhe zwischen 25 und 35 px, #0773b6, #3f99d1, #68b1de 15 px Störer Grafisch gestaltetes Element: Breite: 235 px, The Sans Bold, The Sans plain, Versalien Termine-Teaser Linie: 1 px, #a5a5a5 Kreis: Ø 50 px, # , The Sans Bold 36 px, 12 px Headline h3: The Serif Semibold 16 px, lineheight Fließtext: The Sans plain 14 px, #555555, #000000, line-height 18 px, 15 px

51 Module Module Marginalspalte 51 Projektübersicht Linie: 1 px, #a5a5a5 innerhalb: 1 px, #000000, gepunktet Headline h3: The Serif Semibold 16 px, lineheight The Serif plain, 12 px, # The Sans plain 14 px, #555555, line-height 18 px 5 px Kontakt-Teaser Linie: 1 px, #a5a5a5 innerhalb: 1 px, #000000, gepunktet Headline h3: The Serif Semibold 16 px, line-height The Sans plain 14 px, #555555, line-height Link 15 px 15 px 15 px 15 px

52 Styleguide Grafische Elemente 52

53 Graphische Elemente Typographie 53 Typographisch wurde sich für die Verwendung der Webfonts The Sans und The Serif entschieden. Hinweis: Die Darstellung von Schriften weicht je nach verwendeter Hardware, Betriebssystem, Browser, Browserversion, Grundeinstellungen des Browsers, Bildschirmqualität, Bildschirmauflösung, Grafikkarte, etc. spürbar voneinander ab. Von einer einheitlichen Darstellung im Sinne der Mikrotypographie kann zurzeit leider noch nicht gesprochen werden. Zudem gibt es prozessbedingte Darstellungsunterschiede zwischen Entwurfswerkzeugen und Frontendprogrammierung. Daher müssen die hier festgelegten Details (Schriftschnitt, Größe, etc.) im Zuge der Umsetzung überprüft und unter Umständen im Sinne eines harmonisierten Gesamtbildes angepasst werden. In folgender Liste werden alle Formatierungen und ihre Verwendung beschrieben: The Serif Bold 28 px, ##0773b6, line-height 32 px Verwendung: Titel Startseite The Serif Semibold 24 px, #000000, line-height 28 px Verwendung: Überschriften The Serif Semibold, #000000, line-height 24 px Verwendung: Überschriften The Serif Semibold 16 px, #000000, line-height Verwendung: Überschriften The Sans Semibold 14 px, #000000, line-height 18 px Verwendung: Überschriften

54 Graphische Elemente Typographie 54 TheSans plain, 14 px, # line-height Content 22 px, line-height marginal: 20px, Absatz 25 / 35 px Verwendung: Fließtext TheSans Bold 14 px, #555555, line-height 22 px Verwendung: Einlesetext hesans plain 14 px, #555555, line-height 16 px Verwendung: Dachzeilen TheSans Plain 12 px, #000000, für Menüeinträge: #ffffff line-height 15 px, Verwendung: Metazeile, Bildunterschriften, Menü TheSerif Bold 24 px, #ffffff, ##0773b6, Verwendung: Codierung oberer Bühnenrand TheSerif Bold 18 px, #ffffff, #0773b6 Verwendung: Codierung unterhalb Bühne

55 Graphische Elemente Bilder und Bildformate 55 Das Format aller Bilder soll dem Seitenverhältnis 2:3 folgen. Es sind allerdings auch andere Formate möglich, die sich dann in vorgegebener Breite einfügen. Bildformat: 165 x 1, Verwendung: Bsp. List-Teaser Bildformat: 255 x 170 px, Verwendung: Bsp. Text-Bild-Teasaer, Einsatz mehrerer Bilder in Reihe möglich Bildformat: 235 x 170 px, Verwendung nur in Marginalspalte, Seitenverhältnis 2:3, Beschnitt Breite je, Höhe entspricht Bild Content Bildformat: 530 x 355 px, Verwendung: Bildergalerien - Die Höhe ist variabel im Bereich zwischen 175 und 355 px Bildformat: 530 x 175 px, Verwendung: Testimonial Banner

56 Graphische Elemente Bilder und Bildformate 56 Bildformat: 530 x 355 px, Verwendung: Hochformate nur einspaltig Die Höhe ist variabel im Bereich zwischen 170 und 355 px Bildformat: 130 x 190 px, Verwendung: nur Marginalspalte

57 Graphische Elemente Farben 57 Die Farbauswahl orientiert sich an dem im Corporate Design definierten Farbklima. Für die optimale Darstellung im Internet wurden einige Werte leicht modifiziert. Schwarz RGB: 34/34/34 Hex: # Headlines, Links Grau 1 RGB: 85/85/85 Hex: # Text, Termine Blau RGB: 7/115/182 Hex: #0773b6 Navigation, Interaktion Blau RGB: 7/87/139 Hex: #07578b# Highlighting Navigation Grau 2 RGB: 165/165/165 Hex: #a5a5a5 Linien Grau 3 RGB: 238/238/238 Hex: #eeeeee Flächen in Modulen, Hintergrund und Marginalspalte

58 Graphische Elemente Linien und Flächen 58 Das Repertoire graphischer Elemente ist bewusst gering gehalten. Aus den angebotenen Mitteln Linie und Fläche lassen sich ausreichend viele Gestaltungen entwickeln. Linien 1 px, #a5a5a5 Verwendung: Linie oberhalb Module im Contentbereich + Marginalspalte sowie der Überschriften h4 1 px, #a5a5a5, gepunktet: 1 px - 2 px - px Verwendung: Linie oberhalb der Überschriften h5, Modul Projektübersicht Marginalspalte Flächen Fläche: #eeeeee Fläche Seitenhintergrund, Hintergrund Marginalspalte und einzelne Module Fläche: #ffffff Ebeneneffekt: Schein nach außen, 20% Deckkraft, #000000, Größe: 6 px, Bereich: 50%

59 Graphische Elemente Icons und Buttons 59 Icons sind graphische Zeichen, die ähnlich wie Piktogramme dem Nutzer bei der Bedienung und der Interaktion mit der Website helfen. Allgemeiner Link The Sans plain 14 px, # px Button The Sans plain 12 px, #ffffff 6 px 16 px Download-Icon 15 x 15 px, # Blättern- / Klapp- / Linklistensymbol 15 x 15 px, #ffffff, # Button Schnelleinstieg 21 x 21 px, #55555, #ffffff Social Media Icons 27 x 27 px, # eceded

60 Styleguide Interaktion 60

61 Interaktion Verhalten 61 Von zentraler Bedeutung für die Usability die hindernisfreie Benutzbarkeit der Website als auf für die Barrierefreiheit ist eine eindeutige Kennzeichnung der Links. Entprechend liegt der Website eine konsistente Systematik der Links zu Grunde: Alle Links sind farbig gleich, alle Mouse-Over-Verhalten ebenso. Erläuterung anhand nachfolgender Beispiele: Allgemeiner Link The Sans plain 14 px, #000000, Mouseover: #0773b6, underlined Link im Text

62 Graphische Elemente Interaktion 62 Schnelleinstieg Termine-Teaser Link-Liste

63 Graphische Elemente Interaktion 63 Tagcloud Akkordeon

64 Graphische Elemente Interaktion 64 Tab-Modul Button Social-Media-Icons

65 Kontakt & Impressum 65 Fachhochschule Potsdam Postfach Potsdam Telefon: +49 (0) Fax: +49 (0) Boris Müller, Constanze Vogt interactive tools GmbH Agentur für digitale Medien