Panda Ice-creams

"Dedicated Experience for Desktop & Mobile for an Ice cream brand in Turkey.”

Role: Frame-by-frame animations for Home Page, Parallax Slider on Product Pages and a dedicated Mobile website for performance.

WORKFLOW & COMMUNICATION

The team of iGoa hired me for the development of this website. Since this project was managed remotely, we used Skype & WhatsApp for communication. We used Basecamp for project management and SVN to maintain code versions.

FEATURES

Stock Motion Animation

High fidelity frame-by-frame based animations on the homepage are a sequence of high-quality JPEGs drawn at regular intervals on an HTML5-Canvas element. The animations can be controlled with the scroll or keyboard keys.

Custom CSS Layout Grid

No frameworks were used for creating layouts. Every piece of CSS code is optimized and hand-coded.

Front-End UX

Page Level Transition creates a seamless experience while moving from one page, thanks to Page Level Transition added thought the website. This was achieved using a simple technique of adding class to the <body> tag and settimeout function in javaScript. The JavaScript code used as follows:

Shareable URLs

Each Product has a unique URL so that the same can be shared across platforms and devices.

Social Sharing Meta Tags

We included a custom description, title, and thumbnail images for social platforms. Each time a user shares the website URL on social media, the information is retrieved using these values.

OPTIMIZING PERFORMANCE

Image Performance

All images are compressed without losing much on quality. This makes sure that the website loads sooner on the respective devices.

Hand-coded front-end code

The code was developed using least amount of reliance on third party plugins or frameworks for CSS layout. Since the layout is quite unique, it makes more sense to create a custom CSS grid than to use a readymade one and customize it.

Mobile Performance

A separate website was developed for mobile. We opted for a much simple home page and used resized images for Product and Campaign pages.

Setting up Expires Header & g-zipping Content

I made sure that the server team is setting up the “expires headers” and enabling g-zip for faster performance.

Visit Website

AG Event

A highly interactive single-page HTML5 Website for an Event company based in Istanbul, Turkey. Read More
My Portfolio Website

A high-performance, Responsive website that uses the power of creative SVG and scroll based animations for enriching user experience. Read More
eScapegoat

A fun vector based illustration website for a festival that has a tradition of members submitting confessions anonymously. Read Case Study

Back to Home Page