Website erstellen mit Affinity: Design und Umsetzung

Eines vorweg, weil es sonst zu Enttäuschungen führt: Affinity ist ein Design-Programm, kein Website-Baukasten. Sie exportieren damit kein fertiges HTML, hosten keine Seite und schließen kein Kontaktformular an. Was Affinity kann: das Aussehen Ihrer Website exakt gestalten und jede Grafik sauber fürs Web ausgeben. Den eigentlichen Seitenbau übernimmt danach ein anderes Werkzeug – WordPress, Webflow, ein Framework oder eine Entwicklerin. Dieser Artikel zeigt den realistischen Ablauf: Dokument richtig anlegen, Layout entwerfen, Assets im richtigen Format exportieren, typische Fehler vermeiden.

Welche Affinity-App Sie wofür brauchen

Affinity von Serif (seit 2024 zu Canva gehörend) besteht aus drei Programmen mit einer gemeinsamen Universal-Lizenz:

• Affinity Designer – vektororientiert, mit zusätzlicher Pixel-Ebene. Die richtige App für Logos, Icons, UI-Mockups und Illustrationen. Hier findet auch der Web-Export statt.
• Affinity Photo – Rasterbearbeitung wie in Photoshop. Für Foto-Retusche, Freisteller, Bildkomprimierung.
• Affinity Publisher – Layout für mehrseitige Entwürfe. Über StudioLink lassen sich die Werkzeuge von Designer und Photo direkt darin nutzen.

Fürs Webdesign arbeiten Sie überwiegend in Affinity Designer. Publisher ist praktisch, wenn Sie viele Unterseiten als zusammenhängendes Dokument entwerfen wollen.

Das Dokument richtig anlegen

Der häufigste Anfängerfehler passiert schon beim ersten Klick: ein Print-Preset mit CMYK-Farben. Fürs Web brauchen Sie andere Grundeinstellungen.

Legen Sie unter Datei > Neu ein Dokument mit dem Preset „Web“ oder „Devices“ an. Achten Sie auf drei Werte:

• Farbformat RGB/8 und Farbprofil sRGB – nicht CMYK. Sonst wirken die Farben im Browser blass oder verschoben.
• Einheit Pixel, DPI 72. Der DPI-Wert ist fürs Web faktisch irrelevant, aber so vermeiden Sie Verwirrung bei den Größenangaben.
• Eine gängige Design-Breite, etwa 1440 px für den Desktop-Entwurf, mit einem Inhaltsbereich von rund 1200 px.

Legen Sie gleich zu Beginn Ihre Markenfarben als Dokument-Farbfelder an (Panel Farbfelder > Als Dokument-Palette). So greifen Sie überall auf dieselben Werte zu, statt Farben per Auge nachzumischen – und die Entwicklung bekommt später exakte Hex-Codes statt Näherungen.

Layout und Artboards entwerfen

Nutzen Sie Artboards (das Zeichenflächen-Werkzeug in Designer), um mehrere Bildschirmgrößen im selben Dokument zu entwerfen. Bewährt haben sich mindestens zwei: ein Desktop-Board (z. B. 1440 px) und ein Mobile-Board (375 px, die verbreitete Referenzbreite kleiner Smartphones). Wer sauber arbeitet, ergänzt ein Tablet-Board mit 768 px.

Für ein ruhiges, konsistentes Layout hilft ein Spaltenraster. Richten Sie es über Ansicht > Gitter- und Achsenlineale ein oder legen Sie Spalten-Hilfslinien an – ein 12-Spalten-Raster ist der De-facto-Standard, weil sich die meisten CSS-Frameworks daran orientieren. Definieren Sie außerdem eine feste Abstandsskala (z. B. 8, 16, 24, 32 px) und eine Schriftgrößen-Skala. Das erleichtert die Umsetzung enorm, weil die Entwicklung Ihre Abstände und Größen nicht raten muss.

Ein Punkt, der oft übersehen wird: Wählen Sie Schriften, die es auch als Webfont gibt. Ein Design mit einer exotischen Systemschrift sieht im Entwurf toll aus, lässt sich auf der echten Seite aber nicht nachbauen. Greifen Sie zu Familien, die etwa über Google Fonts verfügbar sind, und notieren Sie einen Fallback (z. B. Inter, system-ui, sans-serif).

Assets fürs Web exportieren

Beim Export spielt Affinity seine Stärke aus. Über das Export-Panel mit Slices (in älteren Versionen die eigene „Export Persona“) geben Sie einzelne Elemente gezielt aus, statt das ganze Artboard zu rendern. Ein oft übersehener Trick spart hier viel Handarbeit: Benennen Sie Ebenen und Objekte sauber – der Slice übernimmt den Ebenennamen als Dateinamen. Aus einer Ebene logo-header wird so direkt logo-header.svg.

Faustregeln für die Formate:

• SVG – für Logos, Icons und einfache Vektorgrafiken. Skaliert verlustfrei und bleibt winzig. Wählen Sie im Export das SVG-Preset für Web, lassen Sie den viewBox setzen und Transformationen flatten; Text, den es auf der Seite nicht als echte Schrift gibt, in Kurven umwandeln. So landet die Datei sauber und ohne Editor-Ballast im Browser.
• WebP – Standardformat für Fotos und große Bilder, deutlich kleiner als JPEG bei gleicher Qualität. Lossy mit Qualität um 80 ist für Fotos ein guter Startwert; lossless nur für Grafiken mit harten Kanten.
• JPEG – solide Alternative für Fotos, wenn WebP nicht in Frage kommt. Qualität um 70–85 % ist meist der beste Kompromiss aus Schärfe und Dateigröße.
• PNG – nur wenn Sie Transparenz brauchen und WebP ausscheidet. Für Fotos ist PNG die falsche Wahl (riesige Dateien).

Für scharfe Darstellung auf Retina-Displays exportieren Sie Bitmap-Grafiken zusätzlich in @2x (doppelte Auflösung). Das Export-Panel erlaubt es, pro Slice mehrere Skalierungen (1x, 2x) mit passendem Namenszusatz in einem Rutsch zu definieren.

Eine sinnvolle Ergänzung: Große Fotos vor dem finalen Export in Affinity Photo zuschneiden und auf die real benötigte Anzeigegröße herunterrechnen. Ein 6000-px-Kamerabild als Hero-Bild auszugeben bremst jede Seite aus – der Browser lädt Megabytes, die er nie anzeigt.

Vom Entwurf zur fertigen Website

Mit den exportierten Assets und dem Layout als visuelle Vorlage geht es an den Aufbau. Dafür gibt es grob drei Wege:

1. Baukasten oder Page Builder – Sie setzen das Design in WordPress (z. B. mit einem Builder), Webflow oder einem ähnlichen Tool nach. Schnell, ohne Programmierung, aber mit den bekannten Grenzen solcher Systeme. Was das im WordPress-Umfeld konkret bedeutet, lesen Sie unter Nachteile von Elementor.
2. Selbst codieren – Sie oder ein Entwickler übersetzen den Entwurf in HTML, CSS und ggf. ein Framework. Volle Kontrolle, mehr Aufwand. Eine Einordnung, welche Sprachen dafür heute zählen, gibt dieser Überblick.
3. An eine Agentur oder Freelancer übergeben – Ihre sauber benannten Assets und das Artboard-Design sind die ideale Grundlage für ein Handoff.

Dass ein durchdachtes Design allein noch keine Website ist, sondern die technische Umsetzung dazugehört, zeigt auch die Frage nach der Zukunft des Frontends.

Typische Fehler und ihre Lösung

• Design in CMYK/Print-Preset. Farben stimmen im Browser nicht. Lösung: RGB/sRGB, Pixel-Einheit, Web-Preset.
• Fotos als PNG exportiert. Seite wird langsam. Lösung: WebP oder JPEG mit Kompression.
• Nur ein Desktop-Entwurf. Die mobile Umsetzung wird zum Ratespiel. Lösung: Mobile-Artboard von Anfang an mitdenken.
• Exotische Schrift ohne Webfont. Entwurf und fertige Seite passen nicht zusammen. Lösung: webtaugliche Schriften wählen, Fallback notieren.
• Kryptische Ebenennamen. Der Export spuckt Ebene 1.svg, Ebene 12.svg aus. Lösung: Ebenen vor dem Export sprechend benennen.
• Erwartung, Affinity „baut“ die Seite. Es liefert Design und Assets – mehr nicht.

FAQ

Kann ich mit Affinity direkt eine funktionierende Website exportieren? Nein. Affinity gibt kein HTML/CSS aus und stellt keine Seite online. Sie entwerfen das Design und exportieren die Grafiken; gebaut und gehostet wird die Website mit einem separaten Werkzeug.

Affinity oder Figma für Webdesign – was ist besser? Figma ist stärker bei UI-Arbeit im Team, klickbaren Prototypen und dem Entwickler-Handoff und läuft im Browser. Affinity punktet mit einmaliger Lizenz statt Abo, exzellenten Illustrations- und Foto-Werkzeugen und Offline-Arbeit. Für reine Web-UI mit Prototyping ist Figma meist praktischer; wer ohnehin in der Affinity-Welt arbeitet, entwirft dort statische Layouts und exportiert die Assets.

Welches Bildformat soll ich für die Website exportieren? SVG für Logos und Icons, WebP (oder JPEG) für Fotos, PNG nur bei nötiger Transparenz ohne WebP. Bitmap-Grafiken zusätzlich als @2x für scharfe Darstellung auf hochauflösenden Displays.