Stand: 02/2019
info@design-frischgepresst.de

Downloads

Logos:

gss-logos-lowres.zip (144KB),
Farbraum: RGB, Auflösung: 72dpi, geeignet für den Gebrauch in Word, Powerpoint, etc.

gss-logos-hires.zip (12,7MB),
Farbraum: CMYK, Auflösung: 300dpi, geeignet für hochwertige Druckerzeugnisse

gss-logos-vector.zip (21,2MB),
geeignet zur Erstellung neuer hochwertiger Medien

Schriften:

gss-fonts.zip (1,7MB)

Quicklinks

Aufzählungen
Farben
Galerie
Hervorhebungen
Icons
Layout
Links
Logos
Print
Schriften
Schriftgröße, Zeilenhöhe, Abstände
Tabellen

Logos

Logofamilie mit einem Hauptlogo für die Gesamtschule und Einzellogos für die einzelnen Klassenstufen der verschiedenen Schulformen.

Hauptlogo Schule gesamt

Standard: GSSB – Wort-Bild-Marke

GSSB – Bild-Marke

Variante 01: GSSB – Wort-Bild-Marke vertikal

Variante 02: GSSB – Wort-Bild-Marke horizontal zentriert

Varianten 01 und 02 sollte nur in Ausnahmefällen verwendet werden, wo es die Anordnung erfordert.

Klassenlogos

Hauptschule

Realschule

Gymnasium

nach oben

Schriften

Standardmäßig wird für Überschriften und Fließtexte die Vollkorn verwendet. Durch die Einbindung von Klassen mittels „HTML bearbeiten“ kann man aber auch innerhalb eines Absatzes beide Schriften mischen: ich bin ein Stück DIN inmitten von Vollkorn.

Lorem ipsum dolor <span class="din">ein Stück DIN</span> sit amet.
Lorem ipsum dolor <span class="vollkorn">ein Stück Vollkorn</span> sit amet.

nach oben

Schriftgröße, Zeilenhöhe, Abstände

Für die Website der Geschwister-Scholl-Schule Bensheim sind bereits alle Schriftgrößen definiert und müssen nicht mehr angepasst werden.

Ausgangspunkt für sämtliche vertikalen Maße – quasi die Rasterhöhe – ist die Schriftgröße eines normalen Absatzes, z.B. 16px im Web oder 14pt. Die Überschriften H1 bis H6 sind ein Vielfaches dieser Grundgröße, z.B. für H1: 16px * 2,5 = 40px

Die jeweilige Zeilenhöhe sollte das 1,5fache der Schriftgröße betragen, z.B. bei Fließtext also 24px bzw. 21pt. Bei größeren Schriftarten reicht auch das 1,25fache.

Die Abstände ergeben sich aus der jeweiligen Zeilenhöhe: so hat ein normaler Absatz unten einen Abstand von einer Zeilenhöhe (also 1,5fache Rasterhöhe) zum nächsten Element.

Headline H2

Headline H3

Headline H4

Headline H5

Headline H6

Dies ist ein normaler Absatz über die volle Breite. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Dies ist ein normaler Absatz, allerdings eingerückt durch pull quotes auf der linken Seite.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Und noch ein Absatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Und noch ein Absatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Und noch ein Absatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Und noch ein Absatz nach einem <hr>-Tag Trenner. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

nach oben

Farben

Die für die Geschwister-Scholl-Schule festgelegten Styles umfassen:

• 4 Schmuckfarben mit Türkis als Hauptfarbe,
• 4 Grauabstufungen sowie
• Schwarz und Weiss.

*Farbwerte in HEX, RGB, CMYK

nach oben

Layout

Spalten

Zitate

Beispiel für ein Zitat: Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

—Konfuzis

Text-/Bild-Kombinationen

Beispiel mit zwei Spalten und linksbündig ausgerichtetem Bild.

Schulleiterin

Dr. Angela Lüdtke
angela.luedtke@kreis-bergstrasse.de

Stellvertretender Schulleiter

Thomas Stricker
thomas.stricker@kreis-bergstrasse.de

Galerie

Schmale Trennlinien zwischen den Bildern greifen die Panele des Schulgebäudes auf.

nach oben

Links

Links werden automatisch mit icons belegt, abhängig vom Linkziel. Definiert sind u.a.: interne Links, externe Links, Bild-Dateien, Word-Dateien, Text-Dateien, pdf-Dateien, Excel-Dateien, PowerPoint-Dateien, Video-Dateien, zip-Dateien. Beispiele:

Interner Link
Externer Link
Link auf ein pdf
Link auf ein Bild

nach oben

Tabellen

Icons

Zur Darstellung von Icons wurde der Icon-Font „Line Awesome“ implementiert. Damit ist es ganz einfach, an jeder beliebigen Stelle im Text Icons einzufügen. Einfach unter icons8.de/line-awesome/ ein icon anklicken und den code-Schnipsel im WordPress-Editor über „HTML bearbeiten“ an der gewünschten Stelle einfügen.

<i class="la la-trophy"></i>

Die Größe der Icons kann mit den zusätzlichen Klassen la-2x, la-3x und la-4x verändert werden:

<i class="la la-2x la-trophy"></i>

Merke: „With great power comes great responsibility!“

nach oben

Hervorhebungen

Dies ist ein Text, in dem einzelne Wörter durch Pfeile hervorgehoben wurden. Dies geschieht durch die Vergabe von Klassen im Modus „Als HTML bearbeiten“. Folgende Klassen wurden definiert:

<span class="highlight">hervorgehoben</span>
<span class="warning">hervorgehoben</span>

Statt über die Vergabe von Klassen kann ein ähnlicher Effekt auch durch das Einfügen von Icons erreicht werden (s. oben Abschnitt Icons)

nach oben

Aufzählungen

Hervorhebungen sollten nicht für einfache Aufzählungen/Listen benutzt werden. Diese sind ebenfalls festgelegt:

nach oben

Print

Briefpapier

Das aktuell verwendete Briefpapier entspricht dem bei Flyeralarm bedruckten SOPORSET Premium Offset Papier von IGEPA.

nach oben