Sind Sie es leid, für jedes Projekt die Erstellung von Websites mit denselben alten Rasterlayouts zu erstellen? Haben Sie es genossen, sich von der Norm zu lösen und etwas organischeres zu versuchen?
Heute werfen wir einen Blick auf einige Websites, die genau das getan haben, um herauszufinden, was wir über alternative Layoutmethoden lernen können und wie sie erfolgreich implementiert werden können.
Rasterlayouts
Das gitterbasierte Layout ist ein Eckpfeiler des modernen Webdesigns. In einer Zeit, in der saubere, minimalistische Designs als das ultimative Ideal bezeichnet werden (eine direkte Reaktion auf die unordentlichen Designstile der 80er und 90er Jahre), ist die Definition von "gutem Design" genau das Richtige. wird zweifellos die Erwähnung einfacher und solider Ausrichtungen einschließen.
Letztendlich ist das eine gute Sache. Grid-basierte Layouts bieten unübertroffene Struktur, Ausgewogenheit und Organisation. Sie bringen einen vorhersagbaren Rhythmus und ein Gefühl der Vertrautheit in das Design und lassen den Inhalt von sich aus hervorstechen.
Rasterlayouts sind unglaublich benutzerfreundlich. Wir lesen instinktiv eine Seite von links nach rechts, von oben nach unten, und Raster neigen dazu, diese Tendenz eher zu verstärken als zu trotzen. Mit einem Raster-basierten Design ist der Inhalt genau dort, wo der Betrachter es erwarten würde, und es ist kein außergewöhnlicher Aufwand erforderlich.
Wir haben ganze Design-Galerien, wie die oben gezeigte, die auf gitterbasierten Designs ausgerichtet ist. Es gibt unzählige CSS-Frameworks und Photoshop-Vorlagen, mit denen wir mit minimalem Aufwand schnelle Rasterlayouts erstellen können. Wenn Design eine Religion ist, sind Gitter die heiligen Schriften, denen wir die Wahrheit zuschreiben.
Wenn wir mit dieser übergreifenden Metapher noch weiter gehen, dann ist das heutige Thema nichts anderes als "Blasphemie". Lassen Sie uns untersuchen, wie wir ein wenig mehr Vielfalt in unsere Layouts einbauen können, indem wir das Raster zumindest teilweise zugunsten organischerer Layouts und Grafiken aufgeben. Es stellt sich heraus, dass es mehrere Möglichkeiten gibt, Informationen zu strukturieren, aber den Designgöttern nicht zu sagen.
Finden Sie andere Wege zur direkten Aufmerksamkeit
Unser erstes Beispiel für ein alternatives Layout stammt von We Are Empire, einer Agentur für digitales Design. Hier ist ein Screenshot der Homepage ihrer Website.
Wie Sie sehen, repräsentiert es definitiv nicht Ihr typisches Webseiten-Layout. Hier sind einige Dinge zu beachten. Erstens sind die primären Objekte auf der Seite Kreise. Jede normale, netzbasierte Website ist meistens besteht hauptsächlich aus rechteckigen Objekten. Raster bestehen aus Rechtecken, sodass Objekte mit vier Kanten und zumindest minimal harten Ecken gut funktionieren.
Im Gegensatz dazu werden bei fast allen organischen Layouts Kreise stark genutzt. Kreise fühlen sich organischer an und scheinen diesem Layoutstil besser zu entsprechen. Des Weiteren bieten sie rebellischen Designern eine weitere Möglichkeit, von der Norm abzuweichen.
Noch wichtiger als die Formen der Objekte ist ihre Verbindung. Wieder einmal können Rasterlayouts sehr natürlich gelesen werden, aber organische Layouts lassen das Auge zu, um verwirrt auf der Suche nach dem, was als nächstes anzusehen ist, zu wandern.
Durch die Erstellung eines einfachen Weges hat der Designer hier einen klaren Informationsfluss geschaffen, den Sie verfolgen können. Wenn Sie sich diese Seite ansehen, können Sie fast nicht anders, als dem Pfad mit Ihren Augen zu folgen. Ein einfacher und äußerst effektiver Trick zur Kontrolle der Benutzererfahrung.
Weniger Objekte
Der Weg hilft, ist aber keine absolute Notwendigkeit. Dies gilt insbesondere dann, wenn sich wirklich einige Objekte im Layout befinden. Schauen Sie sich beispielsweise die Seite von Michael Wong an, die ein ähnliches Layout verwendet.
Die Website von Wong verwendet eine andere beliebte Technik für diese Arten von Layouts: Mausgesteuerte Animation. Wenn Sie die Maus auf dem Bildschirm bewegen, bewegen sich die Objekte im Layout in einem Parallax-Effekt, der eine 3D-Schnittstelle simuliert.
Struktur ist noch vorhanden
Wenn Sie sich von gitterbasierten Layouts entfernen, ist es sehr wichtig, sich daran zu erinnern, dass Sie die Struktur nicht unbedingt ganz aufgeben müssen. Wie das Melonfree-Layout unten veranschaulicht, kann Ihr Design dennoch sehr logisch sein.
Hier wird zugunsten eines einfachen Gitters eine runde Symmetrie ausgenutzt. Das Design ist recht ansprechend und ausgewogen. Im Kreis zu lesen ist definitiv nicht die einfachste Sache der Welt, aber das Endergebnis ist erfrischend anders.
Schwerpunkte
Wenn Sie mit einem alternativen Layout arbeiten, achten Sie immer darauf, wo Sie Schwerpunkte erstellen. Das obige Layout ist absichtlich stark in Richtung Mitte gerichtet, wo Sie eine große Grafik einer Melone finden, die den Namen der Firma darstellt.
Verwenden Sie in Ihren Layouts Größe, Farbe und Platzierung von Objekten, um bestimmte Schwerpunkte zu erstellen und zu analysieren, wie gut sie mit dem visuellen Pfad arbeiten, den Sie erstellen möchten (von oben).
Baue eine Szene auf
Eine ganz andere, aber immer noch beliebte alternative Layoutmethode ist das Erstellen einer Szene, die als Schnittstelle für Ihre Website dient. Ich warne normalerweise davor, da dies normalerweise in Richtung einer schlechten, Flash-betriebenen Fast-Food-Site führt, an der Sie nichts finden können.
Diese Methode kann und führt jedoch auch zu einigen attraktiven, gut gestalteten Standorten. Betrachten Sie die iCodeLabs-Site unten, die eine wirklich großartige illustrierte Szene verwendet, durch die navigiert werden kann, Sie haben es erraten, indem Sie die Maus bewegen.
Ein Hauptmerkmal hierbei ist, dass die iCode-Site die explorative Szene als optionales Spaßelement der Site reserviert. Die Hauptnavigation ist eine bekanntere Leistenoberfläche am unteren Rand der Seite. Keine Linksuche hier!
Gitter: Versteckt, aber selten weg
Das große Geheimnis all dieser Diskussionen über das Aufgeben von gitterbasierten Layouts ist, dass sie in einem bestimmten Webdesign selten völlig fehlen. Wenn Sie die oben gezeigten Websites besuchen, können Sie feststellen, dass auf vielen Seiten noch eine allgemeine Gitterstruktur vorhanden ist.Die alternativen Layoutmethoden existieren in Bereichen innerhalb die größere Struktur.
Die Lektion hier ist, dass Sie nicht auf die Sicherheit klarer, einfacher und logischer Layouts verzichten müssen und dies oftmals wollen, um etwas zu schaffen, das einzigartig aussieht und sich anfühlt.
Gekippte Gitter
Eine clevere Methode zum Ausblenden Ihres gitterbasierten Layouts besteht darin, Diagonalen anstelle von vertikalen und / oder horizontalen Linien zu verwenden. Es können dieselben exakten Konventionen angewendet werden, die in normalen Rastern verwendet werden. Das Ergebnis sieht einfach kantiger aus.
Wie Sie sehen, hat Estilo DLT den Anschein eines organischen Layouts, aber in Wirklichkeit entspricht es einigen sehr strengen Layout-Prinzipien.
Fazit
Ein Abbruch von der Norm kann ein bemerkenswert erfrischendes Experiment sein. Es hilft Ihnen, anders zu denken und Design auf eine noch nie dagewesene Weise zu sehen. Die Erkundung alternativer Layout-Ideen ist eine hervorragende Möglichkeit, Ihre Füße in dieser Arena nass zu machen. Verwenden Sie die Beispiele und Informationen oben, um den richtigen Einstieg zu erhalten.
Denken Sie daran, dass Rasterlayouts häufig beschädigt sind, aber selten vollständig aufgegeben werden und dass, selbst wenn Sie kein Raster verwenden, das Layout dennoch eine sehr logische Struktur haben kann. Hinterlassen Sie einen Kommentar mit einem Link zu ungewöhnlichen Layouts, auf die Sie stoßen. Teilen Sie uns auch mit, ob Sie sich für Raster engagieren oder sich mit Ihren Layouts außerhalb der Box wagen.