Layouts

Die Smart Chip-Layouts verwenden ein einfaches aber flexibles Rastersystem, das alles sauber und einheitlich aussehen lässt. Gleichzeitig gibt es dir viel Freiheit, dich an verschiedene Grössen, Formfaktoren und Designanforderungen anzupassen.

Layout-Stile

Es gibt zwei Arten von Layouts: Vollflächige Layouts und Weissraum-Layouts. Beide verwenden das gleiche Rastersystem und die gleichen Regeln.

Vollflächige Layouts nutzen unsere Farbpalette, eindrucksvolle Bilder und grosse Headlines, um die Aufmerksamkeit auf sich zu ziehen. Sie eignen sich am besten für Beschilderungen oder als Blickfang, wenn sie mit Weissraum-Layouts kombiniert werden.

Weissraum-Layouts lassen mehr Platz für Text und können mehr Informationen enthalten. Dadurch sind sie besser geeignet, um eine Geschichte zu erzählen.

Rastereinstellung

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.

Das war's. Damit hast du das komplette Rastersystem. Nutze die Rasterlinien, um Elemente wie das Logo, Überschriften, CTAs, Bilder und mehr auszurichten und zu skalieren.

Verwendung des Rasters

Nutze die Rasterlinien als Orientierungshilfe, um alle 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.

Headlines

Headlines können so skalieren, um den verfügbaren Platz zu nutzen. Das müssen sie auch nicht - manchmal ist kleiner besser. Gib dem Design Raum zum Atmen.

Halte einen Abstand zu den Bildern ein, der mindestens dem Rand entspricht. Lege keinen Text über Bilder, ausser in Full-Bleed-Layouts.

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

Bildmaterial

Richte deine Bilder auch an den Rasterlinien aus. Für einen sauberen, strukturierten Look können die Bilder am Rand aufhören oder bis zum Rand reichen. Für einen dynamischeren Effekt können sie auch vollflächig sein und mit Text und Elementen überlagert werden.

Der Hintergrund neben dem Bild ist entweder schwarz oder weiss. Weiss ist luftig und frei, während Schwarz schlicht und kraftvoll ist. Wähle den Stil, der am besten zum Kontext und Inhalt passt.

Achte bei der Verwendung von Full-Bleed darauf, dass dein Text gut lesbar bleibt. Du kannst die Schriftdicke erhöhen, um die Lesbarkeit zu verbessern. Ausserdem solltest du den Text nicht über wichtigen Teilen des Bildes (z. B. Gesichtern) oder über sehr unruhigen Bereichen platzieren.

Die Optionen für den Beschnitt von Bildern sind komplett Randabfallend (auf allen Seiten), teilweise Randabfallend (auf drei Seiten) oder nicht Randabfallend.

Vermeide partiellen Beschnitt auf nur einer oder zwei Seiten.

Bild-im-Bild

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

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

Zeichen

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

Die Skalierung ist für horizontale und vertikale Layouts unterschiedlich:

Bei horizontalen Layouts skalierst du das Zeichen so, dass der "SC"-Teil zwischen ein bis zwei Rastereinheiten hoch ist.

Bei vertikalen Layouts skalierst du es so, dass der "SC"-Teil zwischen zwei bis vier Rastereinheiten breit ist.

Richte das Zeichen am "SC"-Teil und nicht an den Punkten aus. Die Punkte überlappen die Rasterlinien leicht.

Setze die Markierung nur über Bilder, wenn sie noch gut lesbar sind. Wähle die Version (schwarz oder weiss), die die beste Lesbarkeit bietet.

Beispiele

Ausnahmen

Das Rastersystem funktioniert für die meisten Grössen gut. Es gibt jedoch einige besondere Umstände, die eine Abweichung vom Raster erfordern.

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 biegen - 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 vier Raster zu klein werden (linkes Beispiel). Um eine harmonischere Grösse für das Zeichen zu erhalten, können wir hier die Regel brechen und es hochskalieren (rechtes Beispiel).