Aufgabe Gestaltung und Technik – Digital

Prüfungsbereich 1: Gestaltungsumsetzung und technische Realisation

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

Optik Tack will auch mit einem neuen Internetauftritt für Aufmerksamkeit sorgen. Hier sollen die Vorteile des Optikerladens im modernen Design präsentiert werden. Auf dem OnePager soll Raum sein für eine ausführliche Präsentation des Ladens, die aktuelle Sonderaktion und ein Formular zur Terminabsprache. Umsetzung:

1. Entwickeln Sie auf Basis der Aufgabenbeschreibung einen Lösungsvorschlag mit Arbeitsplanung. Das Bildmaterial und das Logo sind vorgegeben. Auswahl und Umfang der verwendeten Bilder sind freigestellt, Bildmontagen und Verfremdungen sind möglich. Eigene grafische Elemente und Piktogramme können erstellt und verwendet werden. Der gesamte Text ist zu integrieren und darf redaktionell nicht verändert werden. Textelemente des vorgegebenen Textes dürfen als Bildunterschrift, Textzitate (Quotes) oder grafische Stilelemente auf der Website verwendet werden.
2. Der Kunde wünscht sich einen OnePager. Entwerfen Sie eine für die Viewport-Breite < 1280 px (Desktop) optimierte Ansicht der Website.
3. Entwickeln Sie ein Gestaltungskonzept für die Menüführung/Navigation des Web-Auftritts anhand der im Text vorgegebenen Bezeichnungen der einzelnen Menüpunkte. Die grafische Darstellung des Menüs ist den Anforderungen eines OnePagers anzupassen. Der OnePager ist vollständig auszuarbeiten.
4. Integrieren Sie auf der Startseite eine 20 bis 30 Sekunden lange Animation. Es sollen die vorgegebenen Texte und das Bildmaterial „Animation“ verwendet werden. Weitere Bilder oder grafische Elemente können frei gewählt werden. Die Art der technischen Umsetzung der Animation ist freigestellt, es darf allerdings kein Flash als Ausgabeformat zum Einsatz kommen.
5. Unter dem Menüpunkt „Aktionen“ ist die aktuelle Sommeraktion zu präsentieren. Der Menüpunkt „Terminvereinbarung“ ist als Formular zu gestalten.
6. Binden Sie die drei Icons der Social-Media-Plattformen Pinterest, Instagram und Facebook auf der Website ein, sodass der User durch einen Klick auf die entsprechende Plattform gelinkt wird.

Fertigen Sie anhand Ihres Entwurfs einen lauffähigen Internetauftritt für Optik Tack an. Setzen Sie den OnePager mittels aktueller HTML5-, CSS3-Elementen und JavaScript o. ä. um.

Die Website ist ausschließlich für den vorgegeben Viewport zu optimieren.

Erstellen Sie die Animation entsprechend der von Ihnen vorgesehenen Technik. Die Website ist für eine aktuelle Version eines Browsers Ihrer Wahl zu optimieren. Entwickeln Sie ausschließlich eine clientseitige Lösung.

Einzusenden ist je ein farbiger Ausdruck der gestalteten Screens (ohne Browser) auf DIN A4 sowie die Bilder in der Abfolge der Animation als Ausdruck auf maximal zwei DIN-A4-Seiten.