Layouts

Beginne mit den Seitenrändern. Der Standardrand für Layouts ist 8% der kürzesten Seite.

Unterteile den inneren Bereich in ein 10×10 Raster.

So erhältst du das komplette Rastersystem. Nutze die Rasterlinien, um Elemente wie das Logo, Überschriften, CTAs, Bilder und mehr auszurichten und zu skalieren.

Nutze die Rasterlinien als Orientierungshilfe, um die Elemente auszurichten. Das System ist so gemacht, dass es flexibel ist. Du kannst also die Grössen und Anordnungen beliebig kombinieren, um ein Layout zu erstellen, das deinen Bedürfnissen entspricht.

Der Hintergrund kann schwarz, weiß oder ein Farbverlauf aus unserer Palette sein. Mische ihn, um die Dinge frisch und interessant zu halten.

Wenn du einen Farbverlauf verwendest, wähle einen, der das Bild ergänzt. Er kann entweder eine dominante Farbe im Bild widerspiegeln, ein Detail des Bildes aufgreifen oder einfach zur Stimmung passen.

Head­lines

Du kannst Headlines so gross wie möglich skalieren. Manchmal ist kleiner aber besser, um dem Design Raum zum Atmen zu geben.

Halte einen Abstand zu den Bildern ein, der mindestens dem Seitenrand entspricht. Lege keine Headlines über Bilder, es sei denn, du verwendest ein vollflächiges Layout

Text kann entweder unter einer Rasterlinie hängen oder auf einer stehen, je nachdem, was für dein Layout besser geeignet ist.

Zeichen

Das Zeichen (Logo oder Icon) befindet sich normalerweise in der linken oder rechten oberen Ecke und berührt den Seitenrand.

Skaliere das Zeichen so, dass der "SC"-Teil eine Rastereinheit hoch ist. Für kleinere Anwendungen, bei denen das Zeichen dadurch zu klein würde, kannst du es auf zwei Rastereinheiten skalieren. Bei hohen Layouts, z. B. 9:16 Posts, kannst du es auf ein Minimun von einer halben Rastereinheit verkleinern.

Obwohl die Standardplatzierung des Zeichens ausserhalb des Bildes ist, kann es auch über dem Bild platziert werden, wenn der Platz sonst nicht ausreicht. Beachte, dass die Regeln für die Lesbarkeit immer noch gelten; mache dies nur, wenn das Zeichen noch gut lesbar ist.

Bild­­­gestaltung

Richte auch das Bildmaterial an den Rasterlinien aus. Es kann jedes Seitenverhältnis sein, das du für dein Layout brauchst, solange das fertige Bild am Raster ausgerichtet ist.

Bilder können am Seitenrand aufhören, um einen sauberen, strukturierten Look zu erzielen, oder für einen dynamischeren Effekt randabfallend sein. Wähle den Stil, der am besten zum Kontext und Inhalt passt.

Das Übereinanderlegen und Überlappen von Bildern ist eine tolle Art, um mehr Informationen zu teilen, dem Layout Energie zu verleihen und visuelle Tiefe zu schaffen.

Wenn die überlagerten Bilder das Raster leicht brechen, werden sie noch dynamischer.

Vollflächige Layouts

Vollflächige Layouts verwenden das gleiche Raster, aber die Bilder erstrecken sich über alle vier Kanten.

Du hast die Wahl zwischen vollem Beschnitt auf allen Seiten, teilweisem Beschnitt auf drei Seiten oder keinem Beschnitt.

Quadratische Bilder

Das Raster erlaubt keine perfekt quadratischen Bilder, aber in vielen Fällen sehen sie gut aus. Es ist ok, hier die Regeln zu umgehen - achte nur darauf, dass das Bild mit drei Rasterlinien übereinstimmt.

Ultrabreite Formate

Bei sehr breiten Formaten, zum Beispiel bei Bannern, führt das Befolgen der Rasterlinien zu einem sehr kleinen Zeichen und einem zu engen Seitenrand (Beispiel oben).

In diesen Fällen können wir die erste horizontale Rasterlinie als neuen Seitenrand verwenden. Ausserdem können wir das Zeichen so skalieren, dass es die gesamte Höhe bis zum Rand einnimmt (Beispiel unten).

Sehr hohe Formate

Das Gleiche gilt für sehr hohe Formate. In diesem Beispiel würde das Zeichen bei einer Skalierung auf eine Rastereinheit breiter werden als das Format selber (linkes Beispiel). Wir können hier die Regel brechen und die Marke auf eine vertikale Rasterlinie begrenzen (rechtes Beispiel).