One element at a time

I built most of the design elements including buttons and illustrations in Illustrator and Photoshop and pulled everything into Ceros, an interactive content creation software, to animate and build out the actual report. Consistency is incredibly important to me and I wanted to make sure I was staying consistent with animating elements. I made sure that every header faded in up at a 0.5 second delay, while the body text always followed a second later at a regular fade. The home buttons and exit buttons fade in and out at the same time. All of the circle buttons that "pulse", do so at the same speed.

For me, it's all about the details. I wanted to make sure I was sticking with the overall design and movement on every page of my report and that nothing felt out of place. Each page is different and thus was created differently, but the step by step process below with give you a feel of how I worked with Ceros and also give you a taste of the interface.  

Step 1

On a new, blank page I begin to lay out the sections for the navigation. Using the brand guide I created, I pull out three colors to use for the sections and create three rectangles using the Shape tool. I use the tools in the Align section on the Inspector panel to make sure the rectangles are lined up evenly. 

Step 2.png

Step 2

I then pull in the kid illustrations I drew on my iPad Pro and digitally colored in Photoshop. For these illustrations, I chose an accent color for each child to go with each section (for example, the purple glasses). Using the dimensions in the Inspector panel, I resize the illustrations and then reposition them using the Layers panel. 

Step 3.png

Step 3

Using the Type tool I choose the Fredoka One font from my brand guide and make it white. I type on the background and reformat and reposition the type layers to be at the front. I use the tools in the Align section to make sure the text is evenly spaced with the rectangle shapes and the illustrations. 

Step 4.jpg

Step 4

Using the Shape tool, I make circles to use for the buttons and add a text overlay. With the Eyedropper tool in the Color panel, I match the colors of the circles to the rectangles and then turn down the opacity to make them a shade darker and give the page some dimension. Pro Tip: Rename your layers and put them in folders so you can easily find elements down the line! It also helps you stay organized. 


Step 5

Now it's time to animate! It's a tedious process making sure everything is timed correctly. I use effects like "slide in from right" and "fade in up" and make sure each element's movement is consistent with the others. The video below shows the final result of all of the elements animating in.