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.

Slider Überschrift 2

Slider Überschrift 3

Section Overview: Übersicht und Navigation von Seitenabnschitten

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

Typische Seiteninhalte

Typische Seiteninhalte sind Überschriften, Texte und Medien wie YouTube Videos und Bilder. Die typischen Seiteninhalte müssen immer in einem Grid-Element integriert werden.

Text & Medien

Text & Medien: Sachinformationen schlüssig darstellen

Die Elemente „Text & Medien“ sind auf eine optimale Lesbarkeit für längere Textabschnitte angelegt, weshalb sie vor allem für Nachrichten und Mengentexte (Protokolle, Impressum u.ä.) eingesetzt werden sollen.

Abbildungen im Textfluss sollen informatorischer bzw. rationaler Natur sein, d.h. sie unterstützen Sachaussagen visuell.
Fotos und Infografiken passen sich mit einer Breite von ca. 800 Pixeln (und jeweils motivbedingter Höhe) harmonisch in den Textfluss ein

Die Darstellung der Medien können vielfältig konfiguriert werden. Medien können über oder unter dem Texte positioniert werden. Es kann zudem angegeben werden, ob die Medien linksbündig, rechtsbündig oder zentriert dargestellt werden. Auch die Anzahl der Spalten für die Medien kann definiert werden.

Text mit mehreren Bildern: Informationen visuell unterstützen

Sie können auch mehrere Bilder nebeneinander anordnen, etwa wenn Sie zwei Personen abbilden möchten, über die zwar im Zusammenhang berichtet wird, für die jedoch kein gemeinsames Foto vorliegt.

Text mit zentrierten Bildern

Auch wenn es technisch möglich ist, sollten Bilder möglichst nicht zentriert werden.

Text mit Bild rechts: Dokumentation, Information

Gelegentlich liegt für Artikel kein größenmäßig ausreichendes Bildmaterial vor, zB wenn von Personen nur ein Handyfoto zur Verfügung steht. Skalieren Sie bitte keine ungenügend aufgelösten Fotos über die gesamte Breite des Inhalts, sondern platzieren Sie sie rechtsbündig. Andernfalls erzielen Sie einen unprofessionellen Eindruck, der das Gesamtbild der Website stört und somit das Image untergräbt.

Text mit Video: O-Töne und Dokumentation

YouTube und Vimeo Videos können direkt als Text & Media Elemente eingebunden werden.

Für im Text eingebettete Videos gilt gleiches wie für Fotos: Sie fügen sich harmonisch in den Textfluss ein.

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.

Image Teaser

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.

5.269

Wohnungen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.

287.425 m²

Wohnfläche

At vero eos et accusam et justo duo dolores et ea rebum.

8.786

Mitglieder

Relom lodor sit amet nunc aquaeduct in papam jubilate est rex tremendae

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.

Wohnen, wo jeder 
gern lebt.

Lorem ipsum dolor sit amet nunc habemus ad tritium et corda sursum interludit omnia Rex tremendae agnus dei pro toto et trigeminus audit posant

mehr erfahren

Stadtquartier Bahnhofstraße

Heinestraße Wedel

Wohnen, wo jeder 
gern lebt.

Lorem ipsum dolor sit amet nunc habemus ad tritium et corda sursum interludit omnia Rex tremendae agnus dei pro toto et trigeminus audit posant

mehr erfahren

Stadtquartier Bahnhofstraße

Heinestraße Wedel

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.

Sectionimage grün links ausgerichtet

Sectionimage dunkelgrau rechts ausgerichtet

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.

Kategorie Überschrift grün

Kategorie Überschrift dunkelgrau

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.

Immobilien GmbH
• Gewinn­abführung
• Tochter von
• Geschäfts­besorgung
• vorrangige Auftrags­vergabe Handwerker
Baugenossenschaft eG
Baugenossenschaft eG
• Darlehens­geber
• Bauträger
• Enkeltochter von
Baukontor GmbH
Baukontor GmbH
• Tochter von
• Vermarktet Neubauprojekte
• Übernimmt Ver­waltung für neue Eigen­tümer
• Geschäfts­besorgung
Immobilien GmbH
Immobilien GmbH2002
Baugenossenschaft eG1948
Baukontor GmbH2012
• Geschäfts­besorgung
• vorrangige Auftrags­vergabe Handwerker
• Gewinn­abführung
• Tochter von
• Darlehens­geber
• Bauträger
• Enkeltochter von
• Tochter von
• Vermarktet Neubauprojekte
• Übernimmt Ver­waltung für neue Eigen­tümer
• Geschäfts­besorgung

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.

Das ist die erste Frage.

Das ist die erste Antwort mit Link.

Das ist die zweite Frage?

Hier kommt die dritte Antwort. Dieses Antwort ist etwas länger. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.

Und hier eine etwas längere Frage. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum?

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.

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.

1948

Initialer Timeline Text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.

1950

Erstes Timeline Element mit Jahr und Bild.

Zweites Timeline Element ohne Jahresangabe.

1960

Drittes Timeline Element mit Jahresangabe, ohne Bild. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.