2016
X

Wernli - Chocoly

Produkt-Webseite mit Animationen auf Basis von HTML

Das Schweizer Familienbiscuit feiert seinen 60. Geburtstag. Feiere mit! 60 Jahre hat das Chocoly-Biscuit bereits auf dem Buckel, doch von Ermüdungserscheinung keine Spur: Das Guetzli aus zwei knackigen Biscuits mit zarter Schokoladencrème-Füllung ist noch genauso knusprig und süss wie anno 1955. Damals in Morges im Kanton Waadt erfunden, erfreute sich das Biscuit schnell immer grösserer Beliebtheit bei den Schweizerinnen und Schweizern dies- und jenseits des Röstigrabens.

Chocoly ist seit Jahren DAS Schweizer Familien-Biscuit schlechthin und weckt bei vielen angenehmste Kindheitserinnerungen. Die knackigen, runden Biscuits mit der zarten Füllung sind bei Jung und Alt äusserst beliebt und ideal für den kleinen Hunger zwischendurch! Gerade auch, weil's dank den beiden knusprigen Biscuits keine schmutzigen Finger gibt.

Konzept und Design von erdmannpeisker, Umsetzung in HTML von Responsive AG.

An diesem Projekt habe ich für meinen ehemaligen Arbeitgeber Responsive AG (Zürich) als Game- & Webdesigner in den hier aufgeführten Bereichen mitgewirkt.

Anforderungen

Responsive Website (mind. Tablet, iPad) mit diversen Animationen auf HTML Basis

Ziel Webseite Beschreibungen und Hintergrundinformationen zu unserem Produktsortiment, unseren Marktaktivitäten sowie einer Historie über Chocoly-TV-Spots in der Schweiz.

Ziel Gewinnspiel Zeichne ein verrücktes oder lustiges Geburtstagsbild und lade deine Zeichnung hier in den Geburtstagskalender an deinem Geburtsdatum hoch.

Technik, Administration & CMS 2-sprachig, HTML5, CSS3, PHP CMS Framework, Javascript

Browser & Devices Alle gängigen und modernen Browser bis IE9, Desktop, Laptop, Netbook und Tablets sowie Vermeidung von Flash.

Screendesign Das Screendesign-Entwürfe wurden in offenen PSD- und eingebetteten AI-Dateien (Smart-Objekte) geliefert.

Technische Umsetzung

HTML5/CSS3, Animationen auf JavaScript und Z-Index Design

Responsive HTML 2-sprachig, HTML5, CSS3, PHP CMS Framework, Javascript

Animationen TweenMax/JavaScript

CSS Layers 1, 2 und 3 Ebenen-Funktionalität der HTML-Links mittels CSS Layers (z-index) gelöst:

Ebene 1: HTML-Design
Ebene 2: Animationen
Ebene 3: Links

Teaser

Intern und extern

Screendesign

PSD-Version

Webdesign

Finale HTML-Version

zurück zu HUG Browser-Games Zur offiziellen Webseite

Mit freundlicher Genehmigung von Agentur Responsive AG (Schweiz), Kunde HUG AG (Schweiz), Designer Mario Farez Lewandowski. Die Rechte liegen bei den jeweiligen Inhabern.