К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Dynamische Benutzeroberflächen für Websites erstellen · LearnSpace
Назад в каталог
courseraПрограммирование

Dynamische Benutzeroberflächen für Websites erstellen

Курс от Google
Начальный≈ 39.6 чНемецкий
О курсеНавыкиПрограммаПреподаватели

О курсе

„Responsives Web Design in Adobe XD“ ist der sechste Kurs des Zertifikatsprogramms, mit dem Sie die nötigen Fähigkeiten erwerben, um sich für Einstiegspositionen im Bereich User Experience Design (UX-Design) zu bewerben. In diesem Kurs entwerfen Sie mit dem beliebten Designtool Adobe XD eine responsive Website. Sie werden den gesamten Designprozess durchlaufen: sich in die Anwendenden hineinversetzen, ihre Probleme identifizieren, Ideen für Designlösungen finden, Wireframes und Prototypen erstellen, Designs testen und Feedback einholen. Am Ende des Kurses haben Sie ein neues Designprojekt, das Sie in Ihr professionelles UX-Portfolio aufnehmen können. Darüber hinaus lernen Sie, wie Sie nach Einstiegspositionen im Bereich UX-Design suchen, einen Lebenslauf erstellen, der Ihre Fähigkeiten und Leistungen hervorhebt, und Ihre professionelle Portfolio-Website aufbauen. Der Kurs wird von aktuell bei Google tätigen UX-Designschaffenden und UX-Forschenden geleitet. Bei praktischen Aktivitäten werden Sie reale UX-Designszenarien simulieren. Lernende, die die sieben Kurse dieses Zertifikatsprogramms absolvieren, können sich auf Einstiegspositionen im Bereich UX-Design bewerben. Nach Abschluss dieses Kurses können Sie: - Alle Schritte des UX-Designprozesses durchführen (Empathie aufbauen, Fokus definieren, Ideen entwickeln, Prototypen erstellen, Konzepte testen), um eine responsive Website zu erstellen - Designs mit dem beliebten Design-Tool Adobe XD entwickeln - Eine Informationsarchitektur planen und Sitemaps für Website-Designs erstellen - Gängige Layouts für Webseiten umsetzen - Usability-Studien planen und durchführen, um Feedback zu Ihren Designs einzuholen - Designs basierend auf Forschungserkenntnissen iterieren - Mit Designsystemen in Adobe XD arbeiten - Ihrem professionellen UX-Portfolio ein neues Designprojekt hinzufügen - [Optional] Einen UX-fokussierten Lebenslauf erstellen oder aktualisieren - [Optional] Erfahren, wie Sie nach Einstiegspositionen im Bereich UX suchen und sich darauf bewerben Dieser Kurs ist für UX-Designschaffende auf Anfängerniveau geeignet, die die vorherigen fünf Kurse des Google UX Design Certificate abgeschlossen haben. Alternativ müssen Lernende ein solides grundlegendes Verständnis von Designprozessen haben, Erfahrungen in der Erstellung von Wireframes, Modellen und Prototypen sowie Wissen zur Durchführung von Usability-Studien mitbringen. Es sind keine Vorkenntnisse in Adobe XD erforderlich.

Навыки, которые вы освоите

Responsive Web DesignAdobe XDUser ExperienceUser Experience DesignUsabilityUser Interface (UI) DesignUser Interface (UI)User Centered DesignInformation ArchitectureUI ComponentsUser Interface and User Experience (UI/UX) DesignWireframingIdeationDesign ResearchPrototypingMockupsWeb DesignUser ResearchUsability Testing

Программа курса

6 модулей · 207 учебных материалов

01Den UX-Designprozess beginnen: Empathie aufbauen und Fokus definieren43 материалов

Einführung in Kurs 6

Einführung in Kurs 6: Responsives Webdesign in Adobe XDВидеоWillkommen bei Kurs 6ЧтениеEinführung in das zweite PortfolioprojektЧтениеZweites Portfolioprojekt auswählenЧтение

Учитесь у экспертов

Google Career Certificates

Преподаватель курса

Dynamische Benutzeroberflächen für Websites erstellen
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 39.6 ч

6 модулей

Язык: Немецкий

Субтитры: Английский

Часть программы вашего университета
Aktivität: Auswahl für das Portfolioprojekt einreichen Задание
Dave – Mein Weg zum UX-DesignВидео

Einführung in Adobe XD

Willkommen bei Woche 1ВидеоResponsive Websites verstehenВидеоTesten Sie Ihr Wissen über responsives Webdesign ЗаданиеEinführung in Adobe XDВидеоTeilen Sie Ihre Begeisterung über das Erlernen von Adobe XDОбсуждениеErste Schritte mit Adobe XD ЧтениеOptional – Erste Schritte mit FigmaЧтениеEin Projekt in Adobe XD beginnenВидеоTesten Sie Ihr Wissen über die Grundlagen von Adobe XDЗаданиеAdobe XD und Figma vergleichen und gegenüberstellenОбсуждениеJennifer – Digitale Designtools verwendenВидео

Empathie mit Nutzenden aufbauen

Empathie mit Nutzenden aufbauen und ihre Probleme erkennenВидеоWeitere Informationen über den Aufbau von Empathie mit NutzendenЧтениеDiskutieren, wie wichtig die Berücksichtigung der Bedürfnisse der Nutzenden istОбсуждениеTesten Sie Ihr Wissen über Empathie mit den NutzendenЗаданиеInterviews durchführen, um Empathy Maps zu erstellenЧтениеInterviewfragen teilenОбсуждениеEmpathy Maps erstellenЧтениеAktivität: Eine Empathy Map erstellenЗаданиеAktivitätsbeispiel: Eine Empathy Map erstellenЧтениеPersonas erstellenВидеоWeitere Informationen über Personas ЧтениеAktivität: Personas erstellenЗаданиеAktivitätsbeispiel: Personas erstellenЧтение

Nutzungsanforderungen definieren

User Storys erstellenВидеоWeitere Informationen über User StorysЧтениеEine User Story über sich selbst erstellen und teilenОбсуждениеEine User Journey Map erstellenВидеоWeitere Informationen über User Journey MapsЧтениеAktivität: Eine User Story und eine User Journey Map erstellenЗаданиеAktivitätsbeispiel: Eine User Story und eine User Journey Map erstellenЧтение

Das Problem definieren

Eine Problembeschreibung entwickeln ВидеоWeitere Informationen über ProblembeschreibungenЧтениеTesten Sie Ihr Wissen über ProblembeschreibungenЗадание

Rückblick auf Woche 1

Zusammenfassung: Den UX-Designprozess beginnen: Empathie aufbauen und Fokus definierenВидеоGlossarЧтениеWochen-Challenge 1: Eine Problembeschreibung erstellenВзаимная проверка
02Den UX-Designprozess fortsetzen: Ideen entwickeln26 материалов

Einen Wettbewerbsaudit durchführen

Willkommen bei Woche 2ВидеоEinen Wettbewerbsaudit durchführen ВидеоErfahren Sie mehr über Wettbewerbsaudits ЧтениеAktivität: Einen Wettbewerbsaudit für Ihre Website durchführenЗаданиеAktivitätsbeispiel: Einen Wettbewerbsaudit für Ihre Website durchführenЧтениеErfahren Sie mehr über die Durchführung von Wettbewerbsaudits zur Ideenentwicklung ЧтениеSelbstreflexion: Wettbewerbsorientierte Recherchen zur Verbesserung der Designs nutzenЗадание

Ideen für Designs entwickeln

Ideen mit „How Might We“ entwickelnВидеоIdeen mit „Crazy Eights“ entwickelnВидеоErfahren Sie mehr über „How Might We“ und „Crazy Eights“ЧтениеTesten Sie Ihr Wissen über Techniken zur IdeenentwicklungЗаданиеAktivität: Ideen für Ihre Website entwickelnЗаданиеAktivitätsbeispiel: Ideen für Ihre Website entwickelnЧтение

Informationsarchitektur planen

Informationsarchitektur planenВидеоMehr über Informationsarchitektur erfahrenЧтениеGängige Website-Strukturen erkunden ВидеоWebsite-Strukturen erkundenPLUGINTesten Sie Ihr Wissen zu Website-Strukturen ЗаданиеBesprechen Sie die von Ihnen verwendeten Website-StrukturenОбсуждение

Rückblick auf Woche 2

Zusammenfassung: Den UX-Designprozess fortsetzen: Ideen entwickelnВидеоGlossarЧтениеWochen-Challenge 2: Eine Sitemap für eine Website erstellen Взаимная проверка
03Wireframes für eine responsive Website erstellen33 материалов

Papier-Wireframes erstellen

Willkommen zu Woche 3ВидеоGängige Layouts für Website-Startseiten entdeckenВидеоErfahren Sie mehr über gängige Website-LayoutsЧтениеDas Website-Layout identifizierenPLUGINDie Grundlagen von Wireframes ВидеоErfahren Sie mehr über WireframesЧтениеAktivität: Mit Papier-Wireframes für Ihre Website beginnenЗаданиеAktivitätsbeispiel: Mit Papier-Wireframes für Ihre Website beginnenЧтение

Responsive Websites planen

Ein responsives Layout grafisch darstellenВидеоErfahren Sie mehr über die grafische Darstellung responsiver LayoutsЧтениеAnpassen von Seitenlayouts basierend auf der BildschirmgrößeВидеоHäufige Elemente beim responsiven DesignЧтениеResponsives Webdesign erkundenPLUGINAktivität: Variationen Ihrer Papier-Wireframes erstellenЗадание

Digitale Wireframes in Adobe XD erstellen

Von Papier-Wireframes zu digitalen Wireframes übergehenВидеоDigitale Wireframes in Adobe XD erstellenВидеоErfahren Sie mehr über das Erstellen digitaler Wireframes in Adobe XDЧтениеOptional – Digitale Wireframes in Figma erstellenЧтениеAktivität: Digitale Wireframes für eine Desktop-Bildschirmgröße erstellenЗаданиеAktivitätsbeispiel: Digitale Wireframes für eine Desktop-Bildschirmgröße erstellenЧтение

Wireframes optimieren

Wireframes optimieren, um die Barrierefreiheit zu verbessernВидеоBerücksichtigen Sie bei Ihren Wireframes Überschriften, Orientierungspunkte und zentrale PunkteОбсуждениеWireframes bewerten mithilfe von GestaltprinzipienВидеоErfahren Sie mehr über die Verwendung von Gestaltprinzipien in WireframesЧтение

Rückblick auf Woche 3

​Zusammenfassung: Erstellen von Wireframes für eine responsive WebsiteВидеоGlossarЧтениеWochen-Challenge 3: Wireframes optimieren, um Standards zu erfüllenВзаимная проверка
04Low-Fidelity-Prototypen erstellen und testen31 материалов

Einen Low-Fidelity-Prototyp in Adobe XD erstellen

Willkommen bei Woche 4ВидеоLow-Fidelity-Prototypen verstehenВидеоTesten Sie Ihr Wissen über Wireframes versus PrototypenЗаданиеEinen Low-Fidelity-Prototyp in Adobe XD erstellenВидеоMehr über das Erstellen eines Low-Fidelity-Prototyps in Adobe XD erfahrenЧтениеOptional – Erstellen Sie einen Low-Fidelity-Prototyp in FigmaЧтениеAktivität: Einen Low-Fidelity-Prototyp für Ihre responsive Website erstellenЗаданиеAktivitätsbeispiel: Einen Low-Fidelity-Prototyp für Ihre responsive Website erstellenЧтениеLow-Fidelity-Prototyp testenЧтение

Eine Usability-Studie für einen Low-Fidelity-Prototyp planen und durchführen

Eine UX-Forschungsstudie planen ВидеоMehr zur Planung einer UX-Forschungsstudie erfahren ЧтениеAktivität: Eine UX-Forschungsstudie planenЗаданиеAktivitätsbeispiel: Eine UX-Forschungsstudie planenЧтениеEine Usability-Studie durchführenВидеоMehr zur Durchführung einer Usability-Studie erfahrenЧтение

Designs basierend auf Forschungsergebnissen iterieren

Low-Fidelity-Designs basierend auf Forschungsergebnissen iterierenВидеоMehr über das Iterieren von Low-Fidelity-Designs erfahrenЧтениеTesten Sie Ihr Wissen über das Modifizieren von Designs basierend auf ForschungsergebnissenЗаданиеZeigen Sie, wie Sie Designs basierend auf Forschungserkenntnissen iteriert habenОбсуждение

Rückblick auf Woche 4

Zusammenfassung: Low-Fidelity-Prototypen erstellen und testenВидеоGlossarЧтениеWochen-Challenge 4: Low-Fidelity-Prototypen basierend auf den Erkenntnissen der Usability-Studie anpassenВзаимная проверка
05High-Fidelity-Designs erstellen und testen38 материалов

Mit dem Designentwurf für Modelle beginnen

Willkommen bei Woche 5ВидеоMit dem Designentwurf für Modelle beginnenВидеоRückblick auf grundlegende Elemente des visuellen DesignsЧтениеRückblick auf das Anordnen von Elementen in ModellenЧтениеRückblick auf visuelle DesignprinzipienЧтениеTesten Sie Ihr Wissen zu den Grundlagen von ModellenЗадание

Modelle für eine Desktop-Website erstellen

Mit dem Erstellen von Modellen für die Startseite einer Website in Adobe XD beginnenВидеоOptional – mit dem Erstellen von Website-Modellen in Figma beginnen ЧтениеBilder und Logos zu Modellen in Adobe XD hinzufügenЧтениеTesten Sie Ihr Wissen zum Erstellen einer Homepage in Adobe XDЗаданиеWeitere Modelle für die Startseite einer Website in Adobe XD erstellenВидеоWiederholungsraster für den Designprozess in Adobe XD nutzenЧтение

Modelle für eine mobile Website erstellen

Modelle für eine mobile Website in Adobe XD erstellenВидеоMehr über ausgeblendete NavigationsmenüsЧтениеOptional – Modelle für eine mobile Website in Figma erstellenЧтениеAktivität: Ein Modell für die Startseite einer mobilen Website erstellenЗаданиеAktivitätsbeispiel: Ein Modell für die Startseite einer mobilen Website erstellenЧтение

Mit Designsystemen arbeiten

Mit Designsystemen arbeitenВидеоTesten Sie Ihr Wissen über die Arbeit mit DesignsystemenЗаданиеExterne Designsysteme in Adobe XD verwendenВидеоMehr über Designsysteme erfahrenЧтениеIhre Lieblings-Designsysteme speichernОбсуждениеAktivität: Ihre Designentscheidungen dokumentierenЗадание

Einen High-Fidelity-Prototyp entwickeln

Einen High-Fidelity-Prototyp in Adobe XD entwickelnВидеоAnmerkungen zur Barrierefreiheit im Internet machenВидеоMehr über Barrierefreiheit im Internet erfahrenЧтениеTesten Sie Ihr Wissen über Barrierefreiheit im InternetЗаданиеEine Ressource über inklusives und barrierefreies Design teilen Обсуждение

Rückblick auf Woche 5

Zusammenfassung: High-Fidelity-Designs erstellen und testenВидеоGlossarЧтениеWochen-Challenge 5: Einen High-Fidelity-Prototyp für eine Website erstellen Взаимная проверка

Optional – Ihren High-Fidelity-Prototyp testen

Optional – Ihren High-Fidelity-Prototyp testenВидеоOptional – Rückblick auf das Planen und Durchführen einer Usability-StudieЧтениеTesten Sie Ihr Wissen zu Best Practices für Usability-Studien Задание
06Designarbeit dokumentieren und auf Jobsuche gehen36 материалов

Designs übergeben

Willkommen bei Woche 6ВидеоMit Engineering-Teams zusammenarbeitenВидеоDesignspezifikationen in Adobe XD übergebenВидеоTesten Sie Ihr Wissen zur Übergabe von DesignsЗаданиеOnline zusammenarbeiten mit Adobe XDЧтение

Ihrem Portfolio ein Projekt hinzufügen

Ihrem Portfolio ein Projekt hinzufügenВидеоMehr über Portfolio-Fallstudien erfahrenЧтениеTesten Sie Ihr Wissen zu Portfolio-FallstudienЗадание Portfolio-Fallstudien mit Website-Designs teilenОбсуждениеDem Portfolio eine neue Fallstudie hinzufügenВзаимная проверка

Optional – Nach UX-Jobs suchen

Gängige Jobs für UX-Designschaffende verstehenВидеоMehr über Jobs im Bereich User Experience erfahrenЧтениеArten von Unternehmen kennenlernen, bei denen UX-Designschaffende arbeitenВидеоSelbstreflexion: Ihre beruflichen Ziele und Interessen formulierenЗаданиеKenny – DurchhaltevermögenВидеоHerausfinden, wo Sie sich für Jobs im Bereich UX-Design bewerben könnenВидео

Optional – Einen Lebenslauf für die UX-Design-Branche erstellen

Lebensläufe für die UX-Design-Branche verstehen Видео Selbstreflexion: Überlegen Sie, welche Informationen Sie in Ihren Lebenslauf aufnehmen solltenЗаданиеElemente eines typischen Lebenslaufs für die UX-Design-BrancheЧтениеDane – Meine Tipps für Lebensläufe im Bereich UX-DesignВидеоTim – Tipps eines Personalvermittelnden für Lebensläufe im Bereich UX-DesignВидеоAktivität: Einen Lebenslauf für die UX-Design-Branche entwerfen Задание

Rückblick auf Woche 6

Zusammenfassung: Designarbeit dokumentieren und auf Jobsuche gehenВидеоGlossarЧтениеWochen-Challenge 6: Designarbeit dokumentieren und auf Jobsuche gehenЗадание

Kursrückblick

Herzlichen Glückwunsch zum Abschluss von Kurs 6: Responsives Webdesign in Adobe XDВидеоTeilen Sie Ihre Kurserfahrung ОбсуждениеDen nächsten Kurs startenЧтение
Ihre bevorzugte Technik zur Ideenentwicklung besprechenОбсуждение
Sitemaps erkundenВидео
Eine Sitemap für Ihre Website erstellenВидео
Erfahren Sie mehr über das Erstellen einer SitemapЧтение
Aktivitätsbeispiel: Variationen Ihrer Papier-Wireframes erstellenЧтение
Wireframes für zusätzliche Bildschirmgrößen in Adobe XD erstellenВидео
Optional – Wireframes für zusätzliche Bildschirmgrößen in Figma erstellenЧтение
Aktivität: Digitale Wireframes für zusätzliche Bildschirmgrößen erstellenЗадание
Aktivitätsbeispiel: Digitale Wireframes für zusätzliche Bildschirmgrößen erstellenЧтение
Jay -– Design mit Adobe XDВидео
Voreingenommenheiten in einer Usability-Studie reduzierenВидео
Selbstreflexion: Ermitteln, wie Voreingenommenheiten in einer Studie reduziert werden könnenЗадание
Aktivität: Usability-Studie für einen Low-Fidelity-Prototyp durchführenЗадание
Aktivitätsbeispiel: Usability-Studie für einen Low-Fidelity-Prototyp durchführenЧтение
Forschungsergebnisse analysieren und zusammenführenВидео
Mehr über die Analyse und das Zusammenführen von Forschungsergebnissen erfahrenЧтение
Aktivität: Ergebnisse einer Usability-Studie analysieren und zusammenführenЗадание
Aktivitätsbeispiel: Ergebnisse einer Usability-Studie analysieren und zusammenführenЧтение
Erkenntnisse aus Ihrer Usability-Studie teilenОбсуждение
Aktivität: Modelle für eine Website erstellenЗадание
Aktivitätsbeispiel: Modelle für eine Website erstellenЧтение
Optionale Aktivität: Ein Sticker Sheet in Figma erstellenЗадание
Optionales Aktivitätsbeispiel: Ein Sticker Sheet in Figma erstellenЧтение
Beschäftigungsmöglichkeiten im Bereich UX-Design entdeckenЧтение
Aktivität: Mit einem Tracker nach UX-Jobs suchenЗадание
Aktivitätsbeispiel: Mit einem Tracker nach UX-Jobs suchenЧтение
Stellenbeschreibungen nach Schlüsselwörtern durchsuchenВидео
Aktivität: Schlüsselwörter und Anforderungen in Stellenbeschreibungen hervorhebenЗадание
Aktivitätsbeispiel: Schlüsselwörter und Anforderungen in Stellenbeschreibungen hervorhebenЧтение
Aktivitätsbeispiel: Einen Lebenslauf für die UX-Design-Branche entwerfen Чтение
Einen Lebenslauf ausgehend von Stellenbeschreibungen aktualisierenВидео