Fliesen Website-Designs

Modernes Kachel-Webdesign mit einheitlicher Bildsprache

Ein Kachelraster bestimmt, was ein Besucher zuerst sieht, noch bevor er ein Wort liest. Beim Kachel-Webdesign geht es vor allem darum, diese Reihenfolge zu steuern: Welches Panel dominiert, wie viel Freiraum zwischen den Gruppen und was bleibt bei einem Inhaltswechsel erhalten? Dieselben Entscheidungen gelten für Fotogalerien, Produktpräsentationen oder redaktionelle Startseiten.

Die Größe bestimmt den Blickfang

Ein großes Panel neben mehreren kleinen schafft eine selbsterklärende Hierarchie: Die große Kachel wird als Hauptinhalt wahrgenommen, die kleinen als alles Zusammenhängende. Ein gleichmäßiges Raster bewirkt das Gegenteil und gibt jedem Element die gleiche Aufmerksamkeit. Das eignet sich für einen Katalog, ist aber ungeeignet, um ein einzelnes Highlight zu präsentieren.

Ein funktionierendes visuelles System legt einige Regeln fest und lässt den Rest offen:

1. Zwei oder drei Kachelgrößen, die auf der gesamten Website einheitlich verwendet werden.

2. Ein eigener Beschriftungsstil pro Größe, sodass eine schmale Kachel niemals die Überschrift einer breiten Kachel übernimmt.

3. Gleichbleibende Abstände innerhalb einer Gruppe und größere Abstände zwischen den Gruppen.

4. Eine Beschnittregel pro wiederkehrendem Inhaltstyp.

Abwechselnd dichte und offene Bereiche

Der Abstand ist hier das subtilste und zugleich am leichtesten zu vermessende Gestaltungsmittel. Zu geringe Abstände lassen ein Mosaik wie eine Wand wirken. Zu große Abstände zerteilen die Gruppe, und die einzelnen Bildfelder wirken nicht mehr wie eine Einheit. Dasselbe gilt für die Bilddichte: Nach einer dicht aneinandergereihten Bildfolge sollte ein ruhigerer Bereich folgen.

Die Komposition an das Material anzupassen, ist einfacher als gedacht:

1. Eine ruhige Galerie mit gleichwertigen Arbeiten: gleichmäßige Bildausschnitte, großzügige Abstände, einheitlicher Bildunterschriftenstil.

2. Eine Präsentation mit einem Hauptbild: unterschiedliche Bildgrößen, geringerer Abstand unterhalb des Hauptbildes.

3. Ein umfangreicher Katalog: gleichmäßige Bildausschnitte mit einem rhythmischen Bruch alle paar Zeilen.

Ein einheitliches Beschnittverhältnis innerhalb einer Zeile erleichtert den Vergleich, während unterschiedliche Verhältnisse Bewegung erzeugen, aber die Übersichtlichkeit beeinträchtigen. Eine Nahaufnahme einer Textur und eine weite Innenraumaufnahme beantworten unterschiedliche Fragen.

Typografie und Farbe sorgen für Wiedererkennbarkeit

Typografie gewährleistet Kontinuität, wenn das Raster nicht mehr vorhersehbar ist. Kurze Beschriftungen benötigen kompakte Stile, längere Beschreibungen mehr Raum. Durch die Beibehaltung beider Stile bleibt auch eine unregelmäßige Anordnung übersichtlich. Der Kontrast verdient die gleiche Aufmerksamkeit, denn eine Bildunterschrift, die auf einem dunklen Foto gut wirkt, verschwindet auf einem hellen.

Farben verbinden unterschiedliche Elemente zu einer Einheit. Nicepage sorgt mit seinen seitenweiten Farbeinstellungen für einheitliches Design. Die Dokumentation zu Website-Farben erklärt, wie Hintergründe, Akzente und Schaltflächen einer einheitlichen Farbpalette folgen und nicht von Bildschirm zu Bildschirm variieren.

Der Maßstab für eine kachelbasierte visuelle Sprache ist die Wiedererkennbarkeit. Besucher sollten auf jedem Bildschirm sofort erkennen, dass er zur aktuellen Umgebung gehört, ohne ein Wort lesen zu müssen.