Due to the comic tile nature of all the top screens, I had the idea to put them all in one massive frame and have the camera pan across when navigating. I sketched out the idea to help me realise what I needed to do to make this work.
After sketching, I wire framed this out in Figma. To make it quicker, I figured out what areas would never be seen so I didn’t have to develop those areas.
I then began layering up and adding in the screens I had designed.
The finished page actually looked really good and made me more confident in the aesthetic. I still thought the home screen needed more development which I would come to later, the overall aesthetic did work well.
To move between the screens in the panning animation I wanted, I needed to use some smart animation tricks. Basically for ever movement between screens, I needed to add another screen between. The viewport of this screen would be halfway between the two screen and slightly scaled out. Then they’d be linked up with the second link being set to a 1ms delay. This worked really well and gave the effect I wanted.
After figuring this out, I linked up all the screens in this fashion.
I was pleased with this first attempt but did feel it was overall a little flat. I think I may leant too much into the design from the annual which forced me to limit the design. I decided to continue with the main experience design and would revisit the home pages with what I’d developed there.
https://www.figma.com/proto/UNJsX6dKG4CZOVrSpuATWC/Apollo?page-id=115%3A13625&type=design&node-id=121-9629&viewport=652%2C622%2C0.03&t=2GYirSccS8faryoN-1&scaling=min-zoom&starting-point-node-id=121%3A9629&show-proto-sidebar=1&mode=design