Es ist was los im Web. Gerade in Sachen Design und Programmiertechnik ist heute praktisch alles möglich. Dabei schwirren massenweise Fachworte durch die Gegend. Doch was ist was und welche Technik nutze ich für meinen Webauftritt?
Wer versucht, die zahlreichen unterschiedlichen Begriffe auseinanderzuhalten, hat es nicht immer leicht. Parallax, Flat, Adaptive und One Page Design und vieles mehr: Wir klären auf!
Scrolling Page
Scrolling Page ist ein Oberbegriff für Websites, in denen sich der User allein durch vertikales oder horizontales Scrollen bewegt.
One Page (= Single Page)
Hierbei befindet sich der gesamte Seiteninhalt auf lediglich einer Seite – ohne verlinkte Unterseiten. Man kann sich das Prinzip einer One Page wie eine grosse, dynamische Leinwand vorstellen.
One Pages eignen sich besonders für:
- Infografische Umsetzungen
- Portfolios
- Kleinere, exklusive Produkte
- Landing-Pages von Werbekampagnen
Beispiele:
Parallax
Parallax bezeichnet einen speziellen Effekt, der durch die Bewegungsparallaxen beim Scrollen entsteht. Zwei oder mehrere, übereinanderliegende Ebenen bewegen sich unterschiedlich schnell und erzeugen eine Illusion von räumlicher Bewegung.
Parallax eignet sich besonders für:
- Infografiken
- Journalistische Beiträge
- Videospiele (hier fand der Parallax-Effekt übrigens seinen Ursprung)
- Einzelne Eyecatcher auf gewöhnlichen Websites
Beispiele:
- World of Swiss
- Garden Estúdio
Übrigens: Dieses Beispiel ist im Flat Design.
Responsive und Adaptive
Responsive sowie adaptive sind Arten, eine Website zu programmieren. Der Sinn beider Varianten ist es, eine Website für den Betrachter und dessen Gerät, sprich für die entsprechende Bildschirmgrösse, optimal und nutzerfreundlich darzustellen.
Responsive Design:
Hier passt sich die Darstellung der Website proportional auf die Grösse des Betrachter-Displays an. Bewerkstelligt wird dies durch eine prozentuale Programmierung. Man hört im Zusammenhang mit «responsive» auch häufig den Begriff «Fliessendes Design». Also: Responsive Design richtet sich nach der Bildschirmbreite.
Adaptive Design:
Hier werden verschiedene Gestaltungen für verschiedene Endgeräte konzipiert. Normalerweise sind das Darstellungsvarianten für Desktop, Tablet und Smartphone. Also: Adaptive Design richtet sich nach den Ausgabegeräten.
Beides eignet sich für:
Websites, die auf mehreren Ausgabegeräten und Bildschirmgrössen genutzt werden. Das gilt heute grundsätzlich für alle Websites, da die Zugriffe via Smartphone und Tablet stetig steigen.
Full Screen Design
Das ist schnell erklärt: Websites, die den kompletten Bildschirm füllen – nicht nur das Browserfenster.
Beispiel:
- Hermes Tochetti
Bemerkung: Oben rechts lässt sich der Fullscreen anwählen.
Flat Design
Der Begriff kommt vom englischen Wort «Flat» = Flach. Das Design beruht auf dem Prinzip «weniger ist mehr». Dabei verzichtet man auf Schnick-Schnack wie zum Beispiel Schlagschatten. Die Anwendung von Flat Design führt zudem zu einer schnelleren Ladezeit der Website, da der Kilobyte-Raum gering gehalten wird. Das kommt vor allem der Mobile-Darstellung zugute.
Beispiel:
- Florian Wacker
Diese Website ist responsive. Sehen Sie selbst und verkleinern Sie Ihr Browserfenster! - Some People I Know
Das muss man gesehen haben!
Flat Design war/ist ein riesen Boom und hat das Realistic Design in den Hintergrund gestellt. Das mehrfach ausgezeichnete Storytelling der Agentur inTacto zeigt genau diesen «Design Figth» herrlich auf. Wie wir finden, eine tolle, interaktive Scrolling-Page mit unterhaltendem Inhalt zu den zwei Arten von Design. Well Done!
Flat Design vs. Realism
Ein Wort zum Schluss
Wie Ihnen wahrscheinlich aufgefallen ist, spielen bei den gezeigten Beispielen mehrere Techniken zusammen. Dies ist heutzutage meistens der Fall. In einer One Page tauchen häufig Parallax-Eyecatcher auf.
Auf welche Methode oder welches Design man setzen möchte, ist ganz vom Inhalt, Zielpublikum und auch vom Budget abhängig. Es gilt immer, das Design und die Technik/en für den entsprechenden Auftritt ideal zu kombinieren.
Quelle: