walk

Aufgabe

Wir entwerfen gemeinsam einen Walk, mit dem wir unsere Umgebung anders betrachten, erleben und (neu) kennenlernen wollen.
Der Walk besteht aus einzelnen Anweisungen (Medium: Webseite), die in einer zufälligen Reihenfolge miteinander verlinkt sind (per Randomizer).

Jede Seite enthält:

• Eine Anweisung
• Den Link zum Randomizer (und damit zur nächsten, zufällig ausgewählten Anweisung)

Hier die Folien zum Einstieg.

Zeitplan

• Woche 1: Anweisung
• Woche 2: Gestaltung
• hochladen bis:
  Mo. 15.6.2026, 9 Uhr
• ausführen:
  ab Mo 15.6.2026, 14 Uhr
  bis vor Treffen am 18.6.2026
• Auswertung am:
  18.6.2026

Hilfreiche Fragen

zu den Anweisungen

• Wie kann ich jemanden dazu bringen, die Umgebung anders zu sehen oder zu hören?
• Wie kann eine Anweisung Neugier wecken oder Irritation erzeugen?
• Wie kann die Umgebung selbst Teil der Anweisung werden (z. B. Architektur, Spuren, Gerüche, Geräusche, Menschen, Wetter)?
• Was passiert, wenn die Sinne fokussiert/beschränkt werden (z. B. nur hören, nur tasten)?
• Welche Veränderungen im Verhalten (Tempo, Art zu gehen, etc.) können die Wahrnehmung beeinflussen
• Wie offen/präzise ist die Anweisung?
• Tonalität: poetisch, sachlich, …?
• Wie können Nutzer*innen mitbestimmen, was sie tun?
• Wie lange dauert die Ausführung der Anweisung?

zur Gestaltung

• Welche Stimmung möchte ich erzeugen?
• Was funktioniert auf dem Handy-Screen? Was draußen, unterwegs?
• Wie binde ich den Link zur nächsten Anweisung sinnvoll ein, ohne dass Nutzer*innen direkt auf den Link drücken, bevor sie die Anweisung durchgeführt haben?

Beispiele

• Bsp. 1 (Handy-Ansicht wählen!)
• Bsp. 2 (Handy-Ansicht wählen!)

Mit CSS-Grid / Gestaltungsraster

• Bsp. 3 (Handy-Ansicht wählen!)
• Bsp. 4 (Handy-Ansicht wählen!)
• Bsp. 5 (Handy-Ansicht wählen!)
• Bsp. 6 (Handy-Ansicht wählen!)

Übersicht mit allen Beispielen

CSS-Eigenschaften

Farbe

• (Textfarbe)
  color: red;
• (Hintergrundfarbe)
  background-color: yellow;
• Liste aller Farbnamen

Typografische Grundeinstellungen

• (Font family)
  font-family: sans-serif;
  font-family: monospace;
  font-family: serif;
• (Schriftgröße)
  font-size: 30px;
• (Zeilenhöhe)
  line-height: 0;
  line-height: 40px;
• (Buchstabenabstand / Spationierung)
  letter-spacing: 10px;
  letter-spacing: -10px;
• (Wortabstand)
  word-spacing: 20px;
• (Textausrichtung)
  text-align: center;
  text-align: right;
• (Schriftstil)
  font-style: italic;
• (Schriftstärke)
  font-weight: bold;
• (Text-Decoration)
  text-decoration: underline;

Border

• Border
  border: 1px solid blue;
• Border-Radius
  border-radius: 20px;

Rotation

• Rotate
  rotate: 20deg;

Margin / Abstände: außen

• Außenabstand oben
  margin-top: 30px;
• Außenabstand unten
  margin-bottom: 30px;
• Außenabstand links
  margin-left: -50px;
• Außenabstand rechts
  margin-left: -50px;

Padding / Abstände: innen

• Innenabstand oben
  padding-top: 130px;
• Innenabstand unten
  padding-bottom: 130px;
• Innenabstand links
  padding-left: 250px;
• Innenabstand rechts
  padding-left: 250px;

CSS-Grid

• lernen
• Vorlage

Hochladen

• stellt sicher, dass eure „Weiter-Links“ auf diese Adresse / diese URL verweisen!
• benennt eure drei HTML-Dateien so: vorname_nachname_1.html.
• per drag & drop hier jede der drei Anweisungen (HTML-Dateien) einzeln hochladen

Testen

• Umlaute o.ä. werden automatisch durch Unterstriche ersetzt (Müller wird zu M_ller)
• bspw. https://random.interaction.world/walk-upload/uploads/sebastian_schmieg_1.html