Lehrgangsinhalte

Webdesign mit HTML, CSS, Dreamweaver und Photoshop

HTML (ca. 5 Tage)
Grundgerüst
Tags zur Texterstellung (h1-h6, p, br)
Grundlagen CSS
Text-Format-Befehle
Gerüstbildende HTML-Tags (z. B. header, nav)
Grafiken einbinden und in Photoshop aufbereiten
Favicons
Verlinkungen
Interne-, Externe-, Tel.-, mailto-Links
Listen und Tabellen
Formulare in HTML
Formularelemente
Einbindung von Video- und Audioelementen
Einbindung von YouTube und Google-Maps
Unterschiede zwischen XHTML und HTML

Künstliche Intelligenz (KI) im Arbeitsprozess
Vorstellung von konkreten KI-Technologien im beruflichen Umfeld
Anwendungsmöglichkeiten und Praxis-Übungen

Grundlagen CSS (ca. 5 Tage)
Grundlagen Dreamweaver
Einbindungsmöglichkeiten von CSS-Angaben (intern, extern, inline-Style)
Textgestaltung mit CSS
CSS-Attribute zur Gestaltung von Bordern und Abständen (padding, margin)
Hintergrundgestaltung per CSS
Grundlagen float/clear
Spaltigkeit mit float
Farben mit CSS
Clearfix
Pseudoelemente (::before/::after)
Pseudoklassen (:nth-of-type)
Listen/display/Link-Pseudo-Klassen
Navigation mit ul/li (horizontal/vertikal)

CSS-Flexbox (ca. 5 Tage)
Spaltigkeit mit Flex
Ausrichtung von Elementen mit Flex
Spalten in Spalten mit Flex
Individuelle Schrift verwenden (@font-face)
Schriften mit Dreamweaver
Dreamweaver – CSS-Designer
CSS-Position
Positionen: relative/absolute/fixed
Möglichkeiten zur Formulargestaltung per CSS
CSS-Farbverläufe
CSS – transition/transform

Responsives Webdesign (ca. 6 Tage)
Breakpoints, Viewport, Media-Querys
Header und header-img responsiv gestalten
Picture-Elemente in HTML
Mobile Navigation mit hover
Hover in click auf Apple-Handys ermöglichen
Klick-Event per CSS (mittels checkbox)
Responsive Navigationen mit click
Animierter Burger-Button
CSS-Akordeon (mittels Radio-Buttons)
Drop-Down-Menü für Desktop und Mobile
Unterschiedliche Designs
CSS-Pseudoklasse :target
One-Page-Site – Seitenstruktur
Responsive Navigation mit :target-Steuerung
Vorteile für One-Page-Sites

JavaScript (ca. 9 Tage)
Anwendungen einbinden
Einstieg in JavaScript/jQuery
If-then-else
Variablen
Data Objekt
Arry Datentyp
ScrollTop
For-Schleife
Math-Objekt
Sticky-menu (js/css)
Menu mit dem Scrollen ein-/ausblenden
Verwendung von vh/vw und calc
Pflichtangaben Impressum/Datenschutz
Cookiehinweis
Front-awesome – Symbol Bibliothek
CSS-Filter
CSS-Variablen
Optim. der Site für die Suchmaschinen (SEO)
Object fit – Rahmenfüllende Grafiken
CSS-Animation
CSS-Grid
Grid-template-areas
Einführung in CSS-Framework: Bootstrap

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

UI/UX-Design mit Adobe XD

Prinzipien der nutzerzentrierten Gestaltung (ca. 1 Tag)

ISO 9241-210: Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme

Design Thinking

Überblick agiles Projektmanagement

Nutzungskontext beschreiben

Überblick Usability Research

Methoden

Web Analytics

Mapping-Methoden

Analyse Nutzungskontext (ca. 3 Tage)

Kontextdokumentation

Nutzungsanforderungen beschreiben (Use Case)

Richtlinien und Normen

Usability-Definition und Zusammensetzung des Nutzungskontextes nach ISO 9241-11

Konzeption eines Fragebogens

Spezifizierung des Nutzungskontextes

Human/User Centered Design mit Mental Models

Zielgruppen, Nutzertypen, Personas

Personas erstellen

Arbeitshypothese formulieren

Customer Journey und Empathy Map

Agiles Anforderungsmanagement

User Stories

Card Sorting (ca. 1 Tag)

Sortieren in Teams

Auswertung im Team

Feedbackrunde

Künstliche Intelligenz (KI) im Arbeitsprozess
Vorstellung von konkreten KI-Technologien im beruflichen Umfeld
Anwendungsmöglichkeiten und Praxis-Übungen

Entwurfstechniken (ca. 1 Tag)

Adobe XD

Einführung

Flow Chart

Wireframe

Prototyping

Komponenten

UI KITs

User Interface Design (ca. 3 Tage)

Visuelle Wahrnehmung, Gesetzmäßigkeiten

10 Prinzipien des User Interface Designs nach Jakob Nielsen

Brandfilter

Moodboard

Styleguide und Designsysteme

Navigationskonzepte

Kognition

Schrift und Typografie im UI

Rastersysteme, responsives Design

Formulare

Farben im UI

Icons

Prototyping (ca. 3 Tage)

Evaluierung/Testing (ca. 3 Tage)

Usability Testmethoden

Labortests

Thinking Aloud

Online/Crowd Tests

Usability Review

Test Summery

Projektarbeit (ca. 5 Tage)

Zur Vertiefung der gelernten Inhalte

Präsentation der Projektergebnisse

Videobearbeitung und Postproduktion mit Adobe Premiere Pro, After Effects

Adobe Premiere CC (ca. 7 Tage)
Projektausrichtung und Formatdefinition Programmoberfläche
Text- und Objektvorlagen
Projekt-, Schnitt- und Monitorfenster
Montage von Clips im Schnittfenster
Überblendungen und Effekte
Video-Retusche und -Filter
Erstellen von Titelsequenzen
Importieren von Bildern, Audiodateien und Verzeichnissen
Video-Filter
Kombination mit anderen Adobe-Programmen
Sounderstellung und -bearbeitung
Arbeiten mit Blenden
Exportfunktionen
Motion-Tracking
Import- und Exportfunktionen
Praktische Tipps und Tricks

Künstliche Intelligenz (KI) im Arbeitsprozess
Vorstellung von konkreten KI-Technologien im beruflichen Umfeld
Anwendungsmöglichkeiten und Praxis-Übungen

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

Adobe After Effects CC (ca. 7 Tage)
Begriffe und Standards
Formatdefinitionen
Projektplanung und -organisation
Importieren und Verwalten von Rohdaten
Bewegungssteuerung
Arbeiten mit verschiedenen Ebenen
Kompositionen und Zeitleiste
Transfermodi, Schnittfunktionen
Erstellen von einfachen 3D-Animationen
Erstellen von visuellen Effekten
Arbeiten mit Keyframes
Rendering und Render-Einstellungen
Arbeiten mit Masken und Textwerkzeugen
Audiofunktionen und -bearbeitung
Zeitverzerrung
Vektor-Zeichenwerkzeuge und Retusche
Animierte Videoclips
Licht und Kamera, Farbkorrektur
Keying, Motion-Tracking
Import- und Exportfunktionen
Praktische Tipps und Tricks

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

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