Auftrag LU17 – Ausblick: Das Web von heute

Dies ist eine alte Version des Dokuments!

Zeit: 30 Minuten | Abgabe: Moodle → LU17 Sammlung Ausblick (2 Projekte pro Person)

Sie haben in diesem Jahr gelernt, wie moderne Weboberflächen funktionieren – von HTML und CSS über Vue.js bis zu Testing und Deploy. In dieser Aufgabe verlassen Sie die Rolle der Entwicklerin / des Entwicklers und schlüpfen in die Rolle eines Jury-Mitglieds bei einem Web-Award.

Sie beurteilen echte, preisgekrönte Webprojekte – und erkennen dabei, was heute im Web alles möglich ist.

Wählen Sie von den Award-Plattformen zwei Projekte aus. Beurteilen Sie beide nach den vier Kriterien und laden Sie Ihre Einträge in Moodle hoch.

Am Ende der Lektion werden zwei oder mehr Personen zufällig ausgewählt (je nach Zeit). Sie öffnen eines ihrer Projekte live im Browser, präsentieren es der Klasse in 5 Minuten und erklären ihre Bewertung.

Wählen Sie Projekte aus einer oder mehreren dieser Plattformen:

Screenshot webbyawards.com – Kategorie-Übersicht Websites and Mobile Sites

webbyawards.com → Winners → Websites & Mobile Sites

Der «Oscar des Internets» – seit 1996 der bekannteste Web-Award weltweit. Prämiert werden Websites, Apps, Video, Podcast und Social Media in über 100 Kategorien.

Für diese Aufgabe: nur Websites und Apps anschauen – keine Podcasts oder Social-Media-Kampagnen.

Screenshot bestofswissweb.swiss – Hall of Fame

bestofswissweb.swiss → Hall of Fame

Der wichtigste Schweizer Digital-Award. Prämiert werden Schweizer Unternehmen und Agenturen für herausragende digitale Projekte. Besonders relevant: Hier sehen Sie, was Schweizer Agenturen und Firmen umsetzen – ein direkter Blick in Ihren zukünftigen Arbeitsmarkt.

Screenshot awwwards.com – Winners-Übersicht mit mehreren Projekten

awwwards.com → View Winners

Die wichtigste internationale Plattform der Webdesign-Community. Täglich werden neue Projekte von einer Fachjury bewertet. Hier sehen Sie die technische und gestalterische Avantgarde des Webs – viele Gewinner verwenden genau die CSS- und JavaScript-Techniken, die wir in M291 angeschaut haben.

Screenshot grimme-online-award.de – Preisträger-Archiv

grimme-online-award.de → Archiv → Jahr auswählen → (Zur Gesamtansicht aller Preisträger auf einer Seite)

Deutschsprachiger Award mit Fokus auf journalistischen und gesellschaftlichen Mehrwert. Prämiert werden Projekte, die das Netz sinnvoll bereichern: interaktive Dokumentationen, Datenjournalismus, digitale Bildungsangebote. Weniger Design-fokussiert, dafür inhaltlich stark.

Für diese Aufgabe: nur Websites und Apps anschauen – keine Podcasts oder Social-Media-Kampagnen.

[Platzhalter: Screenshot thefwa.com – aktuelle Winners-Übersicht]

thefwa.com → Winners

Einer der ältesten Web-Awards (seit 2000). Fokus auf experimentelle, technisch mutige und künstlerische Webprojekte. Gut für alle, die sich für kreative Experimente im Web interessieren.

Beurteilen Sie jedes Projekt nach diesen vier Kriterien. Vergeben Sie jeweils 1–5 Sterne.

Kriterium	Was wird bewertet
Design, Animation & Interaktion	Farben, Typografie, Layout, visueller Gesamteindruck; Bewegung, Übergänge und wie die Seite auf Eingaben reagiert
Inhalt & Aufbereitung	Qualität und Relevanz des Inhalts (Text, Fotos, Videos); gibt es eine klare Geschichte oder einen roten Faden? Werden Inhalte kreativ vermittelt – z.B. durch Scrollytelling, interaktive Elemente oder Games?
User Experience	Intuition, Klarheit, Führung durch den Inhalt; findet man sich zurecht ohne nachzudenken?
Technische Qualität	Ladezeit und Performance; funktioniert die Seite auf dem Smartphone?

Maximum: 20 Punkte pro Projekt (4 × 5 Sterne)

1. Projekte entdecken (10 Min.)
Öffnen Sie eine oder mehrere der Plattformen. Stöbern Sie in den Gewinnern und Nominierten. Klicken Sie sich durch – lassen Sie sich überraschen.

2. Zwei Projekte auswählen (5 Min.)
Wählen Sie zwei Projekte, die Sie interessant, beeindruckend oder auch fragwürdig finden. Es müssen keine perfekten Projekte sein – wichtig ist, dass Sie etwas dazu sagen können.

3. Beurteilen & direkt in Moodle eintragen (15 Min.)
Öffnen Sie das Projekt und füllen Sie den Moodle-Eintrag (LU17 – Sammlung Ausblick) parallel dazu aus. Erstellen Sie zuerst einen Screenshot der Website:

Windows: Win + Shift + S → Bereich auswählen → in Moodle einfügen
Mac: Cmd + Shift + 4 → Bereich auswählen → Datei vom Desktop hochladen

Nach Ihrem Eintrag können Sie die Projekte Ihrer Klasse sehen und sich inspirieren lassen.

Füllen Sie für jedes Projekt alle Pflichtfelder aus:

Feld	Was eingeben
Screenshot	Screenshot der Website (Vollseite oder aussagekräftiger Ausschnitt)
Plattform	Von welchem Award stammt das Projekt? (Webby / Best of Swiss Web / Awwwards / Grimme / FWA / Andere)
Titel	Name der Website / App
Link	URL der Website
Beschreibung	Was macht dieses Projekt besonders? Was hat Sie überrascht oder beeindruckt? Warum verdient es einen Award – oder warum nicht? (3–5 Sätze)
Design, Animation & Interaktion	1–5
Inhalt & Aufbereitung	1–5
User Experience	1–5
Technische Qualität	1–5

[Platzhalter: Thumbnail des YouTube-Videos «Modern UI Patterns – Una Kravets – CSS Day 2026»]

Wenn Sie schnell fertig sind oder sich für moderne CSS-Techniken interessieren:

Modern UI Patterns – Una Kravets – CSS Day 2026 | Dauer: 53:40

Dieses Video richtet sich an Fortgeschrittene und ist auf Englisch. Es werden CSS-Techniken gezeigt, die wir im Unterricht noch nicht behandelt haben – das ist gewollt. Es geht nicht darum, jeden Code zu verstehen, sondern darum zu sehen, was mit modernem CSS bereits möglich ist, und Inspiration für zukünftige Projekte zu sammeln.

Wählen Sie zwei Themenblöcke aus der Tabelle. Schauen Sie sich die entsprechenden Abschnitte an (in 1.5× Geschwindigkeit) und suchen Sie im Web je ein Beispiel, das diese CSS-Technik einsetzt. Tragen Sie die Beispiele ebenfalls in Moodle ein.

Block	Thema	Inhalt & Relevanz	Minute
2	User Preferences & Modernes Theming	Fortgeschrittene Techniken für Dark Mode, Kontraste und Schriftstärken. Wie sich Corporate Design automatisch an Nutzerbedürfnisse anpasst.	04:27–11:17
3	Noise Reduction & Scroll-Interaktionen	Platz sparen auf dem Bildschirm: Wie Header elegant ausgeblendet werden und UI-Elemente beim Scrollen minimiert werden, um den Fokus auf den Inhalt zu legen («Hidey Bars»).	11:18–18:00
4	Layered UI & Intelligente Popover	Moderne Tooltips und Menüs mit der Popover-API und Anchor Positioning – damit Overlays in Web-Apps immer perfekt ausgerichtet sind.	18:00–30:30
5	View Transitions & Mikro-Animationen	Psychologie der Bewegung: Wie kleine Interaktionen die User Experience hochwertiger wirken lassen. Das «Morphing» von Elementen erzeugt ein flüssiges App-Gefühl im Browser.	30:31–43:39
6	Mobile Form-Faktoren & Gesten	Swipe-Gesten mit reinem CSS umsetzen, um native App-Interaktionen im Web nachzuahmen.	43:40–49:03