Ein Grid ist die Grundlage für nahezu jedes Website-Design. Diese unsichtbaren Linien helfen, rhythmischen Raum und visuellen Fluss zu schaffen, sodass jedes Projekt ein Gefühl von Organisation und Harmonie vermittelt.
Aber Sie müssen nicht zu 100 Prozent am Netz bleiben. Sie können das Gitter sogar von Zeit zu Zeit unterbrechen, ohne totales Durcheinander zu verursachen. So tun Sie es, während Sie gleichzeitig eine Website behalten, die zu verwenden eine Freude ist!
Grundlegendes zu Netzsystemen
Bevor Sie das Raster unterbrechen können, müssen Sie wissen, warum es existiert. Unabhängig davon, welche Art von System Sie verwenden, ist das Raster ein grundlegender Bestandteil des Designprozesses. Mithilfe von Rastern können Sie bestimmen, wo Elemente platziert werden sollen, wie Elemente auf verschiedenen Bildschirmgrößen zerbrechen oder stapeln können.
Das Raster ist eine unsichtbare Grundlage, mit der Sie etwas gestalten können, das sich organisiert anfühlt, sauber ist und für Benutzer leicht zu folgen ist.
Designer verwenden Gitter schon seit Ewigkeiten. Schauen Sie sich alte Zeitungen und Bücher an - der Text ist in Spalten aufgereiht. Sogar alte Schriftstücke auf Tablets enthalten diese harmonische Struktur.
Raster können Folgendes tun:
- Halten Sie den Inhalt organisiert und fließend. Benutzer sind daran gewöhnt, Elemente horizontal und vertikal aneinander zu reihen und diesem von links nach rechts (und zurück) und von oben nach unten zum Lesen zu folgen.
- Gestalten Sie die Entwurfsarbeit effizienter, da Sie nur sehen, wo Elemente und der Abstand zwischen ihnen platziert werden sollen.
- Helfen Sie einer Website, von Seite zu Seite konsistent zu aussehen.
- Erstellen Sie genau den richtigen Abstand zwischen den Elementen, damit das Design übersichtlich bleibt.
- Balance ist weniger herausfordernd. Folgen Sie dem Raster und die Elemente fallen fast zusammen, wenn Sie die Elemente innerhalb der eingestellten Parameter skalieren.
Warum sollten Sie darüber nachdenken, das Gitter zu brechen?
Durch das Brechen des Gitters kann ein bestimmtes Element hervorgehoben werden. Es ist eine dieser Entwurfsregeln, die, wenn sie sparsam gebrochen werden, die Bedeutung eines Projekts verbessern können. Beim Brechen des Gitters ist es wichtig, viele der anderen Regeln zu beachten. des Designs. (Verwenden Sie nur diesen einen Trick, um das Beste daraus zu machen.)
Erstellen Sie Ebenen
Durch das Layering von Elementen können Sie sich vom Raster entfernen und die Einheit im Design beibehalten. Weil Elemente Ebenen berühren und kreuzen, fühlen sie sich als Teil derselben Einheit.
Diese Technik ist in letzter Zeit recht populär geworden, dank der Einflüsse von Material Design und mehr Designern, die mit Elementen auf dem Bildschirm Chancen eingehen. Es kann jedoch schwierig sein; Elemente, die sich in gewisser Weise überschneiden, müssen unterscheidbar bleiben, um effektiv arbeiten zu können.
Cmmnty macht dies mit einer breiten Linie und einem breiten Text, wodurch eine Art Offset-Ausgleich mithilfe von Typografie und Leerzeichen erstellt wird. Sie können fast mehrere winzige Raster im Design sehen, z. B. die Navigation und Ausrichtung von Textelementen auf der linken Seite, jedoch kein konsistentes Muster. Dieses Aufbrechen des Gitters ist perfekt ausbalanciert und für den Benutzer leicht verständlich.
Design Zweckmäßiger weißer Raum
Ein Grund, um den Pfad eines Gitters zu verlassen, besteht darin, mehr weiße Fläche mit mehr Nachdruck an den richtigen Stellen zu schaffen. Hiermit können Sie Textelemente oder Branding oder ein Sternbild hervorheben.
Eine Sache, die oft mit dem Verschieben des Gitters verwechselt wird, sind ungerade Ausrichtungen. Während nahtlose Ausrichtung ein wesentlicher Bestandteil der Verwendung eines Rastersystems sein kann - horizontal oder vertikal -, können Elemente ausgerichtet werden, während sie sich vom Gitter entfernen.
Berücksichtigen Sie beim Brechen des Gitters, um Leerraum hinzuzufügen, die Ausrichtung der anderen Elemente. Es wird dabei helfen, einen Elementcluster zu erstellen, der die Aufmerksamkeit auf sich zieht, wie z. B. den Text und den Aufruf von Surfers Against Sewage, mit genügend Platz, damit sich das Element als wichtiger fühlt. Das obige Beispiel funktioniert wunderbar, da der Platz dazu beiträgt, Benutzer zum Aufruf zum Handeln zu ziehen.
Elemente in einen Container legen
Wenn Elemente auf irgendeine Weise enthalten sind, fühlen sie sich auch zusammen, wenn das Gitter unterbrochen wird. Dies kann die Verwendung eines farbigen Hintergrunds, das Einfügen von Elementen in Boxen oder das Überlagern von Text in ein Foto oder Video umfassen, wie im obigen Beispiel.
Das Schöne an jedem Containerelement ist, dass es den Benutzern einen Hinweis gibt, dass alles darin irgendwie in Beziehung steht. Die Elemente verbinden sich.
Wenn Sie in einem Muster im Container-Stil vom Netz gehen, können Sie das auflösen, was oft wie eine Spielkarte aussieht. Viele Container-Designs haben ein perfekt symmetrisches Design. Wenn Sie vom Netz gehen, können Sie dem Design Funken verleihen und die Monotonie brechen.
Spiele mit bestimmten Elementen
Der beste Weg, um vom Netz zu gehen, ist mit einem einfachen Detail. Wenn dem gesamten Entwurf ein Gittersystem fehlt, wird dies wahrscheinlich zu einem Durcheinander führen. (Und genau das versuchen wir zu vermeiden.)
Beginnen Sie mit einem Hintergrund oder Akzentelement, um die Aufmerksamkeit auf sich zu ziehen. Coole Schwünge oder interessante Formen sind ein guter Anfang. Sie können auch eine kräftige Farbe hinzufügen, um das Element hervorzuheben.
The Land of Nod macht dies effektiv mit dicken abgewinkelten Linien, um den Benutzern zu zeigen, wo auf der Website ein guter Umsatz erzielt wird. Diese Linien sind manchmal in Bildern enthalten und kreuzen manchmal weiße Räume in Bildern. Die Varianz ist visuell interessant und stellt sicher, dass gelegentliche Gitterbrüche ungewöhnlich genug sind, um die Aufmerksamkeit auf sich zu ziehen, aber den Rest des Designs so gut zusammenbringen, dass es sich anfühlt, als gehörte es.
Bewegen Sie es herum
Verwenden Sie Bewegung und Bewegung, um Elemente vom Raster zu entfernen, oder verschieben Sie sie vielleicht sogar ein bisschen. Einfache Animationen oder Elemente, die mit Video zusammenarbeiten, können ein Raster weniger rasterartig erscheinen lassen.
Dieses Konzept funktioniert sehr gut mit Designs, die sich auf ein einzelnes Element konzentrieren.
Der Schwerpunkt von Trippeo, oben, liegt auf der Reisespesengrafik. Der Standort wird im gesamten Site-Design nicht geändert. Alles andere rundherum bewegt sich, vom Video auf dem Startbildschirm bis hin zu Informationen über die App, die durch anklickbares Parallax-Scrollen vergrößert wird.Dieses Element vereint den Rest eines aus dem Gleichgewicht geratenen, off-grid-Stildesigns mit modernen Launen und Flair.
Erstellen Sie eine Illusion des Brechens des Gitters
Sie können das Gitter brechen, ohne es zu brechen.
Verwenden Sie ein kleines vertikales Raster, um interessante Kombinationen von Formen und Ausrichtungen zu erstellen, während Sie im Raster bleiben (auch wenn es nicht so aussieht).
Das Schöne daran, das Raster nicht zu brechen, um diese Art von Design zu erstellen, besteht darin, dass Sie alle Vorteile eines gitterbasierten Designs beibehalten und dabei etwas anderes tun. Die besten Optionen sind häufig Designs, die in Vielfachen des Rasters funktionieren (drei, fünf, sieben usw.), so dass sich Formen nie genau aneinander reihen, sondern sich immer ähnlich anfühlen.
Marche Notre Dame verwendet dieses Konzept, um Bilder von ihrem Standort aus zu präsentieren. Das Raster außerhalb des Gitters wird vertikal und horizontal verwendet, um eine Collage mit genau der richtigen weißen Fläche zu erstellen. Dies ist eine gute Möglichkeit, die gleichen alten Mauerwerksmuster für Fotos zu durchbrechen, die praktisch überall zu sein scheinen.
Fazit
Das Brechen des Gitters ist nicht immer einfach. Oft kann es zu einem Durcheinander werden.
Die besten Anwendungen werden auf eine Seite oder einen Satz von Elementen angewendet, um zu verhindern, dass das Design außer Kontrolle gerät. Dies ist auch hilfreich, wenn Sie über die Reaktionsfähigkeit nachdenken und wie Sie mit Elementen umgehen, die auf kleineren Bildschirmen möglicherweise nicht gut passen, da Sie nicht mit so vielen Kuriositäten zu tun haben.
Das Brechen des Gitters - wenn es gut gemacht wird - kann eine unterhaltsame und anregende Methode sein, um etwas anderes auszuprobieren.