Kacheldesign zum Leben erwecken [Surftipp]
Kommentare

Von unserem heutigen Surftipp können sich inspirationshungrige Webdesigner wieder eine ganze Menge abgucken. Die Homepage von The Climate Reality Project zeigt, wie man Kacheldesign lebendig werden lässt.

Surftipp: The Climate Reality Project 

Auf der Homepage von The Climate Reality gibt Flat Design den Ton an. Hier werden großflächige Whitespaces, kräftige Farben und eine minimalistische Typographie mit einem interaktiven Kacheldesign kombiniert. Die Seite wirkt aufgeräumt und übersichtlich, aber ganz und gar nicht langweilig, was den verschiedenen Effekten in den Kacheln zu verdanken ist. Auch die Navigation der Seite ist unkonventionell.

Seitenaufbau: Whitespace und Kacheldesign

Am oberen Ende der Seite befindet sich der Whitespace und eine vertikale Navigation Bar. Darunter folgen die Kacheln, die einen bunten Kontrast zum Whitespace darstellen. Die einzelnen Felder sind unterschiedlich groß und ziehen sich lückenlos über die gesamte Seitenbreite. Sie enthalten Icons, Text und Fotos, die den Besucher zu verschiedenen Unterbereichen der Seite leiten.

Vertikal und horizontal navigieren

Die Navigation durch die Seite erfolgt durch die Navigation Bar, die wie eine Schiebeleiste aufgebaut ist. Mit ihr kann man sich durch die drei Hauptbereiche der Seite bewegen. Verschiebt man den Schieberegler nach rechts oder links, so bewegen sich die Kacheln parallel mit. Ein weiteres Menü lässt sich vom rechten Bildschirmrand aus einschieben.

Kacheln interagieren mit der Maus

Fährt man mit der Maus über die Kacheln, erweckt man die einzelnen Felder zum Leben. Sie alle interagieren mit der Maus: Fotos zoomen rein und raus, Farben und Texte wechseln, ganze Kacheln drehen sich um und geben weitere Informationen oder ein Quiz frei. Bei aller Interaktivität sind die Kacheln auch noch responsive und passen sich an die jeweilige Bildschirmbreite an, bis die Website schließlich zur Mobile-optimierten Ansicht wechselt.

Screenshot: http://www.climaterealityproject.org

Screenshot: http://www.climaterealityproject.org

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -