Weiterbildung Webdesigner:in

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 sowie Anwendungsmöglichkeiten im beruflichen Umfeld

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 von One-Page-Sites

JavaScript (ca. 9 Tage)

Anwendungen einbinden

Einstieg in JavaScript/jQuery

If-then-else

Variablen

Data Objekt

Array Datentyp

ScrollTop

For-Schleife

Math-Objekt

Sticky-menu (js/css)

Menu mit Scrollen ein-/ausblenden

Verwendung von vh/vw und calc

Pflichtangaben Impressum/Datenschutz

Cookiehinweis

Font-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

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 und Gewichtung

Format, Proportionen und Seitenverhältnisse

Farbenlehre und Farbsysteme

Eigenschaften, Wirkung und Bedeutung

Farbgestaltung (Harmonien, Kontraste)

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 Grundlagen (ca. 7 Tage)

Einführung

Einbinden in HTML-Seiten

Sprachelemente

Variablen, Konstanten und Datentypen

Operatoren

Kontrollstrukturen

Bedingte Anweisungen

Schleifen

Funktionen

Arrays

Objekte

Cookies

Webstorage

Fehlerbehandlungen

Künstliche Intelligenz (KI) im Arbeitsprozess

Vorstellung von konkreten KI‐Technologien sowie Anwendungsmöglichkeiten im beruflichen Umfeld

DOM-Manipulation mit JavaScript (ca. 3 Tage)

Grundlagen

HTML-Selektieren

Inhalt und Attribute

Styling

Events

DOM-Elemente anlegen

DOM-Elemente kopieren, verschieben, löschen

AJAX (ca. 3 Tage)

Einführung

Funktionsweise

Voraussetzungen

http-Anfragen

XMLHttpRequest-Objekt

Synchrone und asynchrone Requests

Web Services/Übertragungen:

– JSON

– XML/XML-Response

Frameworks/Libraries (ca. 2 Tage)

Eigene Bibliothek erstellen

jQuery

Vor- und Nachteile

Projektarbeit (ca. 5 Tage)

Zur Vertiefung der gelernten Inhalte

Präsentation der Projektergebnisse

Allgemeine Einführung in die Thematik (ca. 1 Tag)

UX, Usability, UI, Mental model, Human factors

Prinzipien der nutzerzentrierten Gestaltung

ISO 9241-210/HCD

Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme

HCD: Analyse – Verstehen und Festlegen des Nutzungskontextes (ca. 3 Tage)

Personae

Empathy Map

Customer Journey

Web Analytics

Fokusgruppen

Fragebogen

HCD: Spezifizieren der Nutzungsanforderung (ca. 1 Tag)

Szenariomodell

Aufgabenmodell

Kontextinterviews

Tagebuchstudien

Teilnehmende Beobachtung

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 & Navigationskonzepte (ca. 3 Tage)

Flow Chart

User Flow

Informationsarchitektur

Micro Informationsarchitektur

Conversion-Strategie

Navigationskonzepte

Sitemap

Card Sorting: Planung, Vorbereitung, Durchführung und Auswertung

Überblick agiles Projektmanagement (ca. 1 Tag)

Wasserfall-Modell vs. Agile

Einblick in agiles Management nach der Scrum-Methode

Epic, User Story und Task

Design Sprint Methode

HCD-Gestaltungslösungen: User Interface Design (ca. 1 Tag)

Styleguide, UI KITs, Pattern Library & Design System

UI Komponenten/Elemente & Formular

Farben, Schrift und Typografie im UI, Icons

Atomic Design

Mobile first Design

HCD-Gestaltungslösungen: Entwurfstechniken mit Figma & XD Adobe (ca. 2 Tage)

Figma vs. Adobe XD

Figma

Die Werkzeugpalette von Figma

Workflow

UI-Komponenten

Responsive Design

Scribbles, Wireframe

Interaktive Prototypen

Adobe XD

Die Werkzeugpalette von XD

Workflow

UI-Komponenten

Responsive Design

Scribbles, Wireframe

Interaktive Prototypen

HCD-Evaluierung des Designs gegen die Nutzungsanforderungen – Usability testing (ca. 2 Tage)

Ein Überblick über Usability-Testmethoden Thinking Aloud: Planung, Vorbereitung, Durchführung und Auswertung

(UEQ) User Experience QuestionnaireAttrakDiff

VisAWI – Visual Aesthetics of Websites Inventory

A/B-Testing

Künstliche Intelligenz (KI) im Arbeitsprozess

Vorstellung von konkreten KI‐Technologien sowie Anwendungsmöglichkeiten im beruflichen Umfeld

Projektarbeit (ca. 5 Tage)

Zur Vertiefung der gelernten Inhalte

Präsentation der Projektergebnisse

Ein umfassendes Verständnis für Webdesign mit HTML, CSS und Dreamweaver wird vermittelt. Dabei werden grundlegende HTML-Strukturen, Tags zur Texterstellung sowie gerüstbildende HTML-Elemente behandelt. Die Einbindung und Aufbereitung von Grafiken in Photoshop, das Erstellen von Favicons sowie verschiedene Arten von Verlinkungen werden thematisiert. Zudem erfolgt eine Einführung in Formulare, Video- und Audioelemente sowie externe Dienste wie YouTube und Google Maps.

Die Grundlagen von CSS, einschließlich Textgestaltung, Border- und Abstandseigenschaften, Hintergrundgestaltung und Spaltigkeit, werden erarbeitet. CSS-Flexbox wird für die flexible Anordnung von Elementen genutzt, während fortgeschrittene Layout-Techniken wie Grid und Bootstrap vermittelt werden. Ergänzend dazu erfolgt eine Einführung in Dreamweaver zur strukturierten Umsetzung von CSS-Angaben.

Das Konzept des responsiven Webdesigns wird durch Breakpoints, Media-Querys und flexible Navigationen vertieft. Dabei werden mobile Navigationslösungen, animierte Elemente sowie interaktive UI-Elemente erarbeitet. Die Unterschiede zwischen verschiedenen Navigationsstrategien sowie die Vorteile von One-Page-Sites werden ebenfalls behandelt.

JavaScript-Grundlagen, einschließlich Variablen, Arrays, Schleifen und DOM-Manipulation, werden vermittelt. Dynamische Funktionen wie interaktive Menüs, Scroll-Effekte und Cookie-Hinweise werden erarbeitet. Die Einbindung von AJAX für asynchrone Datenübertragung sowie der Einsatz von jQuery zur effizienteren Gestaltung interaktiver Webseiten wird behandelt.

Im Bereich Grafikdesign mit Adobe CC erfolgt eine Einführung in Photoshop, Illustrator und InDesign. Die Erstellung und Bearbeitung von Vektorgrafiken, Bildbearbeitungstechniken sowie die Nutzung von Farb- und Typografie-Tools stehen im Fokus. Grundlagen der Gestaltung, darunter Gestaltgesetze, Blickführung und Farblehre, werden erarbeitet, um ansprechende Designs für Print- und digitale Medien zu entwickeln.

Der Bereich UI/UX-Design behandelt nutzerzentrierte Gestaltungsmethoden, Usability-Tests sowie Navigations- und Informationsarchitekturen. Die Entwicklung interaktiver Prototypen mit Figma und Adobe XD wird vermittelt. Zudem erfolgt eine Einführung in agiles Projektmanagement mit der Scrum-Methode.

Die Anwendungsmöglichkeiten künstlicher Intelligenz (KI) im Design- und Entwicklungsprozess werden vorgestellt. Relevante KI-Technologien sowie deren Potenziale im Arbeitsalltag werden analysiert.

Praktische Projektarbeiten dienen der Vertiefung der erlernten Inhalte. Abschließend werden die Ergebnisse präsentiert und bewertet.

Dieser Kurs richtet sich an Webdesigner, Webprogrammierer, Grafiker, Mediengestalter, Fachkräfte aus künstlerischen Berufen sowie an alle, die an der Konzeption, Gestaltung und Umsetzung von Internet-Auftritten mitwirken möchten und sich die dafür erforderlichen Kenntnisse und Fähigkeiten aneignen wollen.

Als Webdesigner mit Schwerpunkt auf UI (User Interface) und UX (User Experience) gestaltest Du digitale Erlebnisse, die sowohl visuell ansprechend als auch funktional und intuitiv bedienbar sind. Dein Ziel ist es, nutzerfreundliche Oberflächen zu entwickeln, die den Bedürfnissen der Anwender entsprechen und eine hohe Usability bieten. Dazu analysierst Du das Nutzerverhalten mithilfe von Methoden wie User Research, Heatmaps und Web Analytics, um Pain Points zu identifizieren und die User Journey zu optimieren. Die Erstellung von Personas und Customer Journeys hilft Dir dabei, die Zielgruppe besser zu verstehen und die Informationsarchitektur entsprechend zu strukturieren.

Du arbeitest mit Wireframes und Prototyping-Tools wie Figma oder Adobe XD, um erste visuelle und interaktive Entwürfe zu entwickeln. Diese werden durch A/B-Testing, Usability-Tests oder Eyetracking-Analysen überprüft und iterativ verbessert. Dabei achtest Du auf eine intuitive Navigation, klare Call-to-Actions und eine ansprechende Content-Strategie, um eine positive User Experience zu gewährleisten.

Neben der strukturellen Planung ist auch die visuelle Gestaltung ein essenzieller Teil Deiner Arbeit. Du definierst ein stimmiges Farbkonzept, wählst passende Schriftarten aus und entwickelst Layouts, die konsistent und markenkonform sind. UI-Elemente wie Buttons, Icons und interaktive Komponenten werden unter Berücksichtigung von Design-Prinzipien und Barrierefreiheit erstellt. Häufig arbeitest Du mit Design-Systemen, um konsistente Gestaltungslösungen zu gewährleisten.

Die technische Umsetzung spielt ebenfalls eine große Rolle. Du kennst Dich mit HTML, CSS und JavaScript aus, um Deine Designs optimal für Webentwickler aufzubereiten. Moderne Frontend-Technologien wie CSS-Grid und Flexbox helfen Dir dabei, responsive Designs für verschiedene Endgeräte zu gestalten. Mobile First und Performance-Optimierung sind dabei zentrale Aspekte.

In enger Zusammenarbeit mit Entwicklern, Marketing-Teams und anderen Fachabteilungen stellst Du sicher, dass Deine Designlösungen nicht nur optisch überzeugen, sondern auch technisch effizient umgesetzt werden. Durch kontinuierliche Optimierung und Testing sorgst Du dafür, dass digitale Produkte benutzerfreundlich, zugänglich und conversionstark sind.

Ein Fernstudium in Webdesign mit Adobe CC und UI/UX bietet Dir wertvolle Fähigkeiten, um professionell digitale Erlebnisse zu gestalten und Dich auf dem Arbeitsmarkt erfolgreich zu positionieren. Du lernst, moderne und benutzerfreundliche Websites sowie intuitive User Interfaces zu entwickeln, die sowohl ästhetisch ansprechend als auch funktional sind. Mit fundierten Kenntnissen in HTML, CSS und JavaScript bist Du in der Lage, Deine Designs technisch umzusetzen oder mit Entwicklern effizient zusammenzuarbeiten.

Die Arbeit mit Adobe Creative Cloud, insbesondere Photoshop, Illustrator und Adobe XD, ermöglicht es Dir, professionelle Grafiken, Icons und Layouts für Webprojekte zu erstellen. Du entwickelst Designkonzepte, die Markenidentitäten stärken und für eine optimale User Experience sorgen. Dabei setzt Du Gestaltungselemente gezielt ein, um Usability, Conversion-Optimierung und Barrierefreiheit zu verbessern.

Im Bereich UI/UX-Design erwirbst Du praxisnahes Wissen über Nutzerverhalten, Interaktionsdesign und Usability-Testing. Du lernst, mithilfe von Prototyping-Tools wie Figma oder Adobe XD Wireframes und klickbare Mockups zu erstellen, Nutzeranalysen durchzuführen und optimierte Lösungen für verschiedene Endgeräte zu entwickeln. Techniken wie User Research, A/B-Testing und Web Analytics helfen Dir, Designs datenbasiert zu verbessern und gezielt auf die Bedürfnisse der Zielgruppe auszurichten.

Mit diesen umfassenden Kompetenzen eröffnen sich Dir zahlreiche berufliche Perspektiven in Agenturen, Unternehmen oder als Freelancer. Ob als Webdesigner, UI/UX-Designer oder Digital Creative – Dein Wissen über moderne Webtechnologien, nutzerzentrierte Gestaltung und professionelle Designsoftware macht Dich zu einer gefragten Fachkraft in der digitalen Branche.

Das Gehalt eines Webdesigners hängt von Erfahrung, Qualifikation, Spezialisierung und Branche ab. Einsteiger verdienen in Deutschland durchschnittlich zwischen 30.000 und 40.000 Euro brutto pro Jahr, während erfahrene Webdesigner mit mehreren Jahren Berufserfahrung zwischen 45.000 und 60.000 Euro verdienen. In leitenden Positionen oder mit umfangreichen UI/UX-Kenntnissen liegt das Gehalt bei über 70.000 Euro.

Freelancer haben ein breiteres Verdienstspektrum, da ihr Einkommen von Auftragslage, Stundensatz und Kundenstruktur abhängt. Übliche Stundensätze liegen zwischen 50 und 100 Euro, bei spezialisierten Experten auch darüber. Besonders gefragte Fähigkeiten wie UX/UI-Design, responsives Webdesign, barrierefreie Gestaltung und die Arbeit mit Adobe Creative Cloud steigern das Gehalt.

Zusätzlich beeinflussen Standort und Unternehmensgröße die Vergütung. In Städten wie Berlin, Hamburg oder München sind die Gehälter höher als in kleineren Orten. Große Unternehmen zahlen oft mehr als kleine Agenturen oder Start-ups.