Design, Interaction, Code & Teaching

Flipped Classroom Web- und Application Design

Flipped Classrooms sind Online Tutorials meiner Vorlesungen an der HdpK Berlin. Neben der konzeptionellen und gestalterischen Lehre, sollte ein Interaction Designer seine Entwürfe prototypisch umzusetzen können. Diese Classrooms erkären die technischen Aspekte: CSS, HTML und Javascript anhand von einfachen, praktischen und anwendbaren Code-Beispielen. Sie sind bewusst für alle Interessierten frei – kommentiert, fragt und ergänzt … Viel Spaß!

Positionieren, Raster und Layouts

Was sollte man als Erstes lernen? HTML-Grundlagen vorausgesetzt, HTML-Elemente mit CSS-Selektoren auszuwählen und auf dem Screen zu positionieren.

  1. CSS-Selectors und Styles
  2. Box-Model und CSS-Float-Eigenschaft
  3. CSS-Position: relative, absolute und fixed
  4. Raster und CSS-Raster-Systeme
  5. Alltägliche CSS-Probleme beim Positionieren von Elementen

Responsive Design

Heute müssen Webseiten auf Smartphones, Laptops und großen Displays funktionieren – von 3,5“ bis 30“. Responsive-Design heißt: Eine Site mit CSS-Media-Queries an unterschiedliche Screengrößen dynamisch anpassen.

  1. Responsive CSS mit Media-Queries
  2. Javascript-Switch für das iPhone und unterschiedliche Screengrößen
  3. Bilder für Retina- und High-Resolution Displays

Transition, Transforms und Key-Frame-Animations

Transitions bringen Bewegung auf die Webseite. Transitions lehnen sich an physische Metaphern an wie Beschleunigen, Schieben oder Blättern. Allerdings nicht um Aufmerksamkeit durch Effekte zu erhaschen, sondern um die User-Experience zu verbessern – das Interface wird für den User erlebar.

  1. CSS3-Transition und Hover-Effekte
  2. CSS3-Transform
  3. CSS3-Keyframe-Animation