Responsive Webdesign Einsteigerkurs: Prototyping, UX & Usability
In diesem Live-Webinar lernen Sie, responsive Websites zu planen und zu gestalten – mit Fokus auf UX, Usability, Mobile First und Prototyping. Ideal für Grafiker/innen, Mediengestalter/innen und Marketing-Teams.
Von der Konzeptidee zur responsiven Website: UX, Struktur & Mobile First
Websites werden heute auf einer Vielzahl von Endgeräten genutzt – mit sehr unterschiedlichen Displaygrößen und Auflösungen. Ob Desktop, Tablet oder Smartphone: Eine moderne Website sollte auf jedem Gerät klar lesbar, schnell erfassbar und intuitiv bedienbar sein. Ziel ist ein positives Nutzungserlebnis – und damit eine bessere User Experience (UX) sowie eine höhere Conversion bei allen bildschirmbasierten Anwendungen.
Deshalb werden Websites heute im Responsive Webdesign geplant: Layout, Inhalte und Navigation passen sich flexibel an unterschiedliche Bildschirmgrößen an. So erhalten Besucherinnen und Besucher eine konsistente Darstellung – inklusive sinnvoller Inhaltspriorisierung, gut gewählter Breakpoints und einer Gestaltung nach dem Prinzip Mobile First.
Kursziel: Responsive Weblayouts planen – mit UX-Logik und Mobile First
Sie lernen anhand von Praxisbeispielen die theoretischen Grundlagen des Responsive Webdesigns sowie guter Usability und User Experience (UX) kennen, um zukünftig moderne HTML5-/CSS3-basierte Websites zu gestalten. Dazu gehören u. a. die Layouterstellung mit flüssigen Rastern, die optimale Planung Ihrer Website-Navigation für unterschiedliche Endgeräte und Bildschirmgrößen sowie die Einbindung flexibler Bilder.
Im Praxisteil der Schulung lernen Sie, einen interaktiven Prototypen mit Adobe XD zu entwerfen und eine echte, funktionsfähige Internetseite mit dem Online-Programm Webflow umzusetzen – und das ohne Programmierkenntnisse!
Nach dem Kurs können Sie …
- die grundlegenden Prinzipien von responsivem Webdesign verstehen und für unterschiedliche Endgeräte einordnen.
- den Zusammenhang zwischen UX, Usability und responsiven Layouts sicher beurteilen.
- typische Darstellungsprobleme auf Smartphone, Tablet und Desktop erkennen und mit Breakpoints konzeptionell lösen.
- Layout-, Navigations- und Inhaltsentscheidungen gezielt an Nutzerverhalten und Nutzungskontexte anpassen.
- erste praktische Einblicke in die Umsetzung einer responsiven Website gewinnen und Beispiele selbst nachvollziehen.
Wenn Sie Ihre Kenntnisse vertiefen möchten, passen der Adobe XD Grundkurs und der Webflow Grundkurs ideal als nächste Schritte.
Kursinhalte: Grundlagen im Responsive Webdesign, Prototyping & UX
- Grundlagen Responsive Webdesign
- Adaptive Webdesign vs. Responsive Webdesign
- Warum Responsive Webdesign?
- Konzeptionelle Ansätze
- Bestandteile responsiver Websites
- Raster mit flexiblen Maßeinheiten
- Relative Einheiten für Schriftgrößen
- Unterscheidung von UI- und UX-Design
- Vorteile reaktionsfähiger Grid-Systeme
- CSS Media Queries
- Geräteeigenschaften abfragen
- Wahl der richtigen Maßeinheit
- Media Queries einbinden
- Media Queries kombinieren und verschachteln
- Viewport-Tag einbinden
- Gängige Bildschirmauflösungen
- Media Queries am Design orientieren
- Konzeption, Design & Entwicklung
- Progressive Enhancement (Mobile First)
- Graceful Degradation
- Mobile First = Content First
- Mobile First: Einsatz und Gefahren
- Geräteübergreifendes Design
- Layoutphasen
- Styletiles
- Designsystem
- Zusammenarbeit Design & Entwicklung
- Möglichkeiten der Inhaltsanpassung
- Inhalte ausblenden
- Inhalte nach Klick anzeigen
- Inhalte neu anordnen
- HTML neu anordnen: Flex Layouts
- Einfacher Zweispalter
- Verschachtelter Zweispalter
- Einfacher Dreispalter
- Dreispalter mit Zwischenschritt
- Mehrere Zwischenschritte
- Visuelle Hierarchie wahren
- Layout-Typen
- Überwiegend flüssiges Layout
- Spalten verschieben
- Layouts umschalten
- Reaktionsfähige Inhalte
- Flexible iFrame Videos
- Flexible ImageMaps
- Reaktionsfähige Tabellen
- Infografiken und Schaubilder
- Reaktionsfähige Typografie
- Webfonts
- em/rem/vw als Maßeinheit verwenden
- Headlines skalieren
- Schriftarten/-größen testen
- Lesbarkeit optimieren
- Mobile Navigationskonzepte: Eine Navigationsebene
- Navigation im mobilen Kontext
- Kopf-Navigation
- Fußanker-Navigation
- Auswahlmenü
- Aufklappmenü
- Aufklappmenü-Varianten
- Schiebenavigation (Off-Canvas-Menü)
- Teilweises Ausblenden
- Mobile Navigationskonzepte: Mehrere Navigationsebenen
- Mehrfaches Aufklappmenü
- Rechts-nach-links Navigation
- Unternavigation im Inhalt
- Karussell-Navigation
- Komplexe Off-Canvas-Navigation
- Anpassungsfähige Bilder
- Bilder flexibel einbauen
- Darstellungsprobleme im responsiven Kontext
- Bilder für hochauflösende Displays
- Hintergrundbilder verwenden
- CSS Eigenschaft: background-size
- Seitenverhältnis flexibler Elemente steuern
- Sprite-Grafiken nutzen
- Iconfonts erstellen
- SVG Vektorgrafiken
- Reaktionsfähige Bildergalerien
- Favoriten-Icons
- Touch-Icons
- Performance-Optimierung
- Langsame Seiten verlieren Besucher
- Dateien zusammenführen
- JavaScript & CSS-Stylesheets optimieren
- Bilder optimieren
- Gestalten mit CSS
- GZIP: komprimierte Übertragung
- Caching aktivieren
- Lazy Loading nutzen
- Adobe XD: Kurzeinführung in die Gestaltung klickbarer Prototypen
- Zeichenflächen anlegen
- Mit dem Wiederholungsraster gestalten
- Wiederverwendbare Komponenten anlegen
- Animierte und interaktive Prototypen erstellen
- Prototypen für Endkunden zur Freigabe veröffentlichen
- Designspezifikationen für Entwickler veröffentlichen
- Mobirise: Erstellung einfacher Websites ohne Programmierkenntnisse
- Einfache Seiten mit einem Baukastensystem zusammenstellen
- Websites exportieren und veröffentlichen
- Webflow: Echte responsive Websites mit einem Online-Editor erstellen
- Einführung in das CSS Box-Modell
- Websites strukturieren
- Sections, Container und DIV-Blöcke einfügen
- Element-Hierarchie festlegen
- Mehrspaltige Inhalte anlegen
- Abstände definieren
- Elemente mit dem visuellen CSS-Editor formatieren und gestalten
- Bilder hinzufügen
- Arbeiten mit Breakpoints
- Eine responsive Navigation einfügen
- Text-Formatierung
- globale Formatierungen anwenden
- Größen definieren
- Arbeiten mit dem Navigator
- Bildergalerien hinzufügen
- Symbole definieren und wiederverwenden
- Usability und User Experience
- Unterschiede und Gemeinsamkeiten
- Zehn Regeln der Usability
- Aspekte der User Experience
- Wahrnehmung & Handeln
- Wahrnehmungsgesetze
- Seitenwahrnehmung
- Menschliches Handeln
- Knappheit erzeugt Dringlichkeit
- Halo-Effekt
- Gestaltgesetze
- Personas
- Vorteile von Personas
- Bestandteile von Personas
- Erstellung von Personas
- User Stories und Use Cases
- Customer Journey Maps
- Entwurfsphasen
- Von Low-Fidelity zu High-Fidelity
- Scribbles und Wireframes
- Software für die Wireframe-Erstellung
- Prototyping mit User Scenarios
- Prototyping-Tools
- Finden und Testen der Navigationsstruktur
- Nutzerfreundliche Bilder
- Vorteile und Nachteile von Bildern
- Authentische Bilder verwenden
- Bildgestaltung und Bildeinsatz
- Blickrichtung
- Bilder auf mobilen Endgeräten
- Slideshows
- Usability-Tests
- Ablauf von Usability-Tests
- Ziele von Usability-Tests
- Guerilla-Usability-Tests
- A/B-Tests
- Kopf- und Fußleisten
- Mega-Menüs gestalten
- Kopfleiste und Sticky Header
- Sprachumschalter
- Footer
- Verwendung von Farben
- Farbwirkung
- Farbe und Usability
- Farbe und Barrierefreiheit
- Formular-Design
- Formulare aus Nutzersicht
- Formularfelder gestalten
- Formularfeld-Beschriftungen
- Intelligente Formulare
- Umgang mit Fehlermeldungen
- Formulare auf mobilen Endgeräten
- Weitere Themen
- Web-Typographie
- Einsatz von Mikro-Animationen
- Akkordeon-Menüs
- Link- und Button-Gestaltung
- Link-Platzierung und -Gestaltung
- Button-Design und -Anordnung
- Button-Zustände
- Listen und Tabellen
- Aufbau und Reihenfolge
- Kopfleiste und Sortierung
- Vergleichstabellen
- Suchfunktion & Ergebnislisten
- Nutzerfreundliche Suchfunktionen
- Technische Aspekte der Suche
- Suchergebnisse gestalten
- Umgang mit keinen Suchergebnissen
- Filter und Facetten
- Trefferanzahl reduzieren und erweitern
- Gruppen und Attribute
- Gestaltung von Filtern und Facetten
Die Schulungsinhalte können bei Einzel- und Firmenschulungen individuell auf Ihre Wünsche und Anforderungen angepasst werden. Nutzen Sie hierzu bitte den Kurskonfigurator meiner Partnerfirma WildKolleg.
Termine & Preise: Responsive Webdesign, Prototyping, UX & Usability Einsteigerkurs
Alle offenen Kurstermine für den Responsive Webdesign, Prototyping, UX & Usability Einsteigerkurs als Live-Webinar finden Sie auf der Internetseite meiner Partnerfirma WildKolleg.
Individuelle Kurstermine sind nach Absprache jederzeit möglich. Termin vereinbaren
Ablauf, Kursdauer & Voraussetzungen
Live-Webinar (online)
Die Schulung wird in der Regel online als Live-Webinar durchgeführt. Die Teilnahme ist bequem vom Arbeitsplatz oder aus dem Homeoffice möglich. Eine Präsenzschulung bei Ihnen vor Ort bieten wir nach individueller Absprache an.
Kleine Kursgrößen
Unsere Webinare werden in Kleinstgruppen durchgeführt. So bestimmen Sie das Lerntempo, und unsere Trainerinnen und Trainer können all Ihre Fragen individuell beantworten.
Kursdauer & Ablauf
3 Tage à 8 Unterrichtsstunden (jeweils von 8:30 Uhr bis 15:45 Uhr). Eine Unterrichtsstunde entspricht 45 Minuten.
Voraussetzungen
Sicheres Arbeiten unter Windows oder macOS; DTP-Grundkenntnisse und Internet-Basis-Know-how; Kenntnisse in HTML, CSS oder JavaScript sind nicht erforderlich.
Zielgruppe
Webdesigner/innen, Online-Redakteur/innen, Grafiker/innen, Mediengestalter/innen
Ihr Trainer: Micha Beißer
Als ehemaliger Art Director bei einer großen Internet-Agentur verfüge ich über eine langjährige Praxiserfahrung bei allen Fragen rund um das Thema Webdesign.
In diesem Einsteigerkurs vermittle ich Ihnen die theoretischen Grundlagen, um moderne, responsive Websites zu planen, zu gestalten und mit einem interaktiven Prototypen zu testen. Dabei lernen Sie auch, auf eine gute Usability und User Experience (UX) zu achten.
WildKolleg Schule für Kommunikation und Medientechnologie
Meine Partnerfirma WildKolleg ist die erste Adresse für Einsteiger/innen, Fortgeschrittene und Profis, die strategisches Wissen und Programmfertigkeiten erlernen, festigen oder erweitern möchten. Offene Schulungen, Einzel- und Firmenkurse sowie Inhouse-Trainings bei Ihnen vor Ort.
Häufige Fragen zum „Responsive Webdesign Einsteigerkurs“
Hier finden Sie Antworten zu Ablauf, Inhalten, Voraussetzungen und Buchung – kompakt erklärt zur Vorbereitung auf Ihr Live-Webinar.
In diesem Einsteigerkurs lernen Sie die theoretischen Grundlagen, um moderne, responsive Websites zu planen und zu gestalten. Sie beschäftigen sich mit Usability und User Experience (UX) und setzen das Gelernte praxisnah um – inklusive Prototyping und Umsetzung ohne Programmierkenntnisse.
Der Kurs richtet sich an Webdesigner/innen, Online-Redakteur/innen, Grafiker/innen und Mediengestalter/innen, die responsive Screendesigns konzipieren und nutzerfreundliche Weblayouts entwickeln möchten.
Voraussetzung sind sicheres Arbeiten unter Windows oder macOS, DTP-Grundkenntnisse sowie Internet-Basis-Know-how. Kenntnisse in HTML, CSS oder JavaScript sind nicht erforderlich.
Sie lernen Grundlagen des Responsive Webdesigns (u. a. Adaptive vs. Responsive), konzeptionelle Ansätze, flexible Raster und Einheiten, CSS Media Queries (inkl. Viewport-Tag, Geräteeigenschaften, sinnvolle Breakpoints) sowie moderne Vorgehensweisen wie Mobile First, Progressive Enhancement und geräteübergreifendes Design.
Ja. Im Praxisteil entwerfen Sie einen interaktiven Prototypen mit Adobe XD, um Navigation, Struktur und Layout früh zu testen und abzustimmen.
Ja. Sie setzen eine funktionsfähige responsive Website mit dem Baukasten-Tool Mobirise und dem Online-Tool Webflow um – ohne Programmierkenntnisse. Dabei lernen Sie u. a. Strukturierung, Arbeiten mit Breakpoints, Navigation, Layout-Aufbau und das visuelle Gestalten im Editor.
Sie lernen zentrale UX- und Usability-Grundlagen, z. B. Wahrnehmungsprinzipien, Personas, User Stories, Entwurfsphasen (Wireframes/Prototyping), Usability-Tests sowie praxisrelevante UI-Themen wie Navigation, Header/Footer, Formulare, Web-Typografie, Farben (inkl. Barrierefreiheit), Buttons/Links und Such-/Filterkonzepte.
Der Responsive Webdesign Einsteigerkurs dauert drei Schulungstage. Der Unterricht findet jeweils von 8:30 Uhr bis 15:45 Uhr statt. Pausen sind jeweils von 9:30 bis 9:45 Uhr, 12:00 bis 12:45 Uhr und 14:30 bis 14:45 Uhr.
In der Regel findet die Schulung als Live-Webinar (Online-Schulung) statt. Eine Präsenzschulung bei Ihnen vor Ort ist nach individueller Absprache möglich.
Die Webinare werden in Kleinstgruppen durchgeführt. Dadurch können Fragen individuell beantwortet und das Lerntempo an die Teilnehmenden angepasst werden.
Offene Kurstermine finden Sie über die Terminseite der Partnerfirma WildKolleg. Individuelle Kurstermine sind nach Absprache jederzeit möglich.
Preise und Buchung erfolgen über die Partnerfirma WildKolleg.
Verwandte Schulungen
- Design mit KI: Photoshop, InDesign & Illustrator
- Adobe Firefly – Bild-, Video- und Sound-Generierung mit KI
- Adobe Creative Cloud Basis-Paketkurs
- Adobe Creative Cloud Aufbau-Paketkurs
- Adobe Creative Cloud Update-Paketkurs
- Adobe Acrobat Pro Grundkurs
- Automatisierung im Grafikdesign
- Barrierefreie PDFs mit InDesign und Acrobat Pro
- Barrierefreie PDFs mit Word und Acrobat Pro
- Barrierefreie PDFs mit Word und axesWord
- Barrierefreie PDFs mit InDesign und MadeToTag
- Webflow Grundkurs
- UX-Design Grundlagen
- E-Books erstellen
- Adobe Illustrator Grundkurs
- Adobe Illustrator Aufbaukurs
- Adobe InDesign Grundkurs
- Adobe InDesign Aufbaukurs
- Adobe Photoshop Grundkurs
- Adobe Photoshop Aufbaukurs
- Responsive Webdesign
- Adobe Animate Grundkurs
- Adobe Animate Aufbaukurs
- Adobe XD Grundkurs
- macOS Schulung
