Swiss UI Design

Dieses Skill übersetzt die Prinzipien der Schweizer Schule in konkrete UI-Entscheidungen. Der Gründungsgedanke der Schule von Ernst Keller ist, dass die Designlösung aus dem Inhalt des Problems hervorgehen muss. Alles Folgende folgt daraus: Das Raster ist die Logik, die Schrift das Bild, Farbe sind starke flache Ebenen mit klaren Aufgaben, Weißraum ist Struktur, und nichts ist Dekoration.

Das zweite Ziel: Das Ergebnis darf nicht KI-generiert aussehen. Generische KI-Oberflächen teilen einen Look (zentrierter Hero, lila Farbverlauf, abgerundete Karten mit weichen Schatten, drei Icon-Features, vager Text). Der Swiss Style ist das Gegenteil dieses Looks, daher löst die konsequente Anwendung die meisten Probleme; Teil 5 kümmert sich um den Rest.

Das dritte Ziel: Das Ergebnis muss Kraft haben. Eine aufgeräumte Seite mit cremefarbenem Hintergrund und einem orangefarbenen Block ist nur im Raster Swiss. Die Plakate, für die dieser Stil bekannt ist, sind bedeckt mit Farbe: Starke flache Farbe oder Schwarz füllt 83–97 % des Blattes, oder eine chromatische Tinte trägt alles und eine getönte Fläche füllt den Rest. Daher wählt Schritt 4 einen Look (Grund, Farbschema, Bildbehandlung) vor jedem Layout. references/looks.md enthält fünf Looks, die von echten Plakaten stammen, mit getestetem CSS; scripts/color_power.py misst das Ergebnis.

Wie diese Datei organisiert ist

Workflow – die Schritte in Reihenfolge
Raster, Abstände, Schrift und Farbe – Tokens, Skalen, Paletten, Layout-Rezepte, Basis-CSS
Arabisch und RTL
Komponenten
Nicht KI-gemacht aussehen – die Checkliste zur Überprüfung
Quelle: Die Schweizer Schule in Kürze (aus dem Booklet The Swiss School of Design)

Ebenfalls in diesem Skill: references/looks.md (Looks, Kontrastpaare, getestete CSS-Mechaniken) und scripts/color_power.py (Farbkraftprüfung für Screenshots).

Teil 1 – Workflow

1. Vom Inhalt ausgehen

Notieren Sie die eine Sache, für die der Bildschirm existiert (eine Botschaft, eine Aktion). Sie wird das dominante Element.
Ordnen Sie den Rest in höchstens 3–4 Hierarchieebenen.
Wenn der Nutzer keine Inhalte angegeben hat, schreiben Sie echte, spezifische Inhalte in der Zielsprache: realistische lokale Namen, genaue Zahlen, Daten, Preise, Orte. Niemals Lorem Ipsum, niemals Marketing-Fülltext („Entfesseln Sie die Kraft von…“ oder das arabische Äquivalent „Entdecken Sie die Kraft von…“). Spezifischer Inhalt ist das stärkste Einzelzeichen dafür, dass ein Mensch die Seite erstellt hat. Teilen Sie dem Nutzer mit, welche Details Annahmen sind, die ersetzt werden müssen.
Schreiben Sie den Text auf Swiss-Art: objektiv und sachlich, frei von den übertriebenen Behauptungen der Werbung und Propaganda (Meggs‘ Definition des Stils). Der Designer fungiert als klarer Kanal für die Information, nicht als Verkäufer. Fakten, Zahlen, Bedingungen und schlichte Verben überzeugen hier besser als Adjektive.
Entscheiden Sie sich für Sprache und Richtung. Arabisch → dir="rtl" und wenden Sie Teil 3 an, der Ausrichtung, Schriftarten und Zeilenabstand ändert.

2. Eine Richtung wählen – mit Absicht

Die Schweizer Schule ist nicht ein Look. Wählen Sie eine dieser Richtungen, die jeweils auf den Prinzipien eines Pioniers oder einer Schule basieren (verwenden Sie die Prinzipien; kopieren Sie niemals deren Plakate):

Richtung	Charakter	Passt zu
Zürich – Müller-Brockmann	Strenges Raster, manchmal sichtbar; objektiver Ton; kleine präzise Schrift neben einem großen Foto oder einer abstrakten geometrischen Form; viel Weiß.	Dokumentation, dichte Apps, Dashboards, Institutionen, Finanzen
Basel – Hofmann	Schwarz und Weiß, hoher Kontrast, Figur–Grund, sehr wenige große Formen, Schrift als Form.	Kultur, Portfolios, Veranstaltungen, Architektur
Ballmer	Überschriften auf dem Raster aufgebaut, schwere Gewichte, Rot + Schwarz, gestapelte Wörter, sichtbare Struktur.	Marken, Kampagnen, Launch-Seiten, Landing Pages mit Haltung
Keller	Kräftige flache Farbfelder, einfache geometrische Formen, übergroße Schrift, die am Rand beschnitten wird.	Konsumgüter, Bildung, Gemeinschaft, Museen
Basler Sachplakat	Ein Objekt (das Produkt, ein Werkzeug, ein Gericht, ein Gerät) riesig, nah und scharf fotografiert, mit fast nichts anderem als einem Namen.	Physische Produkte, Lebensmittel, Einzelhandel, Hardware
Fotomontage (Herbert Matter)	Fotografien in dramatisch unterschiedlichen Maßstäben kombiniert, auf dem Raster geschnitten, mit Schrift, die darin verankert ist.	Tourismus, Orte, Veranstaltungen, Medien

Hintergrund, der die Wahl unterstützt: Die Schweizerische Nationalbibliothek beschreibt zwei Nachkriegslager, Zürich = Konkrete Kunst (mathematische Konstruktion, reine geometrische Ebenen; Max Bill baute das erste echte Layout-Raster Ende der 1930er Jahre) und Basel = Neue Sachlichkeit (das Objekt, das Foto, Formkontrast). Keller selbst lehrte keinen festen Stil: Er glaubte, die Lösung sollte aus dem Inhalt hervorgehen, daher ist seine eigene Arbeit sehr vielfältig. Das Skill folgt ihm: Die Richtung ergibt sich aus dem Inhalt, nicht aus der Gewohnheit.

Zürich ist die „sichere“ Wahl und es ist leicht, jedes Mal darauf zurückzugreifen; das führt dazu, dass jede Ausgabe gleich aussieht. Wählen Sie Zürich, wenn der Inhalt dicht und funktional ist. Für Landing Pages, Marken und Kampagnen bevorzugen Sie Ballmer, Keller oder Basel – sie verleihen der Seite einen starken Moment (ein volles Feld mit kräftiger Farbe, ein riesiges beschnittenes Wort, eine kontrastreiche Form), die einer ruhigen Seite fehlt. Teilen Sie dem Nutzer in einer Zeile mit, welche Richtung Sie gewählt haben und warum. Schreiben Sie es nicht innerhalb der Benutzeroberfläche.

Richtung und Look sind separate Entscheidungen. Die Richtung bestimmt die Struktur; der Look (Schritt 4) bestimmt die Farbe. Ein Zürich-Raster kann den Sun-Look tragen, und Ballmer kann Black + spectrum tragen.

3. Das Konzept im Inhalt finden

Die Basler Schule drückte es so aus (Kenneth Hiebert, ein Hofmann-Schüler): Eine abstrakte Struktur ist das Vehikel für die Kommunikation, und sie zu finden zwingt Sie, die Essenz der Botschaft zu isolieren, bevor Sie einen oberflächlichen Stil anwenden. Tun Sie dies schriftlich, bevor Sie gestalten:

Listen Sie 5–8 konkrete Fakten aus dem Inhalt auf: eine Zahl, ein Ort, ein physisches Objekt, eine Zeit, ein Prozess, ein Name, ein Gegensatz (vorher/nachher, klein/groß).
Schreiben Sie drei verschiedene Konzepte, jeweils einen Satz, jedes auf einem anderen Fakt aufgebaut. Beispiel für einen Coworking-Space: (a) die Adresse des Gebäudes und der Grundriss als Bild; (b) die 15 Stunden des Tages als Raster, das Sie direkt buchen; (c) die eigentlichen Objekte – ein Schreibtisch, ein Schlüssel, ein Stuhl – riesig gezeigt (Sachplakat).
Wählen Sie dasjenige, das am spezifischsten für dieses Produkt ist, das nicht durch Ändern des Namens auf die Seite eines Mitbewerbers verschoben werden könnte. Sagen Sie in einer Zeile, welches Sie gewählt haben.

Das riesige Element muss aus dem Inhalt stammen, nicht aus einem Aufruf zum Handeln. Ein riesiges Imperativ-Verb („Buchen“, „Starten“ oder die arabischen Äquivalente) ist ein Gimmick: Es passt zu jedem Produkt und wird schnell zur neuen Vorlage. Verwenden Sie ein Nomen, eine Zahl oder einen Namen, den nur dieses Produkt hat: den Ort, die Schlüsselfigur, das Objekt, das Datum.

4. Den Look wählen, dann das System einrichten

Look zuerst. Wählen Sie vor jedem Layout einen Look aus und öffnen Sie references/looks.md für dessen Tokens, Schriftpaare, Komposition und getestetes CSS. Der Grund steht an erster Stelle: Kräftige flache Farbe oder Tinte bedeckt mindestens 60 % des ersten Bildschirms. Die beiden Papier-Grund-Looks sind die Ausnahme: Eine chromatische Tinte trägt die gesamte Schrift und eine getönte Fläche füllt mindestens 30 %. Wählen Sie aus dem Inhalt, verwenden Sie niemals denselben Look zweimal hintereinander, und verwenden Sie einen Look pro Seite (Abschnitte variieren die Komposition, nicht die Palette).

Look	Grund	Palette	Passt zu
1 Sun	Ein kräftiger Farbton und sein Komplementär	Gelb `#FFC611` · Indigo `#3A3A9C` · Marineblau `#16154A`	Landing Pages, Veranstaltungen, Kultur, Bildung
2 Violet ink	Weiß; eine chromatische Tinte für alle Schrift	Violett `#4F2A7D` · Periwinkle `#CFDBF1` · Orchidee `#BD9CBB`	Redaktionell, Zeitschriften, Berichte
3 Primary bands	3–4 gestapelte randlose Bänder	Blau `#2F7BFF` · Grün `#0FA23A` · Gelb `#EFB83E` · Rot `#E6040A` · Tinte	Faktenbasierte Landing Pages, Kampagnen, Institutionen
4 Black + spectrum	Tintenschwarz	6–9 reine Farbtöne, jeder mindestens zweimal	Kataloge, Buchung, Produktfamilien, Dashboard-Legenden
5 Gig poster	Creme oder Schwarz	Tinte + Rot, Cyan, Gelb, Lila, mit Überdruck	Veranstaltungen, Musik, Gemeinschaft, Launches

Orange + Marineblau, Kobalt + Gelb, Pink + Tiefgrün und andere Gründe sind in derselben Datei. Wenn die Aufgabenstellung eine Markenfarbe nennt, wird sie zum Grund oder zu einer Ebene, und die Partner werden nach dem Schema ausgewählt.

Dann die Tokens (Teil 2): die Grundlinie (Schriftgröße und Zeilenabstand), ein daraus abgeleitetes Raster (standardmäßig 12/8/4 Spalten oder eine andere Anzahl, wenn der Inhalt es erfordert), Basiseinheit (8px), eine Schriftfamilie (oder eine Arabisch + eine Latein-Partnerin) mit einer steilen Skala und die Palette des Looks mit einer Textfarbe pro Oberfläche, jedes Paar auf Kontrast geprüft.

5. Mit Asymmetrie komponieren

Die Quelle beschreibt Balance durch Verteilung der visuellen Kräfte, nicht Symmetrie.

Zentrieren Sie den Hero nicht. Platzieren Sie ein schweres Element (riesige Überschrift, großes Foto, Farbfeld) an einer Seite, balanciert durch Weißraum und kleine Texte auf der anderen.
Verwenden Sie ungleiche Spannweiten: 5+7, 4+8, 3+9, 2+6+4. Überall gleiche Drittel ist der Standard der KI.
Versetzen Sie bewusst: Überschrift auf Spalten 1–9, Intro auf 7–11 darunter, Metadaten auf 1–3.
Geben Sie jedem Abschnitt eine andere Komposition auf demselben Raster. Das Wiederholen von „zentrierter Titel + Kartenraster“ in jedem Abschnitt ist ein starkes KI-Merkmal.
Notieren Sie vor dem Codieren eines Abschnitts seine Spannweiten als Kommentar (/* hero: h1 1–10, meta 1–3, lead 6–11 */). Das hält das Raster ehrlich.

6. Die Plakatschicht hinzufügen – was es Swiss macht, nicht nur sauber

Dieser Schritt ist der Unterschied zwischen einem Swiss-Design und einem aufgeräumten. Die Quelle selbst stellt fest, dass die Swiss-Prinzipien zur Grundlage moderner UI wurden. Das bedeutet, dass die funktionalen Regeln allein (Raster, Haarlinien, linksbündiger Text, eine Indexliste, ein Stat-Streifen, ein Akzent) jetzt etwas hervorbringen, das jedes Designsystem bereits ähnlich aussieht. Es ist sauber, aber es ist weder neu noch erkennbar Swiss. Was die Schweizer Schule auszeichnete, waren ihre Plakate: Schrift als Bild, kräftige Farbebenen, Geometrie, Maßstabsspannung und sichtbare Struktur. Bringen Sie diese Sprache in die Benutzeroberfläche.

Die Quellen sagen dasselbe von zwei Seiten. Eine Studie über flaches Design (Aristova & Vasilieva) führt flaches Webdesign auf den Internationalen Stil zurück und warnt davor, dass seine Verbreitung Websites vereinheitlicht und die Identität jeder Website und Institution schwächt. Ein designhistorisches Lehrbuch stellt fest, dass, sobald der Swiss-Stil universell wurde, seine visuelle Sprache weniger innovativ wurde. Die Lösung besteht nicht darin, die Prinzipien fallen zu lassen. Sondern darin, sie so zu verwenden, wie die ursprünglichen Designer es taten: als Methode, um für jedes Stück Inhalt eine spezifische Form zu finden.

Regel: Eine Landing Page, eine Marketing-Site oder eine Markenseite benötigt mindestens drei charakteristische Moves. Einer kommt in den Hero, und mindestens zwei weitere kommen in andere Abschnitte. Eine Produkt-UI (Dashboard, App) bleibt funktional, erhält aber einen Plakat-Moment: den Seitenkopf, den Anmeldebildschirm, einen leeren Zustand oder einen Abschnittstrenner.

Charakteristische Moves (jeder stammt von einem Prinzip, das in den Plakatbeispielen der Quelle zu sehen ist; verwenden Sie das Prinzip und reproduzieren Sie niemals ein Plakat):

#	Move	Wie in UI	CSS
1	Buchstaben als Architektur (Ballmer)	Ein aus Rastermodulen aufgebautes Wort oder Initial: riesige Buchstaben, die durch Spaltenlinien getrennt sind, oder aus Quadraten zusammengesetzte Buchstaben. Im Arabischen ist Square Kufic das natürliche Äquivalent, da es sich um eine auf einem Raster aufgebaute Schrift handelt. Verwenden Sie es für ein Wortmarke oder ein Hero-Wort, gezeichnet in SVG aus Quadraten und lesbar gehalten.	SVG `<rect>` auf einem Modulraster; `grid` von Zellen
2	Riesige beschnittene Schrift (Keller)	Überschrift größer als der Viewport, an einer oder zwei Kanten abgeschnitten. Die Identität der Seite ist das Wort selbst.	`font-size: 28vw; line-height: .8; margin-inline-start: -.05em;` Abschnitt `overflow: clip`
3	Ineinandergreifende Schrift (Hofmann)	Wörter mit negativem Zeilenabstand gestapelt, so dass sie sich berühren oder überlappen, wodurch ein typografischer Block entsteht.	`line-height: .75`, negative Ränder, `mix-blend-mode: multiply` auf einer zweiten Farbe
4	Gedrehte Ebene (Müller-Brockmann)	Ein Inhaltsblock, ein Raster oder eine Streuung kleiner Quadrate, die auf einer um 45° oder 90° gedrehten Ebene gegen das gerade Raster platziert sind.	`transform: rotate(-45deg)` auf einem Wrapper; Text darin lesbar halten oder um 90° drehen
5	Figur–Grund-Geometrie (Hofmann)	Ein großer Kreis, Halbkreis oder Ring in Tinte oder einer starken Palettenfarbe, durch den Bildschirmrand geschnitten. Text sitzt innerhalb der Form oder umschließt sie.	`border-radius: 50%`-Element / SVG, `clip-path`, `shape-outside`
6	Vertikale Wortspalte (Ballmer)	Eine schmale, vollhöhe Farbspalte mit einem vertikal gesetzten Wort. Arabisch: Drehen Sie das ganze Wort (stapeln Sie niemals Buchstaben).	`writing-mode: vertical-rl`, `transform: rotate(180deg)`
7	Farbfeld + Tintenblock (Keller)	Ein ganzer Abschnitt in einer starken Feldarbe mit einem festen schwarzen Rechteck, das den Text enthält, oder zwei starke Farben, die Kante an Kante aufeinandertreffen.	Zwei Blöcke auf dem Raster, keine Schatten
8	Raster als Inhalt (Müller-Brockmann)	Absichtlich gezeichnete Rasterlinien mit Daten, Zahlen oder Text, die in die Zellen eingerastet sind. Verwenden Sie es für einen Fahrplan, ein Preisraster oder einen Abschnittsindex.	Rahmen auf Zellen oder `repeating-linear-gradient`-Linien
9	Maßstabsspannung in einer Zeile	Ein 200px-Wort neben 12px-Metadaten auf derselben Grundlinie.	Flex mit `align-items: baseline`
10	Tonale Überlagerung	Zwei überlagerte Display-Wörter, eines in hellem Grau dahinter und eines in Tinte oder Papier davor, auf dem Raster versetzt.	Absolute Positionierung innerhalb einer Gitterzelle
11	Objekt-Hero (Basler Sachplakat)	Ein reales Objekt aus nächster Nähe fotografiert, größer als das Leben, ausgeschnitten oder eng beschnitten, mit nur dem Namen und einer Tatsache.	`object-fit: cover`, Bild über 8–12 Spalten, am Rand beschnitten
12	Fotomontage (Matter)	Zwei oder drei Fotografien in sehr unterschiedlichen Maßstäben (ein Detail riesig, eine weite Ansicht klein) auf Rasterfelder geschnitten, mit darüber oder dazwischen platzierter Schrift.	Rasterfelder mit `overflow: clip`, an Feldrändern ausgerichtete Bilder
13	Konfrontation (Hofmann)	Zwei ungleiche Elemente treffen mit Absicht aufeinander: ein Buchstabe gegen eine geometrische Form, ein dichter Textblock gegen ein leeres Feld, eine runde Form gegen ein gerades Raster, Schwarz gegen Weiß.	Zwei Rasterbereiche, die eine Kante oder Überlappung teilen; `mix-blend-mode: difference`

7. Die Screenshots überprüfen

Führen Sie scripts/color_power.py auf dem Screenshot aus. Wenn der Farbkraft-Score unter der für den Look angegebenen Schwelle liegt (normalerweise 70 %), passen Sie die Palette oder die Deckung an. Die Regel: Mindestens 60 % des ersten Viewports sollten eine starke flache Farbe sein, nicht Weiß, Grau oder Inhalt. Dieser Test hält den Plakat-Charakter aufrecht.

Teil 2 – Raster, Abstände, Schrift und Farbe

System-Tokens

Der Standard ist 12 Spalten für Desktop, 8 für Tablet, 4 für Mobilgeräte. Der Seitenrand (--gutter) beträgt 24px auf Mobilgeräten, 48px auf Tablets, 80px auf Desktops. Die Basiseinheit (--base-unit) beträgt 8px. Alle Abstände, Ränder und Auffüllungen sind Vielfache von 8px.

Schrift-Skala

Die Skala ist steil: --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 2rem; --text-2xl: 3rem; --text-3xl: 5rem; --text-4xl: 8rem; --text-5xl: 12rem;

Schriftfamilie: Eine serifenlose Schrift überall, entweder eine Variable mit anpassbarer Strichstärke oder eine mit mehreren Gewichten. Für Arabisch + Latein wählen Sie zwei Partner: eine Arabisch-Variable (z. B. Noto Kufi Arabic, Cairo, IBM Plex Sans Arabic) und eine Latein-Variable (z. B. Inter, Roboto, Work Sans), beide mit einem ähnlichen x-Wert und Strichstärken-Spektrum. Arabisch benötigt einen größeren Zeilenabstand: line-height: 1.6 für Fließtext, line-height: 1.2 für Überschriften (Latein verwendet 1.5 bzw. 1.05).

Farbe

Jeder Look in references/looks.md enthält eine --palette mit 3–8 Farben, jede mit einer benannten CSS-Variable. Textfarben werden pro Oberfläche zugewiesen: --text-on-light, --text-on-dark, --text-on-accent. Jedes Paar wird für einen Kontrast von mindestens 4.5:1 (AA) geprüft.

Layout-Rezepte

Die folgenden Raster-Rezepte sind Beispiele; variieren Sie sie nach Inhalt.

.hero { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.hero h1 { grid-column: 1 / 10; }
.hero p { grid-column: 7 / 12; }

.section-index { display: grid; grid-template-columns: 4fr 8fr; }

Teil 3 – Arabisch und RTL

Wenn die Zielsprache Arabisch ist:

Setzen Sie dir="rtl" auf das html-Element und stellen Sie lang="ar" ein.
Alle Abstände wechseln die Richtung: margin-inline-start und padding-inline-end statt linker/rechter.
Verwenden Sie eine Arabisch-Variable-Schrift für den Text. Latein-Schrift wird für Zahlen, Marken, englische Begriffe verwendet (aber stellen Sie den Arabisch-Schriftgrad für eine konsistente visuelle Höhe ein).
Überschriften-Schriftgrad: Arabische Buchstaben sind vertikal höher als lateinische; verwenden Sie font-size-adjust: 0.5 oder passen Sie die Schriftgrößen manuell um 15–20 % an.
Listen, Navigation und Formulare spiegeln das Layout; stellen Sie sicher, dass das Raster das tut.
Für Square Kufic zeichnen Sie SVG <rect>-Elemente auf einem Modulraster in einer 1:1-Auflösung. Die Schrift ist in diesem Fall streng geometrisch.
Wenn Sie den „Vertikale Wortspalte“-Move verwenden, drehen Sie das ganze arabische Wort mit writing-mode: vertical-rl; transform: rotate(180deg). Stapeln Sie niemals einzelne Buchstaben vertikal, da Arabisch nicht so funktioniert.

Teil 4 – Komponenten

Überschriften

Schwere Gewichte (700–900), links- oder rechtsbündig (je nach dir), niemals zentriert. Die größte Überschrift wird auf die Bildschirmbreite skaliert oder größer (siehe Move 2).

Navigation

Flache Liste der Links, horizontal oder vertikal, mit einem dünnen Trennstrich. Kein Hamburger-Menü auf dem Desktop; auf Mobilgeräten ist ein Symbol erlaubt, aber der Text sollte darunter oder daneben bleiben.

Karten

Rechteckig, keine abgerundeten Ecken, keine Schatten. Ein Bild oder eine Farbe füllt den oberen Teil; Text ist linksbündig darunter. Die Breite wird durch das Raster bestimmt. Kein innerer Abstand, der die Karte vom Raster löst.

Formulare

Eingabefelder haben einen unteren Rand (border-bottom), keinen umlaufenden Rahmen. Beschriftungen sind darüber oder linksbündig daneben, in derselben Schriftgröße wie die Eingabe. Schaltflächen sind flach, farbig (eine der Palettenfarben), ohne abgerundete Ecken.

Tabellen

Leere Rahmen um Zellen oder nur untere Rahmen für Kopfzeilen. Zahlen sind rechtsbündig, Text linksbündig. Keine abwechselnden Zeilenfarben (das ist zu sehr traditionell; verwenden Sie stattdessen eine dünne horizontale Linie).

Heldenbereich (Hero)

Eine starke flache Farbe oder ein Bild als Hintergrund, mit einem oder zwei Textelementen und einer optionalen Schaltfläche. Die Schrift ist riesig (Move 2) oder das Objekt ist riesig (Move 11).

Fußzeile

Ähnlich wie die Navigation: eine Liste von Links und eine Zeile mit Metadaten (Copyright, Kontakt). Kein großes Branding.

Teil 5 – Nicht KI-gemacht aussehen – die Checkliste zur Überprüfung

Bevor Sie eine Seite als abgeschlossen betrachten, überprüfen Sie jedes dieser Elemente. Wenn eines zutrifft, ersetzen Sie es:

Zentrierter Heldentext: „Willkommen bei…“ oder „Entdecken Sie…“ in der Mitte. → Ersetzen durch ein asymmetrisches Layout mit einem großem Wort oder Bild auf einer Seite.
Lila/Blau-Verlauf in der Hero: → Ersetzen durch eine flache Farbe aus dem Look.
Abgerundete Karten mit weichen Schatten: → Ersetzen durch rechteckige Karten, die auf dem Raster ausgerichtet sind, ohne Schatten.
Drei Icon-Features nebeneinander: → Ersetzen durch eine Liste, ein Raster, ein Statistik-Paar oder ein Objektbild. Icons sind zulässig, aber nicht als drei gleich große Karten.
„Unlock the power of…“ oder ähnlicher Marketingsprech: → Ersetzen durch konkrete, sachliche Sprache: Fakten, Zahlen, direkte Verben.
Symmetrische Abschnitte (gleiche Spannung auf beiden Seiten): → Jeder Abschnitt sollte eine asymmetrische Komposition haben.
Großformatige Hintergrundbilder (Fotos oder Videos) in voller Breite: → Ersetzen durch einen Farbfeldhintergrund oder eine geometrische Form.
Ein „C“-förmiges Layout (Header, dann drei Spalten, dann Footer, alles gleich breit): → Variieren Sie Rasterspannweiten zwischen den Abschnitten.
Schriftgrößen, die nicht Teil einer steilen Skala sind (z. B. 16px, 18px, 20px): → Verwenden Sie eine definierte Skala mit großen Sprüngen.
Jede Verwendung von „Lorem Ipsum“ oder generischem Platzhaltertext: → Ersetzen durch echten, spezifischen Inhalt.

Teil 6 – Quelle: Die Schweizer Schule in Kürze

(Aus dem Booklet The Swiss School of Design, das die Prinzipien zusammenfasst.)

Die Schweizer Schule, auch bekannt als Internationaler Typografischer Stil, entstand in den 1920er–50er Jahren in der Schweiz. Ihre Kernprinzipien:

Der Inhalt bestimmt die Form. Das Design löst ein spezifisches Kommunikationsproblem, es ist nicht dekorativ.
Raster als organisierendes Prinzip. Ein modulares Raster schafft Ordnung und Konsistenz.
Asymmetrie. Balance wird durch Verteilung visueller Kräfte erreicht, nicht durch Symmetrie.
Serifenlose Schrift. Schrift ist das Hauptbild; sie ist klar, objektiv und lesbar.
Flache Farbe. Farbe wird als flache Ebene verwendet, um zu strukturieren, zu akzentuieren oder Kraft zu verleihen.
Aktiver Weißraum. Weißer Raum ist kein leerer Raum; er ist ein aktives Gestaltungselement, das Atem und Hierarchie schafft.
Fotografie als objektives Dokument. Fotografien zeigen das Motiv klar und direkt, ohne künstlerische Verzerrung.
Keine Dekoration. Jedes Element hat einen funktionalen Grund zu existieren.

Diese Prinzipien, konsequent angewandt, erzeugen Designs, die zeitlos, lesbar und spezifisch für ihren Inhalt sind – das genaue Gegenteil eines generischen KI-Templates.

Swiss-UI-Design

Was ist Swiss-UI-Design?

In Ihrer bevorzugten KI fragen

Dokumentation