UI/UX-Design mit Figma & WordPress – Kurs

Dieser Kurs verbindet UI/UX-Design mit Figma, responsives Webdesign mit SVG-Animationen und die praktische Umsetzung in WordPress zu einem durchgängigen Curriculum. Statt Design und Content-Management getrennt zu behandeln, lernen Sie zunächst, Benutzeroberflächen und Prototypen in Figma zu gestalten, und übertragen diese Entwürfe anschließend in eine echte WordPress-Website mit eigenen Themes, Plugins und Gutenberg-Layouts. Ergänzt wird das Programm durch Grafik- und Bildbearbeitung sowie eine Einführung in die Videobearbeitung mit Premiere Pro. Am Ende können Sie ein UI/UX-Konzept nicht nur entwerfen, sondern auch als funktionsfähige, responsive WordPress-Website umsetzen.

Der Kurs gliedert sich in fünf Module, die den Weg von der Designidee bis zur fertigen WordPress-Website konsequent nachzeichnen: von den Webdesign-Grundlagen über UI/UX-Design in Figma und die technische Umsetzung in WordPress bis zu ergänzender Grafik- und Videokompetenz. Das erste Modul Webdesign Grundlagen schafft das gestalterische Fundament für alle folgenden Module.

• Kenntnisse im Bereich Webgrafiken für moderne, responsive Webseiten
• Farbgestaltung und Farbtheorie als Basis konsistenter Designsysteme
• Konzeption von SVG-Animationen mit Schwerpunkt auf Webgrafiken
• Typografie und Webfonts für unterschiedliche Endgeräte
• Barrierefreie Lösungen bei der Gestaltung von Webgrafiken
• Umsetzung von Mobile-First-Design-Prinzipien

Das zweite Modul UI/UX Design mit Figma steht im Zentrum des Kurses und vermittelt die eigentliche Entwurfsarbeit.

• Einführung in Figma und die Benutzeroberfläche des Tools
• Navigation innerhalb von Figma-Projekten und -Dateien
• Erstellung interaktiver Prototypen mit verknüpften Bildschirmen
• Design-Prinzipien und Best Practices für nutzerfreundliche Oberflächen
• Erstellung und Bearbeitung wiederverwendbarer Komponenten
• Arbeiten mit Variants und Auto Layout für flexible Designsysteme
• Entwurf einer vollständigen responsiven Webseite in Figma

Das dritte Modul WordPress Management überträgt die Figma-Entwürfe in eine funktionsfähige Website.

• Optimierung und Auswahl von Plugins passend zum Designkonzept
• Anpassung von Themes an das zuvor entworfene UI
• Arbeiten mit dem Gutenberg-Editor zur Umsetzung der Seitenstruktur
• Benutzerverwaltung und Rechtemanagement innerhalb von WordPress
• Anpassung des visuellen Designs auf Basis der Webgrafiken-Vorgaben
• Verfassen und Bearbeiten von Seiten und Beiträgen
• Einrichtung eines Online-Shops mit WooCommerce

Das vierte Modul Grafik- und Bildbearbeitung ergänzt das UI/UX-Projekt um vertiefte visuelle Gestaltungskompetenz.

• Entwicklung von Branding-Elementen für das Gesamtprojekt
• Grundlagen der Farbenlehre für konsistente Bildsprache
• Professionelle Bildbearbeitung für UI- und Webgrafiken
• Erstellung von Vektorgrafiken und Illustrationen
• Typografie und Texteffekte für grafische Elemente
• Zusammenspiel zwischen Photoshop und Illustrator im Workflow
• Fortgeschrittene Arbeitsabläufe und Automatisierung wiederkehrender Aufgaben

Das fünfte Modul Videobearbeitung mit Premiere Pro rundet das Programm um eine Einführung in Bewegtbild ab.

• Einsatz von Effekten in Videoprojekten
• Erstellung von Titeln und Grafiken für Video-Inhalte
• Geschwindigkeits- und Zeitmanipulation von Videomaterial
• Export- und Rendereinstellungen für unterschiedliche Formate
• Orientierung in der Benutzeroberfläche von Premiere Pro
• Arbeiten mit Timeline und Zeitleiste

Im praktischen Teil setzen Sie ein durchgängiges UI/UX-Projekt von der ersten Skizze bis zur fertigen WordPress-Website um.

• Entwurf eines Wireframes und ersten UI-Konzepts in Figma
• Aufbau eines Komponentensystems mit Variants und Auto Layout
• Erstellung eines interaktiven Prototyps zur Überprüfung der Navigationsstruktur
• Durchführung eines einfachen Usability-Tests am Figma-Prototyp
• Übertragung des Figma-Designs in ein passendes WordPress-Theme
• Anpassung von Plugins und Gutenberg-Blöcken an das UI-Konzept
• Integration selbst erstellter Vektorgrafiken und SVG-Animationen in die Website
• Einrichtung eines einfachen WooCommerce-Produkts innerhalb der Website
• Test der fertigen WordPress-Seite auf unterschiedlichen Bildschirmgrößen
• Erstellung eines kurzen Erklärvideos zum Projekt mit Premiere Pro
• Abgleich der fertigen Website mit dem ursprünglichen Figma-Entwurf
• Präsentation des Gesamtprojekts von der Designidee bis zur Live-Umsetzung

Diese Struktur macht den Kurs zu einer durchgängigen Reise von der Designidee zur technischen Umsetzung, statt UI/UX-Design und WordPress-Entwicklung als getrennte Themen zu behandeln. Für viele Designerinnen und Designer endet die Arbeit bisher beim fertigen Figma-Entwurf, während die technische Umsetzung anderen überlassen wird. Dieser Kurs schließt bewusst diese Lücke, indem er zeigt, wie ein Designsystem in Figma tatsächlich zu einer lauffähigen WordPress-Website wird.

Der Kurs richtet sich an Personen, die eine Tätigkeit in den Bereichen Webentwicklung, UI/UX-Design, Grafikdesign und Videoproduktion angehen oder ihre Fachkenntnisse in diesem Bereich erweitern möchten. Besonders geeignet ist er für alle, die Design und technische Umsetzung nicht getrennt, sondern als zusammenhängenden Prozess verstehen wollen.

• Angehende UI/UX-Designerinnen und -Designer mit Interesse an der technischen Umsetzung eigener Entwürfe
• Webdesignerinnen und Webdesigner, die ihre Figma-Kenntnisse vertiefen möchten
• WordPress-Interessierte, die von der Designphase bis zur fertigen Website arbeiten wollen
• Mediengestalterinnen und Mediengestalter mit Interesse an Prototyping und Designsystemen

Der Kurs folgt bewusst dem Ablauf eines echten Designprojekts: Auf die Entwurfsarbeit in Figma folgt jeweils die technische Umsetzung in WordPress, sodass Design und Implementierung nicht getrennt, sondern als zusammenhängender Workflow erlebt werden. Neue Konzepte werden an kompakten Beispielen eingeführt und anschließend am durchgängigen Kursprojekt vertieft, das sich vom ersten Wireframe bis zur fertigen, responsiven WordPress-Website entwickelt.

Der Kurs deckt fünf Themenmodule ab, die von UI/UX-Design über WordPress-Umsetzung bis zu ergänzender Grafik- und Videokompetenz reichen. Der Schwerpunkt liegt auf der praktischen Projektarbeit, in der ein Figma-Entwurf konsequent bis zur fertigen WordPress-Website weiterentwickelt wird, ergänzt durch vertiefende Übungen in Bildbearbeitung und Videoschnitt.

Am Ende der Weiterbildung erhalten Teilnehmende ein trägerinternes Zertifikat bzw. eine Teilnahmebescheinigung zu „Webdesign mit Zusatzqualifikation WordPress sowie UI/UX Design mit Figma". Es handelt sich nicht um eine offizielle Zertifizierungsprüfung eines Softwareherstellers, sondern um eine Bestätigung der erfolgreichen Teilnahme über alle Module hinweg.

Ein gutes UI/UX-Design nützt wenig, wenn es nicht auch technisch umgesetzt wird – und eine technisch saubere WordPress-Website wirkt selten überzeugend, wenn ihr ein durchdachtes Designkonzept fehlt. Dieser Kurs behandelt beide Seiten nicht getrennt, sondern als aufeinanderfolgende Schritte desselben Projekts. Der besondere Wert liegt in der Durchgängigkeit: Sie erleben, wie ein in Figma entworfenes Designsystem mit Komponenten und Variants Schritt für Schritt in WordPress-Themes, Gutenberg-Layouts und Plugin-Konfigurationen übersetzt wird – inklusive der Grafik- und Videoelemente, die eine fertige Website erst vollständig machen. Nach Abschluss der Weiterbildung sind Sie in der Lage, UI/UX-Konzepte in Figma zu entwerfen, diese eigenständig als responsive WordPress-Website umzusetzen und das Ergebnis um passende Grafiken, Vektorillustrationen und einfache Videoinhalte zu ergänzen. Diese Kombination aus Design- und Umsetzungskompetenz erhöht Ihre Einsatzmöglichkeiten deutlich – gerade in Rollen, die nicht nur entwerfen, sondern auch liefern müssen.