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 deren Standards grob skizzieren und auf dieser Grundlage Konsequenzen für die praktische Arbeit als Webdesigner/in und -entwickler/in ziehen.
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

Das Konzept des Leitmotivs erläutern und Beispiele nennen.
Ein Leitmotiv für ein Webprojekt entwickeln.
Den Begriff Informationsarchitektur erläutern und von dem Begriff der Navigationsarchitektur abgrenzen.
Verschiedene grundlegende Formen von Informationsarchitekturen benennen und erläutern.
Die Informationsarchitektur für beliebige Websites und Web-Anwendungen planen und visualisieren.
Die verschiedenen Content-Elemente einer Webanwendung (Text, Bilder, Videos, Multimedia, User Generated Content) planen und dazu jeweils geeignete Techniken der Visualisierung einsetzen.
Gängige Quellen für Text-, Bild- und Videomaterial benennen.
Den Begriff User Generated Content erläutern und ein Konzept für die Gewinnung desselben erstellen.
Typische Prozesse innerhalb von Web-Anwendungen wie z. B. ein Registrierungs- oder Kaufprozess planen und diese visualisieren.
Gängige Möglichkeiten der Personalisierung aufzählen, erläutern und Beispiele nennen.
Den Begriff Interface Design definieren.
Die Aufgaben und Ziele von Interfaces im allgemeinen und eines Web-Interfaces im besonderen aufzählen.
Die Entwicklung digitaler Interfaces grob skizzieren.
Den Begriff Navigationsarchitektur erläutern.
Navigationsarchitekturen konzipieren und erstellen.
Die Vorteile von Gestaltungsrastern erläutern und die Techniken zu deren Erstellung benennen.
Gestaltgesetze und -prinzipien nennen und erläutern.
Die Grundlagen der Farbpsychologie benennen.
Farbtheorien und Farbmodelle unterscheiden.
Verschiedene Farbschemata unterscheiden und die geeigneten auswählen.
Die Besonderheiten der Typographie für Websites aufzählen.
Die wichtigsten Schriftarten unterscheiden und zwischen ihnen wählen.
Gängige typographische Begriffe erläutern.
Die Besonderheiten des Schreibens für das Web benennen.
Ein Tonalitätskonzept erstellen.
Geeignete Bilder für Websites auswählen und gezielt platzieren.
Technische Faktoren wie die Bildschirmauflösung in die Planung und Konzeption einbeziehen.
Den Begriff Usability definieren.
Die Bedeutung und die Konsequenzen der Usability von Websites benennen.
Die häufigsten Usability-Probleme im Web benennen.
Einfache Usability-Tests planen, durchführen und auswerten.
Den Begriff Barrierefreiheit definieren und erläutern.
Beschreiben, auf was konkret bei der Realisierung barrierefreier Websites und Webanwendungen geachtet werden muss.

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 €

Become a Web Professional – Get Certified!