Aufgabe Gestaltung und Technik – Digital

Prüfungsbereich 1: Gestaltungsumsetzung und technische Realisation

Prüfungsstück I: Lösungsvorschlag (Entwurf) mit Arbeitsplanung (Konzeptionsphase 10 Arbeitstage) mit Arbeitsplanung für eine Website

Situation:

Die drei hannoverschen Tangoschulen richten das gemeinsame Festival „Entusiastas del Tango“ aus.

Die Zielgruppe sind Erwachsene zwischen 20 und 30 Jahren. „Entusiastas del Tango“ steht für Emotion, Lebensgefühl und Leidenschaft. Das Event richtet sich an Tanz- und Musikbegeisterte, die den Tango hautnah erleben wollen.

Gestalten Sie die Website, auf der das Festival „Entusiastas del Tango“ beworben wird.

Der Webauftritt ist ein Onepager und muss auf den verschiedenen Devices ein einheitliches Erscheinungsbild zeigen.

Umsetzung:

1. Entwickeln Sie auf Basis der Aufgabenbeschreibung einen Lösungsvorschlag mit Arbeitsplanung.
   Auswahl und Umfang der vorgegebenen Bilder sind freigestellt, Bildmontagen und Verfremdungen sind möglich. Eigene grafische Elemente und Piktogramme können erstellt und verwendet werden. Der zu verwendende Text ist vorgegeben. Der gesamte Text ist zu integrieren und darf redaktionell nicht verändert werden. Textelemente des vorgegebenen Textes dürfen als Bildunterschrift oder Textzitate (Quote) auf der Website verwendet werden. Das Festival-Logo muss verwendet werden.
2. Die Website muss dem Grundgedanken des responsive Webdesigns folgen. Entwerfen Sie für die drei Viewports (Breite: ≤ 320 px, ≤ 640 px und ≤ 1024 px) eine optimierte Ansicht der Website. Erarbeiten Sie Ihren Lösungsvorschlag nach dem „mobile-first“-Ansatz.
3. Das Bild „Tangotaenzer.jpg“ muss viewport-spezifisch angezeigt werden (responsive image). Die Umsetzung soll clientseitig erfolgen. Setzen Sie folgende Angaben zu Viewport-Größen und dem dafür zu verwendenden Bild um:
   • ≤ 320 px – Tangotaenzer.jpg (= Ausschnitt small)
   • ≤ 640 px – Tangotaenzer.jpg (= Ausschnitt medium)
   • ≤ 1024 px – Tangotaenzer.jpg (= Ausschnitt large)
   Die zu verwendenden Ausschnitte small, medium und large sind in der Datei „Anlage-Ausschnitt.pdf“ beschrieben.
4. Das vorhandene Video „Tangoschritte_ohne_Ton.mp4“ muss eingebaut und ebenfalls viewport-spezifisch angezeigt werden (responsive video).
5. Im vorgegebenen Text werden die drei Tango-Schulen aufgeführt, die diese Veranstaltung durchführen. Sie sollen diese in folgender Darstellung präsentieren:
   • Es soll pro Tanzschule eine Wortbildmarke entwickelt werden.
   • Zugehörig zum einzelnen Logo sollen die jeweiligen Firmendaten an geeigneter Stelle gestalterisch passend platziert werden.
6. Entwickeln Sie ein Gestaltungskonzept für die Menüführung/Navigation des Onepagers anhand der Menüpunkte im Text. Die grafische Darstellung des Menüs ist den jeweiligen Anforderungen der einzelnen Breakpoints anzupassen.