Webseitenoptimierung mit UI/UX

Nach der Vermittlung von Basiswissen im Webdesign und in CMS führt der Kurs in die Konzeption von User Interfaces ein. Die User Experience spielt bei der Webseitenentwicklung eine zentrale Rolle für den Erfolg. Du erfährst, wie Künstliche Intelligenz im Beruf eingesetzt wird.

Basiswissen Webdesign und CMS

Grundlagen Webdesign HTML5 und CSS3 mit Adobe Dreamweaver und Notepad++ (ca. 12 Tage)

Einführung in das Thema
Einführung in Entwicklungsumgebungen (Notepad++ und Dreamweaver)
Bestandteile einer Internetseite
Suchmaschinenfreundliche Grundstruktur von HTML5
Code-Guideline und Namenskonventionen
Aufbau HTML-Tags und Attribute
Hyperlinks (relativer, absoluter Dateipfad, interne, externe Links)
Listen, Images, Tabellen, Formulare
Formatierung mit CSS3 (Cascading Style Sheets)
Feste und responsive (flexible) Webseiten

Künstliche Intelligenz (KI) im Arbeitsprozess

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

Planung und Strukturierung von Websites (ca. 2 Tage)

Konzeptablauf, Ressourcenplanung, Monetarisierung
Konzeption, Seiten- und Strukturaufbau einer Website/eines Webprojektes
Bildmaterial vorbereiten (Größen, Zuschnitt, weboptimiert speichern) 
Rechtliche Fragen (Impressum, Datenschutz, Haftungsausschluss)

Grundlagen CMS mit Wordpress (ca. 3 Tage)

Dashboard (Benutzeroberfläche) von WordPress
Benutzerverwaltung und Profil (passwortgeschützte Bereiche und Rechtemanagement)
Medienverwaltung
Kommentare
Seiten und Beiträge anlegen und bearbeiten
Visueller- und Text-Editor
Veröffentlichung
Designbereich: Menüs, Widgets, CSS-Editor, Theme-Beispiel
Downloads bereitstellen
Theoretisches zu Updates

Projektarbeit (ca. 3 Tage)

Zur Reflexion und Festigung der gelernten Inhalte
Präsentation der Projektergebnisse

UI/UX-Design

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

UX, Usability, UI, Mental Model Guidline, Human factors Guideline 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 Methode
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 & Formulare
Farben, Schrift und Typografie im UI, Icons
Atomic Design
Mobile first Design

HCD-Gestaltungslösungen: Entwurfstechniken mit Figma &  Adobe XD (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 Adobe 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
User Experience Questionnaire (UEQ)
AttrakDiff
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

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