Layout & Prepress
Kernfrage
Was braucht Gestaltung, damit sie auf jedem Bildschirm gut aussieht?
Auch die digitale Ausgabe hat eine Vorstufe: Formate, Farbraum, Auflösung, Dateiformat und Barrierefreiheit. Nur ist das Ziel ein Bildschirm und nicht Papier.
Lernziel: Du kannst Dateien in passendem Format, Farbraum und Auflösung für Web, Social Media und Präsentationen exportieren.
Der Bildschirm ist auch ein Medium.
7.1 / Formate und Farbraum
Pixel statt Millimeter, sRGB statt CMYK.
Digitale Formate werden in Pixeln angelegt. Der Farbraum ist sRGB, Display P3 nur bewusst und mit Fallback. Plattformen geben Formate und Safe Zones vor, die sich oft ändern.
01
Social Feed
1080 × 1350 px (4:5), Inhalt in der Safe Zone.
02
Story / Reel
1080 × 1920 px (9:16), oben und unten Platz lassen.
03
Link-Vorschau
1200 × 630 px, wenig Text, starke Bildidee.
Plattformvorgaben ändern sich. Prüfe sie vor jedem Projekt in den aktuellen Hilfeseiten.
Format nach Kanal, Inhalt in die Safe Zone.
7.2 / Export und Dateiformate
Jedes Format hat eine Aufgabe.
SVG für Logos und Icons, PNG für Grafiken mit Transparenz, JPG, WebP oder AVIF für Fotos, MP4 (H.264) für Video, PDF für Dokumente. Für hochauflösende Displays werden Bilder in 2x, bei Bedarf 3x exportiert.
Komprimiere so stark wie möglich, ohne sichtbare Artefakte. Dateinamen sind klein, ohne Umlaute und Leerzeichen, z. B. kulturhaus-programm-4x5-v02.jpg.
So klein wie möglich, so scharf wie nötig.
7.3 / Barrierefreiheit
Lesbar für alle.
Fliesstext braucht mindestens 4,5:1 Kontrast zum Hintergrund, grosse Schrift und Icons 3:1. Fliesstext im Web beginnt bei etwa 16 px, Touch-Ziele sind mindestens 44 × 44 px gross.
Text gehört wenn möglich als echter Text ins Layout, nicht ins Bild. Bilder bekommen Alternativtexte, Videos Untertitel.
Kontrast, Grösse, Alternativtext.
Übung
Ein Programm für Bildschirme ausspielen
Aufgabe: Spielt das Programm des Kulturhauses digital aus.
SCHRITT 1
Legt Feed, Story und Link-Vorschau an.
SCHRITT 2
Prüft Kontrast und Safe Zones.
SCHRITT 3
Exportiert mit den passenden Einstellungen.
SCHRITT 4
Testet alles auf echten Geräten, hell und dunkel.
Auswertung: Was sah auf dem Handy anders aus als am Rechner?