Webdesigner Kurs - UX/UI Ausbildung

Modul 1. UX Research – UX-Webdesigner-Kurs (8 Einheiten)

Einführung: Was ist UX und UI? UX-Designprozess; explorative Forschung I; Desk Research

Explorative Forschung II; Interviewmethoden (Leitfaden, Ablauf); Synthese

Synthese: Empathy Map; Affinity Map; Verhaltensvariablen; User Journey/Journey Map; Stakeholder-Map; Persona

Kreativitätstechniken: „How might we...?“, Crazy Eights, Storyboarding, Mind Mapping, User Flow/Master Flow, Skizzieren, Brainstorming

Informationsarchitektur & Oberflächengestaltung; Wireframes; Navigationsmuster; Mobile Web & native Apps; Design-Ethik; Moodboard

UX-Webdesign: Einführung in die Figma-Software

Wireframes in Figma erstellen

Evaluationsforschung & Usability-Tests: Ergebnisanalyse; 5-Sekunden-Test; Heatmap; Testskript; Testszenario; Rekrutierung; Moderation; Usability-Report

Mit diesem Block schließt du den UX-Teil des Webdesigner-Kurses ab; anschließend folgen Einführung und praktische Arbeit in Figma.

II. UI-Design und Figma-Webdesigner-Kurs (16 Einheiten)

• Grundlagen des Webdesigns: Einführung und Designprinzipien

• Grundbegriffe und Geschichte des Webdesigns

• User Experience (UX) und Webdesign

• Designprinzipien und ihre Anwendung im Webdesign mit praktischen Beispielen und Fallstudien

• Farben, Typografie und Bilder im Webdesign

• Farben im Webdesign (psychologische Wirkung, praktische Tipps zur Farbharmonie)

• Typografie im Webdesign: Schriftstile und ihre Anwendung

• Bilder und Grafiken im Webdesign: kreative Ansätze und Inspirationsquellen

• Responsives Design und Usability

• Grundlagen des responsiven Designs (Mobile-First-Ansatz, praktische Umsetzung von adaptivem Design)

• Usability und Personalisierung

• Webdesign-Projektkonzepte und Präsentation

• Webdesign-Tools und Ressourcen

• Webdesign-Tools und Software

• Durchstöbern von UI-Kits, Icon-Sets und Stockfotos

• Karrierechancen im Webdesign (Karrierewege, Portfolio, Lebenslauf-Optimierung)

• Figma in der Praxis

• Grundlagen von Figma: Oberflächen, Werkzeuge, Funktionen, Dateiverwaltung

• Praktische Übung: Kennenlernen der Werkzeugleiste; Erstellung einfacher Formen und Objekte; Wireframe-Erstellung

• Gestaltungsprinzipien und Techniken

• Erstellung von Wireframes und Grundlayouts

• Verwendung von Frames anhand praktischer Übungen

• Typografie in Figma

• Textstile

• Erstellung verschiedener Typografie-Varianten für eine Portfolioseite

• Anwendung von Farben und Stilen

• Erstellung und Anpassung einer Farbpalette in einer praktischen Übung

• Erstellung einer Präsentation

Integration und Erstellung von Icons und Illustrationen; Umgang mit SVG-Dateien; praktische Aufgabe: eigenes Icon-Set erstellen

Erstellung interaktiver Prototypen in Figma; praktische Aufgabe: Interaktionen und Übergänge einrichten

Verwaltung und Erstellung von Komponenten und wiederverwendbaren Elementen; praktische Aufgabe: Varianten und Wiederverwendung

Fortgeschrittene Layout-Techniken: Rastersysteme und Spalten, Auto Layout, responsives Design, verschachtelte Layouts; praktische Aufgabe

Integration von Bildern und Medien: Import und Verwaltung; Mediensammlung erstellen; Optimierung für das Web

Animationen und Mikrointeraktionen: Rolle und Einsatz; praktische Aufgabe: kurzes Video oder GIF erstellen

Erstellung und Anwendung von Designsystemen und Styleguides

Präsentation und Bewertung des finalen Projekts; Vorstellung der Prüfungsaufgaben und abschließende Bewertung

Im Webdesigner-Kurs erhältst du praxisorientierten Unterricht, damit du die Grundlagen des Berufs an echten Projekten lernst.

Wir bauen dein Webdesigner-Wissen Schritt für Schritt vom Anfänger- bis zum Fortgeschrittenen-Niveau auf.