The site began with the use of a template from the Webflow template store. Quite a bit was changed from the template, however it allowed for a speeded up process. It also meant that I did not need to use a prototyping tool, as I could easily make changes within Webflow. What did take some research and implementation, was the development of transparent videos that could be used to make an interactive and responsive experience. Working with transparent video can result in large files, however it does allow you to do things otherwise not possible. The process involved the following:
- Writing out in a document all the information the site should contain.
- Finding a template that had the elements I needed.
- Paper layouts to determine how images and information would be blocked together and to begin thinking about visual hierarchies.
- Adjusting the template in Webflow with section areas, defining text and image / video areas.
- Created, animated 3D models.
- Created voice overs for characters - one using voice AI and one with my own recorded voice.
- Created lip syncing for voices.
- Rendered models and animations to a transparent video.
- Converted the videos to be used in both Chrome / Safari browsers.
- Created interactive buttons for the characters, which activate an animation and audio.
- Made the site responsive and efficient.
