Layouts anlegen

Du entwickelst für Broschüren, Magazine und Websites ein Gestaltungsraster mit Satzspiegel, Spalten und Grundlinienraster. In InDesign arbeitest du mit Musterseiten, Absatz-, Zeichen- und Objektformaten, sodass sich auch 24 Seiten in einem einheitlichen Stil schnell setzen lassen. Du gliederst Inhalte mit klarer Hierarchie, setzt Bilder und Text auf dem Raster und baust Inhaltsverzeichnisse und Seitenzahlen automatisch auf. Für Bildschirmlayouts überträgst du das Rasterprinzip in Figma auf Spaltenraster und Breakpoints.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Ein Gestaltungsraster mit Satzspiegel und Spalten entwickeln

   Kompetenz A

   Du legst Seitenränder, Satzspiegel, Spaltenanzahl, Spaltenabstand und Zeilen fest. Das Raster gibt allen Seiten eine gemeinsame Ordnung und lässt trotzdem genug Spielraum für unterschiedliche Inhalte.

   Situation

   Eine Wohnbaugenossenschaft in Zürich gibt viermal jährlich ein 16-seitiges Mitgliedermagazin im Format A4 heraus. Bisher sieht jede Ausgabe anders aus.

   Deine Aufgabe

   Entwickle ein Raster, das Lauftext, Interviews, Bildstrecken und Kurzmeldungen abdeckt.

   Gutes Ergebnis

   Satzspiegel mit Rändern innen 15 mm, aussen 20 mm, oben 18 mm, unten 25 mm. 12-Spalten-Raster mit 4 mm Spaltenabstand. Damit sind 2, 3, 4 oder 6 Textspalten möglich. Lauftext zweispaltig über je 6 Rasterspalten, Kurzmeldungen dreispaltig über je 4.

   SatzspiegelSeitenränder (Bundsteg, Aussensteg)SpaltenrasterSpaltenabstandModularrasterdoppelseitiges Layout
2. 2

   Text auf einem Grundlinienraster registerhaltig setzen

   Kompetenz B

   Du richtest ein Grundlinienraster passend zum Zeilenabstand des Lauftexts ein, damit Zeilen über alle Spalten und Seiten auf gleicher Höhe stehen. Titel und Bildhöhen stimmst du auf dieses Raster ab.

   Situation

   Im zweispaltigen Lauftext der Genossenschaftszeitschrift stehen die Zeilen links und rechts auf unterschiedlichen Höhen. Beim Durchscheinen des dünnen Papiers wirkt die Seite unruhig.

   Deine Aufgabe

   Richte ein Grundlinienraster ein und passe die Formate an.

   Gutes Ergebnis

   Lauftext 9.5 pt auf 13 pt Zeilenabstand, Grundlinienraster mit 13 pt Einteilung ab dem oberen Satzspiegelrand. Lauftext am Raster ausgerichtet, Zwischentitel mit Abstand davor von 13 pt. Bildhöhen auf ganze Rasterzeilen abgestimmt. Die Zeilen stehen über alle Spalten und auf Vorder- und Rückseite auf gleicher Höhe.

   GrundlinienrasterRegisterhaltigkeitZeilenabstandAbstand davor / danachRasterzeile
3. 3

   Mit Musterseiten, Absatz-, Zeichen- und Objektformaten effizient arbeiten

   Kompetenz C

   Du definierst wiederkehrende Elemente wie Seitenzahlen, Kopfzeilen und Rubriken auf Musterseiten und gestaltest Text ausschliesslich über Formate. Eine Änderung am Format wirkt sofort im ganzen Dokument.

   Situation

   Die Kundin will im fertigen 24-seitigen Katalog die Schriftfarbe aller Zwischentitel ändern und die Bildlegenden um 0.5 pt verkleinern.

   Deine Aufgabe

   Zeige, wie das Layout aufgebaut sein muss, damit diese Änderung in wenigen Sekunden erledigt ist.

   Gutes Ergebnis

   Musterseiten 'A-Standard' und 'B-Kapitelstart' mit automatischer Seitenzahl und Rubrikentitel als Textvariable. Absatzformate 'Lauftext', 'Zwischentitel', 'Lead', 'Legende', Zeichenformat 'Hervorhebung', Objektformat 'Bild mit Kontur'. Die Farbe wird einmal im Format 'Zwischentitel' geändert und die Legende einmal im Format 'Legende'. Alle 24 Seiten sind sofort aktualisiert.

   MusterseiteAbsatzformatZeichenformatObjektformatTextvariableAutomatische Seitenzahl
4. 4

   Seiten und Doppelseiten mit Bild, Text und Hierarchie gestalten

   Kompetenz D

   Du verteilst Inhalte auf dem Raster so, dass jede Doppelseite einen klaren Einstieg, einen Lesefluss und genug Weissraum hat. Du variierst innerhalb des Systems, damit das Heft nicht monoton wirkt.

   Situation

   Für das Kundenmagazin eines Energieversorgers soll eine Reportage über eine Solaranlage auf einem Bauernhof eine Doppelseite füllen: Titel, Lead, 4000 Zeichen Text, ein grosses und drei kleine Bilder, ein Zitat.

   Deine Aufgabe

   Gestalte die Doppelseite auf dem 12-Spalten-Raster.

   Gutes Ergebnis

   Linke Seite: randabfallendes Hauptbild über die ganze Seite, Titel weiss im unteren Bilddrittel. Rechte Seite: Lead über 8 Spalten, Lauftext in zwei Spalten à 6, Zitat gross über 4 Spalten zwischen den Textspalten, drei kleine Bilder unten in einer Reihe à 4 Spalten. Der Blick führt vom Bild über den Titel zum Lead.

   DoppelseiteLeseflussLead / VorspannZitat / Pull QuoteBildlegendeWeissraum
5. 5

   Mehrseitige Dokumente mit Inhaltsverzeichnis und Bogenumfang planen

   Kompetenz E

   Du planst den Umfang eines Hefts in durch vier teilbaren Seitenzahlen, erstellst einen Seitenplan und generierst Inhaltsverzeichnis und Seitenverweise automatisch aus den Formaten.

   Situation

   Der Jahresbericht einer Stiftung hat nach dem ersten Entwurf 21 Seiten Inhalt. Die Broschüre wird rückendrahtgeheftet.

   Deine Aufgabe

   Plane den Umfang und richte das Inhaltsverzeichnis ein.

   Gutes Ergebnis

   Rückendrahtheftung braucht einen durch vier teilbaren Umfang. Der nächste passende Umfang ist 24 Seiten im selben Papier (selbstumschlagend): 21 Inhaltsseiten, eine Seite Inhaltsverzeichnis, eine Seite Impressum und eine ganzseitige Bildseite, damit keine leere Vakatseite entsteht. Das Inhaltsverzeichnis wird in InDesign aus den Absatzformaten 'Kapitel' und 'Titel' erzeugt und vor dem Export aktualisiert.

   Seitenplan / SeitenspiegelBogen (durch 4 teilbar)Rückendrahtheftung / KlebebindungInhaltsverzeichnisVakatseite
6. 6

   Rasterprinzipien auf responsive Bildschirmlayouts übertragen

   Kompetenz F

   Du baust in Figma Layouts mit Spaltenraster, Abständen in einem festen System und Breakpoints für Desktop, Tablet und Smartphone. Inhalte ordnen sich je nach Breite neu an, die Hierarchie bleibt erhalten.

   Situation

   Das Mitgliedermagazin der Genossenschaft soll zusätzlich als Webseite erscheinen.

   Deine Aufgabe

   Lege ein responsives Layout für einen Artikel an.

   Gutes Ergebnis

   Desktop 1440 px mit 12 Spalten, 24 px Gutter, Inhalt max. 1200 px breit. Tablet 768 px mit 8 Spalten, Smartphone 375 px mit 4 Spalten und 16 px Rand. Abstände im 8-px-System (8, 16, 24, 32, 48). Lauftext 18 px auf 28 px Zeilenhöhe, Textbreite auf ca. 70 Zeichen begrenzt. Bildstrecke auf Desktop dreispaltig, auf dem Smartphone untereinander.

   Layout GridBreakpointGutter8-px-AbstandssystemAuto LayoutMaximale Textbreite

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Fabian ist im 2. Lehrjahr als Mediamatiker bei der Druckerei Bärenmatt in Altdorf mit 45 Mitarbeitenden. Der Tourismusverein Urnerland gibt zweimal jährlich ein Gästemagazin im Format A4 heraus, und bisher sah jede Ausgabe anders aus. Fabian soll eine Vorlage für den Druck bauen und die wichtigsten Seiten auch als Webseite umsetzen.

1. Kapitel 1

   Ein Raster für alle Ausgaben

   Fabian analysiert zuerst drei alte Ausgaben und findet kein gemeinsames System. Er legt einen Satzspiegel mit 15 mm Rand innen und 20 mm aussen an und teilt ihn in 12 Spalten mit 4 mm Abstand. So kann er Text zwei- oder dreispaltig setzen und Bilder über 4, 6, 8 oder 12 Spalten ziehen. An drei Probeseiten zeigt er dem Verein, wie unterschiedlich die Inhalte aussehen dürfen, ohne das System zu verlassen.

   Ziel 1

2. Kapitel 2

   Zeilen auf gleicher Höhe, Formate für alles

   Der Lauftext steht in 9.5 pt auf 13 pt Zeilenabstand, also richtet Fabian ein Grundlinienraster mit 13 pt ein. Zwischentitel bekommen genau zwei Rasterzeilen, die Bildlegenden mit 10 pt Zeilenabstand richtet er nur mit der ersten Zeile am Raster aus. Danach legt er neun Absatzformate, drei Zeichenformate, ein Objektformat für Bildlegenden und zwei Musterseiten für Reportage und Service an. Als der Verein am Tag vor dem Druck die Rubrikfarbe ändern will, ist das in einer Minute erledigt.

   Ziel 2Ziel 3

3. Kapitel 3

   Die Wanderreportage

   Für eine Reportage über einen Höhenweg hat Fabian 6000 Zeichen Text, ein grosses und drei kleine Bilder sowie ein Zitat. Die erste Doppelseite wirkt monoton, weil alle Bilder gleich breit sind. Er lässt das Hauptbild über 8 Spalten bis über den Bund laufen, setzt das Zitat gross in den Weissraum und gruppiert die kleinen Bilder auf der rechten Seite. Im Ausdruck als Doppelseite sieht er, dass der Blick jetzt vom Bild über den Titel in den Text geführt wird.

   Ziel 4

4. Kapitel 4

   22 Seiten sind zu wenig

   Nach dem ersten Umbruch hat das Magazin 22 Seiten, für die Rückendrahtheftung braucht es aber eine durch vier teilbare Seitenzahl. Fabian erstellt einen Seitenplan und schlägt dem Verein vor, eine doppelseitige Übersichtskarte der Wanderwege einzufügen, statt Inhalte zu kürzen. Das Inhaltsverzeichnis generiert er aus den Absatzformaten der Titel, sodass es sich nach jeder Änderung aktualisieren lässt. Beim Durchblättern der Doppelseiten prüft er zum Schluss, ob alle Seitenzahlen und Verweise stimmen.

   Ziel 5

5. Kapitel 5

   Vom Heft auf den Bildschirm

   Für die Webversion baut Fabian in Figma Layout Grids mit 12 Spalten für Desktop, 8 für Tablet und 4 für das Smartphone. Alle Abstände legt er als Vielfache von 8 px fest. Das grosse Bild über den Bund funktioniert auf dem Smartphone nicht, also stellt er es über den Titel und zieht das Zitat zwischen zwei Absätze. Print- und Screen-Version zeigt er dem Verein nebeneinander und erklärt, warum die Hierarchie gleich bleibt, obwohl sich die Anordnung ändert.

   Ziel 6

1. 1

   Raster verstehen

   ca. 4 Std.

   Du lernst, wie gute Layouts aufgebaut sind, und erkennst Raster in bestehenden Produkten.

   • Drei Magazine oder Jahresberichte analysieren und das Raster mit Transparentpapier nachzeichnen
   • Satzspiegel, Spaltenzahl und Spaltenabstand messen und notieren
   • Ein eigenes 6- und 12-Spalten-Raster auf A4 anlegen und Kombinationsmöglichkeiten skizzieren

   Trainiert Kompetenz A1A2

   Lernziel1

2. 2

   Grundlinienraster und Typografie im Layout

   ca. 3 Std.

   Du sorgst dafür, dass Text auf allen Seiten auf gleicher Höhe steht.

   • Grundlinienraster passend zum Lauftext einrichten
   • Titel, Zwischentitel und Legenden so definieren, dass sie zum Raster passen
   • Eine zweispaltige Seite mit und ohne Grundlinienraster vergleichen

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Formate und Musterseiten

   ca. 4 Std.

   Du baust ein Dokument so auf, dass Änderungen in Sekunden statt Stunden erledigt sind.

   • Sechs Absatzformate und zwei Zeichenformate anlegen und konsequent anwenden
   • Zwei Musterseiten mit automatischen Seitenzahlen und Rubrik erstellen
   • Ein Format ändern und prüfen, ob sich wirklich alle Stellen anpassen

   Trainiert Kompetenz C1C2

   Lernziel3

4. 4

   Doppelseiten gestalten

   ca. 5 Std.

   Du gestaltest abwechslungsreiche Seiten innerhalb eines festen Systems.

   • Dieselben Inhalte in drei Layoutvarianten auf demselben Raster setzen
   • Doppelseiten ausdrucken und als Paar beurteilen
   • Eine Doppelseite mit Feedback einer Kollegin überarbeiten

   Trainiert Kompetenz D1D2

   Lernziel4

5. 5

   Lange Dokumente organisieren

   ca. 3 Std.

   Du planst Umfang und Struktur eines Hefts und automatisierst wiederkehrende Aufgaben.

   • Einen Seitenplan für eine 16-seitige Broschüre erstellen
   • Inhaltsverzeichnis aus Absatzformaten generieren
   • Ein Dokument in der Doppelseiten-Ansicht durchblättern, mit Preflight kontrollieren und Seitenzahlen prüfen

   Trainiert Kompetenz E1E2

   Lernziel5

6. 6

   Vom Print- zum Screen-Layout

   ca. 5 Std.

   Du überträgst dein Wissen auf Websites und schliesst mit einem Projekt ab.

   • In Figma ein Layout Grid für Desktop, Tablet und Mobile anlegen
   • Eine Magazinseite als responsive Webseite in drei Breakpoints gestalten
   • Print- und Screen-Version nebeneinander präsentieren und Unterschiede begründen

   Trainiert Kompetenz A3D3F1F2

   Lernziel614

Gestaltungsraster

Unsichtbares System aus Spalten, Zeilen und Abständen, nach dem Inhalte auf Seiten angeordnet werden.

Satzspiegel

Nutzfläche einer Seite innerhalb der Seitenränder.

Bundsteg

Innerer Seitenrand zur Bindung hin.

Grundlinienraster

Horizontale Hilfslinien im Abstand des Zeilenabstands, an denen Text ausgerichtet wird.

Registerhaltigkeit

Gleiche Höhe der Textzeilen über Spalten und Seiten hinweg.

Absatzformat

Gespeicherte Formatierung für ganze Absätze, z.B. Schrift, Grösse, Abstände, Einzüge.

Musterseite

Vorlageseite mit wiederkehrenden Elementen, die auf Dokumentseiten angewendet wird.

Vakatseite

Unbedruckte oder bewusst leer gelassene Seite in einem Druckerzeugnis.

Breakpoint

Bildschirmbreite, ab der sich ein responsives Layout neu anordnet.

Passende Module