Header

Mit Header bezeichnen wir den oberen Teil einer Webseite. Größe und Art des Headerbildes kann bei der Start- und den Folgeseiten gleich oder unterschiedlich sein. Das wird bei der Designfestlegung mit Ihnen abgestimmt, genauso wie Anodnung von Logo und allgemeinen Kurzinfos sowie der obersten Navigationsebene.

In responsiven Layouts, die für alle vorkommenden Geräte passende Ausgaben gewährleisten müssen, wird immer die Größe und der Zuschnitt der Bilder automatisch angepasst. Bei der nachfolgenden Beschreibung der verschiedenen Header finden Sie Angaben, welches Bildverhalten bei diiesem Header-Typ zu erwarten ist.
 

Typ Standard oder Credits
Headerbild standard schmal standard
Headerbild standard volle Bildschirmbreite standard
Headerbild bildschirmfüllend standard
Headerbildslider 3
Besondere Slider Geometrie 5
Veränderbarer Einklinkertext im Bild 1
Link-/Aktionseinklinker mit Text- und Linkeingabe 1
Informationseinklinker im Headerbild 2
Logo im Headerbild oder überlappend 2
Hintergrundsignet im Headerbild 2

Beispiele

Headerbild standard schmal

Das Headerbild standard schmal belegt üblicherweise etwa 20 bis 45% der Bildschirmhöhe und ist etwa so breit wie die Seiteninhalte.

Merkmale:

  • Gut geeignet, wenn die Sichtbarkeit der ersten Content-Bausteine wie z.B. ein Einstiegstext wichtig ist
  • Der Bildschirmausschnitt wird bei Größenveränderung des Anzeigefensters nicht verändert
  • Bestmögliche Kontrolle über den sichtbaren Bildausschnitt
  • Bei bestimmten Anzeigefenstern kann der Browserhintergrund links und rechts vom Bild angezeigt werden

Headerbild standard volle Bildschirmbreite

Das Headerbild standard volle Bildschirmbreite belegt üblicherweise etwa 20 bis 45% der Bildschirmhöhe und dehnt sich bis zur jeweiligen Breite des Anzeigefensters aus.

Merkmale:

  • Gut geeignet, wenn der Bildeindruck hervorgehoben werden soll.
  • Der Bildschirmausschnitt wird sich bei Größenveränderung des Anzeigefensters verändern. 
  • Entweder nehmen Bilder bei großen Bildschirmen viel Höhe ein, oder es erfolgt ein automatisches Beschneiden oben und unten.

Headerbild bildschirmfüllend

Das bildschirmfüllende Headerbild ist das Mittel der Wahl, wenn das Bild oder die Bilderfolge einen besonders tiefen Eindruck erzeugen soll.

Merkmale:

  • Gut geeignet für den Darstellung von Emotion, Bewegung, Archtektur und Produkten.
  • Voraussetzung sind hervorragende Fotos. 
  • Wahlweise auch geeignet für eine typografische oder graphische Darstellung.


Anmerkung:
Die nachfolgende Anordnung von sechs Beispielen wurde mit einem 2-Spalter Content-Baustein begonnen. In jede der beiden Spalten wurde ein 3-Spalter eingefügt. Ein gutes Beispiel für die durch Verschachtelung von Content-Bausteinen erreichbare Flexibilität. 

Emotion bei den German Boys & Girls Open. Im Bild als Zusatz ein Einklinker mit aktueller Nachricht und Social Media und Service-Links.

Nutzung der Vollfläche für eine minimalistische typographische Gestaltung für das Verlagshaus Klotz.

Ambiente inszeniert im Gut Kaden. In diesem Beispiel auch zu sehen ist ein ins Bild integriertes Logo, ein veränder­barer Einklinker­text im Bild und ein Informations­einklinker im Headerbild.

"Personality" zeigen speziell bei persön­lichen Dienst­leistungs­angeboten hier gezeigt im Beispiel der Neuro­biologin und Coach Dr. Lenz-Böhme.

Eine weitgehend als Bildergeschichte erzählte Story beim Gastro-Beispiel vom Lindner Resort Weimarer Land.

Minimalistische Navigation mit klar kommunizierter Geschäfts­bereichs­übersicht bei diesem Beispiel von John's World.

Headerbildslider

Headerbildslider helfen dabei, dem Leser einen breiter angelegten Überblick über Produkte und Dienstleistungen zu geben oder eine Geschichte zu erzählen. Der Bildwechsel erfolgt durch Überblenden oder durch Hineinfahren von Oben, Rechts oder durch die Mitte. Headerslider können Sie in folgenden Ausprägungen erhalten:

  • Bilderwechsel wird vom Benutzer ausgelöst.
  • Bildwechsel erfolgt automatisch.
  • Bildwechsel erfolgt automatisch, der Leser kann den Bildwechsel früher auslösen.

Ein automatischer Bilderslider mit einer besonderen Geometrie bel All-Electro. Live anschauen ⟩

Ein automatischer Bilderslider mit darüber liegendem statischen Informationseinklinker und Logo im Headerbild vom GC Jersbek. Live anschauen ⟩

Ein automatischer Bilderslider bei der Künstlerin Sibylle Burrer mit veränderbarerem Einklinkertext und einem Link-/Aktionseinklinker. Live anschauen ⟩

Besondere Slider Geometrie

Mit besonderen Slider Geometrien können eindrucksvolle spezielle Effekte erzielt werden. Für die Darstellung auf allen Medienformaten sind in komplexe dynamische Umrechnungen erforderlich. Einen richtigen Eindruck bekommen Sie wenn Sie die genannten Links anklicken und sich die Animationen live ansehen und dann auch noch die Größe des Darstellungsfensters verändern.

Beispiel einer dynamischen Seitenanimation mit Texteinblendungen von der NWSG. Live ansehen ⟩

Beispiel einer speziellen Geometrie mit frei veränderbaren Texteinblendungen bei Enorm in Form. Live ansehen

Veränderbarer Einklinkertext im Bild

Schnell reagieren auf Veränderungen, Aktionen und Events mit Bildern und Text unterstützen oder neue Produkte oder Dienstleistungen schnell und einfach bekannt machen? Diese und viele andere Aufgaben werden mit dem Content-Baustein Veränderbarer Einklinkertext für Sie zur Minutensache.

Link-/Aktionseinklinker mit Text- und Linkeingabe

Hinweise auf eine Veranstaltung, ein neues Produkt promoten, deutlich auf eine Änderung hinweisen ..., die Nutzungsmöglichkeiten eines Link-/Aktionseinklinkers sind so vielfältig wie Ihre Anforderungen. 

Informationseinklinker im Headerbild

Fast überall unverzichtbar im Golfgeschäft, in Unternehmen eine noch nicht so oft genutzte Funktion wird vom Content-Baustein Informationseinklinker ermöglicht. Im Golfgeschäft werden Platzbelegungen, Eventhinweise und Zustandsmeldungen im Sichtfeld für Mitglieder und Vielfachbesucher bereitgestellt während im Hintergrund attraktive Bilder Neubesucher adressieren können. Der Informationseinklinker im Wirtschaftsumfeld kann unter anderem für Waren- und Dienstleistungsangebote, Sofortkäufe oder Sofortbuchungen genutzt werden. 

Logo im Headerbild oder überlappend

Logos können in vielfältiger Weise mit den Bildern im Header verbunden werden, um eine harmonische Einbindung zu erreichen. 

Hintergrundsignet im Headerbild

Mit Hintergrundsignets können Bilder im Header ausgewechselt werden, ohne dass die gewünschten Signets im Bild eingebaut werden müssen.

GKMB GmbH

Lutherstraße 1 · 75196 Remchingen-Nöttingen 
Telefon: 07232 372355 · Fax: 07232 372357
info (at) gkmb.de

Schreiben Sie uns eine Nachricht:

Kontaktformular

Kontaktformular
captcha