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 und von 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 als Live-Webinar online durchgeführt. Die Teilnahme ist bequem vom Arbeitsplatz oder aus dem Home-Office 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.
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 Grafik-Design
- 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
- eBooks 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
