Kursbeschreibung

Die professionelle Konzeption und Umsetzung ansprechender Webseiten sind die Kernthemen dieses Kurses. Dieser vermittelt daher die Anwendung von HTML, CSS (Cascading Stylesheets), Visual Studio Code und JavaScript, außerdem das Thema Grafikdesign für eine ansprechende Text- und Bildgestaltung sowie die Konzenption und Umsetzung von User Interface und die Bedeutung von User Experience. Zudem erfährst du, wie Künstliche Intelligenz (KI) in deinem Beruf eingesetzt wird.

Webdesign (HTML/CSS/Visual Studio Code)

HTML und CSS (ca. 6 Tage)
HTML-Einführung
Grundgerüst
Tags zur Texterstellung (h1-h6, p, br, span)
Text-Format-Befehle
Grafiken einbinden
Verlinkungen (Interne‐, Externe‐, Tel.‐, mailto‐ Link)
Favicons
Listen und Tabellen
Richtiger Syntax Aufbau
Überprüfung durch W3C Validierungstool
CSS-Einführung
Einbindungsmöglichkeiten von CSS-Angaben (intern, extern, inline-Style)
Basisbefehle (Textgestaltung, Schriftfarbe, Hintergrundfarbe)
HTML-Container
Nutzung und Styling von Containern
Integration von YouTube und Google-Maps
Video und Audioplayer
Object-fit

VS Code (ca. 1 Tag)
Einführung in VS Code
Zusätzliche Extensions für VS Code. (z. B. Live Server, Emmet Commands, Copilot (KI))
KI-Nutzung in Kombination mit VS Code

Layout-Techniken (ca. 4 Tage)
Klassen, ID`s, Selektoren
Einführung Box-Modell
Padding, margin, border, border-radius und ihre Shorthands
Flex-Box Einführung
Layouts mit Flex-Box
Ausrichtung mit Flexbox
Einführung in Grid System
Layouts mit Grid
Ausrichtung mit Grid System
Bilder mit Text umfließen lassen mit float und clear
Allgemeine display Eigenschaften von Tags
Hintergrundbilder

Status und Wertigkeiten (ca. 1 Tag)
Einführung Pseudoklassen (hover, active, focus, nth-child, first-child, last-child)
Pseudoelemente (::before, ::after, content)
Spezifität (Wertigkeit von Codes)

Positionierung (ca. 2 Tage)
Einführung in Positions
Static, absolute, fixed, sticky, relative
Left, right, top, bottom, z-index
Dropdown Menü’s
:target
:target in Kombination mit Navigationsmenüs und Modalen

Formulare (ca. 2 Tage)
Einführung in Formulare
Fieldset, legend
Inputs, textareas, labels, values, name, selects
Autocomplete
Formulargestaltung mit CSS
Integration von php-script in action mit KI

Effekte und Schriften mit CSS (ca. 1 Tag)
CSS-Übergangseffekte
Transition, filter, transform
Farbverläufe, box-shadow, text-shadow
Schriftintegration mit @font-face

Responsives Webdesign (ca. 2 Tage)
Einführung in responsives Design
Media-Querys, breakpoints
Landscape, portait Modus
Responsive Bilder mit picture und srcsets
Bildbearbeitung, Komprimierung von Bildern
Bilder mit KI generieren

Suchmaschinenoptimierung (ca. 1 Tag)
Einführung in die SEO
On-Page Optimierung und Nutzung von KI-generierten Texten
Performance Optimierung zur Verbesserung der SEO und Vorstellung passender Tools

CSS-Techniken und Interaktion (ca. 2 Tage)
CSS-Variablen
Dark-Mode
Calculation mit CSS
Einführung in CSS-Animationen
Duration, delay, direction, timing-function, iteration-count, fill-mode
Animierter Burger-Button

One-Pager und Multilingualität (ca. 2 Tage)
Einführung One-Pager
Smooth-scroll
Integration fontawesome Bibliothek
Umgang mit SVG-Grafiken
Layer Integration und CSS-Anpassung
Multilinguale Webseiten

Erweiterungen und Frameworks (ca. 1 Tag)
Einführung in Bootstrap
Nutzung von Bootstrap Komponenten
Responsive Design mit Bootstrap

JavaScript (ca. 3 Tage)
Einführung in JavaScript
JavaScript/jQuery Methoden
jQuery Lightbox erstellen
Variablen
If-else Anweisungen
Scroll, window, resize
Arrays
For-Schleife
Math-Object

Gesetzliche Vorgaben und Projektmanagement (ca. 2 Tage)
Internetrecht
Urheberrechte in Bezug auf AI/KI
Barrierefreiheit
Projektmanagement

Projektarbeit (ca. 10 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse



Grafikdesign mit Adobe CC

Einführung in die Adobe Creative Cloud (ca. 2 Tage)
Desktop Programme im Überblick: Photoshop, Illustrator, InDesign
Adobe Mobile Apps für Grafikdesign
Creative Cloud Bibliotheken
Farbtrends und Inspirationen (z. B. Adobe Stock, Adobe Color)
Adobe Bridge, Adobe Exchange

Grundlagen (ca. 1 Tag)
Kunst vs. Design
Designdisziplinen, Designprinzipien
Designprozess
Gestaltgesetze der Wahrnehmung
Blickverlauf und Anordnung
Figur-Grund-Beziehung
Optische Täuschungen und Phänomene
Interferenzeffekte, Hicks Gesetz
Perspektive und räumliche Wirkung

Form und Farbe (ca. 2 Tage)
Punkt, Linie und Fläche
Anordnung, Gewichtung, Format, Proportionen und Seitenverhältnisse
Farbenlehre, Farbsysteme, Farbgestaltung (Harmonien, Kontraste)
Eigenschaften, Wirkung und Bedeutung
Aufmerksamkeit durch Form und Farbe
Erstellung und Bearbeitung von Formen (Zeichen, Piktogramme, Icons)

Künstliche Intelligenz (KI) im Arbeitsprozess
Vorstellung von konkreten KI‐Technologien
sowie Anwendungsmöglichkeiten im beruflichen Umfeld

Bilder (ca. 3 Tage)
Bildkompetenz und Bildqualität
Pixel- und Vektorgrafik
Recherche, Idee, Moodboard, Eyecatcher und Storytelling
Der Mensch als Motiv
Bilder in der Unternehmenskommunikation
Bildgestaltung und Bildbearbeitung

Typografie und Layout (ca. 5 Tage)
Anatomie der Buchstaben
Schriftgeschichte, Schriftklassifikation, Schriftmischung
Lesetypografie, Detailtypografie
Workflow: Layout, Grundregeln guter Layouts
Satzspiegel und Gestaltungsraster
Dramaturgie, Blickführung und Fokus
Layoutideen umsetzen, präsentieren
Dateiausgabe im Überblick (Print, Digital)

Corporate Design (ca. 2 Tage)
Corporate Design vs. Corporate Identity         
Basisbausteine
Logodesign, Signets und Marken
Umsetzung – Wort-Bild-Marke
Das Corporate – Design-Manual (Styleguide)

Projektarbeit (ca. 5 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse



JavaScript

JavaScript Grundlagen (ca. 7 Tage)
Einführung in JavaScript, Geschichte, Einsatzbereiche
ECMA-Script-Versionen
Einbinden von JavaScript in HTML
IDE: Installation und Einführung in WebStorm
Sprachelemente: Variablen, Konstanten, Typisierung
Primitive Datentypen: Number, String, Boolean
Collection-Datentypen: Arrays, Objekte
Copy by Reference vs. Copy by Value
Arithmetische und logische Operatoren
Kontrollstrukturen: Bedingungen, Schleifen, Funktionen
Scope, Global Scope, Blockscope
Fehlerbehandlung
Lokales Speichern: Cookies, Webstorage
JSON
ES6-Import/Export
Versionskontrolle mit Git, Einführung in GitHub

DOM-Manipulation mit JavaScript (ca. 5 Tage)
HTML selektieren
Inhalt, Attribute und Styling
Events, Event-Objekt, Bubbling
Intersection-Observer und Mutation-Observer
DOM-Elemente anlegen, kopieren, verschieben, löschen

Frameworks/Libraries (ca. 1 Tag)
Eigene Bibliothek erstellen

AI (ca. 1 Tag)
Vorstellung von konkreten KI-Technologien im beruflichen Umfeld
Künstliche Intelligenz (KI) im Arbeitsprozess
Einbindung von KI in der IDE
Nutzung von KI zur Codevervollständigung, Refactoring und Lernunterstützung

Projektarbeit (ca. 6 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse



UI/UX-Design

Allgemeine Einführung (ca. 1 Tag)
UX, Usability, UI, Mental Model Guidline, Human factors Guideline 
Prinzipien der nutzerzentrierten Gestaltung
ISO 9241-210/HCD
Barrierefreiheit (Accessibility): Grundbegriffe, rechtliche Vorgaben (BITV, EU-Richtlinien), Bedeutung für UX-Design
Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme
Arten von KI-Tools im UI-/UX-Kontext (Text, Bild, Analyse)

HCD: Analyse – Nutzungskontext (ca. 2 Tage)
Personae und Empathy Map
Customer Journey
Überblick zu Web Analytics/Fragebogen

HCD: Spezifizieren der Nutzungsanforderung (ca. 1 Tag)
Szenarien, User Stories
Aufgabenmodell, Task Flows
Kontextinterviews und Beobachtung
Tagebuchstudien

HCD: Erzeugen von Gestaltungslösungen, um Nutzungsanforderung zu erfüllen (ca. 1 Tag)
Richtlinien und Normen: 7 Dialogprinzipien der ISO 9241-110
10 Prinzipien des User Interface Designs nach Jakob Nielsen
Visuelle Wahrnehmung, Gesetzmäßigkeiten

HCD-Gestaltungslösungen: Taxonomie, Informationsarchitektur und Navigationskonzepte (ca. 3 Tage)
Flow Chart
User Flow
Informationsarchitektur
Micro Informationsarchitektur
Conversion-Strategie
Navigationskonzepte und Sitemap
Card Sorting: Planung, Vorbereitung, Durchführung und Auswertung
Mobile Navigation Patterns (Bootom Navigation, Hamburger Menus, Tabs)

Überblick agiles Projektmanagement (ca. 1 Tag)
Wasserfall-Modell vs. agile Methoden
Einblick in agiles Management nach der Scrum-Methode
Epic, User Story und Task
Design Sprint Methode

HCD-Gestaltungslösungen: User Interface Design (ca. 2 Tage)
Styleguide, UI KITs, Pattern Library und Design System
UI Komponenten/Elemente und Formulare
Farben, Schrift und Typografie im UI, Icons
Barrierfreiheit: Farbkontraste und gut lesbare Schrift, Bedienelemente (Größe, Abstände, Fokus)
Automatisierte Prüfung von Kontrasten, Lesbarkeit und Alternativtexten
Kurzer Überblick über die semantische Struktur (HTML/ARIA)
Atomic Design
Mobile First Design

HCD-Gestaltungslösungen: Entwurfstechniken mit Figma (ca. 3 Tage)
Struktur und Grundlagen: Pages und Frames, Layout Grids, Constraints
Komponenten und Varianten (Buttons, Bibliotheken, Design-Systeme)
Responsives Design (Frames, Auto Layout)
Scribbles, Wireframes, Mockups
Prototyping: Interaktionen, Transitions, Overlays, Prototyp-Sharing
Nutzung von KI-Funktionen in Figma und ergänzenden Tools zur schnellen Erstellung und Variation von Entwürfen

Usability Testing und Evaluation (ca. 2 Tage)
Überblick über Usability-Testmethoden
Thinking Aloud: Planung, Vorbereitung, Durchführung und Auswertung
Fragebögen  (UEQ, AttrakDiff, VisAWI)
A/B-Testing
Barrierefreiheit: Tests mit Tastatur und Screenreader
Einsatz von Hilfsmitteln und Tools

Projektarbeit (ca. 4 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse



Änderungen möglich. Die Lehrgangsinhalte werden regelmäßig aktualisiert.