Hero-Slider: Stimmungsvoll in Inhalte eintauchen

Mit einem großen, charakteristischen und stimmungsvollen Bild tauchen Sie sofort in  entsprechende Themen ein. Der Hero-Slider kann mehrere Fotos jeweils mit individueller Überschrift und einzeln verlinkt darstellen. Wir empfehlen, den Hero-Slider behutsam und wohlüberlegt einzusetzen. Nutzen Sie aus Gründen der Ladezeit und Performanz nie mehr als maximal 4 Fotos.

Section Overview: Übersicht und Navigation von Seitenabnschitten

Hat eine Seite viele Sektionen, so kann eine Übersicht der Sektionen inkl. Sprungmarken eingesetzt werden.

Image-Slider: Stimmungen erzeugen

Im Gegensatz zu Abbildungen im Textfluss, können hier Image-wirksame Fotos platziert werden. Das Slide-Element erlaubt es, mehrere Motive zu kleinen Stories zusammenzufügen. Sind mehrere Fotos vorgesehen, sollten sie die gleichen Abmessungen aufweisen, um einen ungestörten, hamronischen Bilderfluss herzustellen, bzw. das Verspringen der Motive zu vermeiden.

Nutzen Sie den Image-Slider um emotionale Eindrücke zu schaffen.

ImageTeaser: Übersicht schaffen

Image-Teaser werden im allgemeinen automatisch erzeugt und angeordnet, zum Beispiel bei der Übersichts-Darstellung von Immobilien.

Nutzen Sie dieses Element nur dann händisch, wenn Sie eine nicht zu große Menge von gleichartigen, eher visuell geprägten Inhalten haben, zu denen Sie übersichtlich verlinken wollen.

Key Facts: Informationen greifbar machen

Beeindruckende Leistungen oder Eigenschaften lassen sich gut in Zahlen darstellen. Verwenden Sie stets mindestens 2 Zahlen-Sets. Jede Zahl muss von einem Begriff ergänzt werden, für den die Zahl steht.

Sticky Wallpaper: beeindruckende Fotos

Normalerweise schiebt sich beim Scrollen der gesamte Inhalt gleichmäßig durch den Browser. Beim Understitial tut sich eine Lücke auf, in der sich überraschend ein stehendes Bild offenbart. Wegen dieses ungewöhnlichen Verhaltens kommt den so integrierten Fotografien eine im doppelten Sinn beeindruckende Wirkung zu. Setzen Sie dieses Inhalts-Element sparsam ein, damit der Effekt nicht abnutzt, etwa in der Quartiersdarstellung.

Teaserslider: auf Quartiere aufmerksam machen

Mit einem großen Fotos-Slider und knappem, einleitenden Text können Sie aufmerksamkeitsstark Quartiere oder andere bildlastige Inhalte anteasern. Die Textfläche können Sie weiß, grau oder grün einfärben, um bei mehreren aufeinanderfolgenden Teasern Abwechslung hineinzubringen.

SectionImage: Eine Seite in Abschnitte gliedern

Mit einem großflächigen Foto, in das eine Überschrift eingebettet ist, können Sie Seiten elegant in Abschnitte gliedern. Wichtig ist hier, dass Sie Fotos wählen, die charakteristisch und prägend für den folgenden Inhalt sind, um bei Besucher einen stimmigen Eindruck herzustellen. Die Überschriften können der Abwechslung halber links- bzw. rechtsbündig ausgerichtet werden und grün bzw. grau eingefärbt werden.

Categoryheadline: Unter-Abschnitte kennzeichnen

Nach den SectionImages, die umfassendere Abschnitte einleiten, könnnen Sie auch innerhalb dieser inhaltlichen Einheiten mit Kategorie-Überschriften weitere Untergliederungen vornehmen. Alternativ lassen sie sich auch nutzen, um Abschnitte, für die keine Fotografien vorliegen, oder für die es sich nicht anbietet, als einleitende Abschnitts-Titel einsetzen – Bsp. Ansprechpartner, die den Standorten zugeordnet sind. Farben: Grün und Grau.

LocationMap: Verortungen

Um Standorte, die Lage von Bauprojekten, Anfahrtsskizzen oder ähnliches darzustellen, können Sie Karten einsetzen. Farbige Fähnchen können via Geo-Koordinaten als Marker für eine konkrete Position gesetzt werden.
Um sich gestalterisch optimal in verschiedenen Kontexten einzufügen, können sie die Karte solo und mit einer hellgrauen, abgeschrägten Banderole darstellen lassen.

Struktur Diagramm: Unternehmensstruktur visualisieren

Dieses Content-Element ist letztlich nur an einer Stelle der Site sinnvoll eingesetzt: In der Unternehmensdarstellung. Die Animationen sind an Scroll-Events gekoppelt und machen die verschiedenem Zusammenhänge und Einflüsse sichtbar.

FAQ: Dialog visualisieren

Wie in einem Messenger-Chat können Sie Dialoge und dialog-ähnliche Situationen, z.B. FAQs, darstellen. Dabei wechseln sich je ein hellgrünes (Frage, Impuls) und hellgraues (Antwort, Klärung) Element ab.

Timeline: Abläufe visualisieren

An einem Zeitstrahl können Sie Ereignisse mit Jahreszahlen, Fotos bzw. Illustrationen und kurzen Texten visualisieren. Wir haben das schon einmal für die Geschichte der Adlershorst Baugenossenschaft eG durchgeführt. Denkbar ist jedoch auch, dass Bauprojekte mit den geplanten Milestones entsprechend dargestellt werden, um bei Interessenten ein besseres Gefühl für zeitliche Abläufe hervorzurufen.