Das ist ein Pop-up (H4)

Pop-ups sind optimal für temporäre Hinweise. Da sie einen Störer darstellen, sollten sie, bzw. Ihr Sinn sehr prägnant und kurz und so schnell erfassbar sein.

Im Bestfall beschreibt eine Headline hier den gesamten Inhalt.

SEITENTITEL ALS OVERLAY (h1)

Hintergrund-Transp. 75%-100% (h2)

 

INTRO HEADLINE (h3)

Intro Subheadline (h4)

Der Intro-Text kann größer als der Standard-Text gestaltet werden. (Hier: medium)

Der Zeilenlauf für Texte einer Website sollte relativ kurz sein. (max. 80 Zeichen)

Zentriert ausgerichteter Text sollte nur knappe Statements kommunizieren und nie für längere Fließtexte verwendet werden, da springende Zeilenanfänge Text erschwert lesbar und so erfassbar machen.

Die Default Schriftgröße sollte optimalerweise 16px, nicht aber weniger als 14px betragen. Dies ist mitunter abhängig von der Schriftart und deren Lesbarkeit.

Die Zeilenhöhe sollte zwischen 1.5 und optimalerweise 1.7 betragen.

In jedem Fall sollte sie über die gesamte Website gleich sein. Die Auszeichnungsfarbe für interaktive Elemente sollte ausschließlich in interaktiven Elementen und nicht anderweitig verwendet werden.

Andere Farben und auch Farbschattierungen sollten daher dann nicht bei interaktiven Elementen verwendet werden.

Hinweise, Fußnoten, Labels o.ä. können auch in einem zusätzlichen, Klein-Format verfasst werden.

Text sollte immer mit ausreichend Kontrast auf seinem Hintergrund stehen.

Text auf Bild ist meistens suboptimal, wenn das Bild nicht bewusst als Hintergrund für Text aufbereitet wurde.

Insgesamt sollten nur wenige unterschiedliche Formatierungen verwendet werden.

So kann sich der Nutzer schnell orientieren und wichtiges von unwichtigem Filtern.

FARBIGE HINTERGRÜNDE (H3)

Die Schriftfarbe muss immer ausreichend Kontrast zum Hintergrund haben. Für gewöhnlich gibt es eine helle und eine dunkle Standard-Schriftfarbe. Hintergrundfarben sollten die Auszeichnungsfarbe klar hervortreten lassen.

Die Schriftfarbe muss immer ausreichend Kontrast zum Hintergrund haben. Für gewöhnlich gibt es eine helle und eine dunkle Standard-Schriftfarbe. Hintergrundfarben sollten die Auszeichnungsfarbe klar hervortreten lassen.

2017-487849322_Spielgeraete_Garten_MS.jpg

Die Schriftfarbe muss immer ausreichend Kontrast zum Hintergrund haben. Hintergrundfarben sollten die Auszeichnungsfarbe klar hervortreten lassen. Fotos und realistische Texturen sollten ausreichend dunkel oder hell sein.

BILD & TEXT (h3)

2018_GI-603183876_Paneel_Wand_Decke_MS.jpg

Bild neben Text (h4)

Paragraph Default (16px) / Font size 16px, Line-height: 1.7 (min 1.5)

Längere Fließtexte sollten klar gegliederte Absätze aufweisen.

Nutzer scannen Websites eher als zu lesen, Fließtexte sollten daher eher knapp als zu lang sein. Schmale Textblöcke helfen bei der Lesbarkeit.

Bild neben Text (h4)

Paragraph Default (16px) / Font size 16px, Line-height: 1.7 (min 1.5)

Längere Fließtexte sollten klar gegliederte Absätze aufweisen.

Nutzer scannen Websites eher als zu lesen, Fließtexte sollten daher eher knapp als zu lang sein. Schmale Textblöcke helfen bei der Lesbarkeit.

2018_GI-603183876_Paneel_Wand_Decke_MS.jpg
Spalten Headline (h5)

Spalten sind dann optimal, wenn mehrere Inhaltsblöcke auf gleicher Ebene gesehen werden sollen.

Spalten Headline (h5)

Längere Texte als wenige Zeilen sollten immer linksbündig und nicht zentriert ausgerichtet werden.

Spalten Headline (h5)

Die Spalten-Inhalte sollten in etwa die gleiche Länge aufweisen um ein ausgeglichenes Erscheinungsbild zu erhalten.

Formatierung von Listen (h4)

  • Listen als Stichpunkte formulieren
  • Listen-Eintrags-Abstände sollten größer sein als der Zeilenabstand damit die einzelnen Punkte erfassbar werden
  • Listen-Text sollte in gleicher Text-Größe wie der dazugehöriger Paragraph-Text sein
  • Listen niemals zentrieren: Auge springt, schlecht erfassbar

VOLLE BREITE (H3)

Der Sprung von mittigem „boxed“ Inhalt zu einer Section mit voller Breite stellt visuell einen Bruch dar, der einen Einschub oder ein neues, eigenes Thema anreisst.

Paragraph headline (H4)

Paragraph Default (16px) 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.

Paragraph headline (H4)

Paragraph Default (16px) 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.

Paragraph headline (H4)

Paragraph Default (16px) 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.

Multiboxen – einfarbiger Hintergrund (H2)

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Multiboxen listen kompakt und anschaulich verschiedene Themen auf. Die länge der Boxen sollte ausgeglichen sein um Überschneidungen zu vermeiden. In jedem Fall muss der Abstand auch bei Hover beachtet werden.

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Multiboxen listen kompakt und anschaulich verschiedene Themen auf. Die länge der Boxen sollte ausgeglichen sein um Überschneidungen zu vermeiden. In jedem Fall muss der Abstand auch bei Hover beachtet werden.

Multiboxen – Bildhintergründe (H2)

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Auf abstrakten, textur-ähnlichen Hintergründen können Fotos innerhalb der Box gut eingesetzt werden. Klare Fotos im Hintergrund sowie in der Box erscheinen lassen das Box-Toto untergehen und wirken unruhig.

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Auf abstrakten, textur-ähnlichen Hintergründen können Fotos innerhalb der Box gut eingesetzt werden. Klare Fotos im Hintergrund sowie in der Box erscheinen lassen das Box-Toto untergehen und wirken unruhig.

Box Titel (h5)

Soll ein Foto-Hintergrund verwendet werden, bietet es sich an die Box reduziert, bspw mit einem Icon zu gestalten.

Box Titel (h5)

Soll ein Foto-Hintergrund verwendet werden, bietet es sich an die Box reduziert, bspw mit einem Icon zu gestalten.

Multiboxen Varianten (h2)

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Die gebräuchlichste Variante der Multibox.

Box Titel (h5)

Die gebräuchlichste Variante der Multibox.

Box Titel (h5)

Ein alternatives Layout mit zwei Spalten.

Oben links steht hier das Icon und rechts daneben der Text.

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Bei Text auf Bild sollte das Bild mit einem dunklen oder hellen Overlay (75%) abgedeckt werden um Lesbarkeit zu erhalten.

Multiboxen als volle Breite Spalten (h2)

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Boxen sollten immer als solche und als interaktive Elemente erkennbar sein. Ein Texthinweis, Button oder Link kann hier helfen.

Hier finden Sie weitere Details

Details

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Boxen sollten immer als solche und als interaktive Elemente erkennbar sein. Ein Texthinweis, Button oder Link kann hier helfen.

Hier finden Sie weitere Details

Details

2016_86333759_Boden_MS.jpg
Box Titel (h5)

Boxen sollten immer als solche und als interaktive Elemente erkennbar sein. Ein Texthinweis, Button oder Link kann hier helfen.

Hier finden Sie weitere Details

Details

Slider (H2)

Bilder-Grid (H2)

Bilder-Grids mit hoher Spalten-Zahl bieten sich weniger für Fotos an, da diese zu klein werden, sind dafür aber optimal um z.B. einen Logostreifen der Marken im Angebot abzubilden.

Bild-Title / Caption

Bild-Title / Caption

Bild-Title / Caption

Bild-Title / Caption

Galerie (H2)

Galerien sind optimal für große Mengen an Fotomaterial, da Voll-Ansichten in einer Lightbox geöffnet werden können und Paginations die Ansicht kompakt gestalten.

Bild-Title / Caption
Bild-Title / Caption
Bild-Title / Caption
Bild-Title / Caption
Bild-Title / Caption
Bild-Title / Caption
Bild-Title / Caption
Bild-Title / Caption

Accordion (H2)

Accordions erlauben das Zusammenfassen mehrerer Inhaltsblöcke - meist mit viel Text - in einen thematischen Abschnitt.

Accordion Header
Accordion Header (Kopie 1)
Accordion Header (Kopie 2)
2017_515658404_Parkett_Laminat._MSjpg_05.jpg

Inhalte sollten tendentiell Zusatz- & Sekundäre Informationen sein, da die Sichtbarkeit erst eine Nutzer-Aktion benötigt. Der Inhalt eines Accordion-Elementes sollte so kompakt bleiben, so dass die eingeklappten Elemente immer noch gut erreichbar sind.

Langes scrollen, um zum nächsten Element zu gelangen lässt den Nutzer die Orientierung für bereits gesehenes oder noch zu lesendes verlieren.

2017_515658404_Parkett_Laminat._MSjpg_05.jpg

Inhalte sollten tendentiell Zusatz- & Sekundäre Informationen sein, da die Sichtbarkeit erst eine Nutzer-Aktion benötigt. Der Inhalt eines Accordion-Elementes sollte so kompakt bleiben, so dass die eingeklappten Elemente immer noch gut erreichbar sind.

Langes scrollen, um zum nächsten Element zu gelangen lässt den Nutzer die Orientierung für bereits gesehenes oder noch zu lesendes verlieren.

2017_515658404_Parkett_Laminat._MSjpg_05.jpg

Inhalte sollten tendentiell Zusatz- & Sekundäre Informationen sein, da die Sichtbarkeit erst eine Nutzer-Aktion benötigt. Der Inhalt eines Accordion-Elementes sollte so kompakt bleiben, so dass die eingeklappten Elemente immer noch gut erreichbar sind.

Langes scrollen, um zum nächsten Element zu gelangen lässt den Nutzer die Orientierung für bereits gesehenes oder noch zu lesendes verlieren.

Tabs (H2)

Tab Header
Tab Header
Tab Header
2017_515658404_Parkett_Laminat._MSjpg_05.jpg

Inhalte sollten tendentiell Zusatz- & Sekundäre Informationen sein, da die Sichtbarkeit erst eine Nutzer-Aktion benötigt.

Der Inhalt der Tab-Elemente sollte ähnlich lang sein, damit die Seite beim Wechsel zu einem neuen Tab nicht zu sehr springt.

Das ist ein Link

2017_515658404_Parkett_Laminat._MSjpg_05.jpg

Inhalte sollten tendentiell Zusatz- & Sekundäre Informationen sein, da die Sichtbarkeit erst eine Nutzer-Aktion benötigt.

Der Inhalt der Tab-Elemente sollte ähnlich lang sein, damit die Seite beim Wechsel zu einem neuen Tab nicht zu sehr springt.

Das ist ein Link

2017_515658404_Parkett_Laminat._MSjpg_05.jpg

Inhalte sollten tendentiell Zusatz- & Sekundäre Informationen sein, da die Sichtbarkeit erst eine Nutzer-Aktion benötigt.

Der Inhalt der Tab-Elemente sollte ähnlich lang sein, damit die Seite beim Wechsel zu einem neuen Tab nicht zu sehr springt.

Das ist ein Link

Ansprechpartner (H2)

Name Nachname (H4)
Mitarbeiter

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Fax 0631 123 45 68
Der Fußboden als Wellness-Faktor
img_cover.jpeg

Der Alltag wird zunehmend hektischer, da kommt den eigenen vier Wänden immer größere Bedeutung zu - als Rückzugsort zum Erholen und Entspannen. Ein harmonisches Ambiente trägt maßgeblich zum Wohlfühlen in der Wohnung bei.

Section Kataloge & Suche (H2)

  • cover.png
    Hain Almfeuer by Meister
    Parkett, Parkettboden, Landhausdielen
    Meister Werke Boden Parkettboden
  • cover.png
    Meister Laminat
    Laminat und Laminatboden
    Meister Werke Boden Laminat
  • cover.png
    Meister Lindura Holzboden
    Lindura Holzboden, ein starker Charakter
    Meister Werke Boden Parkettboden
  • cover.png
    Meister Longlife Parkett
    Longlife Parkett Premium, Longlife Parkett Kollektion
    Meister Werke Boden Parkettboden
  • cover.png
    Parador Design Edition
    Design Edition - Parador
    Parador Boden Laminat Parkettboden
  • cover.png
    Parador EcoBalance Laminat
    Laminat und Laminatboden von Ihrem Spezialist für Laminat, Laminatboden, Parkett und Massivholzdielen
    Parador Boden Laminat
  • cover.png
    Parador EcoBalance Parkett
    Parkett und Parkettboden von Ihrem Spezialist für Laminat, Laminatboden, Parkett und Massivholzdielen
    Parador Boden Parkettboden
  • cover.png
    Parador Edition
    Floor Fields Design Edition by Alfredo Häberli
    Parador Boden Parkettboden
  • cover.png
    Parador Laminat
    Laminat und Laminatboden von Ihrem Spezialist für Laminat, Laminatboden, Parkett und Massivholzdielen
    Parador Boden Laminat
  • cover.pdf
    Parador Parkett
    Parkett und Parkettboden von Ihrem Spezialist für Laminat, Laminatboden, Parkett und Massivholzdielen
    Parador Boden Parkettboden
  • cover.png
    ZIRO Casella SL
    3-Schicht Landhausdiele Casella SL
    Ziro Boden Parkettboden
  • cover.png
    ZIRO Casella TRIO Massivholz
    Casella-der Massivholz-Boden, 3-Schicht Massivholzdiele
    Ziro Boden Parkettboden
  • cover.png
    ZIRO Holzloc
    Holzloc Parkett: 3-Stab Schiffsboden, 3-Stab Schiffsboden & 1-Stab Landhausdielen
    Ziro Boden Parkettboden
  • cover.png
    ZIRO Lamino
    Lamino - Der extra starke Laminatboden
    Ziro Boden Laminat