Webdesign + CSS + Figma + User Interface

Diese Weiterbildung vermittelt grundlegende Kenntnisse im Webdesign, einschließlich der Nutzung von Tools wie Figma und Adobe XD, sowie fortgeschrittene Techniken in CSS und User Interface Frameworks. Die Teilnehmenden erlernen die Strukturierung und Umsetzung funktionaler und zugänglicher Webangebote.

Modul 1: Webdesign: Grundlagen, Tools und Standards
Modul 2: CSS und Layout-Techniken im Webdesign
Modul 3: Figma: Webbasierte UI-Konzepte und Prototyp-Entwicklung
Modul 4: User Interface Frameworks im digitalen Produktdesign

Webdesign: Grundlagen, Tools und Standards
  • Grundlagen im Webdesign: Einführung in UI/UX Design, Responsive Webdesign, Strukturierung und Gestaltung funktionaler Webseiten.
  • Visuelle Gestaltung & Tools: Arbeiten mit Figma, Adobe XD und Sketch zur Erstellung von Wireframes, Prototypen und Interface-Layouts.
  • Frontend & Struktur: Umsetzung von Designs mit HTML, CSS, Flexbox und Grid Design für funktionale und zugängliche Benutzeroberflächen.
  • Barrierefreiheit & Standards: Anwendung von WCAG, Style Guides und Usability-Prinzipien für inklusive, nutzerfreundliche Webangebote.

CSS und Layout-Techniken im Webdesign
  • CSS3-Grundlagen zu Selektoren, Box-Modell, Kaskade und Integration in strukturierte HTML-Dokumente.
  • Gestaltung mit Flexbox, Grid Design und Media Queries für skalierbare und responsive Weblayouts.
  • Nutzung von Style-Konzepten, modularem CSS und UI Frameworks in der Frontend Entwicklung.
  • Arbeitsweise mit GitHub, Versionskontrolle und Organisation wiederverwendbarer CSS-Strukturen.

Figma: Webbasierte UI-Konzepte und Prototyp-Entwicklung
  • Einführung in Figma-Workflows zur Gestaltung von Benutzeroberflächen, Wireframes und responsiven Webseiten.
  • Einsatz von Auto-Layout, Designsystemen und UI-Kits zur komponentenbasierten Entwicklung digitaler Interfaces.
  • Zusammenarbeit in UI/UX-Teams, strukturierte Feedbackprozesse und Vorbereitung auf die Frontend-Entwicklung.
  • Erstellung von App-Prototypen, Anwendung von UI-Testing-Methoden und Integration in User-Interface-Prozesse.

User Interface Frameworks im digitalen Produktdesign
  • Grundlagen von UI Frameworks: Einführung in Struktur, Komponenten und Einsatzbereiche für responsive Web- und App-Oberflächen.
  • Designsysteme & Komponenten: Anwendung von UIKit, SwiftUI, Flexbox und Compose für konsistente Interfaces und skalierbare UI-Architekturen.
  • Prototyping & Gestaltung: Entwicklung interaktiver Interfaces mit Figma, Sketch oder Adobe XD unter Berücksichtigung von Usability-Prinzipien.
  • Integration & Testing: Verbindung mit Codebases, UI Testing Workflows und Versionsverwaltung mit Git für kollaborative UI-Entwicklung.

Nach Abschluss der Weiterbildung sind die Teilnehmenden in der Lage, funktionale und benutzerfreundliche Weboberflächen zu gestalten und umzusetzen, indem sie CSS-Techniken und User Interface Frameworks in verschiedenen digitalen Projekten anwenden.