CMS für Designer: WordPress, Webflow, Kirby, Contentful

Content Management Systeme (CMS) sind Software-Plattformen, die das Erstellen, Bearbeiten und Veröffentlichen digitaler Inhalte ermöglichen, ohne dass Programmierkenntnisse erforderlich sind.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: Content Management System, Website-Backend, Redaktionssystem, Headless CMS

Was ist ein CMS?

Eine Website zu erstellen ist eine Sache – sie aktuell zu halten eine andere. Ein CMS löst das Problem der Inhaltspflege: Redakteure und Auftraggeber können Texte, Bilder und Medien eigenständig aktualisieren, ohne Designer oder Entwickler einzuschalten.

Für Designer ist die CMS-Wahl relevant aus zwei Gründen: Erstens beeinflusst das CMS, wie Designs umgesetzt werden können – manche Systeme bieten mehr visuelle Freiheit als andere. Zweitens definiert das CMS die inhaltliche Flexibilität: Können Seitenbereiche frei angeordnet werden, oder gibt es eine feste Struktur?

Erklärung

Traditionelle CMS (Monolithische CMS)

Beim traditionellen Modell sind Frontend (was Besucher sehen) und Backend (wo Inhalte gepflegt werden) im selben System. Das CMS generiert HTML direkt auf dem Server.

WordPress Mit über 43 % Marktanteil (W3Techs, 2024) ist WordPress das meistgenutzte CMS der Welt. Es ist Open Source, kostenlos und durch Themes und Plugins flexibel erweiterbar.

Für Designer:

• Huge Ecosystem: Tausende Themes und Page Builder (Elementor, Divi, Gutenberg)
• Flexibel, aber technische Schulden durch Plugins möglich
• Gute Wahl für Content-schwere Websites (Blogs, Magazine, Unternehmenswebsites)
• Page Builder wie Elementor erlauben visuelles Design direkt im Browser

Nachteile: Sicherheitsrisiken durch Plugins, Performance-Herausforderungen bei schlecht konfigurierten Instanzen, Page Speed und Core Web Vitals: Was Designer wissen müssen-Probleme bei zu vielen Plugins.

Kirby Ein dateibasiertes CMS (kein Datenbankserver nötig). Beliebt bei Designer-Agenturen und kleineren Projekten. Inhalte werden als Textdateien gespeichert, das Interface (Panel) ist sauber und intuitiv.

Für Designer:

• Volle Kontrolle über HTML/CSS, keine erzwungene Template-Struktur
• Flexibel und leichtgewichtig
• Ideal für Portfolio-Websites, Agentursites
• Lizenzkosten (einmalig, relativ günstig)

Visuell-basierte CMS / Website Builder

Webflow Webflow ist die Brücke zwischen visuell design-basiertem Aufbau und sauberem, produktionsreifem Code. Designer können Websites visuell aufbauen (wie in Figma), während Webflow dahinter semantisches HTML und CSS generiert.

Für Designer:

• Visuelles Design ohne Programmierkenntnisse
• Gleichzeitig voller Kontrolle über CSS-Eigenschaften
• Integriertes CMS für dynamische Inhalte
• Hosting inklusive
• Gut für Marketing-Websites, Landing Pages, Portfolio-Seiten

Nachteile: Vendor Lock-in (Inhalte bleiben auf Webflow-Infrastruktur), höhere Kosten als andere Optionen, Lernkurve.

Squarespace / Wix / Framer All-in-One-Lösungen mit intuitiven Editoren. Für einfache Projekten und Kunden ohne technisches Hintergrundwissen geeignet. Design-Freiheit ist eingeschränkt gegenüber Webflow.

Framer (seit 2023 als Web-Plattform) ist besonders für Designer interessant: Es erlaubt den direkten Import aus Figma und Visual-Coding mit einer Figma-ähnlichen Oberfläche.

Headless CMS

Ein Headless CMS trennt Backend (Inhaltsverwaltung) von Frontend (Darstellung). Das CMS liefert Inhalte über eine API aus; das Frontend kann jede Technologie sein (Next.js, Nuxt, Gatsby, etc.).

Contentful Marktführer im Headless-CMS-Bereich. Inhalte werden als strukturierte Content Models definiert (z. B. "Artikel" hat Felder für Titel, Teaser, Text, Bild). Entwickler holen die Inhalte per API ab und bauen damit das Frontend.

Für Designer:

• Klare Trennung von Inhalt und Darstellung
• Gut für Projekte mit mehreren Ausgabekanälen (Web, App, Digital Signage)
• Content-Modellierung ist eine Design-Aufgabe: Welche Felder braucht ein Inhalt?
• Kostenpflichtig für größere Projekte

Sanity Ähnlich wie Contentful, aber mit Echtzeit-Collaboration und einem konfigurierbaren Studio-Interface. Open Source, selbst hostbar.

Strapi Open-Source-Headless-CMS, selbst hostbar. Niedrige Lizenzkosten, aber mehr technischer Aufwand beim Setup.

CMS-Entscheidungsmatrix

Beispiele

WordPress mit Gutenberg: Ein Magazin-Blog nutzt WordPress mit dem nativen Gutenberg-Editor. Redakteure können Artikel mit Blöcken (Text, Bild, Zitat, Galerie) aufbauen, ohne Design-Kenntnisse zu benötigen.

Webflow für Agentur-Site: Eine Designagentur baut ihre eigene Website in Webflow. Komplexe Scroll-Animationen (Scroll-Design: Parallax, Scrollytelling, Sticky Elements), Custom Cursor, aufwendige Hover-Effekte – alles visuell, kein Code.

Contentful für Multi-Channel-Marke: Eine Modemarke pflegt Produkte in Contentful. Dieselben Produktdaten werden auf der Website, im iOS-App und in einem Digital-Signage-System angezeigt – ohne dreifache Datenpflege.

In der Praxis

Content-Modellierung als Designer-Aufgabe

Bei Headless CMS ist die Content-Modellierung eine wichtige Designdisziplin: Designer definieren, welche Felder ein Content-Typ haben muss, damit er flexibel und consistent dargestellt werden kann.

Ein "Artikel"-Content-Typ könnte haben: Titel, Teaser, Inhalt (Rich Text), Kategorie, Tags, Hauptbild, Autor, Veröffentlichungsdatum. Fehlt ein Feld (z. B. kein Kurzteaser), kann die Listenansicht nicht sauber gebaut werden.

CMS-Design-Constraints beachten

Beim Designen für CMS-gesteuerte Inhalte müssen Design-Entscheidungen den Inhalt berücksichtigen:

• Wie sieht ein Artikel-Titel aus, der 5 Wörter lang ist? Und einer mit 15 Wörtern?
• Was passiert, wenn ein Bild fehlt?
• Wie viele Navigations-Items passen in die Hauptnavigation?

Above the Fold: Was Besucher zuerst sehen und Landing Page Design: Conversion-optimierte Layouts beschreiben, wie Layouts für variablen Content entworfen werden.

Häufige Fragen (FAQ)

Kann ich Webflow-Designs nach Figma exportieren? Nicht direkt. Webflow und Figma sind getrennte Ökosysteme. Designs entstehen entweder in Figma (dann Handoff zu Webflow) oder direkt in Webflow.

Wann ist WordPress noch zeitgemäß? Fast immer, wenn eine kostengünstige, flexible Lösung mit großem Plugin-Ökosystem gesucht wird. WordPress ist ausgereift, gut supportet und hat eine riesige Community.

Was ist besser – klassisches oder Headless CMS? Kommt auf das Projekt an. Klassische CMS sind einfacher zu betreiben. Headless CMS bieten mehr Flexibilität, erfordern aber mehr Entwicklungsaufwand.

Verwandte Einträge

• Landing Page Design: Conversion-optimierte Layouts – CMS-gestützte Landing Pages
• Responsive Design: Grundlagen und Breakpoints – Responsives CMS-Layout
• Page Speed und Core Web Vitals: Was Designer wissen müssen – CMS-Performance
• Design Systems: Von Figma zu Code – Design System für CMS-Projekte
• Above the Fold: Was Besucher zuerst sehen – Inhalt above the fold im CMS planen
• Handoff an Entwickler: Figma, Zeplin, Storybook – Design-Übergabe für CMS-Projekte

Weiterführend

• Perch, B. (2022). Content Management Systems for Designers. Smashing Magazine.
• W3Techs (2024). Usage statistics of content management systems.
• Webflow University (2024).
• Contentful (2024). Content Modeling Guide.
• WordPress.org (2024).