4 wesentliche Layouttrends für 2015
Das Web hat sich in den letzten zehn Jahren stark verändert und hat sich auch nicht verändert. Wenn wir 10 Jahre zurückblicken, werden wir feststellen, dass das Web ein sehr häufiges Layout-Muster aufweist, das in den meisten Websites funktioniert. Dieses Go-to-Muster bestand aus einem Header, einer Fußzeile, einer Seitenleiste und einem Inhaltsbereich. Es war das erwartete Layout für das Web. Gleichzeitig hatten wir Macromedia Flash, das in eine Ära alternativer Layouts mündete. Layouts, die sich nicht an diese strenge Formel halten. Und natürlich ist mit der Implosion von Flash dieser Ansatz etwas verblasst ... Ich sage es ein wenig, weil es mit Rache zurück ist.
Wenn Sie eine der vielen populären Galerien besuchen, in denen aktuelles Webdesign präsentiert wird, werden Sie sicher feststellen, dass die grundlegende Struktur für Webseiten alles andere als fest ist. Es kann flexibel sein und sich zu allem verändern, was es sein muss. Dies ist meiner Meinung nach eine der besten Nebenwirkungen, die Responsive Webdesign hervorgebracht hat. Die neue Norm ist so, dass es scheinbar keine feste Formel gibt.
All das zeigt, dass wir einige hochrangige Trends im Layout-Design beobachten können, die etwas darstellen, was ich für ungewöhnliche Layouts halte. Ungewöhnlich, weil sie keiner strengen Formel oder einem vordefinierten System folgen. Aber es sind Trends, in denen ich Dutzende, wenn nicht Hunderte von Beispielen für jede dieser Kategorien bereitstellen kann.
Was Sie hier finden, ist eine interessante Mischung aus Trends und ungewöhnlichen Layouts, die Sie hoffentlich dazu inspirieren wird, die grundlegenden Strukturen zu bewerten, die Sie für das Webdesign anwenden. Lass uns eintauchen und einen Blick darauf werfen ...
Geteilte Bildschirme
In dieser Kategorie finden wir eine Auswahl von Seiten, die alle den Bildschirm mit einer vertikalen Teilung teilen. Es gibt vielleicht viele Gründe, dies zu tun, und bei der Untersuchung vieler Proben dieses Typs habe ich zwei Hauptgründe gefunden.
Die erste ist, dass ein Design manchmal zwei primäre Elemente von gleicher Wichtigkeit haben kann. Eine gängige Herangehensweise an das Webdesign besteht darin, die Dinge nach ihrer Wichtigkeit zu ordnen. Diese Bedeutung spiegelt sich dann in der Hierarchie und Struktur des Designs wider. Aber was, wenn Sie tatsächlich zwei Dinge zu fördern haben? Dieser Ansatz ermöglicht es Ihnen, beide zu markieren und dem Benutzer zu ermöglichen, schnell zwischen ihnen zu wählen.
Der zweite Grund, den ich für diesen Ansatz gefunden habe, ist, dass manchmal eine wichtige Dualität vermittelt werden muss. Betrachten Sie zum Beispiel die Eight and Four Website. Hier wollen sie vermitteln, dass ihre Kernwurzeln ihre digitalen Wurzeln und ihre talentierten Mitarbeiter sind. Diese Paarung definiert sie. Der geteilte Bildschirm ist eine schöne Art, dies zu präsentieren. Und ich liebe besonders, wie das kaufmännische Und die beiden Seiten vereint.
Kein Chrom!
Eines der Hauptelemente des Webdesigns sind Elemente: Boxen, Rahmen, Formen und Container aller Art, die den Inhalt einer Seite trennen. Betrachten Sie einen stereotypen Header, in dem die Elemente sauber enthalten und vom Inhalt getrennt sind. Ein allgemeiner Trend ist jetzt, all dieses zusätzliche Chrom zu entfernen.
Dies ist ein minimalistischer Ansatz, aber es geht einen Schritt weiter und hat einige interessante Wendungen auf dem Weg.
In diesem Beispiel haben sie die Idee einer Kopf- und Fußzeile alle zusammen eliminiert. Es fühlt sich eher wie ein interaktiver Kiosk an. Die Inhaltshierarchie wird hauptsächlich über eine Organisation von links nach rechts erstellt, wodurch das Layout sehr intuitiv gestaltet wird. Und das Chrom, um die Navigation vom Inhalt zu trennen, wird einfach nicht benötigt. Stattdessen leuchten die schönen Produkte durch.
Hier finden wir, dass der Inhalt stark hervorgehoben wird, indem man den Sinn einer Kopf- oder Fußzeile entfernt. Anstatt zuerst einen Header zu lesen, lesen Sie den Namen des Unternehmens und eine klare Aussage darüber, was sie tun (und wo sie es tun). Gefolgt von der Hauptnavigation. Was für eine großartige Möglichkeit, die Marke zu betonen, bevor man Leute zum Navigieren bringt. Es sorgt für einen eleganten Fluss. Interessanterweise erhältst du beim Scrollen der Seite eine Kopfzeile und einen Hauch von Chrom. Ein schönes und effektives Layout, das das Muster auf inspirierende Weise verwendet.
Modular oder Gitter basiert
Als nächstes haben wir Layouts, die auf modularen oder gitterartigen Strukturen aufgebaut sind. In diesen Entwürfen soll jedes Modul basierend auf der Bildschirmgröße flexibel sein. Dies ist nicht gerade ein neuer Ansatz, aber die Einführung von Responsive Webdesign hat es noch nützlicher gemacht. Dies deutet auf die Art von anpassbaren Layouts hin, die man mit Plugins wie Masonry erstellen kann.
Dieses Beispiel demonstriert die Idee perfekt. Das Design reagiert vollständig. Wenn sich die Bildschirmgröße ändert, passt sich jedes Modul an und passt sich an den Platz an. Durch die gleichmäßige Aufteilung des Raums ist es einfacher, das Design anzupassen. Und sie erhalten Bonuspunkte für die Einführung eines Elements (bei größeren Bildschirmgrößen), das die starren Grenzen zwischen den Modulen durchbricht.
Dieses Beispiel ist eine ziemlich intensive Version des Musters. Es umfasst natürlich den modularen Ansatz, der es ermöglicht, Inhalte einfach nach Bedarf ein- und auszublenden. Aber hier ist ein wichtiges Gestaltungselement am Werk, das dem vorherigen Beispiel fehlte. Die Größe der Module variiert je nach Wichtigkeit und Rang in der Hierarchie. Ein Risiko dieses modularen Ansatzes besteht darin, alles gleich groß zu machen, was bedeutet, dass Sie nicht wirklich etwas betonen. Im Gegensatz dazu gibt dieses Beispiel dem primären Element eindeutig Bedeutung.
Einen einzelnen Bildschirm ausfüllen
Schließlich haben wir Seiten, die einen Ansatz verwenden, bei dem sich das Design anpasst, um den Bildschirm vollständig zu füllen. Dies ist eine Teilmenge des Responsive Designs, da es sich an die Bildschirmgröße anpasst. Aber in dieser Nische passen sich die Designs so an, dass sie den Bildschirm komplett ausfüllen und keine Scrollbars erzeugen. Dieser Mangel an Scrolling bedeutet, dass der Inhalt extrem fokussiert sein muss und die Hierarchie des Inhalts klar festgelegt sein muss. Ich finde den Fokus und die Klarheit dieser Seiten erfrischend.
Fazit
Während ich jeden dieser Trends isoliert betrachtet habe, ist die Realität, dass sie Bausteine darstellen. Und diese Bausteine können auf viele verschiedene Arten zusammengesetzt werden. Tatsächlich könnten viele der hier vorgestellten Samples in zahlreiche der von uns diskutierten Kategorien verschoben werden. Die Vielfalt der Layouts im modernen Web und die Tatsache, dass sie nutzbar sind, machen das Web zu einem spannenden Medium, mit dem man arbeiten kann.