5 Website-Beispiele mit flexiblem Design

4. Dezember 2014 von Sebastian Maier

website flexibel design tile

Websites mit flexiblen Layouts passen sich mit ihrem Design fließend jeder Darstellung an. Sie verändern ihre Größe und auch ihren Aufbau je nach Endgerät (Desktop, Tablet oder Smartphone) und je nach Bildschirmmaßstab.

Warum flexibles Design?

Die Zahl der Endgeräte und Bildschirmgrößen nimmt stetig zu und somit auch die Erwartung der Nutzer, mobil, auf dem Desktop, auf einem großen Monitor oder in einem verkleinerten Fenster immer eine optimale Website-Ansicht zu erleben.

Responsive Design, also die Anpassung an verschiedene Endgeräte, ist mittlerweile Standard, zumindest bei der Erstellung neuer Websites. Mit dem flexiblen Design wird das Responsive Design erweitert, da es durch eine größere Zahl an Layouts feinere Abstufungen und damit eine noch flüssigere Websiteansicht ermöglicht.

An den folgenden 5 Website-Beispielen wird deutlich, wie raffiniert und anpassungsfähig flexibles Webdesign umgesetzt werden kann.


Die Liga

Website flexibel Design dieliga


Der Reutlinger Frisörsalon “Die Liga” setzt bei seinem edlen Internetauftritt auf ausdrucksstarke Bilder – und flexibles Webdesign. Bei einer Veränderung der Bildschirmgröße passt sich nicht nur der Maßstab, sondern sogar der Aufbau der Seite an. So entsteht die Wahrnehmung eines fließenden, stufenlosen Übergangs.

Website flexibel Design dieliga


Tile

Website flexibel Design tile


Die US-amerikanische Firma Tile produziert Plastikchips, die dafür sorgen sollen, dass man nie wieder etwas verliert. Die Chips können an Gegenständen befestigt und per Bluetooth über eine Smartphone-App geortet werden, wenn man sie nicht mehr auffindet.

Genauso innovativ wie diese Technologie ist auch das flexible Webdesign von Tile. Wenn man die Fenstergröße verkleinert oder vergrößert, ändert sich nicht nur das Bildverhältnis, sondern auch die Größe der Schrift.

Website flexibel Design tile


Eine weitere Besonderheit ist das Menü, das sich in einer kleinen Bildschirmansicht wie in einer mobilen Ansicht verhält und sich trotz kleinem Maßstab über den gesamten Bildschirm verteilt.

Website flexibel Design tile Menu


Pemberton

Website flexibel Design pemberton


Die New Yoker Schmiede digitaler Produkte mit dem Namen Pemberton macht mit ihrer Website ihrem Berufshandwerk alle Ehre, vor allem beim flexiblen Design, das sich in unterschiedlichen Stufen dynamisch verändert.

Beim Zusammenschieben des Fensters passen sich zunächst Bilder und Texte an. Bei der Verkleinerung des Bildschirms auf eine Breite von unter 800 Pixeln wird der Slider dann schließlich zu einem Onepager mit einem die Ansicht etwas verdunkelnden Overlay. Wahrscheinlich sollen so die Übergänge zwischen den Stufen betont werden. Auch verschwindet das Menü hinter dem bekannten Icon aus drei horizontalen Strichen.

Website flexibel Design pemberton


Ab unter 480 Pixeln wird der Onepager schmaler und das Overlay verschwindet.

Website flexibel Design pemberton


Akerushimeru

Website flexibel Design akerishmu


Hinter akerushimeru.jp verbirgt sich eine auf Japan ausgerichtete Marketingkampagne des Energydrinks Red Bull. Ab einer Bildschirmbreite von 770 Pixeln und darunter verschiebt sich der Playbutton auf der linken Seite über die Videokacheln. Diese werden beim Zusammenschieben des Fenster zudem immer kleiner und zahlreicher.

Website flexibel Design akerishmu


Chef S

Website flexibel Design chef-s


CHEF S, ein Lebensmittelladen, der seine Produkte in Kombination mit gesunden und leckeren Rezepten verkauft, besitzt nicht nur eine clevere Geschäftsidee, sondern auch ein innovatives und flexibles Website-Design.

Verändert man den Fenstermaßstab, passt sich die Gestaltung diesem fließend an. Umso schmaler der Bildschirm, umso enger rücken die Elemente der Website zusammen.

Website flexibel Design chef-s



Bei welchen Projekten setzt ihr auf flexibles Design? Warum entscheidet ihr euch dafür, warum dagegen?

zurück
comments powered by Disqus