Grundwissen: Website-Gestaltung

Vorab sollten Sie sich ein wenig Grundwissen zum Website-Baukasten aneignen, damit Ihnen die Entscheidungen im Gestaltungsprozess leichter fallen. Lesen Sie hier Informationen zu den auswählbaren Themes, nützliche Tipps zu Bildformaten, Empfehlungen zu passenden Schriftartkombinationen und Schriftgrößen sowie alles Wichtige zum Thema Komponenten.

Die 3 Themes

Im Baukasten stehen Ihnen aktuell drei Themes (Dark, bzw. Dunkel, Light, bzw. Hell, Custom) zur Auswahl, die alle unterschiedliche Aspekte vereinen. Zur Veranschaulichung können Sie hier einen Blick auf die unterschiedlichen Themes werfen. Das hilft Ihnen sicher bei der Festlegung für Ihre eigene Website.

In den beiden Themes Dark und Light sind die grundlegenden Farben bereits festgelegt. Das Dark-Theme wird von dunklen Farben, sprich Schwarztönen, dominiert. Das Light-Theme ist heller und erstrahlt in Weißtönen. Diese beiden Themes setzen auf einen klaren Kontrast von Schrift und Hintergründen. Alles ist für eine gute Lesbarkeit und Übersicht konzipiert. Mit diesen schlichten, zeitlosen Themes können Sie im Prinzip nicht daneben liegen.

Das Custom-Theme bietet mehr individuellen Spielraum und lässt sich nach Ihren Bedürfnissen gestalten, da weniger vorgegeben ist. Der Kreativität sind hier kaum Grenzen gesetzt, es lässt sich munter kombinieren. Hier liegt die Lesbarkeit und Übersicht der Website letzendlich in Ihren Händen und bedenken Sie den Mehraufwand durch zusätzliche Gestaltungsmöglichkeiten.

Bildformate

Im Website-Baukasten kommen unterschiedliche Bildformate zum Einsatz, je nach Einsatzort des Bildes. Damit die Bilddateien korrekt dargestellt werden, können Sie sich an die folgenden Vorgaben halten. So ist garantiert, dass immer genau der richtige Teil im Blickfeld der Betrachter steht.

Die Bildformate im Überblick

Einsatzbereich Min. Maße (px) Min. Maße (px) x2 Ausschnitt Safearea
Logo zentriert (1) 170 x 140 340 x 280 scale to fit Volle Auflösung
Logo linksbündig (1) 225 x 100 450 x 200 scale to fit Volle Auflösung
Titelbild Startseite 1920 x 940 3840 x 1880 crop Safearea
Titelbild Inhaltsseite 1920 x 450 3840 x 900 crop Safearea
Bild mit Text - landscape 470 x 248 940 x 496 crop Volle Auflösung
Bild mit Text - portrait 248 x 330 496 x 660 crop Volle Auflösung
Bild ohne Text - landscape 700 x 369 1400 x 737 crop Volle Auflösung
Bild ohne Text - portrait 525 x 700 1050 x 1400 crop Volle Auflösung
Bild - Full Width 1920 x 450 3840 x 900 crop Safearea
Hinweisfenster 570 x 300 1140 x 600 crop Volle Auflösung
2-spaltig - landscape 570 x 300 1140 x 600 crop Volle Auflösung
2-spaltig - portrait 525 x 700 1050 x 1400 crop Volle Auflösung
3-spaltig - landscape 370 x 230 760 x 400 crop Volle Auflösung
3-spaltig - portrait 340 x 453 680 x 906 crop Volle Auflösung
4-spaltig - landscape 285 x 150 570 x 300 crop Volle Auflösung
4-spaltig - portrait 270 x 360 540 x 720 crop Volle Auflösung
Galerie - Vorschaubild 970 x 604 1940 x 1208 crop Volle Auflösung
Speisekartenkategorie 370 x 198 740 x 396 crop Volle Auflösung
Speise 770 x 345 1540 x 690 crop Volle Auflösung
Aktuelles - Bild 770 x 405 1540 x 810 crop Volle Auflösung
Kontakt 370 x 230 740 x 460 crop Volle Auflösung
Galerie-Bilder Hoch-/Querformat Hoch-/Querformat Original (2) Volle Auflösung
Galerie-Detail Hoch-/Querformat Hoch-/Querformat Original (2) Volle Auflösung
Link 330 x 212 680 x 425 crop Volle Auflösung

(1): Immer mit Außenabstand anlegen. Der empfohlene Abstand liegt bei 15 px an jeder Seite. (Tatsächlich kann der nötige Abstand von Datei zu Datei variieren und die Angaben sind ohne Gewähr. Korrigieren Sie entsprechend nach, wenn die Darstellung nicht optimal erscheint.

(2): Die Datei wird automatisch auf eine Miniaturansicht skaliert.

Weitere Informationen zu den Begriffen crop und safearea finden Sie weiter unten.

Hier finden Sie eine grafische Übersicht zu den Bildformaten und können diese als Vorlage herunterladen:

Logo zentriert (Abstand blau markiert)

Logo linksbündig (Abstand blau markiert)

Titelbild Startseite (Safearea rot markiert)

Titelbild Inhaltsseite/Unterseite (Safearea rot markiert)

Bild mit Text - landscape

Bild mit Text - portrait

Bild ohne Text - landscape

Bild ohne Text - portrait

Bild - Full Width (Safearea rot markiert)

Hinweisfenster

2-spaltig - landscape

2-spaltig - portrait

3-spaltig - landscape

3-spaltig - portrait

4-spaltig - landscape

4-spaltig - portrait

Galerie - Vorschaubild

Speisekartenkategorie

Speise

Aktuelles - Bild

Kontakt

Link

Safearea

Als Safearea (deutsch: Schutzbereich) bezeichnet man den Bereich innerhalb einer Grafik, der, wenn diese auf einer Website zum Einsatz kommt, garantiert sichtbar und lesbar ist. Indem Sie sich also an die Vorgaben der Safearea halten, stellen Sie sicher, dass keine Informationen verloren gehen.

Hintergrund des Einsatzes der Safearea ist die Tatsache, dass Homepages auf vielen unterschiedlichen Endgeräten mit unterschiedlichen Auflösungen betrachtet werden, sodass überall eine andere Darstellung erfolgt. Die Safearea garantiert aber, dass die wesentlichen Informationen, die innerhalb des Bereichs liegen, immer im Fokus stehen und nicht abgeschnitten werden.

Safearea - Titelbild Startseite

Hier sehen Sie die Angaben zur Safeare für das Titelbild. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Sie sichergehen wollen, dass diese nicht verloren gehen.

Safearea - Bild (Full Width)

Hier sehen Sie die Angaben zur Safearea für das Titelbild, wenn Sie ein Bild mit voller Breite (Full Width) darstellen möchten. Nur im rot markierten Bereich dürfen primäre Bildinhalte und Texte platziert werden, wenn Sie sichergehen wollen, dass diese nicht verloren gehen.

Begriffserklärung: Ausschnitte

Als Cropping (deutsch: Abschneiden, Stutzen) wird das Beschneiden von Bildrändern zum Zwecke der Bildformatänderung bezeichnet. Dadurch wird verhindert, dass Ränder entstehen oder das Bild in irgendeiner Weise verzerrt werden muss.

Zur Veranschaulichung sehen Sie hier in grau dargestellt das Originalformat des Bildes. Der rot markierte Bereich ist die Zielformatierung, die durch das Cropping erreicht werden soll. Das Bild wird also auf volle Breite und Höhe skaliert.

Als scale to fit (deutsch: Skalierung nach Maß) wird die Erweiterung des Bildausschnitts bezeichnet, sodass kleinere Bildformate passend untergebracht werden können. Dadurch wird die Verzerrung und das Beschneiden eines Bildes vermieden.

Zur Veranschaulichung sehen Sie hier in grau (überlagert von rot) das Originalformat des Bildes. Der rot markierte Bereich ist der Bildausschnitt, der angezeigt wird. Das Originalformat des Bildes bleibt unberührt und wird in das gewünschte Format eingefügt. Dabei entstehen keine Verzerrungen oder Abschnitte an den Rändern.

Schriftarten - Empfohlene Kombinationen

Schriftgrößen

Die Schriftgrößen werden automatisch und dynamisch an das jeweilige Endgerät angepasst, um eine optimale Lesbarkeit und Übersicht zu garantieren. Sie müssen somit keine Schriftgrößen festlegen. Die folgenden Informationen dienen rein zur Veranschaulichung und zum Verständnis.

Bereich Schriftschnitt Desktop Tablet Mobil
H1 Bold 70 70 35
H2 Bold 35 35 25
H3 Bold 25 25 20
Fließtext Regular 16 16 15
Zusatztext Regular 14 14 12
Button Bold 16 16 16
Navigation (mobil) Bold - 40 30

Keine Vorlage

Wenn Sie keine Vorlage auswählen, wird der Inhalt schlicht textbasiert dargestellt und das Bild erscheint unter dem Text.

Aktionskarten

Wenn Sie die Vorlage Aktionskarten ausgewählt haben, wird der Inhalt automatisch generiert. Es werden alle aktiven Aktionskarten, abhängig der gesetzten Gültigkeit in den jeweiligen Karten, angezeigt. Gibt es mehr als eine Aktionskarte, werden die einzelnen Einträge als Kacheln angezeigt – inklusive des Gültigkeitszeitraums, sodass die Besucher der Website direkt den Überblick erhalten, welche Karte in welchem Zeitraum gültig ist.

Aktuelles

Wenn Sie die Vorlage Aktuelles ausgewählt haben, wird der Inhalt automatisch generiert. Es werden all Ihre Termine & Neuigkeiten präsentiert, außer Sie beschränken die Präsentation über die Angaben, dort können Sie Kategorien auswählen oder die Anzeige auf nur Termine, nur Neuigkeiten oder Termine und Neuigkeiten beschränken.

  • Die Übersicht wird in Form von kleinen Kacheln dargestellt
  • Termine & Neuigkeiten werden durch Icons unterschiedlich markiert
  • Der Einleitungstext wird aus der Beschreibung gezogen

Download

Wenn Sie die Vorlage Download ausgewählt haben, können Sie eine Datei bereitstellen, die von Ihren Besuchern heruntergeladen werden kann.

Mehrspaltig

Wenn Sie eine der mehrspaltigen Vorlagen auswählen, wird der eingegebene Text in der gewählten Anzahl der Spalten dargestellt und Sie können pro Spalte ein Bild festlegen.

  • Sie haben die Wahl zwischen zweispaltig, dreispaltig und vierspaltig
  • Es empfiehlt sich, für alle Spalten entweder ein Bild oder kein Bild festzulegen, damit die Spalten bündig und symmetrisch verlaufen
  • Wählen Sie bei der Bilddarstellung zwischen Querformat (landscape) oder Hochformat (portrait)

Galerie

Wenn Sie die Vorlage Galerie ausgewählt haben, wird der Inhalt automatisch generiert. Es werden all Ihre öffentlichen Galerien aufgezeigt, außer Sie beschränken die Präsentation über die Angaben.

  • Darstellung in einer Mosaikform
  • Alle Formate sind erlaubt
  • Die Bilder werden automatisch möglichst in einem Block dargestellt und sortiert
  • Detailansicht ist über das Anklicken des Bildes abrufbar (inkl. Titel und Beschreibung)

HTML

Wenn Sie die Vorlage HTML ausgewählt haben, können Sie HTML-Inhalte auf Ihrer Website einbinden.

  • Binden Sie bequem einen beliebigen HMTL-Inhalt in Ihre Website ein

Kontakt

Wenn Sie die Vorlage Kontaktformular ausgewählt haben, können Sie Ihren Besuchern ein Formular bereitstellen, über das Sie Rückmeldungen erhalten können. Zudem können Besucher den Newsletter abonnieren.

  • Darstellung ähnlich wie die allgemeine Kontaktseite (exkl. Standortkarte)
  • Felder sind individuell auswählbar
  • Möglichkeit zum Newsletter-Abo

Wenn Sie die Vorlage Link ausgewählt haben, können Sie auf weiterführende, externe Seiten verlinken. Ihre Besucher landen dann auf der gewünschten Seite, wenn Sie den Link anklicken.

  • Die verschiedenen Linkarten werden durch unterschiedliche Icons dargestellt

Mittagstisch

Wenn Sie die Vorlage Mittagstisch ausgewählt haben, wird der Inhalt automatisch generiert. Es werden kurze Vorschauen der Speisekarten im Kartenordner Mittagstisch angezeigt.

Störer

Wenn Sie die Vorlage Störer ausgewählt haben, können Sie eine Anzeige anschalten, die den Besucher der Seite "stört". Mit Text und Bild können Sie so auf etwas aufmerksam machen, dass Ihre Besucher auf keinen Fall verpassen dürfen.

Text mit Bild

Wenn Sie die Vorlage Text mit Bild links oder Text mit Bild rechts ausgewählt haben, können Sie einen Text verfassen und daneben ein passendes Bild platzieren.

  • Das Bild erscheint immer bündig auf der angegebenen Seite
  • Pflegen Sie nur den Text oder nur das Bild, wird der Inhalt zentral ausgegeben
  • Wählen Sie bei der Bilddarstellung zwischen Querformat (landscape) oder Hochformat (portrait)

Umfrage

Wenn Sie die Vorlage Umfrage ausgewählt haben, wird der Inhalt automatisch generiert. Ihre Besucher können an einer bereits erstellten Umfrage teilnehmen. Diese wählen Sie unter Angaben aus.

  • Optimierte Darstellung der Umbrüche
  • Die Seitenzahlen werden farbig dargestellt
  • Farbe der Eingabefelder entspricht jeweils der nicht genutzten Hintergrundfarbe (Corporate Design > Hintergrund 1 oder 2)
  • Captchas arbeiten unsichtbar im Hintergrund

Speisekarten & Vorschau Karte

Wenn Sie die Vorlage Vorschau Karte ausgewählt haben, wird der Inhalt automatisch generiert. Es wird speziell eine Karte präsentiert, die Sie unter Angaben auswählen.

  • Kategorien (1. Ebene) werden per Kachel dargestellt
  • Bilder werden nur dargestellt, wenn alle Kategorien Bilder haben (gilt nur für 1. Ebene)
  • Nach Auswahl der Kategorie, lässt sich über die Reiter die Kategorie wechseln
  • Hervorgehobene Rezepte werden ohne Bild dargestellt (farbig markiert)
  • Rezeptbilder können manuell geöffnet werden

YouTube-Video

Wenn Sie die Vorlage YouTube Video auswählen, können Sie einfach und bequem ein YouTube-Video direkt auf Ihrer Website einbetten.

Sämtliche Formulare und Umfragen sind mit einem CAPTCHA versehen, das unsichtbar im Hintergrund arbeitet, um den Schutz vor Spam und unbefugten Zugriff zu erhöhen.


Hier finden Sie weitere Visualisierungen, Beispiele und Tipps zum Website-Baukasten: Demoseite - Website-Baukasten

Und hier finden Sie unseren Quick Guide zum Thema Website & Digital Signage: gn-quick-guide-website-de.pdf

Die Informationen sind allgemeiner Art und stellen keine Rechtsberatung dar. Das Supportportal erhebt keinen Anspruch auf Vollständigkeit. Änderungen bleiben ohne Vorankündigung jederzeit vorbehalten. Es wird an dieser Stelle darauf hingewiesen, dass die ausschließliche Verwendung der männlichen Form geschlechtsunabhängig verstanden werden soll.