×
Startseite Portfolio Impressum Datenschutz

|

Optik Tack

In meiner Abschlussprüfung zum Mediengestalter Digital & Print mit der Fachrichtung Digital bestand die Aufgabe darin, einen modernen und ansprechenden Internetauftritt für die fiktive Firma „Optik Tack“ zu gestalten und umzusetzen. Zu dieser Aufgabe gehörte jedoch nicht nur die Gestaltung eines Screendesigns mit anschließender HTML-, CSS- und JavaScript-Umsetzung sondern auch die Ausarbeitung einer Konzeption um auf gestalterische Elemente, sowie beispielsweise auf die Farb- bzw. Schriftwahl eingehen zu können.

Hierbei wurde jedem Prüfling sowohl das Logo, der gesamte Text und auch eine größere Auswahl des Bildmaterials zur Verfügung gestellt.

Website besuchen

Technik

HTML

JavaScript

CSS

Bootstrap

Animation

Eine der wichtigsten Vorgaben bei der Aufgabenstellung war die Integrierung einer Animation, welche direkt beim Aufruf der Website sichtbar sein sollte. Bevor die ersten Ideen zur Umsetzung der Animation entstehen konnten, war es notwendig die Art der technischen Umsetzung auszuwählen. Hierbei fiel meine Entscheidung recht schnell auf die Verwendung von einer Animation mittels CSS und JavaScript.

Aufgrund des gegebenen Materials, welches jeweils aus einem Bild mit dazugehöriger Textzeile bestand, entschied ich mich dazu für die Animation einen responsiven Slider zu verwenden.

Die Form des Bildes habe ich hierfür an die Brillenglasform des Logos angepasst und eine weitere Brillenglasform hinzugefügt, welche den jeweils zugehörigen Text / Satz enthält. Diese startet mit einer Drehung von 45° woraufhin ein "Fade-In"-Effekt und ein Zoom-Effekt des Textes folgt. Anschließend folgt dieser Ablauf für jedes weitere Bild.

Design

Die neue Website der Firma „Optik Tack“ ist in einem dynamischen, aber zugleich auch modernen Stil aufgebaut. Es wird mit viel Weißraum und großen Flächen gearbeitet, um den Inhalt ausgeglichen zu portionieren und den Betrachter nach und nach durch die Internetseite zu führen.

Durch die abwechselnde Ausrichtung der Text- und Bildbereiche sowie die Verwendung der Brillenglasform entsteht zudem ein lebhaftes Layout, welches sich auf der gesamten Seite widerspiegelt.