Home
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.
Transformiere, entwickle und baue über 2 Sprints aus einem Typo Plakat des 20. 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. 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.
Du kannst von deinem Poster aus dem Modul VisDes ausgehen oder von rasterbasierten Typoplakaten aus dem 20. JH. Eine Auswahl von möglichem Material findest du hier:
https://www.dropbox.com/scl/fo/sb3uw9q7ottuqat71wr2r/h?rlkey=16z07mo5lz6ybsbw23mbhhti0&dl=0
- Sprint 1 (Stile und Layout) responsive, fluide
- Sprint 2 Integration von Animation/Interaktion
Sammle deine Experimente und verlinke sie als Dokumentation deines Lernprozesses:
- https://ida2021-staging.netlify.app/sina_staehli/process/
- https://ida2021-staging.netlify.app/sira_trinkler/myprocess
Projekte 2022 und 2021 Projekte 2023
Alle machen einen Input, entweder eine Repetition oder sie stellen ein neues Konzept vor. Einschreiben auf der Agenda möglich.
- Bewertung von Sprint 1, technisch saubere Umsetzung, Präzision von gestalterischen Details, Responsivität (Kriterium zählt doppelt, max. 20 Punkte).
- Bewertung von Sprint 2, Fähigkeit zur konzeptionellen und gestalterischen Adaption und Weiterentwicklung der Vorlage, Qualität von Typografie, Layout und Animationen, Responsivität im Sinne einer tatsächlich auf die Devices angepassten Darstellung mit Integration von Breakpoints. Auf Eigenheiten des Mediums eingegangen. Der Code ist sauber und korrekt, der Code ist logisch strukturiert. (Kriterium zählt doppelt, max. 20 Punkte).
- Prozess: Mit den gezeigten Techniken wurde experimentiert. Selbständiges Aneignen von neuen Konzepten. Eigenständigkeit, Neuheit der formalen Lösung. Engagement, Beiträge in der Klasse. (max. 10 Punkte).
(Total max. 50 Punkte)
Formale Kriterien
- 80% Anwesenheit
- Beitrag (Repetition oder kurzer Input zu HTML5)
W3C
Mozilla
- Erste Veranstaltung, HTML und CSS Basics, Editoren
- Fonts, Masseinheiten, Verlinkung (Pfade), Images einbinden
- Slides HTML & CSS Konzepte
Aufgabe auf 26.2.:
Teil 1
Plakat 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).
Aufgabe auf 5.3.:
- Repetition der Inhalte Tag2. Durcharbeiten von einer der Ressourcen zu Flexbox.
- Aufbau Plakat (oder Auszug davon) mit Flexbox, Upload auf Github
Aufgabe auf 12.3.:
- Repetition der Inhalte Tag 3. Aufbau Plakat 'der Film' mit Grid. Aufbau eigenes Plakat mit Flexbox und/oder Grid (so weit aufbauen, dass am 19.3. noch Layout Details angeschaut werden können).
Abgabe 19.3. 12:00:
- Aufbau fluide Version in HTML und CSS
- Entwurf responsives Verhalten, statisch, 3 Varianten. Nachdenken über/Experimentieren am Umgang mit Viewport, Scrolling, Formaten
- Eigenes Github Repository erstellen (bei privaten mich einladen)
- Prozess und Sprint 1 hochladen, Entwurf verlinken oder als PDF im Repo abgeben
- Auf Illias den Link zu deinem Github Repo bis 19.3. 12:00 abgeben: https://elearning.hslu.ch/ilias/ilias.php?baseClass=ilrepositorygui&ref_id=6227915 (Abgabe ist zeitlich begrenzt)
Aufgabe auf 26.3.:
- Repetition der Inhalte
- Eine Mikro-CSS-Animation für das eigene Projekt entwickeln (Typo, Bild, Aufbau von Layout Elementen) etc.
- https://sebastianborter.github.io/KiWeb-Plakat_Sebastian/
- https://github.com/SebastianBorter/KiWeb-Plakat_Sebastian
- https://github.com/mike-debastiani/KickWeb2024
- https://mike-debastiani.github.io/KickWeb2024/index.html
- https://stefanvoegelisrf.github.io/kiweb/start-page
- https://stefanvoegelisrf.github.io/kiweb/
- https://github.com/stefanvoegelisrf/kiweb
