Kidio

I guess the biggest problem we had to solve was moving from an individual product company (Pikmykid) to a company that offered a suite of products. So we wanted to get a cool Landing Page out there that gave just enough taste of what we offered to get people interested. This execution did present me with some fairly tricky design hurdles.

The first was getting the very organic hero section to be responsive, on huge screens and on small ones. It also had to be responsive in terms of width and height. The illustration I made was put through the ringer trying to get it to contort to all device sizes.

The second was getting the hero section to actually perform at 60 frames per second. Chrome did not like me stacking animated SVG's that had to scale. At certain resolutions, I was getting terrible performance, so some of the special effects didn't make the cut (There were twinkling stars that looked great too!).

To wrap things up, The technical build was pretty straightforward, It's just WordPress with some fancy javascript on top. The majority of the transitions and animations were made using straight CSS. I used the animejs.com library to add some randomness to the hero section.