Artboard

Ein Artboard ist ein rechteckiger Arbeitsbereich in einem Grafikprogramm. Man kann es sich als ein Blatt Papier vorstellen, das auf einem sehr großen Tisch liegt. Der Tisch ist die endlose Arbeitsfläche des Programms, das Blatt ist der Teil, der später wirklich zählt. Nur was auf dem Artboard liegt, wird am Ende gedruckt oder als Bilddatei ausgegeben. Alles daneben bleibt sichtbar, gehört aber nicht zum fertigen Ergebnis. In eine einzige Datei passen viele solcher Flächen, jede mit eigener Größe und eigenem Namen.

Warum Designer nicht mit einer Datei pro Bild arbeiten

Früher legte man für jedes Motiv eine eigene Datei an. Bei einer App mit dreißig Bildschirmen bedeutet das dreißig Dateien. Ändert sich die Farbe eines Knopfes, muss man alle dreißig einzeln öffnen. Artboards lösen dieses Problem, weil alle Bildschirme in einem Dokument nebeneinander liegen.

Das hat einen zweiten Vorteil: Man sieht den Zusammenhang. Ein Designer erkennt auf einen Blick, ob der Abstand am oberen Rand auf allen Seiten gleich ist. Bei getrennten Dateien fällt so eine Abweichung oft erst spät auf. Auch Kunden verstehen einen Entwurf schneller, wenn sie den Ablauf einer App als Reihe von Flächen sehen.

Ein dritter Punkt sind unterschiedliche Formate. Eine Werbekampagne braucht dasselbe Motiv als Plakat, als Anzeige und als quadratisches Bild für soziale Netzwerke. Jedes Format bekommt ein eigenes Artboard mit passenden Maßen. Das Motiv wird kopiert und angepasst, die gemeinsame Idee bleibt an einem Ort.

Größe, Ursprung und Export

Jedes Artboard hat eine feste Breite und Höhe, angegeben in Pixeln oder Millimetern. Ein Bildschirmentwurf für ein iPhone ist typischerweise 390 mal 844 Pixel groß. Ein Plakat im Format A1 misst 594 mal 841 Millimeter. Beim Anlegen bieten die Programme fertige Vorlagen für gängige Geräte und Papierformate an.

Wichtig ist der eigene Nullpunkt jeder Fläche. Die Position eines Objekts wird nicht vom Rand des Dokuments aus gemessen, sondern von der linken oberen Ecke des jeweiligen Artboards. Ein Logo mit den Koordinaten 20 und 20 sitzt deshalb auf jeder Fläche an derselben Stelle. Verschiebt man das Artboard, wandert der Inhalt mit.

Beim Export wird jedes Artboard zu einer eigenen Datei. Aus einem Dokument mit zwölf Flächen entstehen so zwölf Bilder, benannt nach den Namen der Artboards. Deshalb lohnt es sich, sauber zu benennen, also „Startseite“ statt „Artboard 7“. Programme können auch mehrere Auflösungen gleichzeitig ausgeben, etwa für normale und für hochauflösende Displays.

Von Illustrator bis Figma

Der Begriff stammt aus Adobe Illustrator, wo Artboards seit 2008 in der heutigen Form existieren. Photoshop kennt sie ebenfalls. In Figma und Penpot heißt dasselbe Konzept Frame, in Sketch schlicht Artboard. Die Namen unterscheiden sich, die Idee ist identisch.

Ein häufiger Irrtum ist die Verwechslung mit Ebenen. Ebenen liegen übereinander und regeln, was was verdeckt. Artboards liegen nebeneinander und regeln, was zusammengehört. Beide Konzepte gibt es parallel: Ein Artboard kann viele Ebenen enthalten.

Begegnen wird man dem Begriff überall dort, wo Oberflächen entworfen werden. Wer in Figma an einem Schulprojekt arbeitet, legt Frames an, ohne es zu merken. Auch KI-Werkzeuge, die aus einer Beschreibung Entwürfe erzeugen, geben ihre Ergebnisse meist als einzelne Artboards aus. Der Entwickler exportiert sie später als Vorlage für den fertigen Code.