Gridsystem

Allgemein

Das Layout der Website beruht, wie jede gute Gestaltung, auf einem flexiblen, vertikalen Rastersystem. Je nach Inhaltstyp werden mal mehr, mal weniger Spalten genutzt.
Text: Lese-, Schau- und Konsultationsgrößen
Lesetexten steht grundsätzlich nur eine bestimmte maximale Breite zur Verfügung, die auf unsere Gewohnheiten aber vor allem auf optimalen Lesekomfort ausgerichtet ist.
Daneben gibt es Schaugrößen z.B. für Überschriften, die wegen der großen Buchstaben auch deutlich breiter als Lesetexte sein dürfen und dennoch als gut lesbar wahrgenommen werden.
Konsultationstexte sind für Menschen, die es genauer wissen wollen: die geringe Buchstabengröße sorgt dafür, dass viel Text auf kleinem Raum untergebracht werden kann.

Raster eine Spalte mit weißem Hintergrund, keine Kante

Rastertext

Für nahzu alle Content-Bausteine stehen weiße und hellgraue Hintergründe zur Verfügung. Damit können Sie neue inhaltliche Abschnitte auch visuell deutlicher voneinander abgrenzen. Haben Sie ein Unterthema inhaltlich abgeschlossen und möchten mit einem neuen oder anderen Aspekt ähnlichen Aufbaus auf der gleichen Seiten fortsetzen, nutzen Sie die unterschiedlichen Hintergründe.
Als Alternative zum Wechsel der Hintergrundfarbe können Sie auch inhaltlich passende, großformatige Fotos als Trenner einsetzen. Das setzt natürlich voraus, dass sich der neue Abschnitt für einen visuellen Start eignet und entsprechendes Foto- oder Bildmaterial zur Verfügung steht.

Einleitende Texte bis 1000 Zeichen und Inhalte, die längere Texte (+2000 Zeichen) umfassen, welche mit Zwischenüberschriften strukturiert und gegliedert werden können bzw. müssen. Bsp: Unternehmensstruktur

Raster eine Spalte mit hellgrauem Hintergrund, keine Kante

Rastertext

Für nahzu alle Content-Bausteine stehen weiße und hellgraue Hintergründe zur Verfügung. Damit können Sie neue inhaltliche Abschnitte auch visuell deutlicher voneinander abgrenzen. Haben Sie ein Unterthema inhaltlich abgeschlossen und möchten mit einem neuen oder anderen Aspekt ähnlichen Aufbaus auf der gleichen Seiten fortsetzen, nutzen Sie die unterschiedlichen Hintergründe.
Als Alternative zum Wechsel der Hintergrundfarbe können Sie auch inhaltlich passende, großformatige Fotos als Trenner einsetzen. Das setzt natürlich voraus, dass sich der neue Abschnitt für einen visuellen Start eignet und entsprechendes Foto- oder Bildmaterial zur Verfügung steht.

Einleitende Texte bis 1000 Zeichen und Inhalte, die längere Texte (+2000 Zeichen) umfassen, welche mit Zwischenüberschriften strukturiert und gegliedert werden können bzw. müssen. Bsp: Unternehmensstruktur

Raster eine Spalte mit weißem Hintergrund, hellgraue Kante

Rastertext

Weiß mit hellgrauer Kante, hellgrau mit weißer Kante, weiß mit grüner Kante, hellgrau mit grüner Kante, weiß mit dunkelgrauer Kante, hellgrau mit dunkelgrauer Kante
Das Corporate-Design-Element der Schräge steht in zahlreichen Varianten zur Verfügung, um in nahezu allen Kombinationen eingesetzt zu werden und damit allen Erfordernissen gerecht zu werden.
Die Kante schließt sich jeweils an ein vorangegangenes großflächiges Bild/Foto-Element an und setzt dieses im darauf folgenden Text-Content fort. In diesem Content-Element lassen sich Texte bis zu 900-1000 Zeichen platzieren. Für längere Texte nutzen Sie das 1-Spalte-Element ohne Kante, hier lassen sich auch weitere Untergliederungen besser integrieren.

Raster eine Spalte mit hellgrauem Hintergrund, weiße Kante

Rastertext

Weiß mit hellgrauer Kante, hellgrau mit weißer Kante, weiß mit grüner Kante, hellgrau mit grüner Kante, weiß mit dunkelgrauer Kante, hellgrau mit dunkelgrauer Kante
Das Corporate-Design-Element der Schräge steht in zahlreichen Varianten zur Verfügung, um in nahezu allen Kombinationen eingesetzt zu werden und damit allen Erfordernissen gerecht zu werden.
Die Kante schließt sich jeweils an ein vorangegangenes großflächiges Bild/Foto-Element an und setzt dieses im darauf folgenden Text-Content fort. In diesem Content-Element lassen sich Texte bis zu 900-1000 Zeichen platzieren. Für längere Texte nutzen Sie das 1-Spalte-Element ohne Kante, hier lassen sich auch weitere Untergliederungen besser integrieren.

Raster eine Spalte mit weißem Hintergrund, grüne Kante

Rastertext

Weiß mit hellgrauer Kante, hellgrau mit weißer Kante, weiß mit grüner Kante, hellgrau mit grüner Kante, weiß mit dunkelgrauer Kante, hellgrau mit dunkelgrauer Kante
Das Corporate-Design-Element der Schräge steht in zahlreichen Varianten zur Verfügung, um in nahezu allen Kombinationen eingesetzt zu werden und damit allen Erfordernissen gerecht zu werden.
Die Kante schließt sich jeweils an ein vorangegangenes großflächiges Bild/Foto-Element an und setzt dieses im darauf folgenden Text-Content fort. In diesem Content-Element lassen sich Texte bis zu 900-1000 Zeichen platzieren. Für längere Texte nutzen Sie das 1-Spalte-Element ohne Kante, hier lassen sich auch weitere Untergliederungen besser integrieren.

Raster eine Spalte mit hellgrauem Hintergrund, grüne Kante

Rastertext

Weiß mit hellgrauer Kante, hellgrau mit weißer Kante, weiß mit grüner Kante, hellgrau mit grüner Kante, weiß mit dunkelgrauer Kante, hellgrau mit dunkelgrauer Kante
Das Corporate-Design-Element der Schräge steht in zahlreichen Varianten zur Verfügung, um in nahezu allen Kombinationen eingesetzt zu werden und damit allen Erfordernissen gerecht zu werden.
Die Kante schließt sich jeweils an ein vorangegangenes großflächiges Bild/Foto-Element an und setzt dieses im darauf folgenden Text-Content fort. In diesem Content-Element lassen sich Texte bis zu 900-1000 Zeichen platzieren. Für längere Texte nutzen Sie das 1-Spalte-Element ohne Kante, hier lassen sich auch weitere Untergliederungen besser integrieren.

Raster eine Spalte mit weißem Hintergrund, dunkelgraue Kante

Rastertext

Weiß mit hellgrauer Kante, hellgrau mit weißer Kante, weiß mit grüner Kante, hellgrau mit grüner Kante, weiß mit dunkelgrauer Kante, hellgrau mit dunkelgrauer Kante
Das Corporate-Design-Element der Schräge steht in zahlreichen Varianten zur Verfügung, um in nahezu allen Kombinationen eingesetzt zu werden und damit allen Erfordernissen gerecht zu werden.
Die Kante schließt sich jeweils an ein vorangegangenes großflächiges Bild/Foto-Element an und setzt dieses im darauf folgenden Text-Content fort. In diesem Content-Element lassen sich Texte bis zu 900-1000 Zeichen platzieren. Für längere Texte nutzen Sie das 1-Spalte-Element ohne Kante, hier lassen sich auch weitere Untergliederungen besser integrieren.

Raster eine Spalte mit weißem Hintergrund, hellgraue Kante

Rastertext

Weiß mit hellgrauer Kante, hellgrau mit weißer Kante, weiß mit grüner Kante, hellgrau mit grüner Kante, weiß mit dunkelgrauer Kante, hellgrau mit dunkelgrauer Kante
Das Corporate-Design-Element der Schräge steht in zahlreichen Varianten zur Verfügung, um in nahezu allen Kombinationen eingesetzt zu werden und damit allen Erfordernissen gerecht zu werden.
Die Kante schließt sich jeweils an ein vorangegangenes großflächiges Bild/Foto-Element an und setzt dieses im darauf folgenden Text-Content fort. In diesem Content-Element lassen sich Texte bis zu 900-1000 Zeichen platzieren. Für längere Texte nutzen Sie das 1-Spalte-Element ohne Kante, hier lassen sich auch weitere Untergliederungen besser integrieren.

Raster zwei Spalten mit weißem Hintergrund, breit, keine Kante

Rastertext

Zwei knappe Texte mit bis zu je 500 Zeichen oder ein auf zwei gleichlange Spalten aufgeteilter mit bis zu insgesamt 1000 Zeichen lassen sich in diesem Content-Element unterbringen. Nutzen Sie sie als Intro für Seiten, die Content-Elemente über die gesamte Seitenbreite enthalten, wie z.B. bei Karriere & Ausbildung
Die Ausführung mit Kante kann und soll, wie bereits oben beschrieben, darüber angeordnete Bildinhalte aufgreifen bzw. textlich fortsetzen.

Rastertext

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. 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.

Raster zwei Spalten mit hellgrauem Hintergrund, breit, keine Kante

Rastertext

Zwei knappe Texte mit bis zu je 500 Zeichen oder ein auf zwei gleichlange Spalten aufgeteilter mit bis zu insgesamt 1000 Zeichen lassen sich in diesem Content-Element unterbringen. Nutzen Sie sie als Intro für Seiten, die Content-Elemente über die gesamte Seitenbreite enthalten, wie z.B. bei Karriere & Ausbildung
Die Ausführung mit Kante kann und soll, wie bereits oben beschrieben, darüber angeordnete Bildinhalte aufgreifen bzw. textlich fortsetzen.

Rastertext

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. 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.

Raster zwei Spalten mit weißem Hintergrund, schmal, keine Kante

Rastertext

Dieses Content-Element hat auf dem Desktop die gleich Breite wie der 1-Spalte-Text. Nutzen Sie, um längere Texte mit einer Zweiteilung (wo inhaltlich sinnvoll) aufzulockern. Sie können damit aber auch sehr kurze Einleitungen oder Teaser erstellen. Die jeweils verfügbare Kante zu weißem bzw. hellgrauem Hintergrund stellt wieder die Verbindung zum ggf. vorangegangenen Bildelement her.

Rastertext

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. 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.

Raster zwei Spalten mit hellgrauem Hintergrund, schmal, keine Kante

Rastertext

Dieses Content-Element hat auf dem Desktop die gleich Breite wie der 1-Spalte-Text. Nutzen Sie, um längere Texte mit einer Zweiteilung (wo inhaltlich sinnvoll) aufzulockern. Sie können damit aber auch sehr kurze Einleitungen oder Teaser erstellen. Die jeweils verfügbare Kante zu weißem bzw. hellgrauem Hintergrund stellt wieder die Verbindung zum ggf. vorangegangenen Bildelement her.

Rastertext

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. 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.

Raster zwei Spalten mit weißem Hintergrund, breit, hellgraue Kante

Rastertext

Dieses Content-Element hat auf dem Desktop die gleich Breite wie der 1-Spalte-Text. Nutzen Sie, um längere Texte mit einer Zweiteilung (wo inhaltlich sinnvoll) aufzulockern. Sie können damit aber auch sehr kurze Einleitungen oder Teaser erstellen. Die jeweils verfügbare Kante zu weißem bzw. hellgrauem Hintergrund stellt wieder die Verbindung zum ggf. vorangegangenen Bildelement her.

Rastertext

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. 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.

Raster zwei Spalten mit weißem Hintergrund, schmal, hellgraue Kante

Rastertext

Dieses Content-Element hat auf dem Desktop die gleich Breite wie der 1-Spalte-Text. Nutzen Sie, um längere Texte mit einer Zweiteilung (wo inhaltlich sinnvoll) aufzulockern. Sie können damit aber auch sehr kurze Einleitungen oder Teaser erstellen. Die jeweils verfügbare Kante zu weißem bzw. hellgrauem Hintergrund stellt wieder die Verbindung zum ggf. vorangegangenen Bildelement her.

Rastertext

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. 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.

Raster drei Spalten: Umgang und Einsatz

Dieses Element füllt den für Texte zur Verfügung stehenden Raum horizontal voll aus (Desktop). Nutzen Sie dieses Element für Teaser oder drei gleichberechtigte Inhalte.
Teaser haben optimalerweise lediglich 4-5 Zeilen um noch gut wahrgenommen zu werden – das sind in der Desktop-Version ca. 200 Zeichen je Spalte.
Zur Abgrenzung zu vorangegangenem Text bzw. zur Fortsetzung von Bildelementen steht dieser Content-Baustein auch wieder mit hellgrauer, weißer, grüner und dunkelgrauer Kante zur Verfügung.