Startseite

Die Startseite ist eine Teaserseite. Die dichte Folge von unterschiedlichen Elementen ist einzigartig und hier sinnvoll, um viele kleine Verweise auf Informationen darstellen zu können.

Die dargestellte Seite soll als Grundlage für die Umsetzung der Startseite dienen. Der extreme Aufbau dieser Seite ist aber kein Vorbild für die Umsetzung von Informationsseiten.

Struktur der Seite

Bild-Slider

  • steht immer im Inhaltsbereich ganz oben
  • informiert über wichtige Neuigkeiten und wird immer mit Bild kombiniert
  • Die Bereichsfarbe wird thematisch passend gewählt

mehr zu Headerbild / Slider

HWK_BAS_SCH_Manual_S4_Grafik1

Option: Vollbild-Slider

  • für Neuigkeiten mit werblichen Charakter
  • nur mit geeignetem Bildmaterial zu verwenden, dass im linken Bereich ruhig und dunkel genug ist

mehr zu Headerbild / Slider

HWK_BAS_SCH_Manual_S4_Grafik2

1. Schnelleinstieg

  • Liste mit aktuell relevanten Links zu Unterseiten
  • kurzer Erläuterungstext möglich
  • reduzierte Anzeige in der Smartphone-Ansicht

2. Kontaktinfo

  • kompakte Liste mit direkten Kontaktmöglichkeiten
  • Handwerker-Login zum internen Bereich
HWK_BAS_SCH_Manual_S4_Grafik3

Pressebereich

  • aktuelle Pressemitteillungen
  • optionale blaue Hinterlegung, um den Bereich von den anderen Themen abzugrenzen
HWK_BAS_SCH_Manual_S5_Grafik1

Werbebanner

  • Banner werden in einem horizontalen Format in den Inhalt integriert
HWK_BAS_SCH_Manual_S5_Grafik2.1

Weitere Themen

  • Im unteren Bereich der Startseite können variabel weitere Inhalte platziert werden: Linklisten, Termine, Ankündigungen …
HWK_BAS_SCH_Manual_S5_Grafik3

Partnerlogos

  • können im Inhalt in einer eigenen Zeile integriert werden
  • optionale blaue Hinterlegung, um den Bereich von den anderen Themen abzugrenzen
HWK_BAS_SCH_Manual_S5_Grafik4

Headerbild / Slider

Der Einsatz von großen Bildern im Header / Slider erfordert bereits bei der Auswahl des Fotos oder der Produktion des Bildes eine gute Planung.

Hinweis
Mehr als 1–3 Bilder werden in einem Slider in der Regel nicht wahrgenommen, da die Verweildauer des Besuchers auf der Startseite zu kurz ist.

Geeignete Bildmotive

Sie benötigen ein Bildmotiv, dessen Motiv-Schwerpunkt in der Mitte liegt. Rechts und links muss das Bild Spielraum bieten für das Responsive-Verhalten von kleinen und großen Screens. Liegt das Motiv sehr weit an den Rändern, kann es bei großen Auflösungen abgeschnitten werden.

example_slider_image_center

Fokuspunkt und Ausrichtung

Viele Systeme unterstützen außerdem die Kontrolle der Ausrichtung des Bildes bei der Veränderung der Browserbreite. Lassen Sie sich hierfür von erfahrenen Mitarbeitern die Funktions- und Wirkungsweise erklären.

Zum besseren Verständnis

Schauen Sie sich auch einmal Slider von anderen Handwerkskammern an und verändern Sie die Größe des Browserfenster – so wird das Responsive-Verhalten nachvollziehbar.

Fokuspunkt - responsive

Für Fotografen

Es gibt detaillierte Informationen, was beim Shooting für den Slider zu beachten ist.

Fotografenbriefing

Bildbeschriftung

Die Regel:
Bildbeschriftung auf Farbfläche

Damit das Bildmotiv nicht verdeckt und die Schrift gut lesbar ist, steht die Farbfläche zur Verfügung. Sie kann in der Bereichsfarbe passend zum Thema gewählt werden oder sie ist im allgemeinen Blau gehalten.

Bitte beachten Sie
Headline max. 2 – 3 Zeilen
Einführungstext max. 3 – 4 Zeilen
zzgl. Link

HWK_BAS_SCH_Manual_S4_Grafik1

Die Ausnahme:
Bildbeschriftung auf Motiv

Eine Beschriftung mit Headline und Einführungssatz auf dem Bild ist nur dann möglich, wenn das Motiv im linken Bereich den Platz bietet ohne das Motiv zu verdecken und wenn der Hell/Dunkel-Kontrast ausreichend ist. Diese Option ist daher die Ausnahme.

Bitte beachten Sie
Headline: 2 Zeilen, maximal 13 Zeichen pro Zeile
Einführungstext: max. 3 Zeilen
zzgl. Link

HWK_BAS_SCH_Manual_S4_Grafik2

Don’ts – so bitte nicht!

Die folgenden Beispiele sollten vermieden werden.

Slider-Text zu lang

Dont's Slider zu viel Text

Auflösung des Slider-Bildes zu gering, daher pixelig

Dont's Sliderbild zu klein

Slider-Text auf Bild unleserlich

Slider-Bild: Zoom zu groß

Dont's Slider Text unlesbar

Slider-Bild: Screenshot von einer Anzeige

Hinweis
Generell sollte der Slider in allen Browsergrößen überprüft werden. In einer Größe mag der Ausschnitt des Bildes richtig wirken, in einer anderen evtl. unpassend.

Don'ts Slider Bild aus Anzeige