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.
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.
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.
• Tochter von
• vorrangige Auftragsvergabe Handwerker
• Enkeltochter von
• Übernimmt Verwaltung für neue Eigentümer
• Geschäftsbesorgung
• vorrangige Auftragsvergabe Handwerker
• Tochter von
• Enkeltochter von
• Übernimmt Verwaltung für neue Eigentümer
• Geschäftsbesorgung
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.