Haupt / Merkmal

So brechen Sie die Regeln des Website-Rasters

Das Raster ist nicht in erster Linie ein visuelles Entwurfswerkzeug, sondern eine Hilfe für die Benutzererfahrung - wie Fahrspuren auf einer Straße. Ein gutes Raster legt eine Norm und einen Rhythmus für das Anzeigen einer Website fest, sodass Benutzer nicht darüber nachdenken, wo sie als Nächstes lesen oder anzeigen sollen. Sie verstehen dies aufgrund der Reihenfolge und Hierarchie, die Sie im Raster festgelegt haben. Sie können mehr von unserem lernen Designer-Leitfaden zur Gittertheorie .

Wenn jedoch alles dem Regime des Gitters folgen würde, würden wir alle vor visueller Langeweile Kuckuck machen. Manchmal möchten wir, dass ein Design Elemente enthält, die aus den Linien herausspringen und sagen: „Hey, sieh mich an! Ich bin cool dafür, die Regeln zu brechen.

Definieren Sie das Raster

Wenn Sie nicht zuerst ein starkes Gitter definieren, bedeutet das Aufbrechen nichts. Ein starkes, sauberes Raster mit einer klaren Struktur und viel Leerraum zum Atmen ist einer der wichtigsten Bestandteile einer guten visuellen Struktur für Ihre Inhalte.

Ein subtiler Verstoß gegen die Regeln kann eine gute Möglichkeit sein, die Aufmerksamkeit auf ein Detail in Ihrem Design zu lenken. Richtig gemacht, kann es Ihrem Design helfen, sich von diesem eingeschränkten und kastenförmigen Aussehen zu lösen - eine verbreitete Kritik am Webdesign.

Ein Bild, das über einen Rand hinausgezogen wird, oder ein Aufkleberetikett, das über ein wenig Inhalt geklebt wird, tragen wesentlich dazu bei, Ihrem Design ein schönes, trotziges Detail zu verleihen. Zu viel von dieser Technik wird jedoch die Nuance zerstören und Sie werden das Interesse verlieren. Wählen Sie Ihren Regelverstoß sorgfältig aus.

Vier gute Beispiele

01. Apple

Vor ein paar Jahren hat Apple.com seine iMacs über den genau definierten Rand des Hauptinhaltsrahmens gebracht, was den Eindruck erweckt, dass diese Macs nicht eingeschränkt werden.

02. Gens Wurstladen

Sie können ein Abzeichen, einen Aufkleber, ein Banner oder ein Band verwenden, um das Raster zu durchbrechen und ein wenig Spaß zu haben, wie es Gene's Sausage Shop & Delicatessen hier tut.

03. Andy Clarke

Ein subtiles, aber effektives Bild, das sich mit einer früheren Iteration des Portfolios von Designer Andy Clarke überschneidet. Diese Technik ist eine großartige Möglichkeit, einen Bildstapel frisch zu halten.