UI/UX Masterclass — Figma, Bootstrap, Wireframing, Responsive, PWA

Diese Masterclass bietet eine vollständige Einführung in die Welt des UI/UX-Designs und der modernen Frontend-Entwicklung. Auf Basis des IBM-Lehrplans, der über die Kooperationsplattform Coursera bereitgestellt wird, erwerben Teilnehmende fundiertes Wissen über nutzerzentriertes Design, visuelle Gestaltungsprinzipien und die wichtigsten Werkzeuge der Branche. Im Mittelpunkt stehen das Design-Tool Figma, das CSS-Framework Bootstrap sowie die Konzepte Responsive Web Design und Progressive Web Apps. Die Weiterbildung richtet sich an kreative und technikaffine Menschen, die beruflich im Bereich der digitalen Produktgestaltung Fuß fassen oder ihre vorhandenen Kenntnisse systematisch ausbauen möchten. Der Kurs findet als Combined Learning in Vollzeit statt und dauert typischerweise zwischen zwei und vier Wochen.

Der erste inhaltliche Block befasst sich mit den Grundlagen des UI/UX-Designs und legt das konzeptionelle Fundament für die gesamte Weiterbildung. Hier lernen Teilnehmende, wie Menschen mit digitalen Schnittstellen interagieren, warum Nutzerfreundlichkeit über den Erfolg eines Produkts entscheidet und welche Methoden im Designprozess zum Einsatz kommen. Besonderer Wert wird auf die Unterscheidung zwischen User Interface Design und User Experience Design gelegt, da diese Begriffe im Berufsalltag häufig vermischt werden.

• Aufgaben und Verantwortlichkeiten eines UI/UX-Designers im Projektalltag
• Designprinzipien: Hierarchie, Kontrast, Ausrichtung, Nähe und Wiederholung
• Nutzerzentriertes Denken und Empathy Mapping
• User Flows und Journey Maps erstellen
• Designsprache und Designsysteme verstehen
• Kollaboratives Arbeiten in multidisziplinären Teams

Der zweite Block widmet sich dem professionellen Einsatz von Figma als zentralem Arbeitswerkzeug für UI/UX-Designer. Die Teilnehmenden lernen die Oberfläche kennen und erstellen schrittweise eigene Designprojekte. Von einfachen Wireframes bis hin zu vollständig interaktiven Prototypen werden alle wesentlichen Funktionen praktisch erarbeitet. Die Kursinhalte wurden von IBM entwickelt und spiegeln industrielle Standards wider.

• Figma-Oberfläche und Arbeitsbereich einrichten
• Vektorgrafiken, Formen und Symbole zeichnen
• Auto-Layout und Constraints für responsive Designs nutzen
• Wireframes auf Low-Fidelity- und High-Fidelity-Niveau erstellen
• Interaktive Prototypen mit Animationen und Übergängen verknüpfen
• Komponenten und Design-Tokens für konsistente Designsysteme aufbauen

Im dritten Block stehen Responsive Web Design und moderne Frontend-Frameworks im Fokus. Teilnehmende verstehen, warum Mobile-First-Design heute Standard ist, und lernen, wie Bootstrap diese Anforderungen umsetzt. Grundlegende Konzepte des Grid-Systems, der Breakpoints und der responsiven Typografie werden behandelt. Abgerundet wird dieser Block durch einen Einblick in Progressive Web Apps und Single Page Applications.

• Grundprinzipien des Responsive Web Designs und das Mobile-First-Konzept
• CSS-Grid und Flexbox im Zusammenspiel mit Bootstrap
• Bootstrap-Klassen für Layout, Navigation und UI-Komponenten
• Progressive Web Apps: Service Worker, Offline-Fähigkeit und App-Shell-Architektur
• Single Page Applications: Konzept, Vorteile und Abgrenzung zu Multi-Page-Apps
• Web-Design-Methoden und deren Auswahl je nach Projektanforderung

Praxisblock — Reale Projekte und Designworkflows In diesem abschließenden Praxisblock wenden Teilnehmende das Gelernte an konkreten, realistischen Projektaufgaben an. Sie durchlaufen einen vollständigen Designzyklus von der Anforderungsanalyse bis zur Präsentation des fertigen Prototyps. Dabei entwickeln sie ein Gespür für Qualitätsstandards, die in der Branche erwartet werden.

• Anforderungsanalyse und Nutzerrecherche für ein fiktives Produkt durchführen
• Personas entwickeln und User-Stories formulieren
• Low-Fidelity-Wireframes skizzieren und abstimmen
• High-Fidelity-Mockups in Figma ausarbeiten
• Interaktiven Klick-Prototyp erstellen und testen
• Responsives Layout mit Bootstrap entwickeln und anpassen
• Progressive Web App-Konzept für das Projekt entwickeln
• Usability-Test simulieren und Erkenntnisse dokumentieren
• Designreview nach Branchenstandards vorbereiten und präsentieren
• Portfolio-fähige Dokumentation des Projekts anlegen
• Feedback einarbeiten und Designiterationen durchführen
• Abschlusspräsentation des Projekts vorbereiten

Die Ausbildung schließt mit einer strukturierten Reflexion der eigenen Designentscheidungen und einer Einordnung in aktuelle Branchentrends ab. Teilnehmende erhalten Empfehlungen, wie sie das erworbene Wissen in ihrem Berufsalltag weitervertiefen und ihr Portfolio aufbauen können.

Diese Masterclass eignet sich für alle, die im Bereich der digitalen Produktgestaltung einsteigen oder sich weiterentwickeln möchten. Sie setzt keine formale Ausbildung im Design oder der Informatik voraus, erfordert jedoch eine ausgeprägte Affinität zu digitalen Themen sowie grundlegendes technisches Verständnis.

• Berufseinsteiger und Quereinsteiger, die eine Karriere im UI/UX-Design oder Frontend-Bereich anstreben
• Grafikdesigner, die ihre Kenntnisse um digitale und interaktive Gestaltung erweitern möchten
• Webentwickler, die ein tieferes Verständnis für nutzerzentriertes Design entwickeln wollen
• Marketingfachleute und Produktmanager, die enger mit Designteams zusammenarbeiten
• Personen in der beruflichen Neuorientierung, die eine zukunftssichere Digitalkompetenz aufbauen möchten

Der Kurs wird als Combined Learning durchgeführt, das heißt, es werden Online-Phasen des Selbststudiums mit geleiteten Präsenz- oder Live-Online-Einheiten kombiniert. Die IBM/Coursera-Lernmodule dienen als strukturiertes Rückgrat, das durch Trainerinput, praktische Übungen und Feedbackrunden ergänzt wird. Teilnehmende arbeiten an realen Designaufgaben, die schrittweise komplexer werden, und können Fragen in Live-Sessions oder über begleitende Kommunikationskanäle klären. Diese Lernform fördert sowohl eigenverantwortliches Arbeiten als auch den Austausch mit anderen Teilnehmenden.

Die Weiterbildung findet in Vollzeit statt und erstreckt sich in der Regel über einen Zeitraum von mehr als einer Woche bis zu einem Monat. Die genaue Dauer hängt vom jeweiligen Anbieter und der Kursintensität ab. Teilnehmende sollten sich auf einen vollzeitigen Lernrhythmus einstellen, der sowohl selbstgesteuerte Online-Einheiten als auch begleitete Kurszeiten umfasst. Eine frühzeitige Planung der persönlichen Lernstruktur ist empfehlenswert.

Nach erfolgreichem Abschluss erhalten Teilnehmende ein trägerinternes Zertifikat bzw. eine qualifizierte Teilnahmebescheinigung des jeweiligen Weiterbildungsträgers. Dieses Dokument bestätigt die erworbenen Kompetenzen im Bereich UI/UX-Design, Figma, Bootstrap und verwandter Themen. Zusätzlich besteht die Möglichkeit, über die Plattform Coursera ein separat ausgestelltes Zertifikat von IBM zu erwerben, das international anerkannt ist und im beruflichen Kontext einen hohen Stellenwert hat. Die Anforderungen für das externe Coursera-Zertifikat sind beim jeweiligen Anbieter zu erfragen.

UI/UX-Design gehört zu den am stärksten nachgefragten Qualifikationen im digitalen Arbeitsmarkt. Unternehmen jeder Größe suchen Fachkräfte, die digitale Produkte so gestalten können, dass sie intuitiv bedienbar, ästhetisch überzeugend und technisch umsetzbar sind. Mit dieser Masterclass erwerben Teilnehmende ein Kompetenzprofil, das direkt auf konkrete Stellenanforderungen in der Digitalbranche einzahlt — von der Stelle als UI/UX Designer über Positionen als Frontend Developer bis hin zu Rollen als Digital Designer oder Produktspezialist. Darüber hinaus ist das vermittelte Wissen unmittelbar anwendbar: Figma ist das meistgenutzte Design-Tool in der Branche, Bootstrap einer der verbreitetsten Ausgangspunkte für Webanwendungen. Wer diese Werkzeuge sicher beherrscht, kann sofort produktiv in Projekten mitwirken, ohne einen langen Einarbeitungszeitraum einplanen zu müssen. Die enge Verzahnung mit dem IBM-Lehrplan sorgt dabei für internationale Anschlussfähigkeit der erworbenen Kompetenzen. Bei AZAV-zertifizierten Trägern ist diese Weiterbildung in der Regel über einen Bildungsgutschein der Bundesagentur für Arbeit oder des Jobcenters förderbar. Weitere Förderwege stehen je nach persönlicher Situation zur Verfügung: das Qualifizierungschancengesetz für Beschäftigte, Leistungen zur Teilhabe am Arbeitsleben der Deutschen Rentenversicherung sowie die Berufsförderung der Bundeswehr. Eine persönliche Beratung beim zuständigen Träger hilft, den individuell passenden Förderweg zu identifizieren.