Home

Herzlich Willkommen zum Modul KickWeb 2025

Live Agenda (due to changes)

Modulrecord

Die Studierenden haben sich Grundkenntnisse über aktuelle Technologien für statische und bewegte Bildschirm-Typografie und -Layout angeeignet. Sie haben die technischen Grundlagen für den Aufbau einer zeitgemässen Website gelernt und sind mit webspezifischen flexiblen Rastern vertraut.

Modulprojekt

Transformiere, entwickle und baue über 2 Sprints aus einem rasterbasierten Typo Plakat/Cover des 20./21. JHs eine responsive, interaktive Webversion. Im Laufe des Prozesses können sich die visuellen Elemente des Ausgangsmaterials verändern, du kannst redigieren, Ideen herausarbeiten und andere verwerfen. Das Endprodukt ist eine von dir interpretierte und transformierte Version.

Wir werden im Laufe des Moduls immer wieder Übungen machen, die Eigenschaften des Mediums auf konzeptionelle, künstlerische Art thematisieren. Überlege, welche Aspekte davon du in dein Projekt integrieren willst. Benutze den Screen als Bühne/Plattform, mit der die User interagieren können. Dabei stehen Erlebnis, Überraschung, Interaktion im Zentrum. Reflektiere deine Entscheidungen immer wieder auf konzeptioneller Ebene.
Beispiele

• https://dariofot.github.io/kickweb/ __ Original
• https://romangonser.github.io/modul_webtech/01_Final/Graphis_99.html __ Original

Wählt in Zweier/Dreiergruppen als Ausgang ein rasterbasiertes Typoplakat/Cover aus dem 20./21. JH. (Auswahl mit mir besprechen). Mögliche Einstiege in die Recherche:

• Pinterest
• Google
• Typoplakate 20. Jahrhundert

Abgaben

• Sprint 1 (Stile und Layout), erste Version fluide 17.03. bis 18:00
• Sprint 2 Weiterentwicklung der Gestaltung, Responsiveness, Integration von Animation/Interaktion

Organisation Zusammenfassungen und Repetition

In Zweiergruppen Input: entweder eine Repetition oder sie stellen ein neues Konzept vor. Einschreiben auf der Agenda möglich.

Bewertung

Skala

• Bestanden / Nicht bestanden

Inhaltliche Kriterien

1. Bewertung von Sprint 1, technisch saubere Umsetzung, Präzision von gestalterischen Details, Responsivität (Kriterium zählt doppelt, max. 20 Punkte).
   
2. Bewertung von Sprint 2, Fähigkeit zur Weiterentwicklung/Interpretation der Vorlage, gestalterische Qualität von Typografie, Layout und Animationen, Responsivität (Kriterium zählt doppelt, max. 20 Punkte).
   
3. Prozess: Experimentierfreudigkeit mit den technischen Mitteln. Präsentation (max. 10 Punkte).
   (Total max. 50 Punkte)

Formale Kriterien

• 80% Anwesenheit
• Beitrag (Repetition oder kurzer Input zu HTML5)

---

HTML und CSS Referenzen

W3C

• https://www.w3schools.com/html/default.asp
• https://www.w3schools.com/css/default.asp

Mozilla

• https://developer.mozilla.org/en-US/docs/Web/CSS
• https://developer.mozilla.org/en-US/docs/Web/HTML

---

Unterlagen

Tag1

• Erste Veranstaltung, HTML und CSS Basics, Editoren
• Fonts, Masseinheiten, Verlinkung (Pfade), Images einbinden

Aufgabe auf 25.2.:

Teil 1
Plakat/cover auswählen, Notizen zu gestalterischen Themen und Skizzen zu eigener Weiterentwicklung machen. Schriften herausfinden (Alternativschrifen?), eine Testseite machen, alle verwendeten Schriften einbinden und mit Muster darstellen. Farben und weitere Elemente ebenfalls als Muster darstellen. Upload Bild des ausgewählten Plakats und der Testseite auf Github in deinen Ordner.

Teil 2
Repetition der Inhalte V1-morgen und V1-nachmittag (diejenigen, die wir nicht behandelt hatten sind freiwillig).

Tag2

• Layout: Document Flow und Box Model

• Layout: Flexbox

Aufgabe auf 4.3.:

• Entwurf figma oder indesign für Desktop und Weiterentwicklung
• Abgabe PDF oder figma Link auf GitHub im eigenen Ordner hier
• Repetition der Konzepte
• Aufbau des Rasters aus dem Design mit Flexbox (erste Annäherung)

Tag3

• Layout: Grid
• CSS Transformationen
• Code Pilot installieren (Anleitung von Marc auf DI Wiki)
• Special (erhöhter Komplexitätsgrad, freiwillig): fixe und flexible Masse und Manipulation von Content
• HTML Adressierung, File Pfade

Aufgabe auf 17.3., 12:00:

• Inhalte Tag 1-3 repetieren
• File Pfade selbständig erarbeiten
• Abgabe Sprint 1 (17.3. 12:00) fluide Version in html/css + 3 statische Entwuerfe responsives Verhalten (Figma, InDesign, u.a.) Beispiele 2024
• https://busiii.github.io/KickWeb/Sprint1_Final_Jennifer_Beeler_Kickweb_fs24/index.html
• https://dariofot.github.io/kickweb/sprint-1/plakat-v5-fluid/plakat
• https://blublex.github.io/KickWeb24/sprint1/sprint1.html

Tag4

Selbstudium, Support Slots online (freiwillig), ihr könnt euch eintragen.
https://docs.google.com/spreadsheets/d/127w9X5PqWjeVNoxKBpzDmc36McFvR-edbj_82FoZh1c/edit?usp=sharing

Tag5

Interaktionen, Transitions, Animationen

• Transition
• Animation
• Git, GitHub

Aufgabe auf 25.3.:

• Projektarbeit: Animationen, Interaktionen
• statische Entwürfe für responsives Verhalten, siehe Beispiele
• Freiwillig, Git, GitHub: eigenes Repository aufsetzen und Projekt dorthin pushen (Anleitung),
  die eigene Repo URL im Slack Channel mitteilen

Tag6

Media Queries, JavaScript

• Media Queries
• Einstieg JavaScript

Aufgabe auf 1. April:

• Animationen verfeinern
• Integration von mindestens einem Breakpoint

Tag7

Projektfinish, Integration einer Navigation auf beide Sprints und Impressum, Veröffentlichen: Git, GitHub

• Git, GitHub
• Informationen zur Abgabe, Präsentation