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

    Website mit Affinity Designer gestalten: Layout & Export

    · Weswegen-Redaktion
    Website erstellen

    Affinity Designer wird häufig zur Website-Gestaltung empfohlen — mit einer entscheidenden Einschränkung, die viele Anleitungen verschweigen: Das Programm baut keine Website. Es erzeugt keinen lauffähigen HTML- oder CSS-Code und ist kein Baukasten wie WordPress oder Webflow. Affinity Designer ist ein Werkzeug, um das visuelle Konzept einer Seite zu entwerfen — Layout, Farben, Icons, Logos — und diese Elemente web-fertig zu exportieren. Nach diesem Beitrag wissen Sie, wofür sich das Programm im Webprojekt wirklich eignet, wie Sie Dokument, Artboards und Export korrekt einrichten und an welcher Stelle ein Entwickler oder ein Baukasten übernimmt.

    Was Affinity Designer leistet — und was nicht

    Affinity Designer ist ein Vektor- und Rastergrafik-Editor des Herstellers Serif, der seit 2024 zu Canva gehört. Seit Oktober 2025 sind Designer, Photo und Publisher zu einer einzigen, kostenlosen App zusammengefasst, in der Sie zwischen den Modi Vektor, Pixel und Layout wechseln. Wer noch das klassische Affinity Designer 2 nutzt, findet stattdessen die drei „Personas” oben links: Vektor-Persona, Pixel-Persona und Export-Persona.

    Im Webkontext übernimmt das Programm drei Aufgaben gut:

    • Layout- und Screendesign: Sie entwerfen Startseite, Unterseiten und mobile Ansichten als pixelgenaue Mockups.
    • Web-Grafiken: Icons, Buttons, Illustrationen und Logos entstehen als saubere Vektoren, die verlustfrei skalieren.
    • Asset-Export: Fertige Elemente exportieren Sie in Web-Formate (SVG, PNG, WebP) — bei Bedarf in mehreren Auflösungen.

    Was Affinity Designer nicht kann: funktionierenden Website-Code ausgeben. Die im Netz kursierende Behauptung, man könne ein Design „als HTML- oder CSS-Datei exportieren”, ist falsch. Es gibt keinen Export, der aus Ihrem Layout eine bedienbare Seite macht. Das Ergebnis ist immer ein Entwurf plus Grafikdateien — die Umsetzung erfolgt danach separat.

    Das Dokument richtig anlegen

    Der häufigste Anfängerfehler passiert schon beim Anlegen. Für Print gedachte Voreinstellungen (CMYK, 300 DPI) sind fürs Web ungeeignet.

    1. Datei → Neu öffnen und in der Kategorie „Web” eine Vorlage wählen. Damit setzt Affinity automatisch RGB/8 als Farbformat und Pixel als Maßeinheit.
    2. Als Breite eine gängige Desktop-Größe nehmen — 1440 px (verbreitete Design-Breite) oder 1920 px (Full-HD). Die Höhe ist zunächst zweitrangig, da Webseiten scrollen.
    3. DPI-Werte spielen fürs Web keine Rolle; entscheidend sind die Pixelmaße.

    Ein sauberes RGB-Dokument stellt sicher, dass Ihre Farben im Browser genauso aussehen wie im Entwurf. Wer versehentlich in CMYK arbeitet, erlebt beim Export oft verwaschene oder verschobene Farben.

    Layout mit Artboards und Rastern

    Für responsives Webdesign brauchen Sie mehrere Ansichten derselben Seite. Dafür gibt es Artboards (Zeichenflächen). Aktivieren Sie das Artboard-Werkzeug und legen Sie mehrere Flächen nebeneinander an — typischerweise für drei Breakpoints:

    • Desktop: 1440 px
    • Tablet: 768 px
    • Mobil: 375 px (iPhone-Referenzbreite)

    So sehen Sie direkt, wie sich Navigation, Bilder und Textspalten pro Bildschirmgröße verhalten — genau das Prinzip, nach dem responsives Webdesign später im Browser funktioniert.

    Für ein aufgeräumtes Layout richten Sie ein Spaltenraster ein. Über den Hilfslinien-Manager (unter Ansicht → Hilfslinien-Manager) legen Sie ein 12-Spalten-Raster mit einer Inhaltsbreite von etwa 1140–1200 px an. An diesen Spalten richten Sie später alle Elemente aus — das erzeugt genau die Ordnung, die eine professionelle Seite von einer gebastelten unterscheidet.

    Grafiken, Icons und Logos als Vektor

    Der eigentliche Stärkebereich von Affinity Designer sind Vektoren. Im Vektor-Modus zeichnen Sie Icons, Buttons und Logos mit dem Feder- und Formwerkzeug. Vektoren sind auflösungsunabhängig: Dasselbe Logo funktioniert im 32-px-Favicon und im großformatigen Header ohne Qualitätsverlust.

    Für Icons und Logos ist SVG das ideale Web-Format — es bleibt bei jeder Größe scharf und ist meist kleiner als eine Pixelgrafik. Achten Sie beim Zeichnen auf möglichst wenige, gezielt gesetzte Ankerpunkte: Jeder überflüssige Punkt vergrößert die exportierte SVG-Datei unnötig und macht sie im Browser langsamer zu rendern.

    Web-Assets exportieren

    Für den Export nutzen Sie in Affinity Designer 2 die Export-Persona, in der neuen vereinheitlichten App den entsprechenden Export-Bereich. Zwei Wege sind üblich:

    • Slices: Sie markieren einzelne Elemente (etwa ein Icon oder einen Button) und exportieren gezielt nur diese — nicht das ganze Artboard.
    • Mehrfach-Auflösungen: Für scharfe Darstellung auf Retina- und HiDPI-Displays exportieren Sie Rastergrafiken in @1x und @2x (also in einfacher und doppelter Pixeldichte). Wer nur @1x exportiert, riskiert unscharfe Bilder auf modernen Bildschirmen.

    Format-Faustregel fürs Web: SVG für Icons und Logos, WebP oder JPG für Fotos, PNG für Grafiken mit Transparenz. WebP spart gegenüber JPG spürbar Dateigröße bei gleicher Qualität.

    Vom Design zur echten Website

    Jetzt liegt Ihr Entwurf fertig vor — als Layout plus exportierte Assets. Für die Umsetzung zu einer bedienbaren Seite gibt es zwei Wege:

    1. Selbst oder per Entwickler nachbauen: Das Design wird in HTML/CSS (oft mit etwas JavaScript für Interaktionen) umgesetzt. Affinity liefert dafür die Vorlage; ein integrierter Entwickler-Handoff mit automatischem CSS-Auslesen wie in Figma fehlt jedoch. Farbwerte lesen Sie manuell über die Farbauswahl als Hex-Code aus, Abstände messen Sie im Dokument.
    2. In einen Baukasten übertragen: Sie rekonstruieren das Layout in WordPress (etwa mit Elementor), Webflow oder einem anderen System und binden Ihre exportierten Grafiken ein. Elementor ist dafür der meistgenutzte Page-Builder — kennen Sie aber vorher die Nachteile von Elementor bei Ladezeit, Lock-in und DSGVO.

    Wichtig für einen reibungslosen Übergang: Verwenden Sie im Entwurf web-taugliche Schriften (etwa Google Fonts). Affinity greift auf lokal installierte Schriften zu — eine exotische Systemschrift lässt sich im Browser oft nicht nachbilden.

    Typische Fehler und wie Sie sie vermeiden

    • CMYK statt RGB: führt zu Farbabweichungen. Immer im RGB/8-Web-Dokument arbeiten.
    • Nur @1x exportiert: Bilder wirken auf Retina-Displays unscharf. Zusätzlich @2x ausgeben.
    • Kein Raster: Ohne Spaltenraster wirken Abstände zufällig. 12-Spalten-Grid nutzen.
    • Erwartung eines Code-Exports: Es gibt keinen. Von Anfang an Design und Umsetzung als zwei Schritte planen.
    • Nur Desktop entworfen: Ohne mobile Artboards fehlt die halbe Realität. Mindestens Desktop und Mobil gestalten.

    FAQ

    Kann ich mit Affinity Designer eine komplette Website ohne Programmierkenntnisse erstellen? Nein. Affinity Designer gestaltet das Aussehen und liefert Grafiken, erzeugt aber keine funktionierende Website. Für die Umsetzung brauchen Sie entweder HTML/CSS-Kenntnisse oder einen Baukasten wie WordPress oder Webflow, in den Sie Design und Assets übertragen.

    Was ist besser für Webdesign — Affinity Designer oder Figma? Für reines Screendesign im Team ist Figma meist praktischer: Es läuft im Browser, kennt Komponenten und liefert Entwicklern per „Inspect” fertige CSS-Werte. Affinity Designer punktet bei detaillierter Vektorarbeit, Illustrationen und dem einmaligen Kauf beziehungsweise der kostenlosen Nutzung. Viele kombinieren beides. Ob Figma inzwischen sogar den Baukasten selbst ersetzen kann, klärt der Beitrag Kann man mit Figma Webseiten erstellen?.

    Kostet Affinity Designer noch etwas? Seit Ende Oktober 2025 ist die Affinity-App kostenlos nutzbar; ältere Perpetual-Lizenzen von Affinity Designer 2 bleiben gültig. Kostenpflichtig sind nur zusätzliche Canva-KI-Funktionen innerhalb der App.