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)

Die Fahrrad Rund OHG wünscht sich für seine Webpräsenz einen responsiven Internet-Auftritt. Dabei ist dem Unternehmen wichtig, dass die Inhalte auch für ältere Devices vollständig darstellbar sind. Durch den Relaunch der Website möchte Fahrrad Rund die vier Schwerpunkte seines Angebots prominent präsentieren. Planen und gestalten Sie die Website.

Umsetzung

• Entwickeln Sie auf Basis der Aufgabenbeschreibung einen Lösungsvorschlag mit Arbeitsplanung. Das Logo soll verwendet werden. 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 zusätzlich als Bildunterschrift, Textzitate (Quotes) oder grafische Stilelemente auf der Website verwendet werden.
• Der Kunde wünscht, dass die vier Schwerpunkte Verkauf, Werkstatt, Lastenrad-Leasing und Kinderrad-Abo prominent auf der Website präsentiert werden. Entwerfen Sie für jeden der vier Schwerpunkte ein inhaltlich passendes Piktogramm. Die Piktogramme sind als Vektorgrafiken webkonform abzuspeichern und zu integrieren.Jeder Schwerpunkt soll für eine schnelle Wiedererkennung durch eine eigene Farbe repräsentiert werden.
• Auf der Homepage soll über den vier Piktogrammen eine Slideshow die vier Schwerpunkte durch passende Bilder und kurze Texte nacheinander vorstellen. Diese Slideshow soll als Endlosschleife ablaufen.
• Der Kunde gibt vor, dass die Website nach den Regeln des Responsive Webdesign zu optimieren ist. Entwerfen Sie eine optimierte Ansicht der Website. Das Device soll dabei seine native Breite nutzen.
• Die Fahrrad Rund OHG wünscht, dass die gesamten Inhalte ihrer Website auch auf älteren Geräten und Browsern sowie bei deaktiviertem JavaScript dargestellt werden können. Entwickeln Sie eine Möglichkeit, wie Sie diese Anforderungen mit der Methode des Progressive Enhancement umsetzen können. Die in der Slideshow präsentierten Inhalte sollen auch bei deaktiviertem JavaScript zugänglich sein.

Fertigen Sie anhand Ihres Entwurfs einen lauffähigen Internetauftritt der Fahrrad Rund OHG an.

Die Website ist für die Viewports Smartphone (≤ 390 px) und PC (≤ 1280 px) umzusetzen.

Die Navigation besteht aus den im Text vorgegebenen Menüpunkten.

Setzen Sie die Seiten und die von Ihnen geplante Navigation auf Basis aktueller HTML5-Elemente, CSS3 und gegebenenfalls mithilfe von JavaScript um. Die Lauffähigkeit ist herzustellen. 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 Browserleiste) auf DIN A4.