UX Design mit Angular, HTML5 & CSS

User Experience und UI-Design sind fundamentale Bestandteile jeder Softwareentwicklung und ermöglichen es nicht nur, eine auf den Benutzer perfekt abgestimmte Lösung zu entwicklen, sondern u. a. auch, sich von Konkurrenzprodukten abzusetzen. Dieses Tutorial richtet sich vor allem an Entwickler, die im Frontend-Bereich unterwegs sind oder sein wollen und trotzdem um Themen wie UX, CSS und Design bisher lieber einen Bogen gemacht haben. Dabei bietet Ihnen Timo Korinth einen Überblick über verschiedene Gebiete im Bereich UX, Design, Konzeption und Entwicklung, vor allem immer im Hinblick auf Machbarkeit, praktischen Einsatzzweck und in Verbindung mit konkreten Beispielen und Erfahrungen aus vielen Projekten.

Lernziele

Ziel dieses Tutorials ist es vor allem, Entwicklern die Angst vor Themen wie UX, Design und CSS zu nehmen und zu zeigen, dass man kein Designer oder Künstler sein muss, um gute UX oder gutes Design in eigenen Projekten zu etablieren. Dieses Tutorial ist kein Deep Dive in die Theorie von UX, sondern vielmehr ein praktischer Guide und eine Sammlung an Tipps und Tricks aus der jahrelangen Erfahrung als UI-Entwickler.

Einführung
Gratis ansehen14 Minuten
- Einleitung und Vorstellung
  
  05:37
- Warum ist UX Design heute wichtiger denn je?
  
  06:11
- UX als Kaufargument
  
  03:11
UX, Design & Entwicklung
- Einleitung und Vorstellung
  
  05:37
- Warum ist UX Design heute wichtiger denn je?
  
  06:11
- UX als Kaufargument
  
  03:31
- Die Bestandteile von UX
  
  03:30
- Der benutzerorientierte Designprozess
  
  08:41
- Problem & Chancen
  
  08:21
- Von den Anforderungen zum Entwurf
  
  15:07
- Design für Dummies
  
  21:32
- Der Entwicklungsprozess
  
  05:40
- Integration in agile Prozesse
  
  04:09
- Entwicklung vs. Design
  
  07:44
- Design Tools
  
  09:59
- UX Best Practices
  
  06:58
CSS & HTML
- Keine Angst vor CSS
  
  02:20
- CSS mit Superpower
  
  05:37
- CSS Tools
  
  05:27
- CSS Einheiten
  
  07:37
- Positionierung mit CSS
  
  05:40
Layouting – Flexbox und CSS Grid
- Die Probleme mit CSS & Layouts
  
  06:51
- Der heilige Gral
  
  03:02
- Flexbox Grundlagen
  
  04:16
- Flexbox Items
  
  06:18
- Layouts mit Flexbox
  
  04:44
- Demo Flexbox
  
  07:37
- CSS Grid Grundlagen
  
  04:26
- Grid Container
  
  06:02
- Grid Items
  
  03:16
- Demo CSS Grid
  
  05:12
- Flexbox vs. CSS Grid
  
  01:46
Angular
- Warum Angular?
  
  03:45
- UI Strukturierung mit Angular Components (Atomare Controls vs. View Components)
  
  06:53
- Routing als Rückgrat der Anwendung
  
  04:28
- Generelle Styling Struktur in Angular
  
  09:06
- Styling und ViewEncapsulation (ShadowDOM vs. BEM)
  
  15:31
- Globale Styles strukturieren (ITCSS + CLI)
  
  13:30
- CSS Animationen
  
  07:42
- Angular Animationen
  
  08:58
- Beispiele & Demo (Angular Animationen)
  
  08:54
- Performance und Best practices
  
  15:17
- Automatisierte GUI Tests mit Protractor
  
  05:47
- Beispiele & Demo (GUI-Tests mit Protractor)
  
  07:17
UI-Frameworks
- Warum ein UI Framework?
  
  06:12
- Anforderungen an ein UI Framework (App Entwicklung vs. Framework Entwicklung)
  
  07:47
- Lebende Styleguides
  
  05:18
- Erweiterung des Entwicklungsprozesses
  
  02:13
- Übersicht 3rd Party UI-Libraries
  
  09:21
- Integration von 3rd Party Libraries
  
  06:49
- Customizing von 3rd Party Libraries
  
  05:32
- Stolperfallen bei 3rd Party Libraries
  
  06:27
- Zusammenfassung
  
  01:10

PRÄSENTIERT VON

Timo Korinth

Mac:
– Einen Mac (Snow Leopard oder höher)
– Node.js & NPM (aktuelle Version)
– Eine IDE ihrer Wahl (z.B. Visual Studio Code)

Windows:
– PC mit Windows 8.1 oder höher
– Node.js & NPM (aktuelle Version)
– Eine IDE Ihrer Wahl (z.B. Visual Studio Code)

UX Design

mit Angular, HTML & CSS