Prüfung UI/UX Design für Webanwendungen

Übersicht

Online-Prüfung mit Zertifizierung zum Certified Web Designer (Zertifizierte/r Webdesigner/in)

In dieser Online-Prüfung können Sie zeigen, dass Sie fit in der professionellen Gestaltung von Webseiten mit Hilfe von HTML5, CSS und Bootstrap sind. Bei Bestehen der Prüfung stellen wir Ihnen das international gültige Zertifikat Certified Web Designer aus. In jedem Fall erhalten Sie als Nachweis für Ihre Prüfung auch ein Prüfungszeugnis.

Die Prüfung basiert auf dem offiziellen Ausbildungs- und Trainings-Curriculum von Webmasters Europe e.V.

Hinweise: Die nachfolgenden Angaben zur Prüfung beziehen sich ausschließlich auf die aktuellen Versionen der Prüfung. Ältere Versionen der Prüfung, die bei der Buchung über den Link Zu den alten Prüfungsversionen aufgerufen werden können, haben abweichende Rahmendaten (Dauer, Bestehensgrenze usw.). Erfragen Sie diese ggf. bitte bei Ihrem Prüfungscenter. Die Demo-Prüfung bezieht sich grundsätzlich auf die jeweils aktuellste Version aller Kursinhalte. Reale Prüfungen werden dagegen exakt auf die Version der Lerninhalte zugeschnitten, die im Kurs verwendet wurden. Reale Prüfungen unterscheiden sich im Ablauf von den Demo-Prüfungen: Sie laufen in einem eigenen Prüfungsclient, den Sie zuvor installieren müssen; einzelne Fragen können nach ihrer Beantwortung nicht mehr geändert werden.

Anzahl der Fragen	40
Maximale Dauer	1 Stunde 10 Minuten
Bestehensgrenze	57%
Gültigkeitsdauer	5 Jahre

Demo-Prüfung

Die kostenlose Demo-Prüfung gibt Ihnen einen Eindruck von der Prüfung (Art der Fragestellung und Schwierigkeitsgrad). Sie ist jedoch nicht als Prüfungsvorbereitung geeignet, da sie nur wenige Beispielfragen enthält.

Demo-Prüfung starten

Kursangebote

Ein breites Kursangebot zur Weiterbildung und Prüfungsvorbereitung bieten unsere Autorisierten Trainingscenter an.

Themenbereiche und Lernziele

In der Prüfung werden folgende Themenbereiche bzw. Lernziele abgedeckt:

HTML5

Den Begriff Hypertext definieren und das Prinzip von Auszeichnungssprachen im Allgemeinen und von HTML im Besonderen erläutern.
Die Aufgaben der HTML-Strukturierung von anderen Techniken wie CSS oder JavaScript abgrenzen.
Die Entwicklung der Hypertext Markup Language und ihrer Standards grob skizzieren und darauf aufbauend Konsequenzen für die praktische Arbeit in Webdesign und -entwicklung ableiten.
Unterschiede und Besonderheiten dieser Standards benennen, um z. B. Gründe für die unterschiedliche Darstellung von Webseiten in verschiedenen Web-Browsern anzugeben.
Die Aufgaben des World Wide Web Consortium (W3C) benennen.
Die gängigen Webbrowser, ihre Rendering Engines und deren Besonderheiten benennen.
Gängige Tools und Editoren zur HTML-Bearbeitung benennen und deren Features unterscheiden.
Das Grundgerüst einer HTML-Seite erstellen.
Verschiedene Zeichenkodierungen unterscheiden und die für den jeweiligen Zweck geeignete auswählen und korrekt anwenden.
Die in HTML reservierten Zeichen benennen und sie mit der korrekten Syntax maskieren.
Kommentare mit der korrekten Syntax in HTML-Seiten einfügen.
Die Verzeichnisstruktur einer Website auf dem Webserver nachbilden.
Block- und Inline-Elemente und deren Eigenschaften unterscheiden.
Texte in Absätze, Überschriften, Fett- und Kursivschnitte gliedern.
Die unterschiedlichen Listen-Typen von HTML aufzählen und erzeugen.
Die grundlegende Funktionsweise der Einbindung von Bildern in HTML erläutern.
Die für Websites geeigneten Bildformate aufzählen und deren Unterschiede erläutern.
Responsive Bildvarianten für unterschiedliche Ausgabegeräte in HTML-Seiten einbinden.
Bilder mit relativen und absoluten Pfadangaben referenzieren.
Hyperlinks mit relativen und absoluten Pfadangaben sowie korrekten targets definieren.
Links zu bestimmten Stellen einer Webseite (Anker) definieren.
Syntaktisch korrekte Tabellen in HTML erzeugen, ggf. mit korrekten Tabellenunterschriften.
Tabellenzellen korrekt verbinden.
Ein HTML-Formular konfigurieren.
Empfänger, Versand- und Kodierungsmethode von HTML-Formularen festlegen.
Einzelne Formularelemente erzeugen, das für den jeweiligen Zweck geeignete auswählen und korrekt beschriften.
Formularfelder mit Namen und IDs eindeutig identifizieren.
Formularfelder als Pflichtfelder kennzeichnen.
Formulare mit Hilfe von fieldsets gliedern.
Die Steuerung von Formularen mit der Tastatur ermöglichen.
Externe Dokumente mittels iFrames in HTML-Seiten einbinden.
Die von unterschiedlichen Browsern unterstützten Videoformate unterscheiden.
Die Begriffe Video-Containerformat und Video-Codec definieren.
Tools zur Konvertierung von Videos nennen.
Videos in Websites einbinden, sodass sie von jedem HTML5-fähigen Browser dargestellt werden können.
Videos mit unterschiedlichen Eigenschaften wie Steuerleiste, Autostart, Endlosschleife, Posterframe und Alternativinhalt versehen.
Aufbau und allgemeine Syntax von Meta-Tags benennen.
Die wichtigsten Meta-Tags für Suchmaschinen und Browser erzeugen.

CSS (Teil 1)

CSS-Regeln (Selektoren, Eigenschaften, Werte) syntaktisch korrekt anwenden.
Die Problematik von Vendor Specific Prefixes erläutern und diese bei Bedarf korrekt anwenden.
CSS-Vorgaben korrekt einbinden (auslagern in externe Dateien, im HTML-Head oder als Inline-Styles).
Das RGB-Farbmodell erläutern.
Das Prinzip und den Aufbau hexadezimaler Farbkodierung erklären.
Farben mit dezimalen RGB- und RGBA-Werten zuweisen.
Globale CSS-Vorgaben für HTML-Dokumente definieren und die Standard-Browser-Styles überschreiben.
Eigenschaften auf mehrere Elemente gleichzeitig anwenden.
Das Vererbungsprinzip erläutern.
Texte mit Schriftart, Schriftgröße, Textfarbe, Zeilenabstand und anderen Eigenschaften formatieren.
Die in CSS verfügbaren Maßeinheiten benennen und die jeweils geeignete auswählen.
Verschiedene Zustände für Hyperlinks und andere Elemente definieren (Pseudoklassen :hover, :active etc.).
Verschiedene Pseudo-Elemente (z. B. ::before und ::after) und Pseudoklassen (z. B. :checked, :first-child, :not( ), :target) aufzählen und diese sinnvoll sowie syntaktisch korrekt anwenden.
Hintergrundfarben für verschiedene Elemente definieren.
Hintergrundbilder einbinden und mit verschiedenen Eigenschaften wie Kachelmuster, Position und Größe versehen.
Die verschiedenen CSS-Farbverläufe unterscheiden und korrekt definieren.
Das CSS-Box-Modell erläutern.
Konturen, Konturstärken, Randstile und Konturfarben festlegen.
Innen- und Außenabstände (margin, padding) definieren.
Das float-Attribut erläutern und sinnvoll einsetzen.
Elementen exakte Werte für Breite und Höhe zuweisen.
Übersatz definieren.
Entscheiden, wann Klassen oder IDs notwendig sind, und diese in HTML und CSS syntaktisch korrekt verwenden.
Zwischen statischer, relativer, absoluter, fixierter und sticky Positionierung differenzieren und die für den jeweiligen Zweck geeignete Positionierungsmethode auswählen.
Die Anzeigeart display von Elementen zweckmäßig ändern.
Rollovers für Buttons und Links definieren.
Effekte wie Schatten und abgerundete Ecken erzeugen.
Das Konzept von Web Fonts erläutern und diese produktiv und browserübergreifend einsetzen.
Das Flexbox-Modell erläutern und sinnvoll für Layouts nutzen.
CSS-Grids erläutern und sinnvoll für Layouts nutzen.
Die in CSS verfügbaren Transformationen, Filter, Mischmodi und Masken benennen und diese mit der korrekten Syntax gezielt anwenden.
Animations-Keyframes definieren.
Einem Element Animationen mit den gewünschten Optionen zuweisen.
Timing Functions für Animationen sinnvoll und syntaktisch korrekt anwenden.
Das Responsive-Design-Paradigma erläutern.
Den Viewport von Mobilgeräten anpassen.
Sinnvolle Breakpoints für Media Queries wählen und setzen.
Mit Media Queries Layoutalternativen für unterschiedliche Geräte definieren.
Die Einsatzzwecke dynamischer Berechnungen mit calc( ) erläutern und entscheiden, wann diese gegenüber festen Wertzuweisungen zu bevorzugen sind.
Attributen calc-Werte syntaktisch korrekt zuweisen.
Die Vorteile von CSS-Variablen benennen und erläutern, wann diese sinnvoll sind.
CSS-Variablen korrekt definieren und CSS-Eigenschaften als Werte zuweisen.

CSS (Teil 2)

Das Flexbox-Modell erläutern und sinnvoll für Layouts nutzen.
CSS-Grids erläutern und sinnvoll für Layouts nutzen.
Die in CSS verfügbaren Transformationen, Filter, Mischmodi und Masken benennen und diese mit der korrekten Syntax gezielt anwenden.
Animations-Keyframes definieren.
Animationen einem Element mit den gewünschten Optionen zuweisen.
Timing Functions für Animationen sinnvoll und syntaktisch korrekt anwenden.
Das Responsive-Design-Paradigma erläutern.
Den Viewport von Mobilgeräten anpassen.
Sinnvolle Breakpoints für Media Queries wählen und setzen.
Mit Media Queries Layoutalternativen für unterschiedliche Geräte definieren.
Die Einsatzzwecke dynamischer Berechnungen mit calc() erläutern und entscheiden, wann diese gegenüber festen Wertzuweisungen zu bevorzugen sind.
Attributen calc-Werte syntaktisch korrekt zuweisen.
Die Vorteile von CSS-Variablen benennen und erläutern, wann diese sinnvoll sind.
CSS-Variablen korrekt definieren und CSS-Eigenschaften als Werte zuweisen.

UI/UX-Design: Website-Konzeption & Usability

Den Begriff User Experience definieren und von den Begriffen Usability und User Friendliness abgrenzen.
Die Geschichte des User Experience Design und die wichtigsten Meilensteine skizzieren.
Erläutern, warum ein strukturierter UX-Designprozess unverzichtbar ist, und etablierte Prozessmodelle benennen.
Den UX-Designprozess nach Bouniq-Mercier mit seinen fünf Phasen und zugehörigen Methoden beschreiben.
Methoden wie Personas, User Journey Maps, Card Sorting und Usability-Tests erläutern und im Prozess verorten.
Das Konzept des Leitmotivs erläutern und Beispiele nennen.
Ein Leitmotiv für ein Webprojekt entwickeln.
Die Begriffe Informationsarchitektur und Navigationsarchitektur erläutern und voneinander abgrenzen.
Verschiedene grundlegende Formen von Informationsarchitekturen (Baumstruktur, lineare Struktur, Netzstruktur) benennen und erläutern.
Die Informationsarchitektur für beliebige Websites und Web-Anwendungen planen und als Sitemap visualisieren.
Typische Prozesse innerhalb von Web-Anwendungen wie z. B. ein Registrierungs- oder Kaufprozess planen und diese mithilfe von User Flows, Task Flows, Swimlane-Diagrammen oder Service Blueprints visualisieren.
Gängige Möglichkeiten der Personalisierung aufzählen, erläutern und Beispiele nennen.
Die Elemente einer Navigationsarchitektur (Hauptnavigation, Subnavigation, Metanavigation, Footer-Navigation, alternative Zugänge, Formularelemente) benennen und erläutern.
Navigationsarchitekturen konzipieren und als Wireframe erstellen.
Gängige Navigationstypen für Desktop und Mobile (Hamburger-Menü, Dropdown, Mega-Menü, Bottom Tab Bar) unterscheiden und geeignete auswählen.
Das Prinzip des Responsive Design und den Mobile-First-Ansatz erläutern.
Wireframes, Mockups und Prototypen unterscheiden und deren jeweiligen Zweck im Designprozess benennen.
Moderne Interface- und Layoutelemente (Hero Banner, Feature Cards, Sticky Header, CTA-Button, Accordion, Modal, Bento Grid u. a.) benennen und gezielt einsetzen.
Die Anforderungen an eine gute Startseite (Homepage) benennen.
Die Vorteile von Gestaltungsrastern erläutern und die Techniken zu deren Erstellung benennen.
Den Begriff Corporate Identity erläutern und die Bestandteile (Corporate Behaviour, Corporate Communication, Corporate Design) benennen.
Erklären, wie sich Corporate Design in digitale Produkte übersetzen lässt.
Die Begriffe Design-System, UI-Kit, Design Tokens und Atomic Design zu definieren und voneinander abzugrenzen.
Die Grundlagen der Farbpsychologie benennen.
Farbmodelle (RGB, CMYK) und den klassischen Farbkreis (Primär-, Sekundär-, Tertiärfarben) erläutern.
Verschiedene Farbschemata (monochrom, analog, komplementär, teilkomplementär, triadisch, tetradisch) unterscheiden und geeignete auswählen.
Gestaltungselemente (Linien, Formen, Licht und Schatten, Perspektive, Proportion, Gleichgewicht, Kontrast, Texturen) benennen und deren Wirkung erläutern.
Wahrnehmungspsychologische Gestaltgesetze und -prinzipien nennen und erläutern.
Designkonzepte und -trends (Skeuomorphismus, Flat Design, Neumorphismus, Glassmorphismus) unterscheiden und deren Merkmale beschreiben.
Die Besonderheiten der Typographie für Websites aufzählen.
Die wichtigsten Schriftklassen (Serifenschriften, serifenlose Schriften, Festbreitenschriften) unterscheiden und zwischen ihnen wählen.
Gängige typografische Begriffe (Schriftfamilie, Schriftschnitt, Kerning, Laufweite, Versalien, Gemeine, Kapitälchen) erläutern.
Die Besonderheiten des Schreibens für das Web benennen und das F-Pattern erläutern.
Ein Tonalitätskonzept erstellen.
Die verschiedenen Content-Elemente einer Webanwendung (Text, Bilder, Videos, KI-generierte Inhalte, User Generated Content) planen.
Gängige Quellen für Text-, Bild- und Videomaterial (Bildagenturen, KI-generierte Inhalte, Content Broker) benennen.
Geeignete Bilder für Websites auswählen und gezielt platzieren.
Die Kriterien der Usability (Effektivität, Effizienz, Zufriedenheit, Erlernbarkeit, Erinnerbarkeit, Fehlertoleranz) benennen.
Die häufigsten Usability-Probleme im Web (Dark Patterns, Orientierungsprobleme, Bannerblindheit, mangelhafte mobile Nutzbarkeit, Performance-Probleme) benennen.
Nielsens 10 Usability-Heuristiken und Steve Krugs Usability-Prinzipien erläutern und anwenden.
Verschiedene Usability-Evaluationsmethoden (moderierte und unmoderierte Tests, heuristische Evaluation, A/B-Tests, Eyetracking) benennen und geeignete auswählen.
Den Begriff Barrierefreiheit definieren und die verschiedenen Arten von Barrieren im Web (sensorische, motorische, kognitive, technische, situative) erläutern.
Die vier POUR-Prinzipien der WCAG (wahrnehmbar, bedienbar, verständlich, robust) benennen und erläutern.
Beschreiben, worauf konkret bei der Realisierung barrierefreier Websites und Webanwendungen geachtet werden muss (semantisches HTML, Fokus, Skip-Links, Kontraste, Alt-Texte, Formulare).
Den Zweck und die grundlegende Verwendung von ARIA-Attributen (Rollen, Zustände, Eigenschaften) erläutern.
Barrierefreiheit mit geeigneten Tools (Lighthouse, WAVE) und manuellen Methoden testen.

SCSS

Erklären, was CSS-Preprocessors sind und wie sie eingesetzt werden.
Die Vorteile von CSS-Preprocessors und insbesondere Sass gegenüber reinem CSS benennen.
Einen geeigneten SCSS-Compiler auswählen und in einen bestehenden Workflow integrieren.
Einen SCSS-Compiler konfigurieren.
Sass-Variablen korrekt definieren und zuweisen.
Sass-Kalkulationen mit Variablen effizient einsetzen und korrekt durchführen.
Sass-Color-Functions verwenden.
Erkennen, wann Sass-Variablen interpoliert werden müssen.
Sass-Variablen syntaktisch korrekt interpolieren.
Sass-Loops nutzbringend einsetzen.
Nested Rules in Sass sinnvoll und syntaktisch korrekt einsetzen.
Mixins in Sass sinnvoll und syntaktisch korrekt einsetzen.
Erkennen, wann parametrische Mixins sinnvoll sind, und diese ggf. verwenden.
Default-Werte für Mixins verwenden, wenn diese sinnvoll erscheinen.
Sass-Regeln in sinnvolle Partials aufteilen und korrekt importieren.
Eine geeignete Verzeichnisstruktur für Sass-Partials anlegen.

Bootstrap

Das Prinzip sowie die Vor- und Nachteile von Frontend-Frameworks erklären.
Das Bootstrap-SCSS und -JS korrekt und sinnvoll in Webprojekte einbinden.
Die Funktionsweise des Bootstrap-Klassensystems erläutern.
Erklären, wann und wo Bootstrap-Klassen sinnvoll sind, oder wo besser eigene CSS-Regeln verwendet werden sollten.
Weblayouts mit dem von Bootstrap vorgegebenen Klassensystem erstellen.
Das responsive Grid-System von Bootstrap erklären und gewinnbringend nutzen.
Texte mit Bootstrap formatieren.
Mit Bootstrap responsive Navigationen erstellen.
Zusätzlich gewünschte/benötigte Bootstrap-Components und -Utilities in der Dokumentation auf getbootstrap.com/docs nachschlagen und sinnvoll und korrekt verwenden.
Bootstrap-Defaults mit Hilfe von SCSS sinnvoll und syntaktisch korrekt anpassen durch Überschreiben der Variablen und Mixins.
Bootstrap-Layouts durch eigenes (S)CSS ergänzen und erweitern.

148,75 €