Interactive
Motion
Infographic

View Project...

Project Requirements

  • Screens to be included- Title screen, Content screens (minimum four), References screen.
  • Main headline, a sub-headline, multiple sub-headings, body copy, lists and nutrition information.
  • All elements should be positions absolutely using left, top, right, bottom properties.
  • All images should be exported at full resolution (based on Illustrator document) and close-cropped
  • Each screen should have navigation (next and previous buttons).
  • The first screen should not have a previous button and the last screen should not have a next button.

The Process

Anything that we do from start to finish, and a series of steps take place to complete the task called process, that might be a small or long. To perform the process, we need planning to run that process smoothly in a particular or given time. Like this project, it contains many steps to complete. It contains coding-html, CSS, JavaScript,Asserts Designing.


The Idea

The main idea behind this project was to show the basic skills of coding such as html, CSS and JavaScript .


The Asserts

It a multi-page project that enables the user to learn about the clothing from raw material to the final goods. It is a step-by-step process project which has 6 pages, every page has a navigation at the bottom to show the user on which page is one on. It also has next and previous button to go back and forth from one page to another. Moreover, it is all svg based project that is animated through Gsap library of JavaScript. Every element has sound effect with it to give the realistic touch to it. On every page, it has some interactive, as on click it shows some more data and explains it briefly.


Tools Used

Illustrator - which is used in drawing logo and other graphic elements.

Photoshop - which is a perfect tool to edit and adjust the quality of the pictures.


This Project is only for the DESKTOP view

You have to click on the screen when the project start loading


Follow Me