Design Workflow Demo

A series of videos showcasing the creation of a product description page from start to finish.


The following eight videos demonstrate, from start to finish, the creation of a product description page (PDP) using Adobe After Effects for a You.i Engine powered video app.

Each video starts where the previous one finishes. Although they can be watched in any order it is best to start from the beginning.

Video 1 - First steps in motion design for a video app screen

This video demonstrates the steps taken by a Motion Designer to take the static visual representation of a screen and begin to transform it into an interactive screen.


Video 2 - Binding elements on the screen to You.i Engine

This video demonstrates the link between the design within Adobe After Effects and the You.i Engine that will consume and render the design as a screen. 


Video 3 - Laying out screens and the You.i Properties panel

This video demonstrates laying out the text and list on a screen. It includes the use of properties in the You.i Properties panel to speed up design and take advantage of You.i Engine layout capabilities. 


Video 4 - Skinning your application

This video demonstrates skinning the default You.i button component to match the vision outlined by the brand through the image assets provided. It illustrates the ease of skinning pieces of your application. 


Video 5 - Animating screens in and out 

This video demonstrates creating the animations that will occur when a screen comes in and when it goes out. The animations are easily tied to You.i Engine using a timeline marker labeled In and one labeled Out.


Video 6 - Adding responsive layout 

This video demonstrates using the responsive layout features provided by You.i Engine to help control the look and feel of the screen as its dimensions change. For example, how it responds when being rendered on tablets of varying sizes.


Video 7 - Modifying a screen 

This video demonstrates the steps a Motion Designer would take to modify an existing layout. You will see the designer change a horizontal list to a vertical list as well as create a new button to handle adding a show to your favourites.


Video 8 - Exporting your project 

This video demonstrates the steps to export a design. The exported design is taken by developers to package along with their code when building the application.  You.i Engine will consume the After Effects assets, layouts and animation timelines bringing our design to the screen. 

Thanks for watching this video series.