Dein Kurs
Webdesign Fundamentals Weiterbildung.
Du willst endlich verstehen, wie professionelles Webdesign wirklich funktioniert? Wir zeigen dir in drei Tagen, wie du Websites strukturierst, gestaltest und als klickbaren Prototyp in Figma umsetzt.
Kursinhalte
Übersicht aller Inhalte.
Keyfacts
✔ Dauer: 3 Tage / 09.00 – 17.00 Uhr
✔ Teilnehmer*innen: max. 12
✔ Trainer: Experte aus der freien Wirtschaft
✔ Standorte:
Hamburg, Frankfurt, München, Stuttgart oder remote (Live Online)
✔ Kurssprache: Deutsch
✔ Abschluss: „Webdesign Fundamentals“
Dein Trainer
Luigi Bucchino, M.A.
Head Trainer Webdesign Fundamentals
Tech Tools
Für wen eignet sich die Weiterbildung Webdesign Fundamentals?
Du möchtest Websites professionell konzipieren und gestalten – von der ersten Idee bis zum klickbaren Prototyp? Mit unserer Weiterbildung „Webdesign Fundamentals“ lernst du in drei intensiven Tagen, wie modernes Webdesign wirklich funktioniert: von Layout, Typografie und Farbe über nutzerzentrierte Konzeption bis hin zum pixelperfekten UI-Design und interaktiven High-Fidelity-Prototyp in Figma.
Die Weiterbildung richtet sich an Grafikdesigner:innen, UX/UI-Designer:innen, Frontend Developer und Product Owner, die sich eine solide Webdesign-Grundlage aufbauen oder ihre Figma-Kenntnisse auf ein professionelles Level heben wollen. Du arbeitest in Zweierteams an einem durchgängigen Praxisprojekt: Vom Briefing über Sitemap, Wireframe und Moodboard bis zum responsiven Website-Design und abschließender Prototyp-Präsentation durchläufst du den kompletten Webdesign-Prozess – praxisnah, strukturiert und direkt anwendbar.
Die Weiterbildung endet mit der Vorstellung eures Projekts und dem Abschluss „Webdesign Fundamentals“.
Webdesign-Grundlagen & Konzeption
Am ersten Tag legst du das Fundament für professionelles Webdesign. Du lernst, wie sich modernes Webdesign entwickelt hat, worin sich Websites, Web Apps, SPAs und CMS-Systeme unterscheiden und welche Trends das Medium prägen. Wir tauchen tief in die visuellen Grundlagen ein: Grid-Systeme, visuelle Hierarchie, Whitespace und Gestaltgesetze im Web. Typografie und Farbe fürs Web stehen ebenso auf dem Programm wie der gezielte Einsatz von Fonts, Farbkontrasten und typografischen Hierarchien.
Nachmittags bringst du die Nutzerperspektive ins Spiel – mit Personas, User Stories und Informationsarchitektur für dein Website-Projekt. Du erstellst eine erste Sitemap, entwirfst Low-Fidelity-Wireframes und sammelst visuelle Inspiration für ein Moodboard. Den Abschluss des Tages bildet eine Einführung in Figma: Account-Setup, Interface-Übersicht, Frames und das richtige Artboard-Setup für Website-Projekte im 1440px-Desktop-Format.
Figma Deep Dive & Visual Design
Tag zwei gehört Figma – und dem Weg vom groben Wireframe zum pixelperfekten UI-Design. Du lernst professionell mit Auto Layout, Figma Styles und Components zu arbeiten: Buttons, Cards und Navigationselemente baust du so auf, dass sie wiederverwendbar, skalierbar und konsequent sind. Wir schauen uns die wichtigsten UI-Patterns für Websites an – Hero Sections, Call-to-Action-Design, Card-Layouts, Forms, Footer-Strukturen – und du verstehst, wie man diese gezielt einsetzt.
Ein eigenes Kapitel widmen wir dem responsiven Webdesign: Breakpoint-Strategie, Responsive Grids in Figma, Content Reflow und Touch Targets. In den ausgedehnten Praxisphasen am Nachmittag gestaltest du deine Startseite als High-Fidelity-Screen, baust Components aus deinem Moodboard heraus auf und überträgst das Design in eine mobile Variante. Du erhältst dabei individuelles Coaching und Feedback direkt vom Trainer.
Prototyping, Testing & Präsentation
Am dritten Tag erweckst du dein Design zum Leben. Du lernst den Figma-Prototyping-Modus in der Tiefe kennen: Connections, Triggers, Actions, Smart Animate, Scroll-Verhalten mit Fixed Header, Overlays und Modals. In der Praxisphase verknüpfst du alle Screens zu einem vollständigen, klickbaren Website-Prototyp – inklusive Navigations-Interaktionen und Micro-Interactions.
Außerdem bekommst du einen praxisnahen Einblick in Accessibility und Inclusive Webdesign: WCAG-Grundlagen, Kontrastverhältnisse, semantische Struktur und die richtigen Figma-Plugins für Accessibility-Checks. Mit Usability Testing Basics – Think-Aloud, 5-Sekunden-Test und Guerilla Testing – testest du deinen Prototyp im Cross-Testing mit anderen Teams, priorisierst das Feedback und finalisierst dein Design. Den Abschluss bildet die Projektpräsentation: Jedes Team stellt sein Briefing, Konzept und den klickbaren Prototyp live vor – und erhält konstruktives Peer- und Trainer-Feedback. Die Weiterbildung endet mit dem Abschluss und einer Teilnahmebescheinigung.
Warum sich ein UIX Academy Training für dich lohnt.
Du willst Mobile UX & UI Design wirklich professionell beherrschen?
In der Mobile App Design Weiterbildung entwickelst du überzeugende App-Konzepte mit starken UX/UI-Patterns für iOS & Android – von User Flows bis Prototyp. Mit Usability Engineering Methods sorgst du dafür, dass deine Struktur sitzt: klare Informationsarchitektur, saubere Wireframes und nachvollziehbare Entscheidungen, die in Tests bestehen.
Du willst bessere Webdesigns & SaaS Produkte bauen – messbar nutzerfreundlich?
In der Browser App Design Weiterbildung lernst du, Web- und SaaS-Anwendungen von der Idee bis zum Design/Prototyp konsistent umzusetzen (responsiv, skalierbar, systematisch). Mit der Design Thinking Methods Weiterbildung machst du davor die Richtung klar: Probleme richtig definieren, Ideen gezielt entwickeln und Lösungen so formulieren, dass dein Team sofort loslegen kann.
Du willst schneller werden und gleichzeitig Future Interfaces gestalten?
In der AI Driven Design Methods Weiterbildung nutzt du KI als echten Produktivitätshebel für Ideation, Varianten, Prototyping und Iterationen – ohne Qualität zu verlieren. In der Augmented Reality App Design Weiterbildung erweiterst du dein Skillset um Spatial Computing und Natural User Interfaces, damit du auch AR-Erlebnisse nutzerzentriert konzipieren und designen kannst.
Kursanmeldung
Die nächsten Termine
Webdesign Fundamentals Kurs.
By the way: Auch Remote-Teilnehmer:innen können unsere Trainings besuchen. Wir bieten unsere Kurse in Präsenz und ebenfalls Live Online an!
Unsere Preise sind Bruttopreise, die MwSt. ist bereits inkludiert.
Live Online
7. – 9. Mai ’26
Standard Tarif
1.340,00 €
Live Online
29. – 31. Jul. ’26
Early Bird Tarif
Bis 29. Mai ’26
1.160,00 €
1.340,00 €
Live Online
9. – 11. Sep. ’26
Early Bird Tarif
Bis 9. Jul. ’26
1.160,00 €
1.340,00 €
Curriculum
Das lernst du in unserem Webdesign Fundamentals Kurs
Tag 1
Einführung in modernes Webdesign
Von HTML-Tabellen zu Design Systems
Themengebiete
- Was ist modernes Webdesign? Definition, Abgrenzung, Einordnung
- Website vs. Web App vs. SPA vs. Landing Page
- Responsive vs. Adaptive Design
- Rolle von CMS-Systemen (WordPress, Webflow & Co.)
- State of Webdesign: Aktuelle Trends
Layout & Gestaltungsprinzipien
Die visuellen Grundlagen professionellen Webdesigns
Themengebiete
- Grid-Systeme (12-Column Grid, CSS Grid-Logik für Designer)
- Visuelle Hierarchie & Gestaltgesetze im Web
- Whitespace & Spacing-Systeme
- Above the Fold & Scroll-Verhalten
- Analyse bekannter Websites als Best-Practice-Beispiele
Typografie & Farbe im Web
Lesbarkeit, Hierarchie und Markenidentität
Themengebiete
- Web-Typografie: Google Fonts, Variable Fonts, Schriftpaare
- Typografische Hierarchie (H1–H6, Body, Captions)
- Farbtheorie fürs Web: Kontrastverhältnisse & Farbsysteme
- Dunkel-/Hellmodus: Grundregeln
- Tools: Coolors, Fontpair, Type Scale
Nutzerzentrierung für Websites
Zielgruppenverständnis & Seitenstruktur
Themengebiete
- Personas & User Stories für Website-Projekte
- Informationsarchitektur: Sitemap erstellen
- Navigation Patterns (Navbar, Hamburger, Mega Menu, Footer Navigation)
- User Flows für typische Website-Aktionen (CTA, Formular, Buchung)
Kursaufgabe: Konzeptphase
Briefing-Auswahl, Zielgruppe, Sitemap & Wireframes
Themengebiete
- Briefing wählen und Zielgruppe definieren
- Sitemap auf Papier oder in Miro/Whimsical erstellen
- Low-Fidelity-Wireframes (Paper Prototyping oder Whimsical)
- Moodboard erstellen (Savee, Pinterest, Designinspiration)
Einführung in Figma
Erste Schritte im Tool
Themengebiete
- Figma-Account & Interface-Übersicht
- Frames, Layers & Grundformen
- Artboard-Setup für Website-Design (1440px Desktop)
Tag 2
Figma für Webdesign (Intermediate)
Professionelles Arbeiten mit Auto Layout, Styles & Components
Themengebiete
- Auto Layout: Prinzipien & praktische Anwendung
- Figma Styles: Farben, Typografie, Effekte
- Components & Variants: Buttons, Cards, Nav-Elemente
- Constraints & Responsiveness in Figma
- Figma Pages & File-Organisation
UI-Design Patterns für Websites
Die wichtigsten Patterns und ihre Anwendung
Themengebiete
- Hero Sections & Call-to-Action-Design
- Card-basierte Layouts
- Forms & Input-Design
- Footer-Patterns & Trust-Elemente
- Social Proof, Testimonials, Pricing Tables
Responsive Webdesign
Desktop, Tablet, Mobile – ein Design, alle Breakpoints
Themengebiete
- Breakpoint-Strategie: Mobile First vs. Desktop First
- Content Reflow: Was passiert bei kleinen Screens?
- Responsive Typografie & Touch Targets
Kursaufgabe: UI-Design der Website
Vom Wireframe zum visuellen Design in Figma
Themengebiete
- Styles anlegen (Farben, Typografie aus Moodboard)
- Components erstellen (Navigation, Buttons, Cards)
- Website als High-Fidelity-Screen gestalten
- Hero Section, Content-Bereiche, Footer
- Mobile-Variante der Startseite anlegen
- Trainer-Coaching: individuelles Feedback
Tag 3
Prototyping in Figma (Deep Dive)
Interactions, Transitions, Scroll-Verhalten
Themengebiete
- Connections, Triggers & Actions
- Smart Animate & Transition-Typen
- Scroll-Verhalten (Fixed Header etc.)
- Overlays & Modals
- Device Preview & Präsentationsmodus
Accessibility & Inclusive Webdesign
Barrierefreies Design als Qualitätsmerkmal
Themengebiete
- WCAG-Grundlagen: Kontraste, Schriftgrößen, Farbunabhängigkeit
- Alt-Texte, semantische Struktur, Tab-Navigation
- Figma-Plugins für Accessibility-Checks (Stark Contrast)
- Inclusive Design: über Compliance hinaus denken
Usability Testing Basics
Schnell testen, schnell lernen
Themengebiete
- Think-Aloud-Methode
- 5-Sekunden-Test
- Guerilla Usability Testing
- Feedback strukturiert dokumentieren
Kursaufgabe: Prototyp verknüpfen & Testing
Den klickbaren Prototyp fertigstellen & testen
Themengebiete
- Seiten miteinander verknüpfen (Flows)
- Navigations-Interaktionen einrichten
- Scroll-Verhalten & Fixed Elements
- Cross-Testing: Teams testen gegenseitig ihre Prototypen
- Feedback dokumentieren, priorisieren und umsetzen
Abschlusspräsentation & Wrap-Up
Jedes Team präsentiert seinen Website-Prototyp
Themengebiete
- Vorstellung: Briefing, Zielgruppe, Konzept
- Live-Demo des klickbaren Prototyps
- Design-Entscheidungen argumentieren
- Peer-Feedback & Trainer-Feedback
- Key Learnings, weiterführende Ressourcen & Zertifikatsübergabe
FAQ
Gute Fragen, bessere Antworten.
Noch Fragen rund um Weiterbildung, Kosten oder Finanzierung? Stöbere hier durch die Infos oder schreib uns direkt an.
Für wen ist die Webdesign Fundamentals Weiterbildung geeignet?
Die Weiterbildung richtet sich an Grafikdesigner:innen, UX/UI-Designer:innen, Frontend Developer und Product Owner, die Webdesign professionell erlernen oder ihre Figma-Kenntnisse gezielt vertiefen möchten. Vorkenntnisse in Figma sind nicht erforderlich – ein grundlegendes Verständnis für digitale Produkte genügt.
Was lerne ich in der Webdesign Fundamentals & Figma Prototyping Weiterbildung?
Du lernst den kompletten Webdesign-Prozess: von Layout, Typografie und Farbsystemen über Informationsarchitektur, Wireframing und UI-Design in Figma bis hin zu responsivem Design, Accessibility und interaktivem Prototyping. Am Ende der drei Tage präsentierst du einen klickbaren High-Fidelity-Prototyp in Figma.
Brauche ich Figma-Kenntnisse, um am Kurs teilzunehmen?
Nein. Der Kurs startet mit einer Einführung in Figma und baut deine Kenntnisse schrittweise auf – von den Basics bis hin zu professionellem Arbeiten mit Auto Layout, Components und dem Prototyping-Modus. Auch Einsteiger:innen sind herzlich willkommen.
Wie lange dauert die Webdesign Weiterbildung und wo findet sie statt?
Die Weiterbildung dauert 3 Tage (jeweils 09:00–17:00 Uhr) und findet entweder in Präsenz in Hamburg, Frankfurt, München oder Stuttgart statt – oder als Live Online Kurs. Beide Formate bieten den gleichen Inhalt und die gleiche Trainer-Betreuung.
Erhalte ich nach dem Kurs eine Bescheinigung?
Ja. Nach erfolgreichem Abschluss erhältst du das Zertifikat „Webdesign Fundamentals & Figma Prototyping“ der UIX Academy. Es bestätigt deine erworbenen Kenntnisse in modernem Webdesign, UI-Design in Figma und interaktivem Prototyping.
Was kostet die Webdesign Fundamentals Weiterbildung?
Der reguläre Kurspreis beträgt 1.340,00 € (inkl. MwSt.). Bei frühzeitiger Buchung profitierst du vom Early-Bird-Tarif von 1.160,00 €. Die Kursgebühr ist als Betriebsausgabe zu 100 % steuerlich absetzbar.
Kann ich die Webdesign Weiterbildung auch als Firmenschulung buchen?
Ja. Die Webdesign Fundamentals Weiterbildung kann als Inhouse- oder Individualschulung für Teams gebucht werden. Inhalte, Tempo und Schwerpunkte lassen sich dabei individuell auf eure Anforderungen abstimmen. Anfragen sind über die UIX Academy direkt möglich.
Welche Kurse bauen auf der Webdesign Fundamentals Weiterbildung auf?
Der Kurs bildet eine ideale Grundlage für weitere UIX Academy Weiterbildungen: Mit Browser App Design vertiefst du SaaS- und Web-App-Gestaltung mit Design Systems. Usability Engineering Methods schärft deine methodische Kompetenz in Informationsarchitektur und Usability Testing. AI Driven Design Methods zeigt dir, wie du KI als Produktivitätshebel in deinen Designprozess integrierst.
