Jedes Jahr kommen und gehen etliche Trends – das ist nicht nur beim Web-Design der Fall, auch wenn es uns da natürlich am meisten interessiert. In den vergangenen Monaten ist die Zahl der Video-Hintergründe, geteilten Screen-Designs oder animierten Storybooks rapide gestiegen. Responsive Web-Design, ein Trend, der bis in das Jahr 2010 zurückgeht, schreibt unzweifelhaft nicht nur Geschichte, sondern wird auch die Zukunft diktieren.

Das bedeutet allerdings nicht, dass alle Websites in eine standardisierte Struktur reingepresst werden müssen. Im Gegenteil, es wird vermutlich mehr Raum für Variation, Flexibilität und Experimente geben als zuvor.

In diesem Artikel werden wir vier Web-Design-Trends identifizieren, die das letzte Jahr am Bildschirm maßgeblich mitgestaltet haben. Nutzt sie als Inspiration, aber immer dran denken: Inspiration ist lediglich ein Sprungbrett für die eigenen Ideen – Nachmachen kann ja schließlich jeder.

1. Split Screen

1_1429253588Desktime-e1429253619825

Homepage für Desktime

„Split Screen“ bedeutet, dass der Screen in zwei Bereiche aufgeteilt ist. Meistens sind diese Bereiche gleich groß und vertikal geteilt.

Es gibt hauptsächlich zwei Gründe für die Zweiteilung des Screens:

  1. um zwei wichtige Eigenschaften zu zeigen
  2. um Dualität auszudrücken

Der erste Fall tritt häufig ein, wenn eine Firma ein Produkt oder einen Service präsentieren möchte mit zwei gleichwertig signifikanten Eigenschaften oder Variationen. In diesem Fall ist ein herkömmliches Layout nicht passend, da die Sortierung von wichtig (oben) zu nicht so wichtig (unten) diese Gleichzeitigkeit nicht ausdrücken kann.

Die Teilung in zwei gleich große Bereiche kann auch zwei verschiedene Aspekte desselben Systems darstellen –  z. B. ein Verlagssystem, das sowohl für den Verleger als auch den Leser vorteilhaft ist. In diesem Fall gibt es gar keinen Grund, zwischen hauptsächlicher und nebensächlicher Eigenschaft zu unterscheiden. Dem Leser wird sofort klar, was relevant ist.

Der zweite Grund kommt daher, dass der Designer eine Dualität rüberbringen möchte. Hier ist es durch die Zweiteilung möglich, zwei Bereiche zu „öffnen“, in denen unterschiedliche Themen dargestellt werden können – auch unterschiedliche Produkte.

Desktime (siehe oben) ist eine Firma, die im Büro-Sharing-Bereich arbeitet. Sie haben ihre Seite auch in zwei Bereiche aufgeteilt, um gleichzeitig diejenigen anzusprechen, die schon ein Büro haben und die, die noch eins suchen. Beide Bereiche bekommen durch eine vertikale Teilung den gleichen Platz eingeräumt. Das ist effektiv und praktisch. Außerdem sehr linear und simpel. Super Ergebnis!
Der Style „Vertikale Teilung“ ist auch drehbar, wie eine Art Scharnier. Wenn man beispielsweise ein „&“ auf die Mitte legt, was die Teilung wiederum vermindert.

2. Containerfreie Layouts

Homepage für Foreword

Homepage für Foreword

Solange wie es Design gibt, arbeiten Designer mit Boxen, Formen, Linien zum Teilen und Eingrenzen von Inhalten. Betrachtet man beispielsweise den Header oder Footer einer Website, fällt auf, dass diese bisher immer visuell separat vom Rest des Inhalts gestaltet wurden.

Ein neuer Trend gewann in diesem Jahr an Popularität: Die Idee, grafische Strukturen zu minimieren, um einen offeneren und freieren Stil zu kreieren. Dieser Trend bürgt ein paar minimalistische Züge in sich, geht aber noch einen Schritt weiter. Minimalismus verwendet häufig noch einfache, lineare Strukturelemente, wohingegen dieser neue containerlose Stil komplett ohne jegliche visuelle Pakete funktioniert.

Der Inhalt selbst steht im Zentrum der Aufmerksamkeit. Die Hierarchie wird durch Farbgebung, Positionierung und durchdachte Typografie klar, nicht durch Boxen und Struktur.

Ein Top-Beispiel liefert da die Homepage der interaktiven Agentur Foreword’s (siehe oben). Die Website funktioniert ohne fassende Elemente und die Aufmerksamkeit wird durch Farben und Schriften gelenkt. Speziell der weise Umgang mit Typografie fällt auf. Farbe wird prominent eingesetzt, um klickbare Elemente hervorzuheben. Auffällig ist neben der Responsivität an jedem Zipfel auch das extrem Minimalistische.

3. Blockraster

Homepage für GREATS

Homepage für GREATS

Es ist offensichtlich, dass das Blockraster sehr effektiv ist, um eine Website responsive zu gestalten. In diesem Fall beinhaltet jedes Modul einen bestimmten inhaltsrelevanten Punkt separat, wie eine Überschrift, ein Bild oder ein Text. Diese Art von Modulen ist eine typische Aufteilung für eine Homepage, kann aber auch auf jede andere Seite übertragen werden.

Die Maße jedes Moduls sind flexibel gestaltet, so dass sie sich dem Screen anpassen. Das ist es auch, was ein robustes Block-Layout ausmacht – ein sehr vielseitiges Tool, das sowohl für Websites als auch für mobile Anwendungen genutzt werden kann. Allerdings, besteht hier auch die Herausforderung, das alle Module gleich wichtig erscheinen und keine „Hierarchie“ sichtbar wird – die Unterscheidung zwischen interessantem Material und Älterem oder weniger Wichtigem fällt mehr oder weniger weg.

Um diese Gleichwertigkeit zu vermeiden, sind unterschiedlich große Module, je nach Inhalt, eine Art Ausweg.

GREATS (siehe oben) ist eine New Yorker Firma, die Schuhe für Männer anbietet, hauptsächlich über ihre Website. Ihre Website ist wie ein Schaufenster. Sie wählten dieses Raster, da es ihnen nützlich erschien. Ihre Seite besteht aus vielen gleich großen Einheiten und in jeder ist ein Paar Schuhe abgebildet – die Abgrenzung einer Einheit ist lediglich angedeutet. Tatsächlich fordert die Gestaltung dazu auf, die Schuhe zu betrachten – um die geht es hier ja schließlich.

4. Single-Screen-Seiten

Homepage für Shamballa Jewels

Homepage für Shamballa Jewels

Der letzte Trend, den wir über das letzte Jahr hinweg beobachten konnten, bezieht sich auf den Hintergrund. Es geht um Websites, bei denen sich der Hintergrund immer dem Bildschirm anpasst. Für gewöhnlich sind diese Seiten sehr schlicht gehalten und tendieren zu einem minimalistischen Design.

Allerdings sind solche Seiten nicht scrollbar. Dadurch wirkt es irgendwie immer wie eine Single-Page-App. Da der vorhandene Raum limitiert ist, sollte der Designer immer eine klare Hierarchiestruktur im Hinterkopf behalten – und die Information, die auf der Seite erscheint, sollte gut überlegt ausgewählt werden.

In den meisten Fällen dominiert das Hintergrundbild – oder oft auch ein Video – das Design. Das lässt wenig Platz für weitere Designideen. Vielleicht präsentiert es das Produkt, ruft eine Emotion hervor oder schafft eine filmhafte Anmutung. Shamballa Jewels (siehe oben) ist eine Firma, die Schmuck verkauft. Die Homepage ist als eine einzigartige Seite komponiert und zeigt einige ihrer Arbeiten. Es gibt keinen Scrollbalken und die Navigation ist am oberen Rand des Bildschirms aufgehängt.

Was mir sehr gut an der Seite gefällt ist, dass sich der Hintergrund stetig verändert. Einige Bilder, die über den gesamten Screen gehen, sind teilweise mit einer vertikalen Teilung versehen.

Fazit

Die obigen Beispiele zeigen, dass auffälliges, effektives Design nicht an die vier oder fünf herkömmlichen Layoutmuster gebunden sein muss, die es da draußen gibt. Jedes widersteht dem Drang, sich auf die Sehgewohnheiten und die „Sicherheit“, die einige schon bekannte Raster vermitteln, zu verlassen.

Bedeutet das, dass herkömmliche Web-Layouts nicht mehr funktionieren? Natürlich nicht. Aber wie Mark Twain es schon sagte „Für einen Mann mit Hammer, sieht alles aus wie ein Nagel.“ Stellt also sicher, dass ihr wirklich auf einen Nagel schaut.

Dieser Artikel wurde ursprüngich auf Sitepoint auf Englisch veröffentlicht und von Simone Sala geschrieben.

Featured Image: Studio Meta (via One Page Love)