Weswegen
Tippen, um zu suchen
    Esc zum Schließen · Sofortsuche auf der ganzen Website

    Website erstellen mit Affinity Designer: Screendesign

    · Weswegen-Redaktion
    Website erstellen

    Website erstellen mit Affinity Designer: das Screendesign richtig aufsetzen

    Ein Missverständnis vorweg, weil es sonst Zeit kostet: Mit Affinity Designer bauen Sie keine funktionierende Website. Das Programm erzeugt keinen HTML- oder CSS-Code und exportiert keine fertigen Seiten. Was Sie damit machen, ist das Screendesign – der visuelle Entwurf jeder Seite, den Sie anschließend mit Code, einem CMS oder einem Baukasten umsetzen. Genau dafür ist Affinity Designer stark: ein Vektorwerkzeug von Serif, mit dem Sie Layouts pixelgenau planen, Komponenten aufbauen und alle Grafiken sauber für das Web exportieren.

    Nach diesem Tutorial können Sie ein Web-Dokument korrekt einrichten, mehrere Bildschirmgrößen als Artboards anlegen, ein wiederverwendbares Mini-Designsystem aufbauen und Assets im richtigen Format ausgeben.

    Was Affinity Designer im Web-Workflow leistet – und was nicht

    Der Ablauf hat drei Stufen: entwerfen (Affinity Designer), exportieren (Bilder, Icons, Logos) und umsetzen (Code oder CMS). Affinity liefert Stufe eins und zwei. Es hat keine Prototyping-Funktion und keinen Entwickler-Handoff, bei dem sich CSS-Werte direkt ablesen lassen – anders als Figma. Maße, Abstände und Farbwerte lesen Sie in Affinity manuell ab und übertragen sie in Ihr Frontend.

    Innerhalb von Affinity Designer arbeiten Sie mit drei sogenannten Personas, die Sie oben links umschalten: der Designer Persona (Vektor), der Pixel Persona (rasterbasierte Retusche) und der Export Persona (Ausgabe von Slices). Für Webdesign verbringen Sie die meiste Zeit in der Designer Persona.

    Dokument richtig einrichten

    Legen Sie über Datei › Neu ein Dokument an. Wählen Sie in der Kategorie die Voreinstellung Web, damit die Grundwerte stimmen:

    • Einheit: Pixel
    • Farbformat: RGB/8 (nicht CMYK – das ist für Druck und verfälscht Bildschirmfarben)
    • DPI: 72 (bei reinen Pixelmaßen zweitrangig; entscheidend sind Pixelbreite und der Farbraum)

    Aktivieren Sie außerdem die Pixelausrichtung. In den Bewegungsoptionen bzw. der Werkzeugleiste gibt es die Optionen „In ganzen Pixeln verschieben“ und „Pixelausrichtung erzwingen“. Ohne sie landen Objekte auf halben Pixeln und Kanten wirken beim Export unscharf.

    Artboards für die wichtigsten Breakpoints

    Aktivieren Sie das Artboard-Werkzeug (oder Datei › Artboard einrichten). Statt einer einzigen Fläche legen Sie mehrere Artboards nebeneinander an – eines je Bildschirmgröße, die Sie später im Browser bedienen wollen. Bewährte Ausgangsbreiten:

    • Desktop: 1440 px (Inhalt oft auf 1140–1200 px begrenzt)
    • Tablet: 768 px
    • Mobil: 375 oder 390 px

    Wer nur eine Desktop-Breite entwirft, merkt die Probleme erst bei der Umsetzung. Planen Sie mobil von Anfang an mit – der Großteil des Traffics kommt vom Smartphone.

    Spalten-Raster und Hilfslinien

    Ein sichtbares Raster hält das Layout ruhig. Öffnen Sie Ansicht › Hilfslinien-Manager und legen Sie unter Spalten ein 12-Spalten-Raster mit einem Zwischenraum (Gutter) von etwa 20–30 px an. An diesen Spalten richten Sie Überschriften, Textblöcke und Bilder aus. Ergänzend hilft ein Grundlinienraster über Ansicht › Raster- und Achsenmanager für konsistente vertikale Abstände.

    Beginnen Sie grob, nicht mit Feinschliff. Skizzieren Sie zuerst die Blöcke als einfache Rechtecke (Wireframe): Header mit Logo und Navigation, darunter der Hero-Bereich mit klarer Aussage und einem Button, dann die Inhaltssektionen, zuletzt der Footer mit Kontakt, Links und rechtlichen Hinweisen.

    Erst wenn die Anordnung sitzt, gestalten Sie aus: Typografie, Farben, Bilder, Abstände. Achten Sie bei Schriften darauf, nur solche zu verwenden, die als Webfont verfügbar sind (etwa aus Google Fonts) – sonst sieht die spätere Website anders aus als Ihr Entwurf. Wichtig ist auch Kontrast: Text muss lesbar bleiben, idealerweise nach den WCAG-Kontrastwerten (Fließtext mindestens 4,5:1).

    Ein kleines Designsystem: Symbole, Text- und Farbstile

    Der größte Zeitgewinn steckt in wiederverwendbaren Elementen.

    • Symbole (Fenster › Symbole): Wandeln Sie Bausteine wie Buttons, die Navigation oder Karten in Symbole um. Ändern Sie eine Instanz, aktualisieren sich alle anderen automatisch – solange die Synchronisierung aktiv ist. Über das Constraints-Panel legen Sie fest, wie sich ein Symbol beim Skalieren des Artboards verhält (etwa: Breite mitwachsen, Höhe fix), was das Übertragen auf andere Breakpoints erleichtert.
    • Textstile (Fenster › Textstile): Definieren Sie H1, H2, Fließtext und Beschriftung als benannte Stile. Eine Größen- oder Farbänderung greift dann überall.
    • Farbfelder / globale Farben (Fenster › Farbfelder): Legen Sie Ihre Markenfarben als globale Farben an. So passen Sie eine Farbe zentral an, ohne jedes Objekt einzeln zu ändern.
    • Assets-Panel (Fenster › Assets): Sammeln Sie Icons, Logos und fertige Komponenten in einer eigenen Kategorie – Ihr Baukasten für weitere Seiten.

    Assets exportieren: PNG, WebP und SVG

    Für die spätere Umsetzung brauchen Sie die Grafiken, nicht das ganze Layout. Wechseln Sie in die Export Persona und legen Sie Slices an (aus Ebenen, Gruppen oder ganzen Artboards). Faustregeln für die Formate:

    • Logos und Icons: als SVG exportieren. Vektorformat, gestochen scharf auf jeder Auflösung und meist winzig in der Dateigröße. Der häufigste Anfängerfehler ist, ein Logo als PNG zu speichern.
    • Fotos: als WebP (beste Kompression bei guter Qualität) oder als JPEG als Fallback.
    • Grafiken mit Transparenz: als PNG.

    Für Pixelgrafiken exportieren Sie zusätzlich eine höher aufgelöste Variante (@2x) für Displays mit hoher Pixeldichte. Alternativ zur Export Persona funktioniert auch Datei › Exportieren für einzelne Auswahlen.

    Vom Design zur echten Website

    Jetzt beginnt die Umsetzung – der Teil, den Affinity nicht übernimmt. Sie haben mehrere Wege:

    • Von Hand mit HTML und CSS, wenn Sie volle Kontrolle wollen. Ein Blick darauf, wie zukunftssicher das ist, lohnt sich: Hat Frontend eine Zukunft?
    • Mit einem CMS wie WordPress und einem Page-Builder (Elementor, Bricks, Divi), der Ihr Design nachbaut. Wie viel Einarbeitung das kostet, lesen Sie unter Wie viele Tage braucht man, um WordPress zu lernen?
    • Mit einem Baukasten, wenn es schnell gehen soll.

    In allen Fällen dient Ihr Affinity-Entwurf als verbindliche Vorlage: Sie lesen Abstände, Schriftgrößen und Farbwerte ab und bauen sie im Frontend nach.

    Typische Fehler – und wie Sie sie vermeiden

    • CMYK statt RGB: Farben wirken auf dem Bildschirm falsch. Immer im RGB-Dokument arbeiten.
    • Objekte auf halben Pixeln: führt zu unscharfen Kanten. Pixelausrichtung aktivieren.
    • Nur eine Desktop-Breite entworfen: die mobile Ansicht wird dann zur Notlösung. Mehrere Artboards von Anfang an anlegen.
    • Logo als PNG exportiert: unscharf beim Skalieren. Als SVG ausgeben.
    • Fonts ohne Web-Verfügbarkeit: der Entwurf lässt sich nicht 1:1 umsetzen. Vorher Webfont-Verfügbarkeit prüfen.

    FAQ

    Kann ich mit Affinity Designer eine fertige Website bauen? Nein. Affinity Designer erzeugt kein HTML/CSS und keine funktionierende Seite. Sie gestalten das visuelle Design und exportieren Grafiken; die eigentliche Website entsteht danach per Code, CMS oder Baukasten.

    Affinity Designer oder Figma für Webdesign? Figma ist browserbasiert, erlaubt Echtzeit-Zusammenarbeit, Prototyping und einen Entwickler-Handoff mit ablesbaren CSS-Werten – für Teamarbeit und die Übergabe an die Entwicklung meist die praktischere Wahl. Affinity Designer punktet mit starken Vektor- und Illustrationswerkzeugen sowie Offline-Arbeit. Mehr dazu: Kann man mit Figma Webseiten erstellen?

    Was kostet Affinity Designer? Lange galt: eine Einmalzahlung ohne Abo (Version 2 als Dauerlizenz, optional als Universallizenz für alle drei Apps). Nach der Übernahme durch Canva wurden die Apps später in einer vereinheitlichten Affinity-App zusammengeführt und kostenlos verfügbar gemacht; bestehende Version-2-Lizenzen bleiben gültig.